Les bases
Mise en pratique
Approfondir
TP Responsive
TP Avancé
TP Restaurant : L'en-têteRéservé aux membres premiums
42 min
TP Restaurant : Bloc présentationRéservé aux membres premiums
38 min
TP Restaurant : MenuRéservé aux membres premiums
40 min
TP Restaurant : RéservationRéservé aux membres premiums
32 min
TP Restaurant : Recettes & planRéservé aux membres premiums
37 min
TP Restaurant : FooterRéservé aux membres premiums
17 min
TP Restaurant : Page recetteRéservé aux membres premiums
42 min
Aller plus loin

Dans cette vidéo nous allons parler de deux outils que vous serez sûrement amené à utiliser lorsque vous ferez du CSS : Reset et Normalize. Ces outils permettent de contrebalancer le problème des styles par défaut imposés par les navigateurs (par exemple, les paragraphes ont une marge par défaut, marges qui ne sont pas forcément consistantes entre les navigateurs).

Reset

L'objectif de cette approche est de contrer l'apparence que le navigateur impose par défaut à la plupart des élément HTML. Ceci permet ensuite, lorsque l'on travaille sur le CSS, de ne pas avoir à penser aux styles qui pourraient être appliqués défaut aux éléments. Si par exemple vous souhaitez styliser un titre, vous ne serez pas obligés de retirer les marges avant de travailler. il existe plusieurs feuilles de styles vous proposant une réinitialisation :

Le reset original
Minireset

Normalize

Cet outil propose une approche différente qui consiste à essayer de normaliser l'apparence des éléments HTML à travers les différents navigateurs. L'objectif est d'avoir le comportement le plus prévisible possible. Cette feuille de style va redéfinir certaines propriétés (par exemple spécifier les marges sur les titres, paragraphes ou autre) afin d'offrir une expérience consistante pour les utilisateurs quel que soit le navigateur utilisé.

Quelle approche utiliser

On peut alors se demander quelle approche nous devons privilégier dans notre CSS. Comme d'habitude, le choix va dépendre de la situation :

  • Si vous avez une maquette spécifique qui définit concrètement comment doivent fonctionner l'ensemble des éléments HTML il vaudra mieux passer par un système de reset pour ensuite pouvoir définir ses propres règles.
  • En revanche, si vous n'avez pas de style prédéfinis pour l'ensemble des éléments HTML, il vaudra mieux utiliser normalize (quitte à redéfinir certaines propriétés pour des éléments spécifiques comme par exemple des titres de premier niveau).