CSS


CSS est l'abréviation anglaise de Cascading Style Sheets, qu’on peut traduire par « feuilles de style en cascade ». On introduit les CSS dans la conception des feuilles de style pour l'édition des sites web. CSS est un langage de balisage déclaratif avec lequel des documents HTML ainsi qu'une partie des informations en XML sont traités en fonction de la mise en page et de leur aspect visuel. CSS est défini comme référence vivante, car les définitions des langues qui s’y trouvent sont en développement permanent. Actuellement, CSS3 UI est le statut le plus récent mais de nombreuses ébauches individuelles, appelés working drafts, et modules sont en développement.

Informations générales

Les premières propositions de feuilles de style furent introduites entre 1993 et 1995. Hakon Wium Lie proposa en 1994 les premières feuilles de style en cascade. En parallèle, Bert Bos travaillait à un navigateur qui devait contrôler sa propre feuille de style (au niveau des langues). Lie présenta le CSS pour la première fois lors de la conférence « Mosaic and the Web » de 1994 à Chicago. Remarqué par Bos, ils s’associaient et se consacraient au développement du CSS. En décembre 1996, ils présentaient CSS 1, une proposition de normalisation supportée aujourd'hui complètement par presque tous les navigateurs.

CSS 2 fut annoncé dès mai 1998, mais cette norme n'a été totalement intégrée par aucun navigateur jusqu'à présent. L'assistance se limitait la plupart du temps aux parties techniques. CSS 2 se trouve en statut de correction depuis 2002 et les parties techniques qui ne sont pas intégrées par les navigateurs ont été supprimées. CSS 3 est en plein développement depuis 2000 et les dernières modifications apportées à CSS 2 ont été prises en compte. La conception modulaire de CSS 3 permet l'utilisation de parties techniques des CSS 1 et 2. CSS 3 est donc compatible avec les versions antérieures.

De nouvelles fonctionnalités, développées au sein des travaux de groupe du W3C, s'ajoutent régulièrement. Cette expérience s'est révélée judicieuse, particulièrement avec différents terminaux, différents langages de programmation et de scripts : dès que de nouvelles fonctionnalités étaient nécessaires suite à l'absence d'assistance, la communauté réagissait et se consacrait au développement. Les programmeurs ne tardaient pas à implémenter l'assistance. Il s'est passé la même chose avec les navigateurs et l'assistance de nouvelles versions HTML.

Dans le cadre du développement de nouveaux périphériques et appareils, les web designers ont dû faire le choix quant à certaines options spécifiques permettant de transformer la mise en page d'un site web. Par exemple, ce n’est pas logique de charger une bibliothèque jQuery si un site web est chargé à partir d'un smartphone. CSS 3 prévoit pour ces scénarios d'application de vastes solutions et des options de configuration modernes. Les effets, les media queries et d'autres propriétés CSS peuvent être sélectionnés de manière à ce qu'il n'y ait pas que la mise en page mais aussi son comportement sur chacun des terminaux qui puisse être défini.

Utilisation

En tant que langage de style, CSS définit l'apparence et le design des documents HTML. On y définit quelles typographies, couleurs marges et quels arrière-plans sont utilisés pour certains éléments HTML. Plus précisément, cela concerne :

  • les titres de premier ordre,
  • toutes les propriétés telles que la taille de la police,
  • la typographie, gras ou en italique,
  • les zones de texte, leur arrière-plan, la couleur du texte, etc.

CSS se limite donc au formatage ou à la mise en page. Les fonctions du HTML demeurent quant à elle dans la structuration même du contenu des sites web. Cette séparation du contenu et de la mise en page est déterminante pour beaucoup de langages de balisage ; elle permet la modification de l'apparence du contenu sans avoir à changer le contenu lui-même.

La conception d'un site Web avec CSS se fait avec des fichiers CSS qui seront référencés ou avec des commandes en ligne qui seront définies dans l’élément <style>, dans le header du code source. Cependant, il est recommandé d'écrire la mise en page séparément dans un fichier CSS à part. En effet, CSS peut créer différentes mises en page pour différents périphériques, tels que l'impression, la projection ou les écrans avec différentes résolutions. C’est quelque chose à prendre en compte quand on pense à la quantité de différents appareils. Une définition uniforme pour les différents périphériques de sortie permet ainsi d'optimiser la mise en page et le flux de texte pour un résultat optimal : le contenu peut être plus facilement lu.

Syntaxe des fichiers CSS

Les fichiers CSS sont appelés feuilles de style. Les règles sont la base d'une feuille de style traditionnelle. Chaque règle contient au moins un sélecteur et quelques accolades qui comportent des couples attribut-valeur. Ils forment ensemble des blocs de règles. S'y trouvent des propriétés suivies du double point, puis d'une valeur notée. La valeur peut être éventuellement terminée par un point-virgule. 

Exemple : un sélecteur se compose de : sélecteur { propriété:valeur; }

Le sélecteur sélectionne l'élément voulu tel qu'une zone de texte ou un titre. La propriété et la valeur définissent la présentation. On retrouve par exemple pour la police de caractères d'une zone de texte écrite en gras en TimesNewRoman : 

#Text01 { font:bold Times; }

Avec l'aide des sélecteurs, il est possible de référencer seules certains parties d'un document tout comme des groupes d'éléments. 

Sélecteur1, sélecteur2 { propriété:valeur; }

Les accolades comprenant les couples attribut-valeur sont des conditions liées au(x) sélecteur(s) : quand l'élément du code source de la page actuelle existe et doit être correctement affiché, cela doit être émis conformément aux propriétés et aux valeurs.

Sélecteurs

Il existe différents types de sélecteurs :

Les sélecteurs simples : le sélecteur universel * et le sélecteur de type élément en font partie. .class et #id ainsi que divers sélecteurs attributs sont des sélecteurs simples.

  • Les combinateurs lient plusieurs sélecteurs entre eux. À travers eux, il est possible de remarquer les liens d'héritage et de parenté.
  • Les pseudo-éléments sont des sélecteurs qui ne restent pas limités à un seul élément comme c'est le cas pour la plupart des sélecteurs simples. Avec ceux-ci, il est possible de formater la première lettre du paragraphe afin qu'elle soit particulièrement grande, comme pleins de journaux imprimés le font.
  • Les pseudo-classes sont des sélecteurs simples qui traitent un élément avec précision quand il remplit une propriété définie. Une distinction est faite entre les pseudo-classes structurelles et dynamiques. Les premières permettent de sélectionner des éléments définis dans les structures HTML. Les secondes prennent des éléments au hasard par rapport à l'interaction de l'utilisateur. L'effet hover en est un exemple.

S'ajoutent aux sélecteurs une multitude de propriétés qui comportent des typographies, des formatages, des justifications de textes et bien d'autres propriétés CSS. On recommande d’utiliser une référence courte afin d'avoir toutes les propriétés possibles à disponibilité.

Modèles de boîtes CSS et media queries

Une connaissance des modèles de boîtes CSS est nécessaire afin d'utiliser ces sélecteurs. Chaque site web est considéré comme une boîte définie par des propriétés spécifiques. Parmi les propriétés, on compte celles pour les quatre côtés de la boîte (en haut, à gauche, en bas, à droite) ainsi que les quatre commandes des marges, des bords et du remplissage. En principe, une mise en page définie par les positions et intervalles se caractérise avec ce genre de concept. La boîte CSS est ainsi une abstraite permettant de fixer une mise en page avec précision.

Un concept similaire est utilisé lors des demandes de renseignement des médias. Les demandes de renseignements des médias ont été lancées avec CSS 3. Ils extraient les propriétés des appareils et en font des contenus. Ainsi, la largeur et la hauteur des fenêtres du navigateur peuvent être extraites afin d'adapter le contenu à un navigateur mobile. La plupart du temps, les valeurs des pixels sont notées. Si les fenêtres du navigateur sont plus grandes que la normale, les propriétés précédentes prédéfinies par le web designer entrent en vigueur. Une généralisation des extractions peut être obtenue avec le viewport intégré dans le code source au moyen d'éléments méta. 

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
==Importance pour le SEO==

Les fichiers CSS doivent être si possible délocalisés, conformément à la séparation du contenu et de la mise en page, et ne plus se trouver dans le code source HTML. Cela reste cependant une suggestion, mais sur le fond d'un code source valide, c'est absolument censé, sans compter que la taille des fichiers impacte sur le temps de chargement d'un site Web et améliore l'expérience utilisateur. En outre, de très légers tests de scénarios peuvent être réalisés suite à une séparation claire du contenu et de la mise en page, puisque le contenu n'a pas à être modifié afin de tester différents designs ainsi que l'acceptation de l'utilisateur. À long terme, cette séparation fait gagner aux webmasters du temps, qu'ils peuvent investir ailleurs, comme dans la création de liens ou l'optimisation on-page.

Avec l'aide des CSS, les contenus peuvent être organisés de telle sorte qu'ils comportent des balisages sémantiques précis et qu'ils fonctionnent sur différents périphériques de sortie sans difficulté. Il est ainsi possible d'arriver à une structure HTML très claire, qui aura un effet sans doute positif sur le crawling et l'indexation par les moteurs de recherche. Prenons en exemple les menus CSS qui se passent de JavaScript. La plupart des moteurs de recherche encouragent une telle navigation.

En revanche, il existe certains hacks CSS à éviter : avec CSS, il ne faut cacher aucun contenu tel que du texte et des images, certains moteurs de recherche pouvant les considérer comme tentatives de dissimulation.

La multitude des appareils mobile demande aussi une clarification CSS nécessaire : il est possible que l'affichage de contenus soit problématique sur plusieurs terminaux si ces contenus CSS sont caractérisés d'une manière précise. Un utilisateur peut récupérer de tels contenus assez facilement, peu importe le navigateur utilisé par ce dernier.

Lien web

Récupérée de « https://fr.ryte.com/wiki/index.php?title=CSS&oldid=4603 »

Category