Bootstrap utilise normalize.css pour rendre l’affichage homogène pour tous les navigateurs. La version 3 se limitait à ces règles. La version 4 va plus loin en ajoutant un certain nombre d’autres règles sous le terme Reboot. Petite visite guidée dans ce chapitre qui est juste là pour information parce que vous pouvez très bien utiliser Bootstrap sans connaître tout ça mais ça peut devenir intéressant quand on veut modifier Bootstrap.

Les reset css

Les problèmes de manque d’homogénéité d’affichage selon les navigateurs sont connus depuis longtemps et ont suscité des réponses de plus en plus élaborées. On pourrait dire dans une métaphore biblique « au commencement étaient les reset css ».

Les navigateurs ont des valeurs par défaut différentes. Par exemple les titres n’ont pas toujours les mêmes marges hautes et basses, la hauteur des lignes est différente… Pour éviter de faire de multiples tests il est apparu nécessaire de corriger ces différences, c’est l’objet des reset css.

Pourquoi les navigateurs ont-ils des valeurs par défaut ?

C’est indispensable pour obtenir des pages lisibles en l’absence de règles css.

Le plus célèbre reset css est certainement celui d’Eric Meyer, le grand gourou des css. Le voici :

/* 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;
}

On remarque que c’est assez radical avec une mise à 0 des marges, paddings, bordures… Cela implique ensuite de définir des règles pour tous les éléments.

Normalize.css

Normalize.css est plus sophistiqué dans son approche, il est issu d’une longue recherche agrémentée de nombreux tests. Il évite de tout mettre à zéro en conservant les valeurs par défaut utiles. D’autres part il corrige les bugs connus de certains navigateurs.

• Il a une approche modulaire, autrement dit on peut facilement faire ses courses et garder ce qui nous intéresse tout en délaissant les règles qui ne nous sont pas utiles.

Par exemple il y a une section pour les abréviations :

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

Si vous n’utilisez pas d’abréviations dans vos pages vous pouvez facilement exclure ces règles. Également si elles ne correspondent pas à ce que vous désirez obtenir, tant qu’à les surcharger autant les supprimer.

• Il est très bien documenté

Par exemple si on consulte cette partie du code :

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

On comprend immédiatement la justification de ces règles.

Reboot

Le reboot de Bootstrap s’appuie sur normalize.css en ajoutant ses propres règles. dans la distribution vous trouvez un fichier bootstrap-reboot.css avec toutes ces règles. Ce fichier ne vous sera pas utile à part pour savoir exactement ce que fait le reboot.

Considérez ce code :

<h1>Titre H1</h1>
<h2>Titre H2</h2>
<h3>Titre H3</h3>
<h4>Titre H4</h4>
<h5>Titre H5</h5>
<h6>Titre H6</h6>

Le reboot introduit ces règles :

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem; 
}

Voici les titres sans ces règles :

Et les voici avec ces règles :

De la même manière d’autres éléments voient leurs marges diminuées comme les listes et les adresses.

Reboot effectue aussi quelques corrections aux listes, formulaires et tableaux, vous en trouverez le détail dans la documentation.

En gros les marges supérieures sont mises à 0 et les valeurs par défaut sont exprimées en rem. Il serait laborieux et pas vraiment utile de tout détailler puisque ces réglages sont transparents lorsqu’on utilise Bootstrap. Mais ça peut devenir intéressant d’y jeter un coup d’œil lorsqu’on veut modifier Bootstrap, ce que nous verrons dans la dernière partie de ce cours.

C’est quoi les rem ?

Il existe plusieurs façons de préciser des dimensions avec le CSS. La plus connue est le pixel qui est une mesure absolue (bien que dépendante du support) qui devient inadaptée dans une vision « responsive ». Il existe des mesures relatives comme l’em et le pourcentage.

L’em correspond à la dimension de la police de caractères. Quand on utilise cette mesure on s’adapte donc automatiquement à la dimension des caractères. Toutefois il peut y avoir un souci avec des éléments imbriqués parce qu’avec l’em on se base sur le parent. Le rem (root-em) se réfère systématiquement à l’élément racine (body ou html) et là on n’a plus de souci et le comportement est bien plus prévisible.

Pour plus de précisions je vous conseille cet excellent article.

En résumé

• Un reset css met toutes les valeurs par défaut des navigateurs à zéro.
• Normalize css agit plus finement, il est modulaire et bien documenté,
• Rebbot ajoute à normalize css des réglages de base pour simplifier la syntaxe des classes de Bootstrap.