Le langage CSS/Introduction
Qu'est-ce qu'une feuille de style ?
[modifier | modifier le wikicode]Les feuilles de styles en cascade (CSS, pour Cascading Style Sheets) décrivent l'apparence des divers éléments d'une page web par le biais de couples propriété / valeur. Étant distinctes du code de la page (HTML ou XML), elles constituent un moyen pour séparer structure et mise en page d'un site web. En tant que spécification du W3C, elles obéissent à un ensemble de règles précises qui seront décrites dans les chapitres suivants et que les navigateurs web respectent progressivement.
Si l'on utilise le HTML pour déterminer la présentation dans un navigateur graphique, au lieu de se limiter à structurer le document, il faut alors intégrer les éléments et attributs de présentation au sein du code. Le code s'alourdit inutilement et devient beaucoup plus difficile à faire évoluer. Par exemple, si on veut changer la police (par exemple de type courrier), la couleur (par exemple rouge) et la taille de caractères (par exemple 5 fois la taille par défaut) de chaque paragraphe, en HTML de présentation, il faudrait écrire ceci dans chaque page Web et pour chaque paragraphe :
<p>
<span style="font-family:monospace; color:red; font-size:5em;">
''texte du paragraphe''
</span>
</p>
Les feuilles de styles se proposent de résoudre ces deux problèmes par deux approches différentes :
- En définissant une feuille de style interne au code HTML, on créé un style par page ; ceci est relativement lourd mais parfois intéressant.
- En définissant une feuille de style externe qui peut alors être utilisée depuis n'importe quel document HTML ou XML.
Cette seconde méthode est la plus courante et la plus adaptée car elle exploite au mieux la faculté de généralisation des styles. Elle consiste à créer un fichier externe habituellement d'extension .css qui contient les règles de styles des pages. Une déclaration dans l'en-tête de chaque page web (par exemple la partie head d'un document HTML) permet ensuite d'appeler ces styles. Le fichier de la page web ne contiendra ainsi que la structure de la page et son style sera appliqué « par dessus » comme une sorte de masque. L'objectif de séparation de la présentation et de la structure est donc atteint.
Éléments et boîtes
[modifier | modifier le wikicode]En HTML, le code inclus entre une balise d'ouverture et une balise de fermeture est appelé « élément ». Cet élément peut être du texte — un paragraphe (balises <p>…</p>), du texte en emphase (balises <em>…</em>)… —, un lien (balises <a href=…>…</a>), une image (balises <img src=…>…</img>), un objet multimédia (balises <object data=…>…</object>), un tableau (balises <table …>…</table>), une ligne de tableau (balises <tr …>…</tr>), la case d'une ligne de tableau (balises <td …>…</td>), … Implicitement, chaque objet est inclus dans une boîte, même si, la plupart du temps, cette boîte est invisible.
Le CSS définit le style des boîtes : de leur contenu (alignement, police de caractère, effets…) mais aussi de la boîte en elle-même (couleur de fond, couleur de la bordure, espacements…).
Considérons le code suivant.
<p>
Ceci est du texte comprenant des parties
en <em>emphase normale</em>
ainsi que des parties
en <strong>emphase forte</strong>.
</p>
<p>
L'exemple montre les boîtes
qui englobent les éléments.
</p>
Nous avons mis en évidence les boîtes englobant les éléments HTML dans le rendu ci-dessous.
Ceci est du texte comprenant des parties en emphase normale ainsi que des parties en emphase forte
L'exemple montre les boîtes qui englobent les éléments.
Quand utiliser CSS ?
[modifier | modifier le wikicode]Les CSS permettent de gérer avec une grande efficacité le style des pages web. Il est donc rarement approprié de s'en passer dans une page. Cependant, certains effets CSS peuvent également être obtenus par d'autres biais, et en particulier via javascript. Quels sont alors les critères de choix entre les différentes techniques disponibles ?
L'objectif majeur généralement admis est de permettre à tous les visiteurs du site d'accéder à son contenu et à chacun de tirer au mieux parti des effets de présentation et de dynamisme, selon ses contraintes, son matériel, ou son éventuel handicap. On privilégiera donc le choix technique le plus accessible, profitant au plus grand nombre, en combinant si nécessaire les techniques appropriées.
Ainsi, certains contenus dynamiques peuvent certes être gérés uniquement en CSS, lorsqu'il s'agit notamment de menus déroulants ou de toutes autres boîtes apparaissant au survol de la souris. Cependant, le support des propriétés CSS nécessaires est insuffisant dans une partie des navigateurs, en particulier pour rendre ces contenus accessibles aux personnes qui ne peuvent utiliser une souris ou un dispositif de pointage similaire (utilisateurs handicapés moteurs, n'utilisant que le clavier ou un dispositif similaire). On optera donc plutôt pour des solutions mixtes, combinant javascript et CSS afin de garantir une accessibilité suffisante.
De même, on utilisera avec prudence les techniques purement CSS permettant d'ajouter à l'affichage un contenu qui n'y apparaît pas normalement : la génération de contenu via la propriété content, les pseudo-éléments before et after, ou encore les propriétés d'images d'arrière-plan background ne rendront en effet ces contenus accessibles qu'à une partie des visiteurs.
En revanche, les simples changements d'apparence des icônes, couleurs ou fonds au survol de la souris ne posent en général pas de problèmes d'accessibilité lorsqu'ils sont gérés uniquement en CSS : leur absence pour certains utilisateurs ne prive en effet pas d'une information nécessaire à la compréhension du contenu ou à la navigation.
De même, les boîtes dont la position est figée dans la fenêtre du navigateur indépendamment du défilement de la page (scrolling) peuvent être réalisées uniquement en CSS, si l'on accepte de limiter cet effet aux navigateurs supportant la propriété requise (position:fixed).
Le CSS, tout comme javascript, étant une surcouche technique optionnelle sur le document (X)HTML, tous deux sont susceptibles ne pas être supporté par un navigateur, d'être désactivé par des utilisateurs, ou encore de ne pas être correctement ou suffisamment implémenté pour obtenir l'effet recherché. On veillera donc, dans tous les cas, à :
- Réaliser avant tout un document (X)HTML auto-suffisant, donnant accès à la totalité du contenu et de la navigation
- Puis enrichir l'interface de présentation de ce document via CSS et/ou javascript, sans que cela n'en conditionne l'accès.
Historique
[modifier | modifier le wikicode]La création des CSS date de 1994. C'est à cette époque que l'essor du web commence avec en particulier l'avènement des publications électroniques. Mais il n'existe encore aucun moyen fiable et robuste pour appliquer un style à ces documents. Håkon Wium Lie, qui travaillait alors au CERN, berceau du web, comprend alors la nécessité de créer une feuille de style spécifique pour le web et en imagine une définition.
Certes, l'idée de séparer la structure de la présentation date de la création en 1990 par Tim Berners-Lee, d'un éditeur/navigateur dans lequel il est possible de définir une feuille de style mais Tim Berners-Lee ne définit pas de syntaxe laissant le soin aux navigateurs de le faire.
Le standard définissant CSS a évolué au fil des versions :
- CSS1 publié en décembre 1996,
- CSS2 publié en mai 1998,
- CSS3 dont un premier essai a été publié en 1999, est encore en train d'évoluer avec des modules ajoutés en 2021,
- CSS4 dont la définition est en cours depuis 2010.
Les navigateurs récents supportent CSS3.
La librairie d'interface graphique Swing de Java ne suit pas les évolutions et ne supporte que CSS1. Ce qui est suffisant pour l'affichage de documents simples.