Les sites Web sont composés d'un certain nombre d'éléments individuels, notamment des images, du texte et divers documents. Ces documents comprennent non seulement des liens pouvant être liés à différentes pages, tels que des fichiers PDF, mais également des documents utilisés pour construire les pages elles-mêmes, tels que des documents HTML pour déterminer la structure d'une page et des documents CSS (Cascading Style Sheet). dicter l'apparence d'une page. Cet article approfondira le langage CSS, en décrivant en quoi il consiste et où il est utilisé sur les sites Web actuels.
Une leçon d'histoire CSS
CSS a été développé pour la première fois en 1997 afin de permettre aux développeurs Web de définir l'apparence visuelle des pages Web qu'ils créaient. L'objectif était de permettre aux professionnels du Web de séparer le contenu et la structure du code d'un site Web de la conception visuelle, ce qui n'avait pas été possible auparavant.
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 le "look and feel". de la page.
CSS n’a gagné en popularité qu’en 2000 environ environ, lorsque les navigateurs Web ont commencé à utiliser plus que les aspects de police et de couleur de base de ce langage de balisage. Aujourd'hui, tous les navigateurs modernes prennent en charge l'intégralité du CSS de niveau 1, la plupart du CSS de niveau 2 et même la plupart des aspects du CSS de niveau 3. Au fur et à mesure de l'évolution du CSS et de l'introduction de nouveaux styles, les navigateurs Web ont commencé à implémenter des modules apportant un nouveau support CSS. dans ces navigateurs et offrent aux concepteurs de sites Web de nouveaux outils de style puissants à utiliser.
Au cours de (nombreuses) années écoulées, certains concepteurs de sites Web ont refusé d'utiliser CSS pour la conception et le développement de sites Web, mais cette pratique a pratiquement disparu de l'industrie aujourd'hui. CSS est maintenant un standard largement utilisé dans la conception Web et il serait difficile de trouver quelqu'un qui travaille dans l'industrie aujourd'hui et qui ne possède pas au moins une compréhension de base de cette langue.
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 le rôle de ces documents.
Le mot "stylesheet" fait référence au document lui-même (comme HTML, les fichiers CSS ne sont en réalité que des documents texte pouvant être édités avec une variété de programmes). Les feuilles de style ont été utilisées pour la conception de documents pendant 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 motifs sont imprimés exactement selon leurs spécifications. Une feuille de style pour une page Web remplit le même objectif, mais avec la fonctionnalité supplémentaire consistant à indiquer également au navigateur Web comment effectuer le rendu du document en cours de visualisation. Aujourd'hui, les feuilles de style CSS peuvent également utiliser des requêtes multimédia pour modifier la façon dont une page affiche différents périphériques et tailles d'écran. Ceci est extrêmement important car cela permet à un seul document HTML d'être restitué différemment en fonction de 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 conçue pour se propager en cascade dans une série de styles, comme une rivière au-dessus d’une cascade. L'eau de la rivière frappe tous les rochers de la cascade, mais seuls ceux du fond affectent exactement le passage de l'eau. Il en va de même pour la cascade de feuilles de style de site Web.
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 appelée styles par défaut que le navigateur Web utilisera pour afficher une page si aucune autre instruction n'est fournie. Par exemple, les hyperliens par défaut sont stylés en bleu et soulignés. Ces styles proviennent de la feuille de style par défaut d'un navigateur Web. Toutefois, si le concepteur 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 ceux-ci (tels que les liens de texte soulignés en bleu) sont partagés par la plupart des navigateurs et versions principaux.
Pour un autre exemple de navigateur par défaut, dans notre navigateur Web, la police par défaut est "Times New Roman", affichée en taille 16. Toutefois, aucune des pages que nous visitons ne figure dans cette famille et cette taille de police. En effet, la cascade définit que les deuxièmes feuilles de style, définies par les concepteurs eux-mêmes, redéfinissent la taille et la famille de la police, 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 du navigateur. Par conséquent, ces valeurs par défaut ne s'appliqueront que si votre feuille de style ne les remplace pas. Si vous souhaitez que les liens soient bleus et soulignés, vous n'avez rien à faire car il s'agit de la valeur par défaut. Toutefois, si le fichier CSS de votre site indique que les liens doivent être verts, cette couleur remplacera la couleur bleue par défaut. Le soulignement restera dans cet exemple puisque vous n'avez pas spécifié autrement.
Où le CSS est-il utilisé?
CSS peut également être utilisé pour définir l'apparence des pages Web sur un média autre que le navigateur Web. Par exemple, vous pouvez créer une feuille de style d’impression qui définira le mode d’impression de la page Web. É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 cela ne soit pas vraiment une pratique courante sur de nombreux sites, la possibilité de créer des feuilles de style d'impression est puissante et attrayante (selon notre expérience, la plupart des professionnels du Web ne le font pas simplement parce que l'étendue du budget d'un site ne nécessite pas que ce travail supplémentaire soit effectué. ).
Pourquoi le CSS est-il important?
Le CSS est l’un des outils les plus puissants qu’un concepteur de sites Web puisse apprendre, car il permet d’affecter l’aspect visuel d’un site Web. Des feuilles de style bien rédigées peuvent être mises à jour rapidement et permettent aux sites de modifier visuellement la priorité affichée sur l’écran, ce qui à son tour donne de la valeur et de la concentration aux visiteurs, sans qu’il soit nécessaire de modifier le balisage HTML sous-jacent.
Le principal défi de CSS est qu’il ya beaucoup à apprendre - et avec les navigateurs changeant tous les jours, ce qui fonctionne bien aujourd’hui n’aura plus de sens demain si de nouveaux styles sont pris en charge et que d’autres sont abandonnés ou tombent en disgrâce pour une raison ou une autre. .
Comme CSS peut être mis en cascade et combiné, et compte tenu de la façon dont les différents navigateurs peuvent interpréter et mettre en œuvre les directives différemment, CSS peut être plus difficile à maîtriser que le HTML pur. CSS change également dans les navigateurs d'une manière que le HTML ne fait pas vraiment. Cependant, une fois que vous aurez commencé à utiliser CSS, vous constaterez que l'exploitation de la puissance des feuilles de style vous donnera une flexibilité incroyable pour la mise en page et la définition des pages Web. En cours de route, vous accumulerez un "tas d’astuces" de styles et d’approches qui ont fonctionné pour vous dans le passé et vers lesquels vous pourrez à nouveau vous tourner lors de la création de nouvelles pages Web.
Article original de Jennifer Krynin. Édité par Jeremy Girard le 7/5/17
