Le blog de l'intégrateur web

5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs

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 »

Articles sur le même sujet

Article en plusieurs parties : Page précédente Page 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.

Afin de satisfaire le plus grand nombre, j'ai ajouté
un bouton Flattr parce que vous le valez bien ;)

Vous n'utilisez pas de styles CSS pour votre page web ? Ce n'est pas grave : les navigateurs le font pour vous. Ils utilisent chacun leur feuille de style par défaut pour obtenir un rendu visuel minimal. C'est pourquoi les tableaux possèdent des bordures, et les paragraphes des espaces avant et après. Le problème ? Si des balises comme strong ou em sont traitées de la même manière par les agents utilisateurs, l'immense majorité présente des différences plus ou moins importantes. Ce fameux manque de "consistance" décrié par les webdesigners anglo-saxons concerne principalement les propriétés margin et padding. Avec une pensée particulière pour le retrait des listes ol et ul : si IE applique bien le margin-left: 40px préconisé, Firefox utilise quant à lui un équivalent du padding-left: 40px pour le même rendu. Dans ces conditions, il est tentant de vouloir mettre tous ces agents utilisateurs au garde-à-vous... Dans leur grande sagesse les concepteurs du HTML ont fourni un exemple de feuille de style pour uniformiser le rendu visuel des pages web ; dans leur précipitation à sortir leur produit avant la concurrence, les concepteurs des navigateurs ont fait ce qu'ils ont voulu. Enfin, il est aussi possible que les spécifications - parfois sybillines - du monde joyeux des recommandations puissent être interprétées de diverses manières... Prudence est mère de sûreté... Il ne faut pas confondre ces différences de rendu entre les navigateurs avec les nombreux bugs qui affectent particulièrement IE comme le calcul de la largeur d'une boite. Gardez également à l'esprit que l'on peut très bien travailler avec ces valeurs par défaut au lieu de les éliminer, et que faire reset, ce n'est pas toujours rigolo : il s'agit d'une technique à manier avec précaution. D'autant plus que la majorité des problèmes rencontrés est souvent liée à la transmission de l'héritage entre parents et enfants. Faire table rase, d'accord, encore faut-il savoir de quoi ^_^ Une autre notion indispensable est d'avoir une idée des possibilités d'imbrication des balises. Voici un récapitulatif de qui contient quoi, ainsi qu'une référence complète sur les attributs et relations de parenté des éléments XHTML 1.1. La Cascade (le C de CSS) est une autre source de confusion. Openweb a consacré un article intéressant qui explique comment sont "priorisés" les différents styles qui peuvent s'appliquer à un élément. Pour faire simple : si vous débutez l'apprentissage des CSS, je vous déconseille fortement de mettre un reset dans votre moteur, même s'il semble ronronner affectueusement au début. Nul doute que dès que vous aurez le dos tourné... Enfin maintenant si vous insistez, je vous ai préparé un mini dossier sur le sujet : margin et padding à zéro avec le sélecteur universel Reset CSS Reloaded, Eric Meyer INITIAL, Christian Montoya YUI Reset CSS, Yahoo! UI Library undohtml.css, Tantek Celik *Remise à zéro du margin et du padding avec le sélecteur universel \* »* 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 »* Reset CSS Reloaded d'Eric Meyer Vous aurez peut-être remarqué que si l'ajout de border: 0 peut apporter un plus dans la remise à zéro des éléments, d'autres propriétés pourraient elles aussi gagner à être réinitialisées. C'est sûrement ce que c'est dit Eric Meyer lorsqu'il s'est penché sur son Reset CSS. (L'exemple donné ci-dessous est la mise à jour en date du 15/01/2008, cf. Resetting Again) : 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, b, u, i, center, 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-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } // remember to define focus styles! :focus { outline: 0; } // remember to highlight inserts somehow! ins { text-decoration: none; } del { text-decoration: line-through; } // tables still need 'cellspacing="0"' in the markup table { border-collapse: collapse; border-spacing: 0; } L'idée est à la fois d'aller plus loin dans les propriétés à inclure tout en étant plus sélectif en tenant compte de certaines spécificités. Reset again Dans un premier temps, pas de surprise, nous retrouvons la remise des margin, padding et border à zéro, suivie de près par un outline: 0 qui sert généralemement à afficher un cadre pointillé lorsqu'on maintient le bouton de la souris appuyé sur un lien (:active, quoi ;) ). Ne pas confondre avec le même cadre qui apparait quand le lien a le focus, via la touche TAB, même s'il s'agit de la même déclaration outline: 1px dotted invert. La pseudo-classe :focus est également remise à zéro pour l'ensemble des éléments via :focus { outline: 0 }. Héritez, qu'y disait... Viennent ensuite les propriétés relatives à font : on s'assure qu'elles seront bien héritées par les éléments parfois récalcitrants (certains éléments de formulaire). La taille 100% sert à la fois à obtenir une valeur "héritable" par les balises filles et avoir une taille par défaut pour l'ensemble de la page web. Si vous préférez partir avec un corps inférieur, rien ne vous empêche de spécifier 62.5% pour avoir une taille par défaut de 10px env. ou 75% pour obtenir 12px. Sachant que si vous pouvez vous débrouiller pour fournir une taille de texte généreuse à vos lecteurs, ils vous le rendront bien. Je ne veux voir qu'une tête ! Nous terminons cette première partie avec vertical-align: baseline qui permet d'harmoniser l'alignement des éléments en ligne au sein d'une boite. Il s'agit de la valeur par défaut pour aligner la ligne de base du texte avec le bas d'une image placée à côté. Avez-vous la quote ? Les dernières règles s'appliquent aux éléments blockquote et q dont on supprime préventivement le contenu "éventuellement" généré avant ou après, puis dans un second temps, on supprime les guillemets ouvrants et fermants. Tout ce que vous avez toujours voulu savoir sur ces éléments se trouve sur la page web de yoyodesign consacrée au contenu généré, au numérotage automatique et aux listes. Y a pas un problème avec la valeur de line-height ? La curiosité de cette feuille de style, est la présence d'une valeur sans unité de mesure (line-height: 1) qui mérite quelques explications. Pour ceux qui ne sont pas à l'aise avec l'anglais, j'ai repris les exemples donnés sur la page citée précédemment qui parlent d'eux-mêmes : En utilisant line-height: 1em La règle CSS suivante... ul { font-size: 15px; line-height: 1em; } li { font-size: 10px; } small { font-size: 80%; } ... est équivalente à... ul { font-size: 15px; line-height: 1em; } li { font-size: 10px; line-height: 15px; } small { font-size: 80%; line-height: 15px; } ... appliquée sur l'exemple html suivant : <ul> <li>I'm a list item with small text.</li> </ul> En utilisant line-height: 1 Appliquée sur l'exemple html précédent, la règle CSS suivante... ul { font-size: 15px; line-height: 1; } li { font-size: 10px; } small { font-size: 80%; } ... est équivalente à : ul { font-size: 15px; line-height: 1; } li { font-size: 10px; line-height: 10px; } small { font-size: 80%; line-height: 8px; } Grosso modo : lorsque l'on ne précise pas l'unité de mesure après line-height (ce qui est parfaitement conforme aux spécifications, même si les validateurs ne le savent pas toujours) la valeur fonctionne comme un facteur multiplicateur, contrairement à l'unité em qui produit une valeur calculée qui se répercute ensuite sur les balises enfants par le jeu de la cascade. C'est une spécificité de la propriété line-height qui est la seule à accepter une valeur brute. Car, vous l'avez sans doute remarqué, mais spécifier 2em sur une taille de police a bien un effet multiplicateur par rapport à la valeur dont elle hérite au départ : body { font-size: 12px; } h1 { font-size: 2em; } Dans cette exemple, l'élément h1 a bien une taille de 24px. En finir avec le reset-reloaded ? Le défaut essentiel de ce reset est aussi sa principale qualité : il déshabille carrément les balises de leurs attributs les plus usuels, jusqu'à ceux dont on n'avait pas vraiment conscience (:focus, :before, :after, quotes, etc.). Ceci permet de prendre conscience que le fonctionnement "naturel" de nos chères balises html ne l'est pas tant que ça... Par ailleurs, à force de lire un peu partout qu'il ne faut pas mélanger la sémantique des balises html avec leur rendu visuel, je me dis que le full monty proposé par Eric Meyer va dans le bon sens en nous obligeant à en apprendre un peu plus sur le HTML et les CSS (trollinou inside) ^_^v. Eric Meyer considère toute utilisation des styles par défaut comme une béquille qui nous rend dépendant du bon vouloir des navigateurs (ce qui n'est pas totalement faux). Toutefois, comme le précise, Laurent Denis, a-t'on vraiment besoin de vouloir garder la maitrise des éléments à ce point-là ou lieu de lâcher prise ? Pour finir de vous détendre, méditez cette phrase extraite de l'excellent article le tao du design web : accepte le flot et le cours des choses, les entoure, mais ne les possède pas, En attendant d'arriver à ce degré de sagesse dont il faudrait que nos bien-aimés clients et patrons soient aussi imprégnés, revenons vers le côté obscur de la force avec un autre reset à nous mettre sous le clavier ;) *INITIAL de Christian Montoya »* INITIAL de Christian Montoya Cette remise à zéro est proposée par Faruk Ates, amendée par Robert Nyman et Christian Montoya. Plus qu'un reset radical, il s'agit plutôt d'un feuille de style minimale située entre la remise des marges à zéro et le reset-reloaded. Mais jugez plutôt : // =INITIAL v2.1, // by Faruk Ates - www.kurafire.net // Addendum by Robert Nyman - www.robertnyman.com // Addition by Christian Montoya - www.christianmontoya.net // Neutralize styling: Elements we want to clean out entirely: html, body, form, fieldset { margin: 0; padding: 0; font: 100%/120% Verdana, Arial, Helvetica, sans-serif; } // Neutralize styling: Elements with a vertical margin: h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { margin: 1em 0; padding: 0; } // Apply left margin: Only to the few elements that need it: li, dd, blockquote { margin-left: 1em; } // Miscellaneous conveniences: form label { cursor: pointer; } fieldset { border: none; } input, select, textarea { font-size: 100%; font-family: inherit; } Ici, le reset est plus sélectif : dans un premier temps, seuls certains éléments de type blocs sont touchés par la remise à zéro des marges et retraits. Ensuite, les éléments sont regroupés en fonction des marges qu'ils ont en commun : d'une part, ceux qui partagent les mêmes espaces avant et après, et d'autre part, ceux qui sont généralement représentés avec un retrait à gauche. Ces derniers héritent des valeurs margin: 1em 0 et padding: 0 spécifiées juste avant. Un autre avantage d'INITIAL sur le Reset-Reloaded, est que les éléments en ligne ne sont pas affectés, ce qui est une bonne chose, vu le peu de différences de rendu qu'ils présentent d'un navigateur à l'autre. Personnellement, je trouve cette approche plus élégante que le reset reloaded : plus "lisible" donc plus maniable, notamment en ce qui concerne son "extensibilité" car on peut même lui ajouter certaines trouvailles d'Eric Meyer comme : spécifier une valeur brute pour line-height : 1.4 à la place de la valeur "INITIAL" de 120%, prendre en compte les éléments table, tr ,td ou caption, enlever les puces des listes, etc... ... afin de construire une feuille de style de base reprenant par exemple le reset de Faruk, puis en ajoutant certains éléments prélevés dans le Reset-Reloaded (Ex. 1) ou encore d'autres règles CSS récurrentes (Ex. 2). L'idée est d'obtenir une sorte de tableau de bord CSS où la modification de certaines valeurs-clés permet de gérer des maquettes différentes. Je précise qu'il s'agit juste d'un exemple pour insister sur le fait que c'est au reset de s'adapter à vos besoins, et non le contraire ;) Ex. 1 ol, ul { list-style: none; } // tables still need 'cellspacing="0"' in the markup // j'ai modifié les valeurs, car il est bon que les tableaux soient visibles ! table { border-collapse: collapse; border-spacing: 1px; } caption, th, td { text-align: left; font-weight: normal; } Ex. 2 // Couleurs à adapter selon votre charte a {text-decoration: none;} a:link {color: #000;} a:visited {color: #000;} a:hover {color: #000;} a:active {color: #000;} img, iframe, object {border: 0 none;} input, textarea, select, button, {border: 1px solid #000; } Dans les styles de cet Ex. 2, j'ai spécifié des valeurs pour les différents états des liens conformément à l'ordre LoVe(F)HAte, et redéfini en deux fois les bordures pour les éléments qui en possèdent par défaut. Par ailleurs, je rajouterais bien la balise div à la suite de l'élément body car - même si cet élément n'est pas censé avoir de marge -, force est de constater que lorsque deux images doivent se raccorder, il reste souvent un décalage d'un pixel qui disparait comme par magie avec margin: 0. *YUI Reset CSS de Yahoo! UI Library »* YUI Reset CSS de Yahoo! UI Library Parmi les Reset CSS existants, on trouve la contribution de Yahoo! qui propose dans son pack Yahoo! UI Library une technique pour réinitialiser les éléments html qui manquent de "consistance" d'un navigateur à l'autre. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } ol, ul { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr, acronym { border: 0; } Les choix en matière de remise à zéro sont discutables (il faut redéfinir jusqu'à la mise en gras pour strong et définir les tailles des polices pour les éléments hn), mais ce reset est accompagné d'une proposition de mise en forme pour les autres éléments html dont on peut s'inspirer en fonction du reset choisi (pour des raisons de lisibilité j'ai revu la mise en forme de départ et supprimé la plupart des commentaires) : base.css // base.css, part of YUI's CSS Foundation h1 {font-size: 138.5%; /* 18px via YUI Fonts CSS foundation */} h2 {font-size: 123.1%; /* 16px via YUI Fonts CSS foundation */} h3 {font-size: 108%; /* 14px via YUI Fonts CSS foundation */} h1, h2, h3 {margin: 1em 0;} h1, h2, h3, h4, h5, h6, strong {font-weight: bold;} abbr, acronym { border-bottom: 1px dotted #000; cursor: help; } em {font-style: italic;} blockquote, ul, ol, dl {margin: 1em;} ol, ul, dl {margin-left: 2em;} ol li {list-style: decimal outside;} ul li {list-style: disc outside;} dl dd {margin-left: 1em;} th, td { border: 1px solid #000; padding: 0.5em; } th { font-weight: bold; text-align: center; } caption { margin-bottom: 0.5em; text-align: center; } p, fieldset, table {margin-bottom: 1em; } Le site de Yahoo! pour les développeurs web propose des informations complémentaires sur la gestion d'une grille de mise en page et des polices de caractère. *undohtml.css de Tantek Celik »* undohtml.css de Tantek Celik Peut-être le plus ancien Reset CSS. Pour des raisons de lisibilité, j'ai revu l'organisation visuelle des commentaires. // undohtml.css (CC) 2004 Tantek Celik. // Some Rights Reserved. http://creativecommons.org/licenses/by/2.0 // This style sheet is licensed under a Creative Commons License. // Purpose: undo some of the default styling of common (X)HTML browsers *// // link underlines tend to make hypertext less readable, // because underlines obscure the shapes of the lower halves of words :link, :visited {text-decoration: none;} // no list-markers by default, since lists are used more often for semantics ul, ol {list-style: none;} // avoid browser default inconsistent heading font-sizes and pre/code too h1, h2, h3, h4, h5, h6, pre, code {font-size: 1em;} // remove the inconsistent (among browsers) // default ul,ol padding or margin the default spacing on headings // does not match nor align with normal interline spacing at all, // so let's get rid of it. zero out the spacing around pre, form, body, html, p, blockquote // as well form elements are oddly inconsistent, and not quite CSS emulatable. nonetheless // strip their margin and padding as well ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { margin: 0; padding: 0; } // whoever thought blue linked image borders were a good idea? a img, :link img, :visited img {border: none } // de-italicize address address {font-style: normal;} // more varnish stripping as necessary... C'est reparti pour un tour ? margin et padding à zéro avec le sélecteur universel Reset CSS Reloaded, Eric Meyer INITIAL, Christian Montoya YUI Reset CSS, Yahoo! UI Library undohtml.css, Tantek Celik Pour conclure Ni liste exhaustive ni comparatif point par point, j'ai essayé de faire le tour des Reset CSS les plus utilisés en espérant avoir fourni quelques informations utiles sur les techniques existantes et leur fonctionnement. J'espère surtout que ce billet vous aura donné des éléments de réflexion pour vous en passer lorsque ce n'est pas nécessaire ;) Ce billet pose certainement plus de questions qu'il n'apporte de réponses car un Reset ne dispense pas de réfléchir à l'organisation de ses CSS, bien au contraire ! Stay tuned and mind the gap!

33 commentaires pour “5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs”

universityupdate.com dit :

14/08/2007 à 04:02

5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs

Répondre
Grummfy dit :

14/08/2007 à 04:37

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!

Répondre
burningHat dit :

14/08/2007 à 08:48

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 ;)

Répondre
wouaren dit :

14/08/2007 à 09:56

J’aime bien le reset de Meyer mais le line-height:1 global m’a causé quelques soucis..

Répondre
Neovov dit :

14/08/2007 à 17:21

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.

Répondre
Bruno Bichet dit :

14/08/2007 à 17:56

#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 ;)
}

Répondre
Neovov dit :

14/08/2007 à 18:55

Moi brutal ?
(J’avoue, ce commentaire est uniquement là pour foirer ton sélecteur :P)

Répondre
Bialog dit :

17/08/2007 à 23:22

Encore un superbe article… Merci !

Répondre
Aurélien dit :

28/08/2007 à 01:13

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.

Répondre
bruno bichet (aka br1o) dit :

28/08/2007 à 09:26

#Bialog,
#Aurélien {
Merci pour votre soutien :)
}

Répondre
Aymeric Jacquet dit :

28/08/2007 à 18:50

T’es vraiment un bon malade Bruno. :)

Répondre
bruno bichet (aka br1o) dit :

29/08/2007 à 00:25

#Aymeric {
Faut c’qui faut ! En fait, je crois qu’on a tous un grain :)
}

Répondre
(re)fresh | burningHat dit :

03/12/2007 à 22:48

[...] thème conçu sur la base de SandBox et du Reset CSS d’Éric [...]

Répondre
seebz dit :

01/02/2008 à 21:47

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.

Répondre
tox dit :

15/05/2008 à 00:51

Bravo :)

Répondre
infirmier dit :

21/06/2008 à 15:46

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 ;)

Répondre
Reda Makhchan dit :

03/07/2008 à 16:39

Merci pour cet article, vraiment c’est intéressant

Répondre
pockyworld » La création d’un site Internet de A à Z - Etape #4.2 : XHTML et CSS, bonnes pratiques dit :

10/10/2008 à 12:57

[...] 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 [...]

Répondre
CSS : Line-height: 1.5em minimum pour l'interlignage de vos textes sur le web dit :

10/10/2008 à 12:58

[...] 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 [...]

Répondre
Reset CSS Eric Meyer | WebCssDesign dit :

21/04/2009 à 17:11

[...] 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 [...]

Répondre
10 étapes pour réussir le découpage d’un design web | Le Blog de LunaWeb dit :

05/05/2009 à 11:44

[...] important : incluez un reset css à votre page [...]

Répondre
Reset CSS Eric Meyer | Flyoverweb dit :

06/05/2009 à 18:12

[...] un article sur 5 reset css etudiés. Mots clés : css, [...]

Répondre
Nethik » Article test : Quelques notes sur XHTML et CSS, au fil de l’eau…(titre h2) dit :

05/06/2009 à 16:44

[...] 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 [...]

Répondre
Framework CSS — mettez vos grilles au pas ! dit :

18/06/2009 à 20:15

[...] — 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 [...]

Répondre
Effeilo » Dossier améliorer ses fichiers CSS – 2 – Réinitialiser sa feuille de styles dit :

07/07/2009 à 09:55

[...] 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 [...]

Répondre
Framework CSS — Sémantique, maquette dynamique et autres notes dit :

08/03/2010 à 10:43

[...] 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs [...]

Répondre
Manifeste pour un interlignage minimum syndical pour les blogs ! dit :

14/10/2010 à 13:53

[...] { line-height: 1.5; } (Plus d’information sur l’absence d’unité dans cette partie de l’article 5 Reset CSS à la [...]

Répondre
Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web) dit :

28/01/2011 à 15:03

[...] Meyer, mais vous pouvez toujours lire Eric Meyer fait encore risette avec Resetting Again et 5 Reset CSS à la loupe pour vous rafraichir la mémoire ! Au menu de cette V2.0 : suppression de la suppression de [...]

Répondre
Une mise en page typographique avec CSS3 et Lettering.js dit :

17/03/2011 à 08:02

[...] de CSS3 et de Lettering.js. L’auteur nous prend par la main et détaille chaque étape : reset.css, styles de base, typographie avec Font-face, mise en forme des paragraphes. Le tout saupoudré [...]

Répondre
Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2 dit :

02/09/2011 à 19:41

[...] apporte de nombreux changements, dont le plus important est peut-être le remplacement du reset CSS par une « simple » redéfinition des balises HTML grâce à normalize.css mis [...]

Répondre
reset by agathe_sevegrand - Pearltrees dit :

11/01/2012 à 06:04

[...] Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs [...]

Répondre
Nova 2000 dit :

18/01/2012 à 20:00

Bonsoir, Merci pour l’article qui complète mes connaissances en CSS.

Répondre
La Boite Digitale dit :

29/01/2012 à 15:26

Intéressant cet article mon cher Watson …! merci

Répondre

Laissez un commentaire

Votre nom (*)

Votre email (*)

Présence en ligne

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <cite> <code> <del datetime=""> <q cite=""> <strike> 

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »

Rigueur. Et passion !

Le blog de l'intégrateur web

5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs

Remise à zéro du margin et du padding avec le sélecteur universel *

Et border: 0 ?

Redonner des couleurs à vos balises

Une technique obsolète ?

Articles sur le même sujet

33 commentaires pour “5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs”

Laissez un commentaire

Articles récents

Miscellanées

Avec brio !

Dotpress

jQuery & Webdesign

Ailleurs sur le web

Colophon