Article en plusieurs parties : 1 2 3 4 5 6
Remise à zéro du margin et du padding avec le sélecteur universel *
Cette méthode a le mérite de la concision et de la simplicité :
* {
margin: 0;
padding: 0;
}
Ici, le sélecteur universel met toutes les balises html d’accord sur les marges et les retraits : il n’y en aura pas ! La propriété margin correspond à l’espace laissé ou pas entre deux éléments. La propriété padding concerne l’espace à l’intérieur d’un élément entre la bordure et les éléments qu’il contient. Pour s’éclaircir les idées, je vous propose de jeter un oeil sur la représentation visuelle du modèle de boite (box model).
Et border: 0 ?
Oui, il est possible d’ajouter border: 0 pour s’assurer que les éléments n’auront pas de bordures indésirables. Comme cette dernière déclaration est de plus en plus utilisée, voici la liste des éléments qu’elle concerne afin que vous jugiez de sa pertinence :
- input,
- textarea,
- select
- button
- table,
- fieldset,
- abbr,
- hr,
- img et object (si lien),
- iframe.
Redonner des couleurs à vos balises
Reste à redonner à ces balises un rendu plus agréable en regroupant, par exemple, les éléments qui partagent les mêmes valeurs tout au long du site web :
- différents niveaux de titre h1… h6,
- conteneurs de texte comme p, blockquote, pre, code, address, hr, form,
- listes avec dl, ul, ol,
- éléments en ligne tels que strong, cite, em, var, samp,
- etc.
Selon le document, il pourrait être tout aussi judicieux de regrouper les éléments suivants :
- balises ul et ol dans la sidebar
- mêmes balises dans la zone de contenu principal
- etc.
Une autre méthode inspirée par le billet paru sur pixenjoy est de reprendre la feuille de style proposée par le W3C qui peut avantageusement servir de modèle pour avoir la liste des éléments html concernés par cette remise à zéro des marges et retraits.
Une technique obsolète ?
Malgré son apparente simplicité et efficacité, cette méthode n’est pas la panacée : un navigateur comme Firefox consomme de précieuses ressources à boucler sur toutes les balises. Par ailleurs, un gros travail reste à faire pour restyler les balises (même si ce gros travail n’est pas à refaire complètement à chaque nouveau projet). Quoiqu’il en soit, je vous propose de mettre cette technique de côté pour tester d’autres méthodes.
I -Reset CSS Reloaded d’Eric Meyer »
Article en plusieurs parties : Page précédentePage suivante
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
Hello,
merci pour cette article vraiment très bien, cela fait un petit moment que je fait des reset css, mais sans vraiment le savoir … Mais certainement aps aussi pousser qu’ici.
comme d’habitude excellent article qui permet d’aller plus loin!
Excellente approche des reset css ! Merci beaucoup pour cet article sur lequel je vais me pencher bien sérieusement après cette première lecture ;)
J’aime bien le reset de Meyer mais le line-height:1 global m’a causé quelques soucis..
Merci beaucoup, bon article. Par contre je suis mitigé sur l’utilisation de reset, je me contente du margin et padding sur le sélecteur universel.
#wouaren {
Quel genre de soucis exactement ? Au début, je mettais quelque chose comme 1.5em à la suite du reset et je me retrouvais avec des valeurs calculées bizarrement. Je crois qu’il vaut mieux n’utiliser que des valeurs brutes une fois qu’on a commencé.
}
#Neovov {
la RAZ des padding et margin, c’est le reset de base ! C’est même le plus brutal ;)
}
#Grummfy,
#burningHat {
N’en jetez plus, je ne rentre plus dans mes chaussettes… :)
N’hésitez pas à partager vos méthodes de reset. A l’occasion je proposerai un reset tenant compte des bonnes pratiques en la matière ;)
}
Moi brutal ?
(J’avoue, ce commentaire est uniquement là pour foirer ton sélecteur :P)
Encore un superbe article… Merci !
Voici un article qui fera réfléchir à deux fois quelqu’un voulant ce lancer dans le métier de l’intégration :)
Merci pour ce billet remarquable.
#Bialog,
#Aurélien {
Merci pour votre soutien :)
}
T’es vraiment un bon malade Bruno. :)
#Aymeric {
Faut c’qui faut ! En fait, je crois qu’on a tous un grain :)
}
[...] thème conçu sur la base de SandBox et du Reset CSS d’Éric [...]
C’est avec un peu de retard que je découvre cet article. Merci pour l’info, j’ignorai qu’il existait autant de méthodes différentes. Personnellement, j’ai utilisé le reset conseillé par le W3C.
Bravo :)
Bonjour,
effectivement je faisais, moi aussi, du reset sans le savoir.
Peut être n’est-ce qu’une impression mais il me semble que le css est moins galère avec que sans :)
En tout cas merci d’avoir éclairé ma lanterne sur le sujet et les différences qui existent.
Je crois que ce que j’utilisais se rapproche le plus de la méthode de Eric Meyer et que la méthode yahoo parait plus simple a l’avenir.
Je test ;)
Merci pour cet article, vraiment c’est intéressant
[...] peu de recherche sur google vous conduira vers une tonne de ressource consacrées au reset css dont css4design (le retour de ce cher br1o) qui a décrypté plusieurs façons de faire. N’aimant pas [...]
[...] 2.2 : la sidebar à la loupe, comprendre les widgets et déclarer une "WAR" — Lu 2 081 fois5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs — Lu 2 055 foisFramework JQuery pour écrire du Javascript non-intrusif — Lu 2 030 foisQuelques [...]
[...] html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! / :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } / tables still need ‘cellspacing= »0″‘ in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: « »; } blockquote, q { quotes: « » « »; } La source : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ Pour d’autres exemples de reset CSS je vous conseille cet article : http://www.css4design.com [...]
[...] important : incluez un reset css à votre page [...]
[...] un article sur 5 reset css etudiés. Mots clés : css, [...]
[...] la remise à zéro des style par défaut des balises HTML, je vous invite à lire 5 Resets CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs pour en savoir plus. Aucun tag pour cet [...]
[...] — basé sur le principe d’un rendu homogène entre les navigateurs sans reset CSS. Travail sur la typographie avec des jeux de polices de caractères harmonieux, des possibilités [...]
[...] Il y a en a beaucoup d’autres et je vous conseille la lecture de l’article « 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs» de Bruno Bichet, auteur du blog CSS 4 [...]
[...] 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs [...]