La normalisation des styles des éléments HTML Bootstrap avec Reboot

Dans cette leçon, nous allons présenter quelques-uns des styles CSS automatiquement appliqués aux éléments HTML dès lors qu’on utilise Bootstrap. Nous verrons dans la suite de cette partie comment appliquer d’autres styles à certains éléments spécifiques en utilisant les classes Bootstrap adaptées.

 

Sélecteurs éléments et sélecteurs de classes

Pour utiliser Bootstrap de manière optimale, il faut avant tout bien comprendre que le CSS défini dans ce framework peut être divisé en deux parties distinctes : une partie « sélecteurs de classe » et une partie « sélecteur d’éléments ».

La partie « sélecteurs d’éléments » se base sur un fichier nommé Reboot qui est lui-même inspiré d’un autre fichier nommé Normalize. L’intention derrière ce fichier est de normaliser le comportement de certains éléments HTML en leur appliquant des styles de base afin d’avoir un comportement cohérent d’un navigateur à l’autre. Les styles définis via les sélecteurs éléments sont automatiquement appliqués à nos éléments dès qu’on utilise Bootstrap.

La partie « sélecteurs de classes » définit un ensemble de classes qu’on va pouvoir utiliser pour styliser notre contenu HTML, en incluant les attributs class HTML relatifs aux sélecteurs associés. Les styles liés à un sélecteur de classe ne sont appliqués à un élément que si on décide d’ajouter un attribut class de même nom à cet élément.

 

Styles généraux de la page

Tous les éléments reçoivent par défaut un box-sizing : border-box (qui va être surchargé à box-sizing: content-box dans certains cas très spécifiques).

Le box-sizing : border-box permet de s’assurer qu’un élément ne dépasse jamais sa taille déclarée avec width et height puisque le padding et la border sont alors intégrés dans le calcul de la taille de l’élément.

Le fichier Reboot va également définir quelques styles dans le sélecteur body et notamment la famille, la taille et l’épaisseur de la police +
la taille des interlignes + l’alignement et la couleur du texte + une couleur de fond +
des marges externes comme ceci :

La plupart de ces styles vont être hérités par l’ensemble des éléments dans le body et servent à assurer une cohérence dans le design général des pages.

On peut noter ici que le font-size est exprimé en rem, c’est-à-dire que la taille de la police va être basée sur la taille de la police définie dans l’élément racine html. Bootstrap ne définit pas de taille de police dans l’élément html et assume que la plupart des navigateurs définissent aujourd’hui une taille de 16px par défaut.

Concernant la police d’écriture, Bootstrap 4 innove ici en proposant des packs de polices différents supposément natives pour chaque type d’appareil et d’OS. Cela permet un rendu optimal pour chaque visiteur.

Les polices appliquées en fonction des types d’appareil et navigateurs de vos visiteurs vont être les suivantes :

• Safari pour macOS et iOS : -apple-system ;
• Chrome < 56 pour macOS : BlinkMacSystemFont ;
• Windows : "Segoe UI" ;
• Android : "Roboto" ;
• Par défaut : "Helvetica Neue", Arial, sans-serif ;
• Police pour les emojis : "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default.

 

Les styles des paragraphes et des titres

Les paragraphes et les titres ont une marge externe haute nulle et des marges externes basses respectivement égales à 1rem et 0.5rem.

Bootstrap ne définit pas de taille de police pour les titres et les paragraphes. La plupart des navigateurs appliquent une taille de 1rem pour les paragraphes et les tailles suivantes pour les titres :

• h1 : font-size : 2.5rem, c’est-à-dire 2,5 * 16px = 40px par défaut ;
• h2 : font-size : 2rem ou 32px par défaut ;
• h3 : font-size : 1.75rem ou 28px par défaut ;
• h4 : font-size : 1.5rem ou 24px par défaut ;
• h5 : font-size : 1.25rem ou 20px par défaut ;
• h6 : font-size : 1rem soit 16px par défaut.

 

Les styles des liens

Dans leur état de base, les liens ont une couleur bleu clair et ne possède pas de trait de soulignement (text-decoration : none).

Au survol (:hover), la couleur change vers un bleu plus foncé et un trait de soulignement de même couleur apparait.

 

Les styles des listes

Les listes ont également une marge externe haute nulle. La taille de la marge externe basse est fixée à 1rem sauf dans le cas de listes imbriquées auquel cas la marge externe basse des listes imbriquées sera nulle.

 

Les styles des tableaux

Une fusion des bordures est appliquée par défaut aux tableaux avec border-collapse : collapse. L’élément caption (servant à ajouter une légende) est également stylisé.

 

Les styles des formulaires

Les formulaires en HTML sont créés en utilisant de multiples éléments. Les styles de certains d’entre eux sont modifiés dans Reboot. Les changements notables sont les suivants :

• L’élément label possède un display : inline-block pour qu’on puisse ensuite lui appliquer des marges ;
• L’élément textarea possède une propriété resize: vertical ce qui signifie qu’il ne peut être redimensionné que verticalement afin d’éviter de casser le design général d’une page ;
• Des marges externes nulles sont définies pour les éléments input, select et textarea.