CSS

Pour l’utilisation de CSS sur Wikipedia, voir Help:Cascading Style Sheets .

Les feuilles de style en cascade ( CSS ) sont un langage de feuille de style utilisé pour décrire la présentation d’ un document écrit dans un langage de balisage tel que HTML . ^[1] CSS est une technologie fondamentale du World Wide Web , aux côtés de HTML et JavaScript . ^[2]

Feuilles de style en cascade (CSS)


Extension de nom de fichier	.css
Type de média Internet	texte/css
Identificateur de type uniforme (UTI)	public.css
Développé par	Consortium World Wide Web (W3C)
Première version	17 décembre 1996 ; il y a 25 ans ( 1996-12-17 )
Dernière version	CSS 2.1 : Niveau 2 Révision 1 12 avril 2016 ; Il y a 6 ans ( 2016-04-12 )
Type de format	Langage de la feuille de style
Conteneur pour	Règles de style pour les éléments HTML (balises)
Contenu par	Documents HTML
Format ouvert ?	Oui
Site Internet	www .w3 .org /TR /CSS / #css

CSS est conçu pour permettre la séparation de la présentation et du contenu, y compris la mise en page , les couleurs et les polices . ^[3] Cette séparation peut améliorer l’ accessibilité des contenus ; fournir plus de flexibilité et de contrôle dans la spécification des caractéristiques de présentation ; permettre à plusieurs pages Web de partager la mise en forme en spécifiant le CSS pertinent dans un fichier .css séparé, ce qui réduit la complexité et la répétition dans le contenu structurel ; et activer la mise en cache du fichier .css pour améliorer la vitesse de chargement des pages entre les pages qui partagent le fichier et sa mise en forme.

La séparation de la mise en forme et du contenu permet également de présenter la même page de balisage dans différents styles pour différentes méthodes de rendu, telles que l’écran, l’impression, la voix (via un navigateur vocal ou un lecteur d’écran ) et en braille. appareils tactiles. CSS a également des règles de formatage alternatif si le contenu est accessible sur un appareil mobile . ^[4]

Le nom en cascade provient du schéma de priorité spécifié pour déterminer quelle règle de style s’applique si plusieurs règles correspondent à un élément particulier. Ce schéma de priorité en cascade est prévisible.

Les spécifications CSS sont gérées par le World Wide Web Consortium (W3C). Le Type de média Internet ( type MIME ) text/cssest enregistré pour une utilisation avec CSS par RFC 2318 (mars 1998). Le W3C exploite un service de validation CSS gratuit pour les documents CSS. ^[5]

Outre HTML, d’autres langages de balisage prennent en charge l’utilisation de CSS, notamment XHTML , XML brut , SVG et XUL .

Syntaxe

CSS a une syntaxe simple et utilise un certain nombre de mots-clés anglais pour spécifier les noms de diverses propriétés de style.

Une feuille de style consiste en une liste de règles . Chaque règle ou ensemble de règles se compose d’un ou plusieurs sélecteurs et d’un bloc de déclaration .

Sélecteur

En CSS, les sélecteurs déclarent à quelle partie du balisage un style s’applique en faisant correspondre les balises et les attributs dans le balisage lui-même.

Les sélecteurs peuvent s’appliquer aux éléments suivants :

tous les éléments d’un type spécifique, par exemple les en-têtes de second niveau h2
éléments spécifiés par l’ attribut , notamment :
- id : un identifiant unique dans le document, identifié par un préfixe de hachage, par exemple#id
- classe : un identifiant qui peut annoter plusieurs éléments dans un document, identifié avec un préfixe de période par exemple.classname
éléments en fonction de la manière dont ils sont placés les uns par rapport aux autres dans l’ arborescence du document .

Les classes et les ID sont sensibles à la casse, commencent par des lettres et peuvent inclure des caractères alphanumériques, des traits d’union et des traits de soulignement. Une classe peut s’appliquer à n’importe quel nombre d’instances de n’importe quel élément. Un ID ne peut être appliqué qu’à un seul élément.

Les pseudo-classes sont utilisées dans les sélecteurs CSS pour permettre un formatage basé sur des informations qui ne sont pas contenues dans l’arborescence du document. Un exemple de pseudo-classe largement utilisée est , qui identifie le contenu uniquement lorsque l’utilisateur « pointe vers » l’élément visible, généralement en maintenant le curseur de la souris dessus. Il est ajouté à un sélecteur comme dans ou . Une pseudo-classe classifie les éléments du document, tels que ou , tandis qu’un pseudo-élément effectue une sélection qui peut être constituée d’éléments partiels, tels que ou . ^[6]:hovera:hover#elementid:hover:link:visited::first-line::first-letter

Les sélecteurs peuvent être combinés de plusieurs manières pour obtenir une grande spécificité et flexibilité. ^[7] Plusieurs sélecteurs peuvent être joints dans une liste espacée pour spécifier les éléments par emplacement, type d’élément, identifiant, classe ou toute combinaison de ceux-ci. L’ordre des sélecteurs est important. Par exemple, s’applique à tous les éléments de la classe myClass qui se trouvent à l’intérieur des éléments div, tandis que s’applique à tous les éléments div qui se trouvent à l’intérieur des éléments de la classe myClass. Cela ne doit pas être confondu avec les identifiants concaténés tels que ceux qui s’appliquent aux éléments div de la classe myClass.div .myClass {color: red;}.myClass div {color: red;}div.myClass {color: red;}

Le tableau suivant fournit un résumé de la syntaxe du sélecteur indiquant l’utilisation et la version de CSS qui l’a introduit. ^[8]

Modèle	Allumettes	D’abord défini au niveau CSS
E	un élément de type E	1
E:link	un élément E est l’ancre source d’un lien hypertexte dont la cible n’est pas encore visitée (:link) ou déjà visitée (:visited)	1
E:active	un élément E lors de certaines actions de l’utilisateur	1
E::first-line	la première ligne formatée d’un élément E	1
E::first-letter	la première lettre formatée d’un élément E	1
.c	tous les éléments avec class=”c”	1
#myid	l’élément avec id=”myid”	1
E.warning	un élément E dont la classe est “avertissement” (le langage du document spécifie comment la classe est déterminée)	1
E#myid	un élément E avec ID égal à “myid”	1
.c#myid	l’élément avec class=”c” et ID égal à “myid”	1
E F	un élément F descendant d’un élément E	1
*	n’importe quel élément	2
E[foo]	un élément E avec un attribut “foo”	2
E[foo=”bar”]	un élément E dont la valeur d’attribut “foo” est exactement égale à “bar”	2
E[foo~=”bar”]	un élément E dont la valeur d’attribut “foo” est une liste de valeurs séparées par des espaces, dont l’une est exactement égale à “bar”	2
E[foo\|=”en”]	un élément E dont l’attribut “foo” a une liste de valeurs séparées par des tirets commençant (à partir de la gauche) par “en”	2
E:first-child	un élément E, premier enfant de son parent	2
E:lang(fr)	un élément de type E en langue “fr” (la langue du document précise comment la langue est déterminée)	2
E::before	contenu généré avant le contenu d’un élément E	2
E::after	contenu généré après le contenu d’un élément E	2
E > F	un élément F enfant d’un élément E	2
E + F	un élément F immédiatement précédé d’un élément E	2
E[foo^=”bar”]	un élément E dont la valeur d’attribut “foo” commence exactement par la chaîne “bar”	3
E[foo$=”bar”]	un élément E dont la valeur d’attribut “foo” se termine exactement par la chaîne “bar”	3
E[foo*=”bar”]	un élément E dont la valeur d’attribut “foo” contient la sous-chaîne “bar”	3
E:root	un élément E, racine du document	3
E:nth-child(n)	un élément E, le n-ième enfant de son parent	3
E:nth-last-child(n)	un élément E, le n-ième enfant de son parent, à partir du dernier	3
E:nth-of-type(n)	un élément E, le n-ième frère de son type	3
E:nth-last-of-type(n)	un élément E, le n-ième frère de son type, à partir du dernier	3
E:last-child	un élément E, dernier enfant de son parent	3
E:first-of-type	un élément E, premier frère de son type	3
E:last-of-type	un élément E, dernier frère de son type	3
E:only-child	un élément E, fils unique de son parent	3
E:only-of-type	un élément E, seul frère de son type	3
E:empty	un élément E qui n’a pas d’enfants (y compris les nœuds de texte)	3
E:target	un élément E étant la cible de l’URI référent	3
E:enabled	un élément d’interface utilisateur E qui est activé	3
E:disabled	un élément d’interface utilisateur E qui est désactivé	3
E:checked	un élément d’interface utilisateur E qui est coché (par exemple un bouton radio ou une case à cocher)	3
E:not(s)	un élément E qui ne correspond pas au sélecteur simple s	3
E ~ F	un élément F précédé d’un élément E	3

Bloc de déclaration

Un bloc de déclaration consiste en une liste de déclarations entre accolades. Chaque déclaration elle-même se compose d’une propriété , de deux-points ( 🙂 et d’une valeur . S’il y a plusieurs déclarations dans un bloc, un point-virgule ( 😉 doit être inséré pour séparer chaque déclaration. Un point-virgule facultatif après la dernière (ou unique) déclaration peut être utilisé. ^[9]

Les propriétés sont spécifiées dans la norme CSS. Chaque propriété a un ensemble de valeurs possibles. Certaines propriétés peuvent affecter n’importe quel type d’élément, et d’autres ne s’appliquent qu’à des groupes particuliers d’éléments. ^{[10] [11]}

Les valeurs peuvent être des mots-clés, tels que “center” ou “inherit”, ou des valeurs numériques, telles que 200px(200 pixels), 50vw(50 % de la largeur de la fenêtre d’affichage) ou 80 % (80 % de la largeur de l’élément parent). Les valeurs de couleur peuvent être spécifiées avec des mots clés (par exemple ” “), des valeurs hexadécimales (par exemple , également abrégées en ), des valeurs RVB sur une échelle de 0 à 255 (par exemple ), des valeurs RVBA qui spécifient à la fois la couleur et la transparence alpha (par exemple ) ou HSL ou des valeurs HSLA (par exemple , ). ^[12]red#FF0000#F00rgb(255, 0, 0)rgba(255, 0, 0, 0.8)hsl(000, 100%, 50%)hsla(000, 100%, 50%, 80%)

Unités de longueur

Les valeurs numériques non nulles représentant des mesures linéaires doivent inclure une unité de longueur, qui est soit un code alphabétique, soit une abréviation, comme dans 200pxou 50vw; ou un signe de pourcentage, comme dans 80%. Certaines unités – cm( centimètre ); in( pouce ); mm( millimètre ); pc( pica ); et pt( point ) – sont absolus , ce qui signifie que la dimension rendue ne dépend pas de la structure de la page ; autres – em( em ); ex( ex ) et px( pixel ) ^{[ clarification nécessaire ]} – sontrelative , ce qui signifie que des facteurs tels que la taille de la police d’un élément parent peuvent affecter la mesure rendue. Ces huit unités étaient une caractéristique de CSS 1 ^[13] et conservées dans toutes les révisions ultérieures. Le niveau 3 du module CSS Values and Units proposé fournira, s’il est adopté en tant que recommandation du W3C, sept unités de longueur supplémentaires :ch ; Q; rem; vh; vmax; vmin; et vw. ^[14]

Utiliser

Avant CSS, presque tous les attributs de présentation des documents HTML étaient contenus dans le balisage HTML. Toutes les couleurs de police, les styles d’arrière-plan, les alignements d’éléments, les bordures et les tailles devaient être explicitement décrits, souvent à plusieurs reprises, dans le code HTML. CSS permet aux auteurs de déplacer une grande partie de ces informations vers un autre fichier, la feuille de style, ce qui se traduit par un code HTML considérablement plus simple.

Par exemple, les titres ( h1éléments), les sous-titres ( h2), les sous-sous-titres ( h3), etc., sont définis structurellement à l’aide de HTML. À l’impression et à l’écran, le choix de la police , de la taille , de la couleur et de la mise en valeur de ces éléments relève de la présentation .

Avant CSS, les auteurs de documents qui souhaitaient attribuer de telles caractéristiques typographiques à, par exemple, tous les h2titres devaient répéter le balisage de présentation HTML pour chaque occurrence de ce type de titre. Cela rendait les documents plus complexes, plus volumineux, plus sujets aux erreurs et difficiles à maintenir. CSS permet de séparer la présentation de la structure. CSS peut définir la couleur, la police, l’alignement du texte, la taille, les bordures, l’espacement, la mise en page et de nombreuses autres caractéristiques typographiques, et peut le faire indépendamment pour les vues à l’écran et imprimées. CSS définit également des styles non visuels, tels que la vitesse de lecture et l’accentuation pour les lecteurs de texte auditifs. Le W3C a désormais déconseillé l’utilisation de tout balisage HTML de présentation. ^[15]

Par exemple, sous HTML pré-CSS, un élément d’en-tête défini avec du texte rouge s’écrirait comme suit :

< h1 >< font color = “red” > Chapitre 1. </ font ></ h1 >

En utilisant CSS, le même élément peut être codé en utilisant des propriétés de style au lieu d’attributs de présentation HTML :

< h1 style = “couleur : rouge ;” > Chapitre 1. </ h1 >

Les avantages de cela ne sont peut-être pas immédiatement clairs, mais la puissance de CSS devient plus évidente lorsque les propriétés de style sont placées dans un élément de style interne ou, mieux encore, dans un fichier CSS externe. Par exemple, supposons que le document contienne l’élément style :

< style > h1 { couleur : rouge ; } </ style >

Tous les h1éléments du document deviendront alors automatiquement rouges sans nécessiter de code explicite. Si l’auteur voulait plus tard rendre h1les éléments bleus à la place, cela pourrait être fait en changeant l’élément de style en :

< style > h1 { couleur : bleu ; } </ style >

plutôt que de parcourir laborieusement le document et de changer la couleur de chaque h1élément individuel.

Les styles peuvent également être placés dans un fichier CSS externe, comme décrit ci-dessous, et chargés à l’aide d’une syntaxe similaire à :

< link href = “path/to/file.css” rel = “stylesheet” type = “text/css” >

Cela découple davantage le style du document HTML et permet de restyler plusieurs documents en éditant simplement un fichier CSS externe partagé.

Sources

Les informations CSS peuvent provenir de diverses sources. Ces sources peuvent être le navigateur Web, l’utilisateur et l’auteur. Les informations de l’auteur peuvent être classées en ligne, type de média, importance, spécificité du sélecteur, ordre des règles, héritage et définition de propriété. Les informations de style CSS peuvent se trouver dans un document séparé ou être intégrées dans un document HTML. Plusieurs feuilles de style peuvent être importées. Différents styles peuvent être appliqués en fonction du périphérique de sortie utilisé ; par exemple, la version écran peut être très différente de la version imprimée, de sorte que les auteurs peuvent adapter la présentation de manière appropriée pour chaque support.

La feuille de style avec la priorité la plus élevée contrôle l’affichage du contenu. Les déclarations non définies dans la source de priorité la plus élevée sont transmises à une source de priorité inférieure, telle que le style de l’agent utilisateur. Le processus est appelé cascade .

L’un des objectifs de CSS est de permettre aux utilisateurs de mieux contrôler la présentation. Quelqu’un qui trouve les titres en italique rouge difficiles à lire peut appliquer une feuille de style différente. Selon le navigateur et le site Web, un utilisateur peut choisir parmi diverses feuilles de style fournies par les concepteurs, ou peut supprimer tous les styles ajoutés et afficher le site en utilisant le style par défaut du navigateur, ou peut remplacer uniquement le style de titre italique rouge sans modifier les autres les attributs.

Schéma de priorité CSS (du plus élevé au plus bas)

Priorité	Type de source CSS	La description
1	Importance	L’ annotation ” ” remplace les types de priorité précédents!important
2	En ligne	Un style appliqué à un élément HTML via l’attribut “style” HTML
3	Type de support	Une définition de propriété s’applique à tous les types de média, sauf si un CSS spécifique au média est défini
4	Défini par l’utilisateur	La plupart des navigateurs ont la fonction d’accessibilité : un CSS défini par l’utilisateur
5	Spécificité du sélecteur	Un sélecteur contextuel spécifique ( ) écrase la définition générique#heading p
6	Ordre des règles	La dernière déclaration de règle a une priorité plus élevée
7	Héritage des parents	Si une propriété n’est pas spécifiée, elle est héritée d’un élément parent
8	Définition de la propriété CSS dans le document HTML	La règle CSS ou le style en ligne CSS remplace une valeur de navigateur par défaut
9	Navigateur par défaut	La priorité la plus basse : la valeur par défaut du navigateur est déterminée par les spécifications de valeur initiale du W3C

Spécificité

La spécificité fait référence aux poids relatifs des diverses règles. ^[16] Il détermine quels styles s’appliquent à un élément lorsque plusieurs règles peuvent s’appliquer. Sur la base des spécifications, un sélecteur simple (par exemple H1) a une spécificité de 1, les sélecteurs de classe ont une spécificité de 1,0 et les sélecteurs ID une spécificité de 1,0,0. Parce que les valeurs de spécificité ne sont pas reportées comme dans le système décimal, des virgules sont utilisées pour séparer les “chiffres” ^[17] (une règle CSS ayant 11 éléments et 11 classes aurait une spécificité de 11,11, pas 121).

Ainsi, les sélecteurs de règles suivants aboutissent à la spécificité indiquée :

Sélecteurs	Spécificité
h1 {color: white;}	0, 0, 0, 1
p em {color: green;}	0, 0, 0, 2
.grape {color: red;}	0, 0, 1, 0
p.bright {color: blue;}	0, 0, 1, 1
p.bright em.dark {color: yellow;}	0, 0, 2, 2
#id218 {color: brown;}	0, 1, 0, 0
style=” “	1, 0, 0, 0

Exemples

Considérez ce fragment HTML :

<!DOCTYPE html> < html > < head > < meta charset = “utf-8” > < style > # xyz { color : blue ; } </ style > </ head > < body > < p id = “xyz” style = “couleur : vert ;” > Pour démontrer la spécificité </ p > </ body > <

Dans l’exemple ci-dessus, la déclaration dans l’ styleattribut remplace celle dans l’ <style>élément car elle a une spécificité plus élevée, et donc, le paragraphe apparaît en vert :

Pour démontrer la spécificité

Héritage

L’héritage est une fonctionnalité clé de CSS ; il s’appuie sur la relation ancêtre-descendant pour fonctionner. L’héritage est le mécanisme par lequel les propriétés sont appliquées non seulement à un élément spécifié, mais également à ses descendants. ^[16] L’héritage repose sur l’arborescence du document, qui est la hiérarchie de XHTMLéléments d’une page basés sur l’imbrication. Les éléments descendants peuvent hériter des valeurs de propriété CSS de tout élément ancêtre les entourant. En général, les éléments descendants héritent des propriétés liées au texte, mais leurs propriétés liées à la boîte ne sont pas héritées. Les propriétés pouvant être héritées sont la couleur, la police, l’espacement des lettres, la hauteur de ligne, le style de liste, l’alignement du texte, l’indentation du texte, la transformation du texte, la visibilité, l’espace blanc et l’espacement des mots. Les propriétés qui ne peuvent pas être héritées sont background, border, display, float et clear, height et width, margin, min- et max-height and -width, outline, overflow, padding, position, text-decoration, vertical-align et z -indice.

L’héritage peut être utilisé pour éviter de déclarer certaines propriétés encore et encore dans une feuille de style, ce qui permet un CSS plus court.

L’héritage en CSS n’est pas la même chose que l’ héritage dans les langages de programmation basés sur les classes , où il est possible de définir la classe B comme “comme la classe A, mais avec des modifications”. ^[18] Avec CSS, il est possible de styliser un élément avec “classe A, mais avec des modifications”. Cependant, il n’est pas possible de définir une classe CSS B comme celle-là, qui pourrait ensuite être utilisée pour styliser plusieurs éléments sans avoir à répéter les modifications.

Exemple

Soit la feuille de style suivante :

p { couleur : rose ; }

Supposons qu’il y ait un élément ap avec un élément accentuant (<em>) à l’intérieur :

< p > C’est pour < em > illustrer </ em > l’ héritage </ p >

Si aucune couleur n’est assignée à l’élément em, le mot souligné “illustrate” hérite de la couleur de l’élément parent, p. La feuille de style p a la couleur rose, donc l’élément em est également rose :

C’est pour illustrer l’ héritage

Espace blanc

Les espaces entre les propriétés et les sélecteurs sont ignorés. Cet extrait de code :

corps { overflow : caché ; fond : #000000 ; image de fond : url ( images/bg.gif ); background-repeat : no-repeat ; background-position : en haut à gauche ;}

est fonctionnellement équivalent à celui-ci :

corps { overflow : caché ; couleur de fond : #000000 ; image de fond : url ( images/bg.gif ); background-repeat : no-repeat ; background-position : en haut à gauche ; }

Une façon courante de formater CSS pour la lisibilité consiste à mettre en retrait chaque propriété et à lui donner sa propre ligne. En plus du formatage CSS pour la lisibilité, les propriétés abrégées peuvent être utilisées pour écrire le code plus rapidement, qui est également traité plus rapidement lors du rendu : ^[19]

corps { overflow : caché ; background : #000 url ( images/bg.gif ) no-repeat left top ; }

Parfois, plusieurs valeurs de propriété sont en retrait sur leur propre ligne :

@ font-face { font-family : ‘Comic Sans’ font-size : 20px src : url ( ‘first.example.com’ ), url ( ‘second.example.com’ ), url ( ‘third.example.com ‘ ), url ( ‘quatrième.exemple.com’ ), }

Positionnement

CSS 2.1 définit trois schémas de positionnement :

Learn more.

URL

Jul 5, 2022

URL

Jun 21, 2022

Société des critiques de films en ligne

Jun 15, 2022

Société des critiques de films en ligne

Jun 3, 2022

Débit normal Les éléments en ligne sont disposés de la même manière que les lettres des mots dans le texte, les uns après les autres dans l’espace disponible jusqu’à ce qu’il n’y ait plus de place, puis en commençant une nouvelle ligne en dessous. Les éléments de bloc s’empilent verticalement, comme les paragraphes et comme les éléments d’une liste à puces. Le flux normal inclut également le positionnement relatif des éléments en bloc ou en ligne et les zones de rodage. Flotteurs Un élément flottant est sorti du flux normal et décalé vers la gauche ou la droite aussi loin que possible dans l’espace disponible. L’autre contenu coule ensuite à côté de l’élément flottant. Positionnement absolu Un élément en position absolue n’a pas sa place et n’a aucun effet sur le flux normal des autres éléments. Il occupe sa position assignée dans son conteneur indépendamment des autres éléments. ^[20] Propriété de poste

Il y a cinq valeurs possibles de la positionpropriété. Si un élément est positionné d’une manière autre que static, les autres propriétés top, bottom, leftet rightsont utilisées pour spécifier les décalages et les positions. L’élément ayant une position statique n’est pas affecté par les propriétés top, bottom, leftou right.

Statique La valeur par défaut place l’élément dans le flux normal Relatif L’élément est placé dans le flux normal , puis décalé ou décalé à partir de cette position. Les éléments de flux suivants sont disposés comme si l’élément n’avait pas été déplacé. Absolu Spécifie le positionnement absolu . L’élément est positionné par rapport à son ancêtre non statique le plus proche. Fixé L’élément est absolument positionné dans une position fixe sur l’écran même lorsque le reste du document défile ^[20] Flotte et dégage

La floatpropriété peut avoir l’une des trois valeurs. Les éléments absolument positionnés ou fixes ne peuvent pas être flottants. D’autres éléments circulent normalement autour des éléments flottants, à moins qu’ils n’en soient empêchés par leur clearpropriété.

la gauche L’élément flotte à gauche de la ligne dans laquelle il aurait dû apparaître ; d’autres éléments peuvent circuler autour de son côté droit. à droite L’élément flotte à droite de la ligne dans laquelle il aurait dû apparaître ; d’autres éléments peuvent circuler autour de son côté gauche. dégager Force l’élément à apparaître sous (‘effacer’) les éléments flottants à gauche ( ), à droite ( ) ou des deux côtés ( ). ^{[20] [21]}clear:leftclear:rightclear:both

Histoire

Håkon Wium Lie , directeur technique de la société Opera Software et co-créateur des standards Web CSS

CSS a été proposé pour la première fois par Håkon Wium Lie le 10 octobre 1994. ^[22] À l’époque, Lie travaillait avec Tim Berners-Lee au CERN . ^[23] Plusieurs autres langages de feuilles de style pour le Web ont été proposés à peu près au même moment, et des discussions sur les listes de diffusion publiques et au sein du World Wide Web Consortium ont abouti à la publication de la première recommandation CSS du W3C (CSS1) ^[24] en 1996. En particulier , une proposition de Bert Bos était influente ; il est devenu co-auteur de CSS1, et est considéré comme co-créateur de CSS. ^[25]

Les feuilles de style existent sous une forme ou une autre depuis les débuts du langage de balisage généralisé standard ( SGML ) dans les années 1980, et CSS a été développé pour fournir des feuilles de style pour le Web. ^[26] Une exigence pour un langage de feuille de style Web était que les feuilles de style proviennent de différentes sources sur le Web. Par conséquent, les langages de feuille de style existants tels que DSSSL et FOSI n’étaient pas adaptés. CSS, d’autre part, laisse le style d’un document être influencé par plusieurs feuilles de style au moyen de styles “en cascade”. ^[26]

Au fur et à mesure que le HTML s’est développé, il en est venu à englober une plus grande variété de capacités stylistiques pour répondre aux demandes des développeurs Web . Cette évolution a donné au concepteur plus de contrôle sur l’apparence du site, au prix d’un code HTML plus complexe. Les variations dans les implémentations des navigateurs Web , telles que ViolaWWW et WorldWideWeb , ^[27] ont rendu difficile l’apparence cohérente du site et les utilisateurs avaient moins de contrôle sur la façon dont le contenu Web était affiché. Le navigateur/éditeur développé par Tim Berners-Lee avait des feuilles de style codées en dur dans le programme. Les feuilles de style ne pouvaient donc pas être liées à des documents sur le Web. ^[23] Robert Cailliau, également du CERN, souhaitait séparer la structure de la présentation afin que différentes feuilles de style puissent décrire différentes présentations pour l’impression, les présentations à l’écran et les éditeurs. ^[27]

L’amélioration des capacités de présentation Web était un sujet d’intérêt pour de nombreux membres de la communauté Web et neuf langages de feuilles de style différents ont été proposés sur la liste de diffusion de style www. ^[26] Parmi ces neuf propositions, deux ont été particulièrement influentes sur ce qui est devenu CSS : les feuilles de style HTML en cascade ^[22] et la proposition de feuille de style basée sur le flux (SSP). ^{[25] [28]} Deux navigateurs ont servi de bancs d’essai pour les propositions initiales ; Lie a travaillé avec Yves Lafon pour implémenter CSS dans le navigateur Arena de Dave Raggett . ^{[29] [30] [31]} Bert Bos a implémenté sa propre proposition SSP dans le navigateur Argo . ^[25]Par la suite, Lie et Bos ont travaillé ensemble pour développer la norme CSS (le ‘H’ a été supprimé du nom car ces feuilles de style pouvaient également être appliquées à d’autres langages de balisage en plus de HTML). ^[23]

La proposition de Lie a été présentée à la conférence ” Mosaic and the Web ” (plus tard appelée WWW2) à Chicago, Illinois en 1994, et de nouveau avec Bert Bos en 1995. ^[23] À cette époque, le W3C était déjà en cours d’établissement et s’est intéressé dans le développement de CSS. Il a organisé un atelier à cette fin présidé par Steven Pemberton . Cela a conduit le W3C à ajouter des travaux sur CSS aux livrables du comité de révision éditoriale HTML (ERB). Lie et Bos étaient le personnel technique principal sur cet aspect du projet, avec des membres supplémentaires, dont Thomas Reardon de Microsoft, participant également. En août 1996, Netscape Communication Corporation a présenté un langage de feuille de style alternatif appeléFeuilles de style JavaScript (JSSS). ^[23] La spécification n’a jamais été terminée et est obsolète. ^[32] À la fin de 1996, le CSS était prêt à devenir officiel et la recommandation de niveau 1 du CSS a été publiée en décembre.

Le développement du HTML, du CSS et du DOM s’est déroulé dans un seul groupe, le HTML Editorial Review Board (ERB). Au début de 1997, l’ERB a été divisé en trois groupes de travail : le Groupe de travail HTML , présidé par Dan Connolly du W3C ; Groupe de travail DOM, présidé par Lauren Wood de SoftQuad ; et le Groupe de travail CSS , présidé par Chris Lilley du W3C.

Le Groupe de travail CSS a commencé à s’attaquer aux problèmes qui n’avaient pas été résolus avec le niveau 1 de CSS, ce qui a abouti à la création du niveau 2 de CSS le 4 novembre 1997. Il a été publié en tant que recommandation du W3C le 12 mai 1998. Le niveau 3 de CSS, qui était commencé en 1998, est toujours en cours de développement à partir de 2014.

En 2005, les groupes de travail du CSS ont décidé d’appliquer plus strictement les exigences des normes. Cela signifie que les normes déjà publiées telles que CSS 2.1, les sélecteurs CSS 3 et le texte CSS 3 ont été retirées du niveau de la recommandation candidate au niveau de l’ébauche de travail.

Difficulté d’adoption

Apprendre encore plus Cette rubrique doit être mise à jour . ( janvier 2019 ) Please help update this article to reflect recent events or newly available information.

La spécification CSS 1 a été achevée en 1996. Internet Explorer 3 ^[23] de Microsoft est sorti cette année-là, avec un support limité pour CSS. IE 4 et Netscape 4.x ont ajouté plus de support, mais il était généralement incomplet et comportait de nombreux bogues qui empêchaient l’adoption utile de CSS. Il a fallu plus de trois ans avant qu’un navigateur Web n’atteigne la mise en œuvre quasi complète de la spécification. Internet Explorer 5.0 pour Macintosh , livré en mars 2000, a été le premier navigateur à avoir une prise en charge complète (plus de 99 %) de CSS 1, ^[33] surpassant Opera, qui était le leader depuis l’introduction du support CSS quinze mois plus tôt. D’autres navigateurs ont suivi peu de temps après, et beaucoup d’entre eux ont également implémenté des parties de CSS 2. ^{[ citation nécessaire ]}

Cependant, même lorsque les navigateurs Web ultérieurs de la “version 5” ont commencé à offrir une implémentation assez complète de CSS, ils étaient toujours incorrects dans certains domaines et étaient pleins d’incohérences, de bogues et d’autres bizarreries . Microsoft Internet Explorer 5.x pour Windows , par opposition au très différent IE pour Macintosh , avait une implémentation défectueuse du « modèle de boîte CSS », par rapport aux normes CSS. De telles incohérences et variations dans la prise en charge des fonctionnalités ont rendu difficile pour les concepteurs d’obtenir une apparence cohérente entre les navigateurs et les plates -formes sans l’utilisation de solutions de contournement appelées hacks et filtres CSS . Les bogues du modèle de boîte IE/Windows étaient si graves que, lorsqueInternet Explorer 6 est sorti, Microsoft a introduit un mode rétro-compatible d’interprétation CSS (‘ quirks mode ‘) ainsi qu’un ‘mode standard’ alternatif corrigé. D’autres navigateurs non Microsoft fournissaient également une telle capacité de comportement de changement de «mode». Il est donc devenu nécessaire pour les auteurs de fichiers HTML de s’assurer qu’ils contenaient un marqueur distinctif spécial « CSS conforme aux normes prévu » pour montrer que les auteurs voulaient que le CSS soit interprété correctement, conformément aux normes, au lieu d’être destiné au désormais long- navigateur obsolète IE5/Windows. Sans ce marqueur, les navigateurs Web dotés de la capacité de basculement en « mode Quirks » dimensionneront les objets dans les pages Web comme le ferait IE5/Windows plutôt que de suivre les normes CSS. ^{[ citation nécessaire ]}

Des problèmes d’adoption inégale de CSS, ainsi que des errata dans la spécification d’origine, ont conduit le W3C à réviser la norme CSS 2 en CSS 2.1, qui s’est rapprochée d’un instantané fonctionnel de la prise en charge CSS actuelle dans les navigateurs HTML. Certaines propriétés CSS 2 qu’aucun navigateur n’a implémentées avec succès ont été supprimées et, dans quelques cas, des comportements définis ont été modifiés pour aligner la norme sur les implémentations existantes prédominantes. CSS 2.1 est devenu une recommandation candidate le 25 février 2004, mais CSS 2.1 a été ramené au statut de projet de travail le 13 juin 2005 ^[34] et n’est revenu au statut de recommandation candidate que le 19 juillet 2007 ^[35].

En plus de ces problèmes, l’ .cssextension était utilisée par un produit logiciel utilisé pour convertir des fichiers PowerPoint en fichiers de diaporama compacts ^[36] , de sorte que certains serveurs Web servaient tous .css^[37] en tant que type MIME application/x-pointplus^[38] plutôt que text/css.

Préfixes de fournisseur

Les fournisseurs de navigateurs individuels ont parfois introduit de nouveaux paramètres avant la normalisation et l’universalisation. Pour éviter d’interférer avec les futures implémentations, les fournisseurs ont ajouté des noms uniques aux paramètres, comme -moz-pour Mozilla Firefox , -webkit-nommé d’après le moteur de navigation d’ Apple Safari , -o-pour Opera Browser et -ms-pour Microsoft Internet Explorer .

Parfois, les paramètres avec préfixe de fournisseur tels que -moz-radial-gradientet -webkit-linear-gradientont une syntaxe légèrement différente par rapport à leurs homologues sans préfixe de fournisseur. ^[39]

Les propriétés préfixées sont rendues obsolètes au moment de la normalisation. Des programmes sont disponibles pour ajouter automatiquement des préfixes pour les anciens navigateurs et pour indiquer les versions standardisées des paramètres préfixés. Étant donné que les préfixes sont limités à un petit sous-ensemble de navigateurs, la suppression du préfixe permet aux autres navigateurs de voir la fonctionnalité. Une exception concerne certaines -webkit-propriétés préfixées obsolètes, qui sont si courantes et persistantes sur le Web que d’autres familles de navigateurs ont décidé de les prendre en charge pour des raisons de compatibilité. ^[40]

Variantes

CSS a différents niveaux et profils. Chaque niveau de CSS s’appuie sur le dernier, ajoutant généralement de nouvelles fonctionnalités et généralement désigné ^{[ citation nécessaire ]} comme CSS 1, CSS 2, CSS 3 et CSS 4. Les profils sont généralement un sous-ensemble d’un ou plusieurs niveaux de CSS construits pour un particulier l’appareil ou l’interface utilisateur. Il existe actuellement des profils pour les appareils mobiles, les imprimantes et les téléviseurs. Les profils ne doivent pas être confondus avec les types de médias, qui ont été ajoutés dans CSS 2.

CSS 1

La première spécification CSS à devenir une recommandation officielle du W3C est CSS niveau 1, publiée le 17 décembre 1996. Håkon Wium Lie et Bert Bos sont reconnus comme les développeurs originaux. ^{[41] [42]} Parmi ses capacités figurent la prise en charge de

Propriétés de la police telles que la police et l’emphase
Couleur du texte, des arrière-plans et d’autres éléments
Attributs de texte tels que l’espacement entre les mots, les lettres et les lignes de texte
Alignement du texte, des images, des tableaux et d’autres éléments
Marge, bordure, remplissage et positionnement pour la plupart des éléments
Identification unique et classification générique des groupes d’attributs

Le W3C ne maintient plus la recommandation CSS 1. ^[43]

CSS 2

La spécification CSS de niveau 2 a été développée par le W3C et publiée sous forme de recommandation en mai 1998. Un sur-ensemble de CSS 1, CSS 2 inclut un certain nombre de nouvelles fonctionnalités telles que le positionnement absolu, relatif et fixe des éléments et z-index , le concept de types de médias, prise en charge des feuilles de style sonores (qui ont ensuite été remplacées par les modules de parole CSS 3) ^[44] et du texte bidirectionnel, et de nouvelles propriétés de police telles que les ombres.

Le W3C ne maintient plus la recommandation CSS 2. ^[45]

CSS 2.1

CSS niveau 2 révision 1, souvent appelée “CSS 2.1”, corrige des erreurs dans CSS 2, supprime les fonctionnalités mal prises en charge ou pas entièrement interopérables et ajoute des extensions de navigateur déjà implémentées à la spécification. Pour se conformer au processus W3C de normalisation des spécifications techniques, CSS 2.1 a fait des allers-retours entre le statut de projet de travail et le statut de recommandation candidate pendant de nombreuses années. CSS 2.1 est devenu pour la première fois une recommandation candidate le 25 février 2004, mais il est redevenu un projet de travail le 13 juin 2005 pour un examen plus approfondi. Il est revenu à la recommandation du candidat le 19 juillet 2007, puis mis à jour deux fois en 2009. Cependant, comme des modifications et des clarifications ont été apportées, il est de nouveau revenu à l’ébauche de travail du dernier appel le 7 décembre 2010.

CSS 2.1 est allé à la recommandation proposée le 12 avril 2011. ^[46] Après avoir été examiné par le comité consultatif du W3C, il a finalement été publié en tant que recommandation du W3C le 7 juin 2011. ^[47]

CSS 2.1 était prévu comme la première et dernière révision du niveau 2, mais les travaux de faible priorité sur CSS 2.2 ont commencé en 2015.

CSS 3

Contrairement à CSS 2, qui est une grande spécification unique définissant diverses fonctionnalités, CSS 3 est divisé en plusieurs documents distincts appelés “modules”. Chaque module ajoute de nouvelles fonctionnalités ou étend les fonctionnalités définies dans CSS 2, en préservant la rétrocompatibilité. Les travaux sur CSS niveau 3 ont commencé au moment de la publication de la recommandation originale CSS 2. Les premières ébauches de CSS 3 ont été publiées en juin 1999. ^[48]

En raison de la modularisation, différents modules ont une stabilité et des statuts différents. ^[49]

Certains modules ont le statut de recommandation candidate ( CR ) et sont considérés comme modérément stables. Au stade CR , il est conseillé aux implémentations de supprimer les préfixes de fournisseur. ^[50]

Résumé des principaux modules-spécifications ^[51]

Module	Titre de la spécification	Statut	Date
Apprendre encore plus Cet article doit être mis à jour . ( janvier 2021 ) Please help update this article to reflect recent events or newly available information.
arrière-plan css3	Module Arrière-plans et bordures CSS niveau 3	Candidat Rec.	Déc 2020
boîte CSS3	CSS CSS Box Modèle Module Niveau 3	Candidat Rec.	Déc 2020
css-cascade-3	CSS en cascade et héritage niveau 3	Recommandation	février 2021
css3-couleur	Module de couleur CSS niveau 3	Recommandation	juin 2018
contenu CSS3	Module de contenu généré CSS niveau 3	Brouillon de travail 2	août 2019
css-polices-3	Module de polices CSS niveau 3	Recommandation	Septembre 2018
css3-gcpm	Contenu généré par CSS pour le module multimédia paginé	Brouillon de travail	Mai 2014
mise en page css3	Module de mise en page du modèle CSS	Noter	mars 2015
css3-mediaqueries	Requêtes multimédias	Recommandation	juin 2012
mediaqueries-4	Requêtes média niveau 4	Candidat Rec.	juil. 2020
css3-multicol	Module de mise en page multi-colonnes niveau 1	Brouillon de travail	février 2021
css3-page	Module multimédia paginé CSS niveau 3	Brouillon de travail et partie migrée vers css3-break	octobre 2018
rupture css3	Module de fragmentation CSS niveau 3	Candidat Rec.	Déc 2018
sélecteurs-3	Sélecteurs Niveau 3	Recommandation	novembre 2018
sélecteurs-4	Sélecteurs Niveau 4	Brouillon de travail	novembre 2018
css3-ui	Module d’interface utilisateur de base CSS niveau 3 (CSS3 UI)	Recommandation	juin 2018

CSS 4 Jen Simmons discute de l’état du CSS en 2019, alors que plusieurs modules CSS 4 étaient en cours de développement

Il n’y a pas de spécification CSS4 unique et intégrée, ^[52] parce que la spécification a été divisée en plusieurs modules distincts qui se nivellent indépendamment.

Les modules qui s’appuient sur des éléments du niveau 2 de CSS ont commencé au niveau 3. Certains d’entre eux ont déjà atteint le niveau 4 ou approchent déjà le niveau 5. D’autres modules qui définissent des fonctionnalités entièrement nouvelles, telles que Flexbox , ^[53] ont été désignés comme niveau 1 et certains d’entre eux approchent du niveau 2.

Le Groupe de travail CSS publie parfois des “instantanés”, une collection de modules entiers et de parties d’autres brouillons qui sont considérés comme suffisamment stables pour être implémentés par les développeurs de navigateurs. Jusqu’à présent, cinq de ces documents sur les “meilleures pratiques actuelles” ont été publiés sous forme de notes, en 2007, ^[54] 2010, ^[55] 2015, ^[56] 2017, ^[57] et 2018. ^[58]

Étant donné que ces instantanés de spécifications sont principalement destinés aux développeurs, il y a eu une demande croissante pour un document de référence versionné similaire destiné aux auteurs, qui présenterait l’état des implémentations interopérables comme documenté entre-temps par des sites comme Can I Use… ^[59] et le Web MDN. Documents. ^[60] Un groupe communautaire W3C a été créé début 2020 afin de discuter et de définir une telle ressource. ^[61] Le type réel de versionnement est également sujet à débat, ce qui signifie que le document une fois produit pourrait ne pas s’appeler “CSS4”.

Prise en charge du navigateur

Chaque navigateur Web utilise un moteur de mise en page pour afficher les pages Web, et la prise en charge de la fonctionnalité CSS n’est pas cohérente entre eux. Étant donné que les navigateurs n’analysent pas parfaitement le CSS, plusieurs techniques de codage ont été développées pour cibler des navigateurs spécifiques avec des solutions de contournement (communément appelées hacks CSS ou filtres CSS). L’adoption de nouvelles fonctionnalités dans CSS peut être entravée par le manque de prise en charge dans les principaux navigateurs. Par exemple, Internet Explorer a mis du temps à ajouter la prise en charge de nombreuses fonctionnalités CSS 3, ce qui a ralenti l’adoption de ces fonctionnalités et porté atteinte à la réputation du navigateur auprès des développeurs. ^[62]Afin d’assurer une expérience cohérente pour leurs utilisateurs, les développeurs Web testent souvent leurs sites sur plusieurs systèmes d’exploitation, navigateurs et versions de navigateur, ce qui augmente le temps de développement et la complexité. Des outils tels que BrowserStack ont été conçus pour réduire la complexité de la maintenance de ces environnements.

En plus de ces outils de test, de nombreux sites maintiennent des listes de prise en charge des navigateurs pour des propriétés CSS spécifiques, notamment CanIUse et MDN Web Docs . De plus, le CSS 3 définit les requêtes de fonctionnalités, qui fournissent une @supportsdirective qui permettra aux développeurs de cibler les navigateurs prenant en charge certaines fonctionnalités directement dans leur CSS. ^[63] CSS qui n’est pas pris en charge par les anciens navigateurs peut aussi parfois être corrigé en utilisant des polyfills JavaScript, qui sont des morceaux de code JavaScript conçus pour que les navigateurs se comportent de manière cohérente. Ces solutions de contournement, ainsi que la nécessité de prendre en charge la fonctionnalité de secours, peuvent ajouter de la complexité aux projets de développement et, par conséquent, les entreprises définissent fréquemment une liste de versions de navigateur qu’elles prendront en charge et qu’elles ne prendront pas en charge.

Comme les sites Web adoptent de nouvelles normes de code qui sont incompatibles avec les anciens navigateurs, ces navigateurs peuvent être empêchés d’accéder à de nombreuses ressources sur le Web (parfois intentionnellement). ^[64] Bon nombre des sites les plus populaires sur Internet ne sont pas seulement visuellement dégradés sur les anciens navigateurs en raison d’un mauvais support CSS, mais ne fonctionnent pas du tout, en grande partie à cause de l’évolution de JavaScript et d’autres technologies Web.

Limites

Certaines limitations notées des capacités actuelles de CSS incluent :

Les sélecteurs ne peuvent pas monter CSS n’offre actuellement aucun moyen de sélectionner un parent ou un ancêtre d’un élément qui répond à certains critères. ^[65] CSS Selectors Level 4, qui est toujours à l’état de projet de travail, propose un tel sélecteur, ^[66] mais uniquement dans le cadre du profil de sélecteur “instantané” complet, et non du profil rapide “en direct” utilisé dans le style CSS dynamique. ^[67] Un schéma de sélecteur plus avancé (tel que XPath ) permettrait des feuilles de style plus sophistiquées. Les principales raisons pour lesquelles le Groupe de travail CSS a précédemment rejeté les propositions de sélecteurs parents sont liées aux performances du navigateur et au rendu incrémentiel .questions. ^[68] Impossible de déclarer explicitement une nouvelle portée indépendamment de la position Les règles de portée pour les propriétés telles que z-index recherchent l’élément parent le plus proche avec un attribut position:absolute ou position:relative. Ce couplage étrange a des effets indésirables. Par exemple, il est impossible d’éviter de déclarer une nouvelle portée lorsque l’on est obligé d’ajuster la position d’un élément, empêchant d’utiliser la portée souhaitée d’un élément parent. Comportement dynamique de pseudo-classe non contrôlable CSS implémente des pseudo-classes qui permettent un certain degré de retour d’information de l’utilisateur par l’application conditionnelle de styles alternatifs. Une pseudo-classe CSS, ” “, est dynamique (équivalent de JavaScript “onmouseover”) et présente un potentiel d’utilisation abusive (par exemple, l’implémentation de fenêtres contextuelles de proximité du curseur), ^[69] mais CSS n’a pas la possibilité pour un client de le désactiver (pas propriété de type « désactiver ») ou limiter ses effets (pas de valeurs de type « sans changement » pour chaque propriété). :hover Impossible de nommer les règles Il n’y a aucun moyen de nommer une règle CSS, ce qui permettrait (par exemple) aux scripts côté client de se référer à la règle même si son sélecteur change. Impossible d’inclure des styles d’une règle dans une autre règle Les styles CSS doivent souvent être dupliqués dans plusieurs règles pour obtenir l’effet souhaité, ce qui entraîne une maintenance supplémentaire et nécessite des tests plus approfondis. Certaines nouvelles fonctionnalités CSS ont été proposées pour résoudre ce problème, mais ont été abandonnées par la suite. ^{[70] [71]} Au lieu de cela, les auteurs peuvent acquérir cette capacité en utilisant des langages de feuille de style plus sophistiqués qui se compilent en CSS, tels que Sass , Less ou Stylus . Impossible de cibler un texte spécifique sans modifier le balisage Outre le pseudo-élément, on ne peut pas cibler des plages de texte spécifiques sans avoir besoin d’utiliser des éléments d’espace réservé. :first-letter

Anciens numéros

De plus, plusieurs autres problèmes étaient présents dans les versions précédentes de la norme CSS, mais ont été atténués :

Limitations du contrôle vertical Bien que le placement horizontal des éléments ait toujours été généralement facile à contrôler, le placement vertical était souvent peu intuitif, compliqué ou carrément impossible. Des tâches simples, telles que centrer un élément verticalement ou placer un pied de page pas plus haut que le bas de la fenêtre, nécessitaient soit des règles de style compliquées et non intuitives, soit des règles simples mais largement non prises en charge. ^[65] Le module Flexible Box a considérablement amélioré la situation et le contrôle vertical est beaucoup plus simple et pris en charge dans tous les navigateurs modernes. ^[72] Les navigateurs plus anciens ont toujours ces problèmes, mais la plupart d’entre eux (principalement Internet Explorer 9 et versions antérieures) ne sont plus pris en charge par leurs fournisseurs. ^[73] Absence d’expressions Il n’y avait pas de possibilité standard de spécifier des valeurs de propriété sous forme d’expressions simples (telles que ). Cela serait utile dans une variété de cas, comme le calcul de la taille des colonnes soumises à une contrainte sur la somme de toutes les colonnes. Les versions 5 à 7 d’Internet Explorer prennent en charge une instruction expression() propriétaire, ^[74] avec des fonctionnalités similaires. Cette instruction expression() propriétaire n’est plus prise en charge à partir d’Internet Explorer 8, sauf dans les modes de compatibilité. Cette décision a été prise pour “des raisons de conformité aux normes, de performances du navigateur et de sécurité”. ^[74] Cependant, une recommandation candidate avec une valeur calc() pour remédier à cette limitation a été publiée par le CSS WG margin-left: 10% – 3em + 4px;^[75] et a depuis été pris en charge dans tous les navigateurs modernes. ^[76] Absence de déclaration de colonne Bien que possible dans CSS 3 actuel (en utilisant le column-countmodule), ^[77] les mises en page avec plusieurs colonnes peuvent être complexes à mettre en œuvre dans CSS 2.1. Avec CSS 2.1, le processus est souvent effectué à l’aide d’éléments flottants, qui sont souvent rendus différemment par différents navigateurs, différentes formes d’écran d’ordinateur et différents ratios d’écran définis sur des moniteurs standard. Tous les navigateurs modernes prennent en charge cette fonctionnalité CSS 3 sous une forme ou une autre. ^[78]

Avantages

Séparation du contenu de la présentation CSS facilite la publication de contenu dans plusieurs formats de présentation basés sur des paramètres nominaux. Les paramètres nominaux incluent les préférences explicites de l’utilisateur, les différents navigateurs Web, le type d’appareil utilisé pour afficher le contenu (un ordinateur de bureau ou un appareil mobile), l’emplacement géographique de l’utilisateur et de nombreuses autres variables. Cohérence à l’échelle du site Lorsque CSS est utilisé efficacement, en termes d’héritage et de “cascading”, une feuille de style globale peut être utilisée pour affecter et styliser les éléments à l’échelle du site. S’il s’avère que le style des éléments doit être modifié ou ajusté, ces modifications peuvent être apportées en éditant des règles dans la feuille de style globale. Avant CSS, ce type de maintenance était plus difficile, coûteux et chronophage. Bande passante Une feuille de style, interne ou externe, spécifie une seule fois le style d’une plage d’éléments HTML sélectionnés par class, type ou relation avec d’autres. C’est beaucoup plus efficace que de répéter les informations de style en ligne pour chaque occurrence de l’élément. Une feuille de style externe est généralement stockée dans le cache du navigateur et peut donc être utilisée sur plusieurs pages sans être rechargée, ce qui réduit encore le transfert de données sur un réseau. Reformatage des pages Avec un simple changement d’une ligne, une feuille de style différente peut être utilisée pour la même page. Cela présente des avantages pour l’accessibilité, ainsi que la possibilité d’adapter une page ou un site à différents appareils cibles. De plus, les appareils incapables de comprendre le style affichent toujours le contenu. Accessibilité Sans CSS, les concepteurs de sites Web doivent généralement mettre en page leurs pages avec des techniques telles que des tableaux HTML qui entravent l’accessibilité pour les utilisateurs malvoyants (voir Conception de sites Web sans table#Accessibilité ).

Standardisation

Cadres

Les frameworks CSS sont des bibliothèques pré-préparées destinées à permettre un style plus simple et plus conforme aux normes des pages Web à l’aide du langage Cascading Style Sheets. Les frameworks CSS incluent Blueprint , Bootstrap , Foundation et Materialize. Comme les bibliothèques de langage de programmation et de script, les frameworks CSS sont généralement incorporés sous forme de feuilles .css externes référencées dans le HTML<head>. Ils fournissent un certain nombre d’options prêtes à l’emploi pour la conception et la mise en page de la page Web. Bien que bon nombre de ces frameworks aient été publiés, certains auteurs les utilisent principalement pour le prototypage rapide, ou pour en tirer des enseignements, et préfèrent “créer à la main” un CSS adapté à chaque site publié sans les frais de conception, de maintenance et de téléchargement liés aux nombreuses fonctionnalités inutilisées. dans le style du site. ^[79]

Méthodologies de conception

À mesure que la taille des ressources CSS utilisées dans un projet augmente, une équipe de développement doit souvent décider d’une méthodologie de conception commune pour les garder organisées. Les objectifs sont la facilité de développement, la facilité de collaboration lors du développement et la performance des feuilles de style déployées dans le navigateur. Les méthodologies populaires incluent OOCSS (CSS orienté objet), ACSS (CSS atomique), oCSS (feuille de style en cascade organique), SMACSS (architecture évolutive et modulaire pour CSS) et BEM (bloc, élément, modificateur). ^[80]

Voir également

Flash de contenu sans style

Références

^ “Guide du développeur CSS” . Documents Web MDN . Archivé de l’original le 2015-09-25 . Récupéré le 24/09/2015 .
^ Flanagan, David (18 avril 2011). JavaScript : le guide définitif . Pékin; Farnham : O’Reilly. p. 1. ISBN 978-1-4493-9385-4. OCLC 686709345 . JavaScript fait partie de la triade des technologies que tous les développeurs Web doivent apprendre : HTML pour spécifier le contenu des pages Web, CSS pour spécifier la présentation des pages Web et JavaScript pour spécifier le comportement des pages Web.
^ “Qu’est-ce que CSS?” . World Wide Web Consortium. Archivé de l’original le 2010-11-29 . Récupéré le 01/12/2010 .
^ “Applications mobiles Web du futur utilisant HTML 5, CSS et JavaScript” . HTMLGoodies. 23 juillet 2010. Archivé de l’original le 2014-10-20 . Récupéré le 16/10/2014 .
^ “Service de validation CSS du W3C” . Archivé de l’original le 14/02/2011 . Récupéré le 30/06/2012 .
^ “Spécification W3C CSS2.1 pour les pseudo-éléments et les pseudo-classes” . World Wide Web Consortium. 7 juin 2011. Archivé de l’original le 30 avril 2012 . Récupéré le 30 avril 2012 .
^ voir la définition complète des sélecteurs sur le site Web du W3C Archivé le 23/04/2006 sur la Wayback Machine .
^ “Sélecteurs Niveau 3” . W3.org. Archivé de l’original le 2014-06-03 . Récupéré le 30/05/2014 .
^ “Spécification W3C CSS2.1 pour les ensembles de règles, les blocs de déclaration et les sélecteurs” . World Wide Web Consortium. 7 juin 2011. Archivé de l’original le 28 mars 2008 . Récupéré le 20/06/2009 .
^ “Tableau complet des propriétés” . W3.org. Archivé de l’original le 2014-05-30 . Récupéré le 30/05/2014 .
^ “Index des propriétés CSS” . www.w3.org . Récupéré le 09/08/2020 .
^ “Couleur CSS” . Documents Web MDN. 2016-06-28. Archivé de l’original le 2016-09-21 . Récupéré le 23/08/2016 .
^ “6.1 Unités de longueur” . Feuilles de style en cascade, niveau 1 . 17 décembre 1996. Archivé de l’original le 14 juin 2019 . Récupéré le 20 juin 2019 .
^ “5. Unités de distance : le type <longueur>” . Module Valeurs et Unités CSS Niveau 3 . 6 juin 2019. Archivé de l’original le 7 juin 2019 . Récupéré le 20 juin 2019 .
^ Groupe de travail HTML du W3C. “HTML 5. Un vocabulaire et des API associées pour HTML et XHTML” . Consortium World Wide Web . Archivé de l’original le 15 juillet 2014 . Récupéré le 28 juin 2014 .
^ ^un ^b Meyer, Eric A. (2006). Feuilles de style en cascade: le guide définitif (3e éd.). O’Reilly Media, Inc.ISBN 0-596-52733-0. Archivé de l’original le 15/02/2014 . Récupéré le 16/02/2014 .
^ “Attribution de valeurs de propriété, cascade et héritage” . Archivé de l’original le 11/06/2014 . Récupéré le 10/06/2014 .
^ “Une classe CSS peut-elle hériter d’une ou plusieurs autres classes ?” . StackOverflow . Archivé de l’original le 2017-10-14 . Récupéré le 10/09/2017 .
^ “Propriétés abrégées” . Tutoriel . Développeurs Mozilla. 2017-12-07. Archivé de l’original le 2018-01-30 . Récupéré le 30/01/2018 .
^ ^un ^bc ^Bos , Bert; et coll. (7 décembre 2010). “9.3 Schémas de positionnement” . Feuilles de style en cascade Niveau 2 Révision 1 (CSS 2.1) Spécification . W3C. Archivé de l’original le 18 février 2011 . Récupéré le 16 février 2011 .
^ Holzschlag, Molly E (2005). Sautez dans HTML et CSS . Pearson Education, Inc. ISBN 0-13-185586-7.
^ ^{un mensonge} ^b , Hakon W (10 octobre 1994). “Feuilles de style HTML en cascade – une proposition” (Proposition) (92). CERN. Archivé de l’original le 4 juin 2014 . Récupéré le 25 mai 2014 . {{cite journal}}: Cite journal requires |journal= (help)
^ ^un ^bcdef ^Mensonge , ^Håkon^Wium ; ^_Bos, Bert (1999). Feuilles de style en cascade, conception pour le Web . Addison Wesley. ISBN 0-201-59625-3. Récupéré le 23 juin 2010 .
^ “Feuilles de style en cascade, niveau 1” . World Wide Web Consortium. Archivé de l’original le 2014-04-09 . Récupéré le 07/03/2014 .
^ ^un ^bc ^Bos , Bert (14 avril 1995). “Des feuilles de style simples pour SGML et HTML sur le Web” . World Wide Web Consortium. Archivé de l’original le 23 septembre 2009 . Récupéré le 20 juin 2010 .
^ ^un ^bc “Feuilles de style en cascade ^“ . Université d’Oslo. Archivé de l’original le 2006-09-06 . Récupéré le 3 septembre 2014 .
^ ^un ^b Petrie, Charles; Cailliau, Robert (novembre 1997). “Interview de Robert Cailliau sur la proposition WWW : “Comment ça s’est vraiment passé.” ” . Institute of Electrical and Electronics Engineers . Archivé de l’ original le 6 janvier 2011 . Récupéré le 18 août 2010 .
^ Bos, Bert (31 mars 1995). “Proposition de feuille de style basée sur le flux” . Archivé de l’original le 12 octobre 2014 . Récupéré le 3 septembre 2014 .
^ Nielsen, Henrik Frystyk (7 juin 2002). “Libwww Hackers” . World Wide Web Consortium. Archivé de l’original le 2 décembre 2009 . Récupéré le 6 juin 2010 .
^ “Yves Lafon” . World Wide Web Consortium. Archivé de l’original le 24 juin 2010 . Récupéré le 17 juin 2010 .
^ “L’équipe W3C : Technologie et Société” . World Wide Web Consortium. 18 juillet 2008. Archivé de l’original le 28 mai 2010 . Récupéré le 22 janvier 2011 .
^ Lou Montulli ; Brendan Eich ; Scott Furman ; Donna Converse ; Troie Chevalier (22 août 1996). “Feuilles de style basées sur JavaScript” . W3C. Archivé de l’original le 27 mai 2010 . Récupéré le 23 juin 2010 .
^ “Logiciel CSS” . W3.org. Archivé de l’original le 2010-11-25 . Récupéré le 15/01/2011 .
^ Anne van Kesteren . “CSS 2.1 – Le blog d’Anne” . Archivé de l’original le 2005-12-10 . Récupéré le 16/02/2011 .
^ “Archives des Nouvelles du W3C en 2007″ . Consortium World Wide Web . Archivé de l’original le 2011-06-28 . Récupéré le 16/02/2011 .
^ Nitot, Tristan (18 mars 2002). “Type MIME incorrect pour les fichiers CSS” . Centre de développement Mozilla . Mozilla . Archivé de l’original le 2011-05-20 . Récupéré le 20 juin 2010 .
^ McBride, Don (27 novembre 2009). “Types de fichiers” . Archivé de l’original le 29 octobre 2010 . Récupéré le 20 juin 2010 .
^ “détails de l’extension de fichier css” . Base de données d’extensions de fichiers. 12 mars 2010. Archivé de l’original le 18 juillet 2011 . Récupéré le 20 juin 2010 .
^ “Comment et pourquoi voudriez-vous utiliser les préfixes de fournisseur CSS sur votre site Web” . Fil de vie . 2019-11-12.
^ “Norme de compatibilité” . WHATWG .
^ Bos, / Hakon Wium Lie, Bert (1997). Feuilles de style en cascade: concevoir pour le Web (1ère impression. éd.). Harlow, Angleterre; Reading, MA. : Addison Wesley Longman. ISBN 0-201-41998-X.
^ W3C : Feuilles de style en cascade, niveau 1 Archivé le 09/02/2011 à la spécification Wayback Machine CSS 1
^ W3C : Spécification des feuilles de style en cascade de niveau 1 Archivé le 11/02/2011 à la spécification Wayback Machine CSS niveau 1
^ “Feuilles de style sonore” . W3C. Archivé de l’original le 2014-10-26 . Récupéré le 26/10/2014 .
^ W3C : Feuilles de style en cascade, niveau 2 Archivé le 16/01/2011 dans la spécification Wayback Machine CSS 2 (recommandation de 1998)
^ W3C : Feuilles de style en cascade, niveau 2 révision 1 Archivé le 09/11/2011 dans la spécification Wayback Machine CSS 2.1 (recommandation proposée par le W3C)
^ W3C: la norme de feuilles de style en cascade offre une interopérabilité sans précédent Archivé le 10/06/2011 sur la Wayback Machine
^ Bos, Bert (18 février 2011). “Descriptions de toutes les spécifications CSS” . Consortium World Wide Web . Archivé de l’original le 31 mars 2011 . Récupéré le 3 mars 2011 .
^ Bos, Bert (26 février 2011). “CSS travail en cours” . Consortium World Wide Web . Archivé de l’original le 3 mars 2011 . Récupéré le 3 mars 2011 .
^ Etemad, Elika J. (12 décembre 2010). “Feuilles de style en cascade (CSS) Snapshot 2010” . Consortium World Wide Web . Archivé de l’original le 16 mars 2011 . Récupéré le 3 mars 2011 .
^ “Toutes les spécifications CSS” . W3.org. 2014-05-22. Archivé de l’original le 2014-05-30 . Récupéré le 30/05/2014 .
^ Atkins Jr, onglet. “Un mot sur CSS4” . Archivé de l’original le 31 octobre 2012 . Récupéré le 18 octobre 2012 .
^ “Module de disposition de boîte flexible CSS niveau 1” . W3C. 19 novembre 2018. Archivé de l’original le 19 octobre 2012 . Récupéré le 18 octobre 2012 .
^ “Feuilles de style en cascade (CSS) Instantané 2007” . 12 mai 2011. Archivé de l’original le 8 août 2016 . Récupéré le 18 juillet 2016 .
^ “Feuilles de style en cascade (CSS) Instantané 2010” . 12 mai 2011. Archivé de l’original le 16 mars 2011 . Récupéré le 3 mars 2011 .
^ “Instantané CSS 2015” . W3C . 13 octobre 2015. Archivé de l’original le 27 janvier 2017 . Récupéré le 13 février 2017 .
^ “Instantané CSS 2017” . 31 janvier 2017. Archivé de l’original le 13 février 2017 . Récupéré le 13 février 2017 .
^ “Instantané CSS 2018” . 15 novembre 2018. Archivé de l’original le 1er février 2019 . Récupéré le 2 janvier 2019 .
^ “Puis-je utiliser… les tables de support pour HTML5, CSS3, etc” . Archivé de l’original le 2018-02-19 . Récupéré le 26/01/2019 .
^ “MDN Web Docs : CSS” .
^ “Groupe communautaire CSS4” . Archivé de l’original le 2020-02-27 . Récupéré le 27/02/2020 .
^ “Solutions CSS3 pour Internet Explorer – Smashing Magazine” . Magazine fracassant . 2010-04-28. Archivé de l’original le 2016-10-12 . Récupéré le 12/10/2016 .
^ “Utilisation des requêtes de fonctionnalités dans CSS ★ Mozilla Hacks – le blog des développeurs Web” . hacks.mozilla.org . Archivé de l’original le 2016-10-11 . Récupéré le 12/10/2016 .
^ “Regarder le Web avec Internet Explorer 6, une dernière fois” . Ars Technica . Archivé de l’original le 2016-10-12 . Récupéré le 12/10/2016 .
^ ^un ^b Molly Holzschlag (janvier 2012). “Sept choses manquent encore à CSS” . Magazine .net. Archivé de l’original le 2017-03-05 . Récupéré le 04/03/2017 .
^ “Sélecteurs Niveau 4 – Détermination du Sujet d’un Sélecteur” . W3.org. Archivé de l’original le 17/08/2013 . Récupéré le 13/08/2013 .
^ “Sélecteurs de niveau 4 – Profils de sélecteurs rapides vs complets” . W3.org. Archivé de l’original le 17/08/2013 . Récupéré le 13/08/2013 .
^ Snook, Jonathan (octobre 2010). “Pourquoi nous n’avons pas de sélecteur de parents” . snook.ca. Archivé de l’original le 18/01/2012 . Récupéré le 26/01/2012 .
^ ” Popups CSS purs ” . meyerweb.com. Archivé de l’original le 2009-12-09 . Récupéré le 19/11/2009 .
^ Tab Atkins Jr. “CSS applique la règle” . GitHub. Archivé de l’original le 2016-02-22 . Récupéré le 27/02/2016 .
^ “Pourquoi j’ai abandonné @apply – Achèvement des onglets” .
^ “Module de disposition de boîte flexible CSS” . Puis-je utiliser… Tables de support pour HTML5, CSS3, etc . CanIUse.com. Archivé de l’original le 2016-02-23.
^ “Fin du support d’Internet Explorer” . Microsoft. Archivé de l’original le 2019-06-02 . Récupéré le 27/02/2016 .
^ ^un ^b “À propos des propriétés dynamiques” . msdn.microsoft.com. Archivé de l’original le 2017-10-14 . Récupéré le 20/06/2009 .
^ “Module Valeurs et Unités CSS Niveau 3” . W3.org. 6 juin 2019. Archivé de l’original le 23 avril 2008.
^ “calc() comme valeur d’unité CSS” . Puis-je utiliser… Tables de support pour HTML5, CSS3, etc . CanIUse.com. Archivé de l’original le 2016-03-04.
^ “Module de disposition multi-colonnes CSS” . World Wide Web Consortium. Archivé de l’original le 2011-04-29 . Récupéré le 01/05/2011 .
^ “Puis-je utiliser… les tables de support pour HTML5, CSS3, etc” . CanIUse.com. Archivé de l’original le 2010-08-21 . Récupéré le 27/02/2016 .
^ Cederholm, Dan; Ethan Marcotte (2009). CSS artisanal : une conception Web plus résistante aux balles . Nouveaux cavaliers. p. 114. ISBN 978-0-321-64338-4. Archivé de l’original le 20 décembre 2012 . Récupéré le 19 juin 2010 .
^ Antti, Hilja. “OOCSS, ACSS, BEM, SMACSS : qu’est-ce que c’est ? Que dois-je utiliser ?” . clubmate.fi . Hilja. Archivé de l’original le 2 juin 2015 . Récupéré le 2 juin 2015 .

Lectures complémentaires

Apprendre encore plus Cette rubrique doit être mise à jour . ( juillet 2012 ) Please help update this article to reflect recent events or newly available information.

Jeffrey Zeldman (2009): Designing With Web Standards , New Riders, ISBN 978-0321616951 (broché) ( site compagnon du livre )
Dan Cederholm (2009): Web Standards Solutions, The Markup and Style Handbook , Friends of Ed, ISBN 978-1430219200 (broché) ( Site de l’auteur )
En ligneMeyer, Eric A. (2006). Feuilles de style en cascade : le guide définitif, troisième édition . O’Reilly Media, Inc.ISBN 0-596-52733-0.
Plus Eric Meyer sur CSS (2004) ISBN 0-7357-1425-8
Eric Meyer sur CSS (2002), ISBN 0-7357-1245-X
Meyer, Eric A. (2001) Feuilles de style en cascade 2.0 Référence du programmeur , McGraw-Hill Osborne Media, ISBN 0-07-213178-0
The Zen of CSS Design (2005) (co-écrit par CSS Zen Garden Owner, Dave Shea et Molly E. Holzschlag ), ISBN 0-321-30347-4
Kynn Bartlett: Apprenez-vous CSS en 24 heures , 2e édition (2006), Sams Publishing, ISBN 978-0672329067
Feuilles de style en cascade: Conception pour le Web (2005) par Håkon Wium Lie et Bert Bos, ISBN 0-321-19312-1
Feuilles de style en cascade Feuilles de style en cascade , thèse de doctorat, par Håkon Wium Lie – fournit une référence historique faisant autorité sur CSS
Keith Schengili-Roberts (2003): Core CSS, 2e édition , Prentice Hall, ISBN 0-13-009278-9
On the Analysis of Cascading Style Sheets , Pierre Geneves , Nabil Layaida et Vincent Quint, Actes de la 21e Conférence internationale sur le World Wide Web (WWW’12), pp. 809–818, 2012.