Technique à éviter
Si j’écris ce tutoriel c’est davantage pour ajouter aux arguments d’éviter cette technique essentiellement destinée aux gros « cadriciel HTML » disons industriel! Un « cadriciel » redéfinit la grande majorité des éléments HTML, parfois en plusieurs formats selon le média. Sans parler des solutions échappatoire pour une compatibilité d’exception. C’est-à-dire que le trouble de réinventer la roue après la remise à zéro est carrément le but de l’opération. On pense déjà à tout. Bon, au delà des critiques, l’exorcise est quand même profitable, comme un dissection d’un malade imaginaire ; -)
Déjà 7 ans
Et 2007 depuis le fameux texte d’Eric Meyer « Reset Reasoning », c’est quasiment 10 ans mine de rien. D’autant que le navigateur évolue grandement lui aussi! Ayoye, c’est quoi, 20 versions en deux saisons pour certains (!) Et que dire du CSS3 qui bouscule comme jamais les fondements même du Web. Il pourrait à lui seul remplacer la plupart des balises HTML. Pour l’intégrateur de « cadriciel » c’est un travail de récupération et de mise à jour. Et espérer que Bootstrap ou son « cadriciel » préféré perdure ! Mon expérience personnel a un méchant doute. Une grande part du Web est carrément devenu un cimetière. D’autre part, ce simple tutoriel n’est même plus à jour au moment de l’écrire! La plupart des codes "officiels" suivants, pourtant d’une grande simplicité, contiennent des balises qui ne sont plus valide! (Pour le concepteur, c’est une rengaine, le même refrain peut importe la solution! Mise à jour, déboguage et optimisation avec plaisir ; -) Voilà une énième raison de rester simple et surtout d’éviter de le trouble!
CSS de base
À ne pas confondre avec la remise à zéro. Si la remise à zéro est tout un contrat, la feuille de style de base n’est pas aussi discutable. Elle ne remet pas à zéro, elle précise, elle affine un style. C’est en quelque sorte un cadre de travail ou un « cadriciel responsable » (qui respecte le travail de ses pères ; -). Un style de base en guise de gabarit pour vos prochains design. Essentiellement de grandeurs, des marges et des couleurs, non pas à zéro mais personnalisées. J’imagine que tous les exemples se valent, mais voilà un extrait de la feuille CSS d’Alsacreations.
/* Extrait de la feuille de base d’Alsacreations */ html { font-size: 62.5%; } body { background-color: #fff; color: #000; font-family: "Century Gothic", helvetica, arial, sans-serif; font-size: 1.4em; /* equiv 14px */ line-height: 1.5; /* adapt to your design */ } [...]
Mise à zéro des CSS prédéfinies
Une remise à zéro, même basique, remet carrément la majorité des marges et bordures prédéfinie à zéro. Ex: border: 0 none;
.
a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var{ background: transparent; font-size: 100%; border: 0 none; margin: 0; padding: 0; vertical-align: baseline; }
C’est quoi le problème?
Pour le commun des mortels, la remise à zéro des classes prédéfinies CSS tente de régler un problème qui en n’est pas un! Parce qu’Internet Explorer interprètent différemment l’héritage, le HTML, les marge, en-tête, et tout particulièrement les éléments d’un formulaire. Ce qui rendrait la tâche de l’intégrateur Web ardu! Comme expliqué par Eric Meyer. S’il est vrai que la perfection n’est pas de ce monde, ce n’est certes pas les navigateurs la cause de tout ce débat. Ils ont déjà tous les mots du monde à supporter ;p les éléments HTML on aussi des classes dites prédéfinie pour de bonnes raisons. Ne serait-ce que pour distinguer un comportement « in-line » versus « bloc ».
Alors bien sûr ce n’est pas toujours "facile" d’aligner le tout avec des marges extérieures, des marge intérieure, des bordures et des détails sémantique, etc. Mais cette technique demande à mon avis autant sinon plus de trouble à implanter ...et à maintenir! D’ailleurs mettre l’ensemble des marges à zéro à l’aide du sélecteur universel * prend une seule ligne de code alors que rétablir les bordures des éléments HTML dont les formulaires demandent un temps fou!
* { margin: 0; padding: 0; }
À la poubelle
Et si ce n’était que ça! Détruire systématiquement des conventions peut importe l’exceptions me semble aussi excessif. Pourquoi ne pas demander au navigateur de ne plus jouer avec les classes tout simplement? Et pourquoi tant de trouble à créer des balises. Pourquoi des balises spécialisés comme les paragraphes alors qu’une seule, la « bloc à zéro » suffirait? Pourquoi pas la « div au neutre » ! Réglé, les problème de compatibilité seront! Ben voyons, j’ironise (précision pour les traducteurs automatiques). Voir le texte « La technique du Reset CSS » par Corinne S. qui développe le cas de figure.
Surconsommation
Mais la principale critique de la remise à zéro vient du processeur (même si vous utilisez un « cadriciel »), c’est la surconsommation du processus. Imaginez qu’un processus génère, disons une table de références des classes prédéfinie en mémoire. On demande au processeur de refaire le tout mais cette fois en assignation des valeurs nulle. Ensuite, une autre requête massive pour donner nos nouvelles valeurs par défaut. Et enfin, une feuille de style pour donner cette fois les valeurs particulières du site Web. C’est d’ailleurs carrément dans la référence de Fundation 5 :
Pour mettre à jour votre fichier CSS Fondation après une nouvelle version, nous recommandons de conserver la version originale du fichier foundation.css sans aucune altération. Toutes les modifications ou vos propres styles doivent être copiés dans le fichier app.css où vous pouvez effectuer et conserver vos modifications.
Tout ça dans la couche d’en-tête de la réponse HTTP, sans avoir lu une seule ligne du BODY! Dans les entrailles de votre navigateur et la mémoire de votre ordinateur. C’est-à-dire avant que l’internaute ne puisse voir autre chose qu’une page blanche! Et après, lorsque enfin le navigateur pond enfin l’affichage, vous aurez sans doute quelques ajustements à droite et à gauche! Des styles « in-line » qui requiert encore et toujours une allocation pour les mêmes classes. C’est tout un ministère ça! Pour quelle raison encore?
Ce n’est pas la faute au CSS
En fait c’est un constat d’échec, mais contrairement au apparence, ce n’est pas celui du CSS, mais bien du HTML. Et je m’explique : J’attribue la cause de l’usage rependu de cette technique en raison de l’énorme popularité des « cadriciels »! Et pourquoi les « cadriciels » sont à ce point populaire? Je vais vous surprendre, à cause du HTML! C’est à mon avis l’échec du HTML ou son intérêt tardif à créer un véritable système de grille (GRID) qui a popularisé les « cadriciel » comme Bootstrap ou Fundation. Rien à voir avec la compatibilité. D’ailleurs ce problème persistera toujours même avec un « cadriciel »! Le « CSS Reset » a simplement été propager comme un microbe par les « cadriciel » ; -) C’est d’ailleurs la seule raison valable d’utiliser la remise à zéro malgré son caractère énergivore, quand on a l’ambition de reprogrammer l’ensemble des classes à des fins d’automatisation. Rien d’anodin non plus, si l’usage des « cadriciel » semble ralentir sa croissance c’est au profit de petit « cadriciel » perso! J’y travaille persoooonnellement.
La technique peut s’avérer fort utile pour un développement, déjà pour comprendre, décortiquer le CSS. Ou même pour vous créer votre propre cadre de travail. Il existe plusieurs modèles plus ou moins sophistiqués. Plusieurs n’offre plus de support. Voir le générateur { CSS:resetr }
La méthode Eric Meyer’s “Reset CSS” 2.0
La méthode historiquement la plus répandue et la plus acceptée.
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ’’; content: none; } table { border-collapse: collapse; border-spacing: 0; }
Yahoo! YUI 3 CSS Reset
Cette librairie ne semble plus supportée...
La méthode Richard Clark
Mise à niveau HTML 5 de la version d’Eric Meyer’s.
/* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:’’; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; }
Normalize par Nicolas Gallagher et Jonathan Neal
Très exhaustif, ce « CSS reset » utilisé tant par Fundation 5 que Bootstrap 3 est prêt HTML5 (première mouture).
/*! normalize.css v1.0.0 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /* * Corrects ’block’ display not defined in IE 6/7/8/9 and Firefox 3. */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* * Corrects ’inline-block’ display not defined in IE 6/7/8/9 and Firefox 3. */ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /* * Prevents modern browsers from displaying ’audio’ without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /* * Addresses styling for ’hidden’ attribute not present in IE 7/8/9, Firefox 3, * and Safari 4. * Known issue: no IE 6 support. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /* * 1. Corrects text resizing oddly in IE 6/7 when body ’font-size’ is set using * ’em’ units. * 2. Prevents iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-size: 100%; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /* * Addresses ’font-family’ inconsistency between ’textarea’ and other form * elements. */ html, button, input, select, textarea { font-family: sans-serif; } /* * Addresses margins handled incorrectly in IE 6/7. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /* * Addresses ’outline’ inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /* * Improves readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /* * Addresses font sizes and margins set differently in IE 6/7. * Addresses font sizes within ’section’ and ’article’ in Firefox 4+, Safari 5, * and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.75em; margin: 2.33em 0; } /* * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /* * Addresses style set to ’bolder’ in Firefox 3+, Safari 4/5, and Chrome. */ b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } /* * Addresses styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /* * Addresses styling not present in IE 6/7/8/9. */ mark { background: #ff0; color: #000; } /* * Addresses margins set differently in IE 6/7. */ p, pre { margin: 1em 0; } /* * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; _font-family: ’courier new’, monospace; font-size: 1em; } /* * Improves readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /* * Addresses CSS quotes not supported in IE 6/7. */ q { quotes: none; } /* * Addresses ’quotes’ property not supported in Safari 4. */ q:before, q:after { content: ’’; content: none; } small { font-size: 75%; } /* * Prevents ’sub’ and ’sup’ affecting ’line-height’ in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Lists ========================================================================== */ /* * Addresses margins set differently in IE 6/7. */ dl, menu, ol, ul { margin: 1em 0; } dd { margin: 0 0 0 40px; } /* * Addresses paddings set differently in IE 6/7. */ menu, ol, ul { padding: 0 0 0 40px; } /* * Corrects list images handled incorrectly in IE 7. */ nav ul, nav ol { list-style: none; list-style-image: none; } /* ========================================================================== Embedded content ========================================================================== */ /* * 1. Removes border when inside ’a’ element in IE 6/7/8/9 and Firefox 3. * 2. Improves image quality when scaled in IE 7. */ img { border: 0; /* 1 */ -ms-interpolation-mode: bicubic; /* 2 */ } /* * Corrects overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /* * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /* * Corrects margin displayed oddly in IE 6/7. */ form { margin: 0; } /* * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /* * 1. Corrects color not being inherited in IE 6/7/8/9. * 2. Corrects text not wrapping in Firefox 3. * 3. Corrects alignment displayed oddly in IE 6/7. */ legend { border: 0; /* 1 */ padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */ } /* * 1. Corrects font size not being inherited in all browsers. * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, * and Chrome. * 3. Improves appearance and consistency in all browsers. */ button, input, select, textarea { font-size: 100%; /* 1 */ margin: 0; /* 2 */ vertical-align: baseline; /* 3 */ *vertical-align: middle; /* 3 */ } /* * Addresses Firefox 3+ setting ’line-height’ on ’input’ using ’!important’ in * the UA stylesheet. */ button, input { line-height: normal; } /* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native ’audio’ * and ’video’ controls. * 2. Corrects inability to style clickable ’input’ types in iOS. * 3. Improves usability and consistency of cursor style between image-type * ’input’ and others. * 4. Removes inner spacing in IE 7 without affecting normal text inputs. * Known issue: inner spacing remains in IE 6. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ *overflow: visible; /* 4 */ } /* * Re-set default cursor for disabled elements. */ button[disabled], input[disabled] { cursor: default; } /* * 1. Addresses box sizing set to content-box in IE 8/9. * 2. Removes excess padding in IE 8/9. * 3. Removes excess padding in IE 7. * Known issue: excess padding remains in IE 6. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ *height: 13px; /* 3 */ *width: 13px; /* 3 */ } /* * 1. Addresses ’appearance’ set to ’searchfield’ in Safari 5 and Chrome. * 2. Addresses ’box-sizing’ set to ’border-box’ in Safari 5 and Chrome * (include ’-moz’ to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /* * Removes inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * Removes inner padding and border in Firefox 3+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Removes default vertical scrollbar in IE 6/7/8/9. * 2. Improves readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /* * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; }
HTML5
Il est question ici d’un véritable cas d’incompatibilité ajusté par la mise à zéro. C’est-à-dire augmenter la compatibilité en créant les éléments HTML manquant. On peut d’ailleurs créer nos propres éléments de cette manière. En ajoutant d’abord les classes suivantes :
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, main, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }
Pour au moins sauver les meubles. Mais pour fonctionner, il faut créer au préalable les éléments dans le DOM avec ce Javascript qui doit être exécuté en tout premier :
<script>
document.createElement("article");
document.createElement("aside");
document.createElement("audio");
document.createElement("canvas");
document.createElement("command");
document.createElement("datalist");
document.createElement("details");
document.createElement("embed");
document.createElement("figcaption");
document.createElement("figure");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("keygen");
document.createElement("main");
document.createElement("mark");
document.createElement("meter");
document.createElement("nav");
document.createElement("output");
document.createElement("progress");
document.createElement("rp");
document.createElement("rt");
document.createElement("ruby");
document.createElement("section");
document.createElement("source");
document.createElement("summary");
document.createElement("time");
document.createElement("video");
</script>
* Même si la plupart des exemples de cette page considèrent toujours hgroup
comme un élément HTML5, ce n’est plus le cas! Au profit de main
.
html5shiv.js
Pour les versions antérieures à Internet Explorer 9, la librairie html5shiv.js fait déjà le travail!
<!--[if lt IE 9]> <script src="bower_components/html5shiv/dist/html5shiv.js"></script> <![endif]-->
Références
- Alsacréations - La technique du Reset CSS par Corinne S.
- La méthode Eric Meyer’s “Reset CSS” 2.0
- The Pros And Cons Of CSS Resets par Vanseo Design
- Doctor HTML5 Reset Stylesheet
- Normalize.css par Nicolas Gallagher et Jonathan Neal.
- Découverte du framework CSS KNACSS
- KNACSS commented CSS code
- Bootstrap - The most popular HTML, CSS, and JS framework
- Foundation - The most advanced responsive front-end framework in the world
- The Story of the HTML5 Shiv par Paul Irish