CSS
Normaliser les styles de navigateur

Introduction

Remarques

normalize.css

Les navigateurs utilisent un ensemble par défaut de styles CSS qu'ils utilisent pour les éléments de rendu. Certains de ces styles peuvent même être personnalisés en utilisant les paramètres du navigateur pour modifier les définitions de taille et de visage de police par défaut, par exemple. Les styles contiennent la définition des éléments supposés être au niveau du bloc ou en ligne, entre autres.

Étant donné que les styles de langage accordent une certaine latitude à ces styles par défaut et que les navigateurs ne respectent pas les spécifications, ils peuvent différer d’un navigateur à l’autre.

C'est là qu'intervient normalize.css . Il remplace les incohérences les plus courantes et corrige les bogues connus.

Qu'est ce que ça fait

• Préserve les valeurs par défaut utiles, contrairement à de nombreuses réinitialisations CSS.
• Normalise les styles pour un large éventail d'éléments.
• Corrige les bogues et les incohérences courantes du navigateur.
• Améliore la facilité d'utilisation avec des modifications subtiles.
• Explique ce que le code fait en utilisant des commentaires détaillés.

Ainsi, en incluant normalize.css dans votre projet, votre design se ressemblera et sera cohérent entre les différents navigateurs.

Différence à reset.css

Vous avez peut-être entendu parler de reset.css . Quelle est la différence entre les deux?

Alors que normalize.css fournit une cohérence en définissant différentes propriétés sur des valeurs par défaut unifiées, reset.css atteint la cohérence en supprimant tous les styles de base qu'un navigateur peut appliquer. Bien que cela puisse sembler une bonne idée au début, cela signifie en réalité que vous devez écrire toutes les règles vous-même, ce qui va à l’encontre de la norme.

Approches et exemples

Les réinitialisations CSS prennent des approches distinctes pour les paramètres par défaut du navigateur. Réinitialiser le CSS d'Eric Meyer existe depuis un certain temps. Son approche annule de nombreux éléments du navigateur connus pour causer des problèmes dès le départ. Ce qui suit provient de sa version (v2.0 | 20110126) Réinitialisation CSS.

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

Réinitialiser le CSS d'Eric Meyer

Normaliser CSS de l'autre et traite plusieurs d'entre eux séparément. Ce qui suit est un exemple de la version (v4.2.0) du code.

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

/* Document
   ========================================================================== */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

Normaliser CSS