CSS de base
Disparité entre les navigateurs
Par le passé, les navigateurs web n'étaient aucunement standardisé. Chaque navigateur avait son propre CSS par défaut dans leurs pages, ce qui nous obligeait à mettre beaucoup de CSS pour corriger les styles différents par défaut. Aujourd'hui, la plupart des navigateurs sont relativement standardisé, mais il arrive encore de voir quelques minimes différences, ce qui simplifie notre tâche.
Il existe de nombreuse solution à ce problème. La première solution, et la plus simple, est de corriger les quelques erreurs par nous-même lorsque nous les voyons. Les différences entre les navigateurs n'existe preque plus et par conséquant, nous auront que très rarement des différences à corriger.
La deuxième solution consiste à utiliser un fichier CSS de réinitialisation. Ces fichiers vont lancer du code CSS pour automatiquement corriger les différences majeures des navigateurs web de diverse façon. Cette approche a toutefois un coût: Elle rend votre site web un peu moins performant lors de l'exécution du CSS. Elle est toutefois facile à utiliser. Vous n'avez qu'à mettre un fichier CSS dans votre projet web et le lier à votre fichier HTML.
Types de fichiers de réinitialisation
Voici une liste de quelques fichiers CSS de réinitialisation que vous pouvez utiliser si vous désirez utiliser cette approche:
- Normalize.css
Un fichier qui se base sur le principe de simplement corriger le minimum pour être le plus petit et le plus efficace possible. Ce fichier va corriger les différences connues entre les navigateurs pour leur donner le même style de base en utilisant le moins de code CSS possible.
- sanitize.css
Un fichier qui est construit à partir de Normalize.css, mais où de nombreuses autres fonctionnalités de base un peu bizarre du CSS ont été modifié. On y retrouvera entre autre le changement de l'utilisation du box-sizing par défaut et quelques autres correctifs sur des choix douteux par défaut du CSS. Ce fichier est toutefois beaucoup plus volumineux et moins performant, surtout si certains correctifs ne vous sont pas utile.
- reset.css
Un fichier qui réduit le CSS par défaut du navigateur èa zéro. Ce fichier CSS va littéralement enlever tout CSS par défaut des navigateurs. Le texte des titres auront donc la même taille que celui des paragraphes et tous les éléments qui ont du padding ou margin par défaut le verront mis èa zéro. Cette approche est faite par un minuscule fichier CSS, mais qui cause de nombreux traitement pour le navigateur lorsqu'il doit faire ses calculs pour utiliser le CSS.
Utiliser un fichier de réinitialisation
Utiliser un fichier de réinitialisation est simple. Vous n'avez qu'à suivre les étapes suivantes:
- Télécharger le fichier de réinitialisation voulu.
- Mettre le fichier de réinitialisation dans le dossier csc de votre projet.
- Lier le fichier de réinitialisation avec le HTML en utilisant la balise <link>. Par exemple:HTML