Les sites Web sont composés d'un certain nombre d'éléments individuels, notamment des images, du texte et divers documents. Ces documents incluent non seulement ceux qui peuvent être liés à partir de différentes pages, comme les fichiers PDF, mais aussi les documents qui sont utilisés pour construire les pages elles-mêmes, comme Documents HTML pour déterminer la structure d'une page et des documents CSS (Cascading Style Sheet) pour dicter l'apparence d'une page. Cet article se penchera sur CSS, couvrant ce que c'est et où il est utilisé sur les sites Web aujourd'hui.
Une leçon d'histoire CSS
CSS a été développé pour la première fois en 1997 comme un moyen pour les développeurs Web de définir l'apparence visuelle des pages Web qu'ils créaient. Il était destiné à permettre aux professionnels du web de séparer le contenu et la structure du code d'un site Web à partir de la conception visuelle, ce qui n'était pas possible avant cette époque.
La séparation de la structure et du style permet à HTML d'exécuter davantage la fonction sur laquelle il était initialement basé - le balisage de contenu, sans avoir à se soucier de la conception et de la mise en page de la page elle-même, ce que l'on appelle communément « l'aspect et la convivialité » du page.
L'évolution du CSS
CSS n'a gagné en popularité que vers 2000, lorsque les navigateurs Web ont commencé à utiliser plus que les aspects de base de la police et de la couleur de ce langage de balisage. Aujourd'hui, tous les navigateurs modernes prennent en charge tous les CSS de niveau 1, la plupart des CSS de niveau 2 et même la plupart des aspects de CSS de niveau 3. Alors que CSS continue d'évoluer et que de nouveaux styles sont introduits, les navigateurs Web ont commencé à implémenter des modules qui apportent une nouvelle prise en charge CSS dans ces navigateurs et donnent aux concepteurs de sites Web de nouveaux outils de style puissants pour travailler avec.
Au cours des (nombreuses) années passées, certains concepteurs de sites Web ont refusé d'utiliser CSS pour le conception et développement de sites web, mais cette pratique a pratiquement disparu de l'industrie aujourd'hui. CSS est maintenant une norme largement utilisée dans la conception de sites Web et vous auriez du mal à trouver quelqu'un travaillant dans l'industrie aujourd'hui qui n'a pas au moins une compréhension de base de ce langage.
CSS est une abréviation
Comme déjà mentionné, le terme CSS signifie "Cascading Style Sheet". Décomposons un peu cette phrase pour expliquer plus en détail ce que font ces documents.
Le mot "feuille de style" fait référence au document lui-même (comme HTML, les fichiers CSS ne sont en réalité que des documents texte qui peuvent être modifiés avec une variété de programmes). Les feuilles de style sont utilisées pour la conception de documents depuis de nombreuses années. Ce sont les spécifications techniques d'une mise en page, qu'elle soit imprimée ou en ligne. Les concepteurs d'impression utilisent depuis longtemps des feuilles de style pour s'assurer que leurs conceptions sont imprimées exactement selon leurs spécifications. Une feuille de style pour une page Web sert le même objectif, mais avec la fonctionnalité supplémentaire d'indiquer également au navigateur Web comment rendre le document en cours de visualisation. Aujourd'hui, les feuilles de style CSS peuvent également utiliser requêtes multimédias changer l'apparence d'une page différents appareils et tailles d'écran. Ceci est extrêmement important car cela permet à un même document HTML d'être rendu différemment selon l'écran utilisé pour y accéder.
Cascade est la partie vraiment spéciale du terme "feuille de style en cascade". Une feuille de style web est destiné à passer en cascade à travers une série de styles dans cette feuille, comme une rivière au-dessus d'une cascade. L'eau de la rivière frappe toutes les roches de la cascade, mais seules celles du fond affectent exactement l'endroit où l'eau s'écoulera. Il en va de même pour la cascade des feuilles de style des sites Web.
Les feuilles de style Designer remplacent les feuilles de style par défaut du navigateur
Chaque page Web est affectée par au moins une feuille de style, même si le concepteur Web n'applique aucun style. Cette feuille de style est la feuille de style de l'agent utilisateur — également connus sous le nom de styles par défaut que le navigateur Web utilisera pour afficher une page si aucune autre instruction n'est fournie. Par exemple, par défaut, les hyperliens sont stylisés en bleu et soulignés. Ces styles proviennent de la feuille de style par défaut d'un navigateur Web. Cependant, si le concepteur de sites Web fournit d'autres instructions, le navigateur devra savoir quelles instructions ont la priorité. Tous les navigateurs ont leurs propres styles par défaut, mais bon nombre de ces paramètres par défaut (comme les liens de texte soulignés en bleu) sont partagés entre tous ou la plupart des principaux navigateurs et versions.
Pour un autre exemple de navigateur par défaut, dans notre navigateur Web, la police par défaut est "Times New Roman" affiché en taille 16. Cependant, presque aucune des pages que nous visitons ne s'affiche dans cette famille de polices et cette taille. C'est parce que la cascade définit que les deuxièmes feuilles de style, qui sont définies par les concepteurs eux-mêmes, pour redéfinir la taille de la police et la famille, en remplaçant les valeurs par défaut de notre navigateur Web. Toutes les feuilles de style que vous créez pour une page Web auront plus de spécificité que les styles par défaut d'un navigateur, de sorte que ces valeurs par défaut ne s'appliqueront que si votre feuille de style ne les remplace pas. Si vous voulez que les liens soient bleus et soulignés, vous n'avez rien à faire puisque c'est la valeur par défaut, mais si le fichier CSS de votre site indique que les liens doivent être verts, cette couleur remplacera le bleu par défaut. Le soulignement restera dans cet exemple puisque vous n'avez pas spécifié le contraire.
Où CSS est-il utilisé?
CSS peut également être utilisé pour définir à quoi les pages Web doivent ressembler lorsqu'elles sont affichées dans d'autres médias qu'un navigateur Internet. Par exemple, vous pouvez créer une feuille de style d'impression qui définira comment la page Web doit s'imprimer. Étant donné que les éléments de page Web tels que les boutons de navigation ou les formulaires Web n'auront aucune utilité sur la page imprimée, une feuille de style d'impression peut être utilisée pour « désactiver » ces zones lorsqu'une page est imprimée. Bien que n'étant pas vraiment une pratique courante sur de nombreux sites, la possibilité de créer des feuilles de style d'impression est puissante et attrayante (dans notre expérience — la plupart des professionnels du Web ne le font pas simplement parce que le budget d'un site n'exige pas ce travail supplémentaire pour être terminé).
Pourquoi CSS est-il important?
CSS est l'un des outils les plus puissants qu'un concepteur de sites Web puisse apprendre, car il vous permet d'affecter l'ensemble de l'apparence visuelle d'un site Web. Des feuilles de style bien écrites peuvent être mises à jour rapidement et permettent aux sites de changer ce qui est visuellement prioritaire sur le écran, qui à son tour montre de la valeur et de l'attention aux visiteurs, sans qu'aucune modification ne doive être apportée au sous-jacent balisage HTML.
Le principal défi du CSS est qu'il y a pas mal de choses à apprendre - et avec les navigateurs qui changent chaque jour, ce qui fonctionne bien aujourd'hui peut ne pas avoir de sens demain car de nouveaux styles sont pris en charge et d'autres sont abandonnés ou tombent en disgrâce pour une raison ou une autre.
La courbe d'apprentissage CSS en vaut la peine
Étant donné que CSS peut se cascader et se combiner, et compte tenu de la manière dont différents navigateurs peuvent interpréter et implémenter les directives différemment, CSS peut être plus difficile à apprendre que le simple HTML. CSS change également dans les navigateurs d'une manière que HTML ne fait pas vraiment. Une fois que vous aurez commencé à utiliser CSS, vous verrez que l'exploitation de la puissance des feuilles de style vous offrira une flexibilité incroyable dans la façon dont vous mettez en page les pages Web et définissez leur apparence. En cours de route, vous amasserez un « sac d'astuces » de styles et d'approches qui ont fonctionné pour vous dans le passé et vers lesquels vous pourrez vous tourner à nouveau lorsque vous créer de nouvelles pages Web à l'avenir.