La règle de style finalement appliquée à un élément HTML a 3 origines possibles :
- le navigateur,
- l'utilisateur,
- l'auteur du code.
La façon dont sera choisie telle ou telle règle est un algorithme simple qui s'appelle la cascade.
Trois origines possibles
La feuille de style navigateur
Chaque navigateur (agent utilisateur dans le vocabuliare du W3C) applique aux pages HTML un ensemble de styles par défaut.
Ces styles par défaut se trouvent soit dans des fichiers externes
soit directement dans le moteur de rendu du navigateur.
Par exemple, suivant les versions, la feuilles de style par défaut
de Firefox
sera visible dans ce navigateur avec l'URL chrome://browser/content/browser.css.
Pour webkit, on a la description dans le site des sources du moteur.
Le site iecss
fournit les feuilles de style par défaut de certaines versions d'Internet Explorer.
Ces style par défaut doivent permettre que n'importe quelle page HTML soit correctement
affichée quelque soit l'absence de styles fournis par l'auteur de
la page.
Ils doivent garantir "l'interprétation conventionnelle" des
éléments HTML :
- cacher les éléments situés dans la partie head
- afficher différemment les éléments blocs et les éléments en ligne
- afficher correctement des listes
- afficher des tableaux avec des colonnes
La feuille de style utilisateur
Pour plus de confort, ou pour une meilleure accessibilité en cas de handicap, le navigateur donne la possibilité à l'utilisateur de configurer certaines options de rendu et d'affichage. L'accès à cette configuration se fait par menu (Options->Option->Contenu dans Firefox, Paramètres->Afficher les paramètres avancés dans Chrome, Outils->Options Internet->Général dans Internet Explorer).
Les possibilités de définition sont généralement limitées aux
- couleurs et images de fond,
- couleurs des textes,
- polices de caractères préférérées et tailles par défaut
- apparences des liens (couleur, soulignement),
- affichage des images.
L'utilisateur peut toutefois aller plus loin en demandant au
navigateur d'utiliser une feuille de style qu'il aurait
spécifiquement écrite.
Dans ce domaine c'est Internet Explorer qui est le plus simple car
il propose directement dans ses options (Général->Accessibilité)
de télécharger la feuille de style à utiliser.
Avec Chrome et Firefox
on peut placer un fichier appelé respectivement Custom.css
et userContent.css dans les dossiers d'applications
des navigateurs.
La feuille de style auteur
La feuille de style auteur est la feuille de style que nous
écrivons en tant qu'auteur de la page HTML et qui sera attachée
au fichier HTML avec
l'élément link
ou incluse dans le code HTML
avec l'élément style.
C'est celle que nous étudions tout au long de ce tutoriel.
La feuille de style auteur permet de définir le style de n'importe quel élément que nous avons placé dans notre code et de spécifier des valeurs pour le rendu et l'affichage de cet élément.
La cascade
Que se passe-t-il quand nous avons défini des styles pour un élement
alors que des styles différents ont été définis par la feuille de
style navigateur et/ou par la feuille de style utilisateur.
Comment le navigateur va-t-il choisir la règle à appliquer
finalement à l'élément ?
L'algorithme de choix du navigateur est très simple et s'appelle la cascade.
Pour chaque déclaration de style de chaque élément HTML de la page, le navigateur fait les choix suivants :
- si la déclaration est définie par l'utilisateur avec le
mot-clé
!importantelle est utilisée (les options de configuration tombent dans ce cas) - sinon si la déclaration est définie par l'auteur, elle est utilisée,
- sinon si la déclaration est définie par l'utilisateur, elle est utilisée,
- sinon c'est la déclaration définie par le navigateur qui est utilisée.
La cascade est la 1ère étape du choix d'une règle. Il peut arriver que 2 règles de même origine entre en concurrence. On complétera alors la 1ère étape avec une seconde : la détermination du poids d'une règle en fonction de ses sélecteurs ( Sélectionner des éléments -> Spécificité des sélecteurs)
Le principe de la cascade a une influence certaine sur les couleurs et polices de caractères utilisées pour le rendu des pages puisque l'utilisateur y a accès facilement dans les options de configuration de son navigateur, et qu'elles auront priorité sur celles que nous avons choisis. Il est donc important de ne jamais "calculer" et bâtir une mise en page en fonction d'une police particulière et/ou dans une taile particulière car rien ne garantit que la page sera rendue avec les valeurs que nous avons défini.
Prenons l'exemple des lien. Dans les navigateurs, ils sont définis comme :
a {
display: inline;
color: blue;
text-decoration: underline;
}
L'utilisateur a modifié les préférences de son navigateur pour avoir le rouge comme couleur des liens et qu'ils soient toujours soulignés. On obtient la règle de style utilisateur suivante :
a {
color: red !important;
text-decoration: underline !important;
}
L'auteur a défini les liens ainsi :
a {
color: black;
text-decoration: none;
background: yellow;
}
La règle de style pour les liens sera finalement :
a {
display: inline; /* navigateur */
color: red; /* utilisateur */
text-decoration: underline; /* utilisateur */
background: yellow; /* auteur */
}
Eviter les différences des navigateurs
Bien que le W3C
fournisse une feuille de style d'exemple rien n'est
standardisé dans une représentation par défaut des éléments HTML.
Les navigateurs ont tous des différences (qui se réduissent mais
subsistent) dans les déclarations de style qui régissent le rendu de
tel ou tel élément. Les principales différences concernent les
marges intérieures et extérieures, la taille ou la graisse de
certains éléments textuels ou de titrage et les affichages des zones
de formulaires.
Pour pallier ces différences de rendu entre les navigateurs, les auteurs de page ont le choix entre 2 techniques : le reset CSS et la normalisation
Reset CSS
Dans sa forme la plus simple, le reset CSS remet à zéro les marges internes et externes de pratiquement tous les éléments HTML et garanti la transmission de la taille de la police de caractères. Les plus connus sont celui de Eric Meyer et celui de Yahoo.
L'utilisation d'un reset CSS oblige l'auteur à redéfinir les marges des éléments blocs et les tailles différentes de police pour les éléments de titrage. C'est généralement très facile avec par exemple :
p, h1, h2, h3, h4, h5, h6 {
margin: 1em 0;
}
h1 {
font-size: 2em; /*taille suivant convenance*/
}
h2 {
font-size: 1.8em; /*taille suivant convenance*/
}
h3 {
font-size: 1.6em; /*taille suivant convenance*/
}
Normalisation
La normalisation corrige les différences sur les éléments qui en ont besoin. Elle nécessite une connaissance en profondeur de tous les comportements de toutes les versions de tous les navigateurs. La mise à jour n'est pas aisée et l'auteur doit suivre chaque nouvelle version pour être sans cess à jour.
La feuille de style de normalisation la plus connue et la plus utilisée est celle de Nicolas Gallagher. La lecture de cette feuille de style est intéressante pour se rendre compte des différences de rendus, d'autant plus que chaque correction est expliquée.