Tour d’horizon des resets CSS en 2018

Ceci est une traduction de "A look at CSS Resets in 2018", écrit par Ire Aderinokun et publié sur bitsofco.de. Par ici pour lire l'article original.

Tous les navigateurs sont livrés avec un ensemble de styles par défaut qui sont appliqués à chaque page Web dans ce que l'on appelle la "feuille de style de l'agent utilisateur". La plupart de ces feuilles de styles sont open source, vous pouvez donc les parcourir:

De nombreux styles sont cohérents dans toutes les feuilles de style des agents utilisateurs. Par exemple, je pensais que l'élément <head> n'était pas visible en raison d'une fonctionnalité particulière, mais il est en réalité masqué comme n'importe quel autre élément d'une page, avec display: none! Vous pouvez voir le même style dans WebKit, Chromium et Mozilla.

Cependant, de nombreux styles ne sont pas cohérents entre les feuilles de style de l'agent utilisateur. Par exemple, voyez comment une entrée de recherche <input> est stylée dans les navigateurs.

Le cas des resets CSS

Afin de gérer les incohérences entre les feuilles de style de l'agent utilisateur, des resets CSS ont été créées. Une resets CSS est un ensemble de styles appliqués à une page avant tout autre style personnalisé, dans le but de créer une base plus normalisée entre les navigateurs.

Eric Meyer a écrit un article sur le raisonnement derrière les resets de CSS en 2007, ce qui, je pense, est toujours vrai:

La raison de base est que tous les navigateurs ont des valeurs de présentation par défaut, mais qu’aucun n’a les mêmes valeurs par défaut. Nous pensons que notre CSS modifie l’aspect par défaut d’un document, mais avec une feuille de style «réinitialisée», nous pouvons rendre l'aspect par défaut plus cohérente entre navigateurs, et passer ainsi moins de temps à se battre avec les paramètres par défaut du navigateur.

Bien que les choses soient différentes de celles de 2007, je pense que les resets peuvent toujours être utiles.

Les feuilles de style des agents d’utilisateur ne sont-elles pas moins incohérentes aujourd’hui?

Oui, beaucoup de styles par défaut entre les feuilles de style de l'agent utilisateur sont maintenant très similaires. Par exemple, la plupart des navigateurs appliquent la même marge horizontale de 0.67em et la même taille de police de 2em à l'élément <h1>. Cependant, cette cohérence est relativement nouvelle et nous devons toujours envisager de prendre en charge les navigateurs plus anciens qui ont un style par défaut moins cohérent.

De plus, en fonction du type de resets que nous souhaitons appliquer (comme nous le verrons ci-dessous), nous pouvons toujours souhaiter une réinitialisation même si, seuls les navigateurs modernes et plus cohérents étaient utilisés.

N'appliquons-nous pas nos propres styles pour surcharger la réinitialisation?

L'un des principaux arguments contre l'utilisation des resets CSS est qu'un grand nombre de styles sont finalement remplacés par notre feuille de style principale, ce qui signifie que les styles de réinitialisation augmentent inutilement le temps de chargement de la page. Bien que cela soit tout à fait vrai, ce n’est pas un argument suffisant pour que je cesse de les utiliser pour deux raisons.

La première est que je pense que les réinitialisations nous permettent d’écrire des styles plus propres. Nous pouvons séparer les styles qui sont destinés à des navigateurs spécifiques et les styles pour la conception même du site. Au lieu d'avoir des corrections spécifiques au navigateur au même endroit que mes styles spécifiques à un design, nous pouvons les séparer.

Deuxièmement, les resets sont (généralement) très petits et devraient avoir un effet négligeable sur les temps de chargement. Nous utilisons fréquemment la cascade pour remplacer et modifier le style des éléments, et même s’il est possible de gagner en performances, cela ne vaut peut-être pas la peine.

Types resets CSS

Il y a beaucoup, beaucoup de resets CSS différentes. Depuis le premier en 2004, undohtml, il y a eu une pléthore de réinitialisations allant de la complexité à la spécificité.

De manière générale, une réinitialisation CSS tente d'atteindre trois objectifs. Certaines feuilles de style de réinitialisation combinent ces trois objectifs, tandis que d'autres ne cherchent qu'à en résoudre un seul.

  • Corriger les erreurs de style de l'agent utilisateur
  • Annuler tout style d'agent utilisateur "orienté"
  • Créer une base de style cohérente et "consensuelle"
Réinitialisations correctives

L'un des objectifs des resets CSS est de corriger les erreurs dans les feuilles de style de l'agent utilisateur. Comme vous pouvez l’imaginer, c’est davantage pour les anciens navigateurs. Un bon exemple de cela est lorsque le HTML5 a été introduit et que des navigateurs tels que Internet Explorer 9 n’appliquaient pas le type d’affichage correct aux nouveaux éléments.

Dans les resets comme normalize.css, ces erreurs sont spécifiquement ciblées et corrigées:

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

main {
  display: block;
}

Étant donné que ces styles s'appliquent uniquement aux navigateurs plus anciens, nous pouvons également utiliser un processeur PostCSS tel que PostCSS Normalize, ainsi qu'une liste de navigateurs. Cela nous permet d'ajouter conditionnellement ces types de styles uniquement si nous prenons en charge ce navigateur.

Un autre exemple, qui s’applique à certains navigateurs modernes, consiste à corriger le display des éléments dotés de l’attribut hidden.

/**
 * Pure CSS
 */
 
[hidden] {
    display: none !important; // One of the good use cases of !important
}
Annulation du style de l'agent utilisateur "orienté"

Un autre objectif des réinitialisations CSS était de supprimer tout style "partisan" émanant des agents utilisateurs.

Il y a beaucoup d'opinions sur ce qu'est un style "partisan". Ma définition d’un style "partisan" est tout ce qui n’est pas la version «nue», faute d’un meilleur mot. Par exemple, j’envisagerais d’ajouter une marge de 2em sur les titres, comme le font la plupart des feuilles de style d’agent utilisateur, un style "partisan" car pourquoi 2em? Pourquoi pas 3em? Ou 4em? À mon avis, un style "non partisan" serait simplement une marge de 0. Bon, revenons aux réinitialisations.

Une version simple de ceci est la “réinitialisation universelle”, qui supprime tous les margin et tous les padding de tous les éléments:

* {
    margin: 0;
    padding: 0;
}

Cette réinitialisation est probablement trop lourde, car elle supprime le padding d'éléments inattendus, tels que les éléments <input>. Une réinitialisation alternative, plus couramment utilisée, est la réinitialisation CSS d’Eric Meyer. Il remet à 0 ou none la taille des margin, des padding, des borders et des font-size pour des éléments spécifiques. Et, cela n'inclut pas les éléments dans lesquels vous pourriez vous attendre à un padding.

/**
 * Meyer's CSS Reset
 */
 
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;
}
Resets "consensuels" pour des styles cohérents

Lorsque la catégorie précédente de réinitialisations a tenté de corriger les styles d'agent utilisateur "orienté" en les annulant entièrement, cette catégorie de réinitialisation le fait en définissant ses propres styles "orienté".

Par exemple, au lieu de définir toutes les tailles de police sur 1em ou les marges sur 0, ce type de réinitialisation définira un style "orienté".

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

Le Bootstrap reboot en est un autre exemple. Ils vont un peu plus loin en déclarant même des familles de polices et des couleurs d'arrière-plan pour l'élément <body>.

/**
 *  Reboot.css
 */

// Body
//
// 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`.
// 3. Set an explicit initial text-align value so that we can later use the
//    the `inherit` value on things like `<th>` elements.

body {
  margin: 0; // 1
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  color: $body-color;
  text-align: left; // 3
  background-color: $body-bg; // 2
}

Comment utilisons-nous les resets CSS aujourd'hui?

J'ai récemment lancé un sondage sur Twitter pour demander aux gens quels resets CSS ils utilisent actuellement.

La plupart des gens utilisent des resets telles que Normalize.css, une combinaison de la correction des erreurs de navigateur et de la définition de styles "consensuels" et "orientés". Un bon nombre de personnes ont signalé leurs propres resets personnalisées, qui entrent généralement dans la troisième catégorie.

Mon avis

J’ai toujours utilisé une version légèrement modifiée des resets CSS d’Eric Meyer pour deux raisons.

La première est que je préfère généralement travailler avec une ardoise aussi vierge que possible, en ajoutant des styles à ma guise. Ceci est juste une préférence personnelle pour la façon dont je travaille.

La seconde est que je suis une fervente partisane de l’application des margin dans une seule direction (généralement vers le bas) et des réinitialisations les plus avisées, la plupart des feuilles de style des agents utilisateurs, ne suivent pas cette règle. Par conséquent, je préférerais commencer avec un margin et un padding nulle partout, et l'ajouter au fur et à mesure.

Actuellement, je peaufine beaucoup plus mon fichier de resets, même en ajoutant les utilitaires que je veux dans chaque projet sur lequel je travaille, comme une classe .sr-only. Cela me fait penser que ce n’était plus vraiment un reset, mais plutôt un «reboot». De nouveaux resets de type Reboot semblent être la nouvelle générale.