Voir la source de Feuilles de style en cascade

{{Voir homonymes|CSS}}
{{Infobox Format de données
 | nom              = {{blanc|CSS}}
 | logo             = CSS3_logo_and_wordmark.svg
 | nom complet      = {{blanc|''{{langue|en|Cascading Style Sheets}}''}}
 | couleur boîte    = 264EE4
 | spécification    = 2
}}

Les '''feuilles de style en cascade''', généralement appelées '''CSS''' de l'[[anglais]] '''''{{langue|en|Cascading Style Sheets}}''''', forment un [[langage informatique]] qui décrit la présentation des documents [[Hypertext markup language|HTML]] et [[Extensible markup language|XML]]. Les [[standard technique|standards]] définissant CSS sont publiés par le [[World Wide Web Consortium]] (W3C). Introduit au milieu des [[années 1990]], CSS devient couramment utilisé dans la [[conception de sites web]] et bien pris en charge par les [[Navigateur web|navigateurs web]] dans les [[années 2000]].

== Histoire du CSS ==
=== Un concept parmi d'autres, présent dès l'origine du web ===
Le concept de [[feuille de style]] est présent dès l'origine du [[World Wide Web]] : le premier [[navigateur web]] [[WorldWideWeb]] permet de mettre en forme les documents à l'aide de ce qui serait aujourd'hui considéré comme une « feuille de style utilisateur »<ref>Tim Berners-Lee, [http://www.w3.org/People/Berners-Lee/WorldWideWeb.html The WorldWideWeb browser].</ref>. De même, les navigateurs [[Viola (navigateur)|Viola]] en [[1992]] et [[Harmony (navigateur)|Harmony]] en [[1993]] recourent à un mécanisme similaire permettant de déterminer le rendu des [[Police d'écriture|polices de caractères]], des couleurs ou de l'alignement du texte.

Il ne s'agit cependant pas de [[Feuilles de style dynamiques en cascade|styles]] déterminés par l'auteur du document. [[HTML]] ne comportant pas non plus d'éléments de présentation dans ses premières années, une pression croissante s'exerce alors pour que les navigateurs permettent aux auteurs de déterminer eux-mêmes la présentation des [[pages web]]<ref>''Cascading Style Sheets, designing for the Web'', Håkon Wium Lie et Bert Bos, {{ISBN|978-0-201-59625-0}}.</ref>, dans une démarche issue de la [[publication]] imprimée [[Électronique (technique)|électronique]]. 

C'est dans ce contexte, en [[1994]]-[[1995]], que le tout nouveau [[Netscape Navigator]] introduit les premiers éléments HTML de présentation à l'initiative de [[Marc Andreessen]], tandis qu'apparaissent concurremment les premières propositions de styles externes<ref group="n.">Un grand nombre de propositions de techniques de styles ont été faites durant les premières années du web. Seules les trois principales sont citées dans l'article, mais toutes ont, à un degré variable, influencé le langage CSS. Voir http://www.w3.org/Style/History/.</ref> : 

* le « stylesheet proposal » de Pei Wei (créateur de Viola)<ref>[http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q4.messages/263.html EMail Msg <9310222103.AA03264@sting.Berkeley.EDU>].</ref> ;
* les « Stylesheets for HTML  » de Robert Raisch ([[O'Reilly Open Source Convention|O'Reilly]])<ref>[http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/443.html EMail Msg <199306101923.AA29318@ora.com>].</ref> ;
* les « Cascading HTML Style Sheets » (CHSS) d'[[Håkon Wium Lie]]<ref>[http://www.w3.org/People/howcome/p/cascade.html Cascading HTML Style Sheets -- A Proposal].</ref>. 

L'apparition de CSS répond à une volonté de « proposer une alternative à l'évolution du HTML d'un langage de structuration vers un langage de présentation »<ref>{{langue|en|Håkon Wium Lie, ''Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway''}}, 2005, http://people.opera.com/howcome/2006/phd/#h-28.</ref>. 

Une troisième voie de développement est également ouverte à la même époque : le langage de transformation DSSSL des documents [[SGML]], élaboré par [[James Clark (informatique)|James Clark]], suggère la possibilité d'un langage de styles qui ne soit pas seulement descriptif, et se rapproche d'un véritable [[langage de programmation]]<ref group="n.">plus généralement, « De nombreuses participants à la liste de discussion www-talk, le lieu de rencontre électronique de la première communauté web, étaient d'accord sur le fait que le web tirerait profit des feuilles de styles. Cependant, il y avait un désaccord sur le point de savoir s'il avait besoin d'un nouveau langage de feuille de style ou si l'un des langages déjà existants, créés au départ pour la publication imprimée, suffirait à ses besoins ». Håkon Wium Lie, ''{{langue|en|Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway}}'', 2005, http://people.opera.com/howcome/2006/phd/#h-34.</ref>. Cette voie est suivie par [[Netscape Communications|Netscape]], qui propose en [[1996]] au W3C les « JavaScript-Based Style Sheets » (JSSS)<ref>[http://www.w3.org/Submission/1996/1/WD-jsss-960822.html JavaScript-Based Style Sheets].</ref>, implémentées par Netscape Navigator 4 en [[1997]].

Les origines des CSS sont donc liées à trois possibilités majeures :
* HTML est-il un langage de structuration ou un langage mixte de mise en forme et de structuration ?
* Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?
* La réponse aux besoins est-elle un langage de description de la mise en forme ou un langage de transformation ?

=== Les premiers développements ===
La première proposition de ''{{langue|en|Cascading HTML Style Sheets}}'' formulée par [[Håkon Wium Lie]] retient l'attention de [[Dave Raggett]], qui est alors le principal éditeur du projet de spécification HTML 3.0<ref>{{Lien web |titre=HyperText Markup Language Specification 3.0 |url=https://www.w3.org/MarkUp/html3/Contents.html |site=www.w3.org |consulté le=2020-11-15}}</ref>. Partisan d'un HTML purement structurel, il encourage la publication d'un document de travail CHSS, afin que celui-ci puisse être présenté et discuté à la seconde conférence internationale sur le WWW (''{{langue|en|Mosaic and the Web}}'', Chicago, 1994). Il modifie également avec Håkon Lie le navigateur [[Arena (navigateur web)|Arena]]<ref group="n.">Prédécesseur d'[[Amaya (navigateur web)|Amaya]], Arena est le premier navigateur développé par le W3C, à l'origine à des fins de tests de HTML 3.0. Håkon Lie collabora à son développement à partir de 1994 et ce navigateur anticipa de nombreux développement ultérieurs de CSS2. Abandonné par le W3C en tant que plate-forme de test en 1996, Arena fut ensuite temporairement maintenu par le Yggdrasil Computing jusqu'en 1998. Voir http://www.w3.org/Arena/.</ref>, afin de permettre de tester ce langage, et en fait la démonstration lors de la troisième conférence WWW en 1995.

Parallèlement, [[Bert Bos]], qui travaillait alors sur le navigateur [[Argo (navigateur)|Argo]]<ref>Créé par Bert Bos en août 1994, Argo faisait partie d'un projet web de l'[[université de Groningue]]. Voir http://www.w3.org/People/all#bert.</ref>, et qui avait soumis au W3C son propre projet « {{langue|en|Stream-based Style Sheet Proposal}} » (SSP), décide de joindre ses efforts à ceux d'Håkon Lie. SSP ayant été développé avec l'idée d'être applicable non seulement à HTML, mais aussi à d'autres [[Langage de balisage|langages de balisage]], Bert Bos et Håkon Lie reprennent cet objectif, et en font une des caractéristiques clés de ce qui devient alors CSS proprement dit.

Un autre aspect de CSS s'avère alors déterminant face aux alternatives existantes : CSS est le premier langage à inclure l'idée de « cascade » (feuille de style ''en cascade''), c'est-à-dire la possibilité pour le style d'un document d'être hérité à partir de plusieurs « feuilles de style ». Cela permet d'arbitrer entre plusieurs sources concurrentes de mise en forme d'un élément, et permet théoriquement de composer entre les préférences stylistiques des auteurs et des utilisateurs.

Le {{langue|en|World Wide Web Consortium}} (W3C) devient opérationnel en 1995, et la liste de discussion www-style est alors créée<ref>les archives de cette liste dédiée au développement des CSS sont accessibles sur http://lists.w3.org/Archives/Public/www-style/.</ref>. La même année se tient à Paris un « W3C style sheet workshop » décisif pour l'avenir des CSS<ref>[http://www.w3.org/Style/951106_Workshop/report1.html Report on the W3C style sheet workshop, Paris '95].</ref>. Y est notamment affirmée la volonté de conserver les feuilles de style sous une forme simple, ce qui exclut l'hypothèse JSSS de Netscape. Par ailleurs, [[Thomas Reardon]] (Microsoft) y annonce le support à venir de CSS dans les futures versions d'[[Internet Explorer]] : dès lors, lorsque le W3C crée à la fin de l'année le « {{langue|en|HTML Editorial Review Board}} » (HTML ERB) pour ratifier les futures spécifications HTML, DOM et CSS, Netscape, représenté par [[Lou Montulli]], se rallie finalement au projet CSS mené par Bert Bos et Håkon Lie.

=== Vers une maturation difficile ===
Contrairement aux [[logiciels]], les spécifications CSS ne sont pas développées par versions successives, qui permettraient à un navigateur de se référer à une version en particulier. CSS est développé par « niveaux », ce qui contraint chaque nouveau niveau à intégrer le précédent, et chaque implémentation à être compatible avec la précédente : CSS1 est donc développé pour être un sous-ensemble de CSS2, qui est lui-même développé pour être un sous-ensemble de CSS3. Ceci explique en partie la lenteur de l'avancement normatif de CSS<ref>« {{langue|en|You can Just Ship software with bugs in it to put out a new stable release because it's versioned. The next version replaces the old. You can always fix the leftover bugs in the next version. CSS doesn't have versions. Any problems there are in the way CSS2.1 defines things can't be fixed in CSS3 except maybe by adding really confusing sets of switches. CSS3 cannot change anything in CSS2.1, it can only build on top of it.}}, [http://www.w3.org/blog/CSS/2007/07/02/behind_the_scenes What is the CSS Working Group Doing?], {{langue|en|Cascading Style Sheets Working Group Blog}} », 2 juillet 2007.</ref>.

==== CSS1, des implémentations difficiles pendant la guerre des navigateurs ====
La spécification CSS1<ref>{{Lien web |titre=Cascading Style Sheets, level 1 |url=https://www.w3.org/TR/CSS1/Overview.html |site=www.w3.org |consulté le=2020-11-15}}</ref> finale est publiée le 17 décembre 1996, et définit une cinquantaine de propriétés. CSS1 se définit comme un « mécanisme de feuille de style simple, permettant aux auteurs et aux lecteurs d'attacher des styles (…) au document HTML »<ref>Cascading Style Sheets, level 1, abstract, http://www.w3.org/TR/REC-CSS1.</ref>. Cette simplicité se traduit par le choix d'un langage qui peut être aisément lu et écrit directement par ses utilisateurs humains, et d'une terminologie conforme aux usages courants dans la publication informatique. Le choix éventuel d'exprimer CSS dans une syntaxe XML ou SGML, régulièrement évoquée pour éviter l'implémentation d'un nouveau mode d'analyse syntaxique, est donc définitivement écarté<ref group="n.">« Au bout du compte, la possibilité d'être lu et écrit par l'humain avait une valeur ajoutée plus élevée que la possibilité de réutiliser des analyseurs syntaxiques existants », Håkon Wium Lie, ''Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway'', 2005, http://people.opera.com/howcome/2006/phd/#ch-problems.</ref>.

CSS1 ne décrit pas uniquement sa propre [[grammaire]] : ce premier niveau décrit en effet une grammaire destinée à permettre aux niveaux ultérieurs d'ajouter de nouvelles fonctionnalités, tout en autorisant la lecture de ces futures feuilles de styles par les navigateurs plus anciens. Ainsi, un ancien navigateur lisant un nouveau style ne le comprend pas, mais peut l'identifier en tant que tel, et l'ignorer. CSS garantit ainsi sa [[compatibilité descendante]].

CSS1 définit essentiellement les propriétés de rendu [[typographique]] du texte :
* pour les fontes : la couleur, la taille, la [[Graisse (typographie)|graisse]], l'espacement, etc.
* pour les blocs (de texte), leurs bordures, leurs marges, leur fond, les marqueurs de liste, etc.

Les possibilité de mise en page restent plus limitées que celle offertes par HTML, en particulier avec les tables. En outre, la mise en œuvre est sévèrement boguée dans tous les navigateurs jusqu'à [[Internet Explorer 5]] pour [[Macintosh]]. La propriété <code>float</code>, qui sera par la suite massivement utilisée pour la mise en page CSS globale des designs web, n'est alors conçue que comme un moyen de placer localement, côte à côte, une portion réduite du contenu, tel qu'une image, et le reste du texte<ref>« {{langue|en|Floats were intended to be used to take small pieces of content out of the flow and let the rest of the text wrap around them. They were not intended to be used for the main content of a page, nor were they designed for it. Nevertheless, use of floats for the main content of a page is quite common today}} ». David Baron, membre du groupe de travail CSS du W3C, [http://dbaron.org/log/2005-12#e20051228a Overuse of floats considered harmful].</ref>. Compte tenu des implémentations problématiques de CSS1, le détournement de l'élément HTML <code>table</code> pour gérer la mise en page globale reste dans l'immédiat la solution la plus couramment retenue par les auteurs de contenu web.

En 1996, [[Internet Explorer 3.0]] est le premier navigateur commercial à implémenter partiellement CSS alors que celle-ci est encore en cours de formulation. Cette implémentation anticipée, menée par Chris Wilson<ref>« Program Manager » puis « {{langue|en|Platform Architect of the Internet Explorer Platform team}} », Chris Wilson est à partir de 1996 un des acteurs majeurs du développement CSS. Voir http://blogs.msdn.com/cwilso/.</ref> ne correspond pas à la spécification finale. En 1997, Internet Explorer 4.0 voit la naissance d'un nouveau [[Moteur de rendu HTML|moteur de rendu]], [[Trident (moteur de rendu)|Trident]], à l'origine du support croissant mais problématique de CSS dans les différentes versions de ce navigateur sous Windows, jusqu'à [[Internet Explorer 7]] inclus<ref group="n.">Le moteur de rendu Trident mêle en fait deux technologies de rendu graphique : CSS y est concurrencé par le mécanisme connu sous le nom de « haslayout », mis en évidence par [[Rétro-ingénierie|reverse engineering]] en 2005 par un groupe de développeurs indépendants étudiant les bugs de rendu CSS d'Internet Explorer Voir [http://www.satzansatz.de/cssd/onhavinglayoutrev04-20050824.html On having layout] par Ingo Chao, et [http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/expie20050831.asp "HasLayout" Overview] (Markus Mielke, Microsoft).</ref>.

[[Netscape Navigator]] 4.0 suit le mouvement en 1997, malgré ses réticences historiques vis-à-vis de CSS<ref group="n.">« Netscape retarde considérablement le développement des feuilles de styles sur le web en diffusant en 1996 ses extensions propriétaires d’HTML ; elles offrent la gestion de la couleur, de la fonte ou même du clignotement (…) Netscape prône la simplicité : les rédacteurs de documents HTML maîtrisent ce format car il est simple ; il suffit donc d’intégrer aux documents de nouveaux éléments HTML simples gérant la présentation. », Daniel Glazman, ''CSS2, des feuilles de styles pour le Web'', décembre 1998, Éditions Eyrolles.</ref> : dans le contexte de la [[Évolution de l'usage des navigateurs internet|guerre des navigateurs]], il s'agit alors principalement d'éviter que Microsoft ne puisse s'affirmer comme le navigateur le plus conforme. Cependant, cette implémentation précipitée, basée sur des méthodes [[JavaScript]] internes, se révèle finalement limitée et très peu fiable. Netscape Navigator 4.0 apporte également une implémentation JSSS, qui restera sans lendemain<ref group="n.">{{langue|en|« Since its inception Netscape had been sceptical towards style sheets, and the company's first implementation turned out to be a half-hearted attempt to stop Microsoft from claiming to be more standards-compliant than themselves. The Netscape implementation supports a broad range of features - for example, floating elements - but the Netscape developers did not have time to fully test all the features which are supposedly supported. The result is that many CSS properties cannot be used in Navigator 4 ». Bert Bos et Håkon Lie, ''Cascading Style Sheets''}}, http://www.w3.org/Style/LieBos2e/history/.</ref>. Il faudra attendre le nouveau moteur de rendu [[Gecko (moteur de rendu)|Gecko]] du [[Mozilla (chronique)|projet Mozilla]] pour parvenir à une véritable implémentation de CSS1.

En 1998, alors que s'achève la guerre des navigateurs opposant Netscape et Microsoft, [[Opera]] 3.5, dont Håkon Lie est entre-temps devenu le directeur technique, parvient à une implémentation plus complète de CSS1, facilitée par la publication de la première « Test suite for Cascading Style Sheets (CSS) Level 1 » créée principalement par [[Eric A. Meyer|Eric Meyer]] pour le W3C<ref>cf. CSS1 Test Suite, Version History, http://www.w3.org/Style/CSS/Test/CSS1/current/vhistory.</ref>. La présence de ces suites de test se révèle un atout majeur à la fois pour les implémentations dans les navigateurs et pour l'appropriation des techniques CSS par les auteurs (en fournissant des exemples détaillés des propriétés et de leurs valeurs).

Enfin, sous l'impulsion de [[Tantek Çelik]], Internet Explorer 5.0 pour [[Apple Macintosh|Macintosh]] lancé en mars [[2000]], basé sur [[Tasman (moteur de rendu)|Tasman]], un moteur de rendu spécifique sans rapport avec Trident, est le premier navigateur à supporter complètement (à plus de 99 %) CSS1 et à réussir le test [[Acid1]]. Pour assurer la compatibilité avec les précédentes pratiques de codage propre à chaque implémentation (la « soupe de balises »), et permettre un affichage correct des documents web qu'ils soient respectueux ou non des standards CSS et HTML, il est également le premier à mettre en œuvre la technique du {{langue|en|doctype switching}}. Adoptée par la suite par tous les navigateurs, celle-ci devient par la suite l'une des clés de l'implémentation progressive de CSS : elle permet en effet au navigateur de conserver d'anciennes implémentations propriétaires pour des raisons de compatibilité, tout en ayant la possibilité d'opter, en fonction de la syntaxe de la déclaration de type de document de la page, pour un mode de rendu conforme à de nouvelles implémentations standards<ref>{{langue|en|Henri Sivonen, [http://hsivonen.iki.fi/doctype/ Activating the Right Layout Mode Using the Doctype Declaration]}}.</ref>.

Durant cette période de la fin des années 1990, la conception web est avant tout dépendante de l'utilisation d'HTML en tant que format de présentation. La défaite de Netscape à l'issue de la guerre des navigateurs, le renouveau qui s'ensuit via le projet Mozilla, l'apparition d'IE5 Mac, et à un moindre titre l'évolution d'Internet Explorer Windows 5.x, amorcent cependant au début des années 2000 une nouvelle étape dans l'évolution des pratiques de conception des sites web par les auteurs : ces navigateurs permettent en effet de montrer que les pratiques historiques datant de l'époque de la guerre des navigateurs, mêlant structure et présentation, peuvent réellement être abandonnées au profit d'une démarche fondée sur les feuilles de styles et le respect plus général des standards du web (au sens d'HTML et CSS). [[Jeffrey Zeldman]], cofondateur du [[Web Standards Project]] et fondateur d’''{{Lien|A List Apart}}'' en 1998, apparaît alors comme la figure emblématique de ce mouvement de promotion des standards<ref group="n.">« Une difficile prise de conscience est en effet possible, car le paysage des navigateurs a commencé à changer : même si Microsoft semble exercer un quasi-monopole de fait avec Internet Explorer, un renouveau est en cours. En effet, des navigateurs alternatifs voient le jour (…) Timidement amorcée avec Mozilla 0.6, Opera 4 et même Internet Explorer 5, l'adoption progressive par les navigateurs des standards HTML4, XHTML1, CSS, ECMASCRIPT (…) s'est avéré une nécessité après les excès de la période précédente », [[Tristan Nitot]] et Laurent Denis, préface de {{Harvsp|Zeldman|2006}}.</ref>{{référence insuffisante}}. Il est également l'inspirateur d'une démarche de conception « hybride », tirant profit des techniques CSS tout en demeurant temporairement dans le cadre d'une mise en forme des documents fondée sur les tableaux de présentation.

==== CSS2, des ambitions précipitées ====
Pour répondre aux besoins que la première spécification CSS1 ne couvrait pas encore, CSS est attribué en [[1997]] à un nouveau groupe de travail au sein du W3C, présidé par [[Chris Lilley]]. En 2007, ce groupe comporte notamment des représentants d'[[Apple]], [[Google]], [[International Business Machines Corporation|IBM]], [[Microsoft]], [[Adobe Systems|Adobe]], de la [[Fondation Mozilla]] et d'[[Opera]].

Publié comme une recommandation en mai [[1998]], le second niveau de CSS étend considérablement les possibilités théoriques des feuilles de styles en cascade, avec en particulier environ 70 propriétés supplémentaires. À la mise en forme typographique du texte initiée avec CSS1 s'ajoutent en effet notamment :
* la déclinaison en styles propres aux différents média dans lesquels une page web peut être restituée (impression, rendu par une synthèse vocale, par un dispositif braille, par un dispositif de projection, un mobile, etc.) ;
* de nouvelles propriétés de positionnement à l'écran pour permettre la réalisation de mise en pages avancées, issues d'un document élaboré conjointement par Microsoft et Netscape<ref>{{langue|en|[http://www.w3.org/TR/WD-positioning-970131 Positioning HTML Elements with Cascading Style Sheets, W3C Working Draft, 1997]}}.</ref> ;
* un jeu de propriétés autorisant le téléchargement de polices de caractères spécifiques ;
* de nouvelles propriétés permettant de faire intervenir les préférences de l'utilisateur dans la mise en forme d'un site.

Cependant, cette richesse fonctionnelle ne rencontre qu'un écho limité dans ses implémentations :
* la déclinaison par média est en partie un échec : les styles de rendus vocaux restent théoriques faute de prise en compte par les [[Navigateur vocal|navigateurs vocaux]] et [[Lecteur d'écran|lecteurs d'écran]]. Ils s'avèrent par ailleurs incompatibles avec le standard d'interaction vocale [[Speech Synthesis Markup Language|SSML]]. Il en est de même de l'affichage et de l'impression [[braille]]. Les styles d'impression ne sont que très partiellement adoptés par les navigateurs graphiques, tandis qu'une partie des navigateurs pour [[Téléphonie mobile|mobiles]] ignorent encore au début des années 2000 le type de média CSS qui leur est dédié ;
* seules quelques propriétés avancées de positionnement sont reconnues par l'ensemble des navigateurs graphiques, consolidant ainsi les pratiques de mise en page qui reposent sur des détournements de fonctionnalités CSS (système des blocs flottants ou positionnés) et HTML (tableaux de mises en page) ;
* le téléchargement de polices de caractères suscite des implémentations non conformes et divergentes entre Netscape et Internet Explorer, et rencontre l'opposition des [[Fonte de caractères|éditeurs de fontes]], soucieux de préserver leurs intérêts commerciaux<ref group="n.">''« {{langue|en|CSS2 offers a mechanism for describing and selecting fonts from the web. However, the feature is not much used. Two major reasons for this might be: First, there is no universal font format which all vendors support; and second, font designer want to be compensated for their work and no suitable payment mechanism is available}}»'', Håkon Wium Lie, ''Cascading Style Sheets'', ''Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway'', 2005, http://people.opera.com/howcome/2006/phd/#ch-problems.</ref>.

Plusieurs causes sont évoquées pour expliquer ces difficultés et la lenteur des implémentations CSS2 :
* la « sous-spécification ou quasi-inimplémentabilité de certaines sections »<ref>Daniel Glazman, « Les standards HTML et CSS des origines à mercredi dernier », http://disruptive-innovations.com/zoo/slides/20060922/.</ref>. Håkon Lie souligne lui-même dans sa thèse sur les feuilles de style en cascade, en [[2005]], les risques de non implémentation ou de perte d'interopérabilité liés à des « fonctionnalités excessives », telles que les marqueurs de liste, les repères de coupe pour l'impression ou le téléchargement de polices de caractères. De même, la complexité des sélecteurs avancés est difficilement conciliable avec la gestion de la cascade ;
* l'absence d'intérêt de la part des fabricants de navigateurs pour des fonctionnalités qui ne répondaient pas nécessairement à leurs objectifs stratégiques ou commerciaux ;
* l'interruption du développement d'[[Internet Explorer]], navigateur dominant du marché, de 2001 à 2006. Håkon Lie écrivait en effet en 2005 : {{citation|2001 est un tournant pour CSS. C'est l'année où Microsoft produit Internet Explorer 6.0 qui offre une prise en charge fonctionnelle, bien qu'incomplète et buggée, de CSS […]. Aucun autre navigateur n'a été capable de concurrencer WinIE en ce qui concerne le nombre d'utilisateurs. WinIE a, de ce fait, déterminé le sous-ensemble de CSS utilisable par les auteurs. La prise en charge limitée de CSS par WinIE, combinée à un monopole de fait en matière de navigateur web, est actuellement le plus grave problème du déploiement de CSS<ref>Håkon Wium Lie, {{Langue|en|''Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ'', Faculty of Mathematics and Natural Sciences, University of Oslo, Norway}}, 2005, http://people.opera.com/howcome/2006/phd/#h-339.</ref>.}}

==== CSS 2.1, retour aux implémentations ====
Les retours d'implémentation de CSS2 conduisent le groupe de travail CSS du W3C à rédiger à partir de 2001 une version révisée CSS 2.1 (« {{langue|en|CSS Level 2, Revision 1}} »), sur la base de ce qui était effectivement adopté par les différents navigateurs. Les objectifs de cette révision sont<ref>About the CSS 2.1 Specification, CSS 2.1 vs CSS 2, http://www.w3.org/TR/CSS21/about.html#css2.1-v-css2.</ref> :
* de maintenir la compatibilité avec les parties de CSS2 qui sont largement acceptées et mises en application ;
* d'incorporer dans la norme tous les errata CSS2 déjà publiés ;
* Lorsque les implémentations diffèrent profondément de la spécification CSS2, de modifier la spécification pour qu'elle soit en accord avec les pratiques généralement admises ;
* de supprimer les dispositifs CSS2 qui ont été refusés par la communauté CSS, vu leur manque d'implémentation. CSS 2.1 vise à refléter les mécanismes CSS qui ont été raisonnablement et largement implémentés pour les langages HTML et XML en général (plutôt que pour un langage XML en particulier, ou pour HTML seul) ;
* de supprimer les mécanismes CSS2 qui seront rendus obsolètes par CSS3, et encourager ainsi l'adoption de mécanismes CSS3 à leur place ;
* d'ajouter un (très) petit nombre de nouvelles valeurs de propriétés, lorsque l'expérience d'implémentation a montré qu'elles répondaient à un besoin pour la mise en application de CSS2.

CSS 2.1 corrige CSS2 sur de nombreux points de détail, en supprime certaines sections en tout ou partie (les styles vocaux définis sous le type de media « {{langue|en|aural}} », les styles d'impression, les polices téléchargeables, dont les définitions plus probantes sont repoussées à la future CSS3), et l'explicite à partir des constats mis à jour lors des implémentations (la gestion avancée des blocs flottants via les « contextes de formatage »<ref>[http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage Float, clear et contextes de formatage, Blog & Blues, juin 2006] {{Lien archive|url=http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage |titre=Copie archivée |horodatage archive=20180723140801 }}.</ref>).

Après avoir connu 8 versions successives, CSS 2.1 est en juillet 2007 une recommandation candidate, c'est-à-dire le standard que doivent suivre les implémentations<ref>« {{langue|en|There is no doubt that we will still find (small) bugs in the specification, but given the type of errors we fixed recently, we have reason to believe that the spec is good enough for implementers and users alike. We want people to start implementing and using CSS 2.1 for real (and tell us about any remaining problems, of course)}} », Bert Bos, éditeur de CSS 2.1, http://www.w3.org/blog/CSS/2007/07/20/cssan2_1_is_a_candidate_recommendation.</ref>.

En [[2007]], aucun navigateur n'a en effet achevé l'intégration de CSS 2.1 : celle-ci serait implémentée à 56 % par Internet Explorer 7, 91 % par Firefox 2 et 94 % par Opera 9<ref>Évaluations d'implémentation réalisées par David Hammond, [http://www.webdevout.net/browser-support-summary web browser standards support].</ref>. Par ailleurs, seule une partie des navigateurs graphiques ont passé avec succès ou retenu comme objectif le test [[Acid2]], lancé en [[2005]] par le [[Web Standards Project]], à l'initiative d'Håkon Lie, pour favoriser notamment l'implémentation d'un choix de fonctionnalités CSS 2.1 considérées comme les principales avancées nécessaires : positionnement d'éléments lors de l'affichage, généralisation du modèle de rendu en tableau à tous les éléments, contenu généré via CSS. L'utilisation professionnelle de CSS reste donc limitée à un sous-ensemble arbitraire de celle-ci, déterminé par les implémentations communes.

=== CSS3 ===
[[Fichier:CSS3 taxonomy and status by Sergey Mavrody.svg|thumb|Avancée de la spécification CSS3.]]

Le développement du troisième niveau des feuilles de styles en cascade commence dès 1999, parallèlement à celui de CSS 2.1.

CSS3 devient « modulaire », afin de faciliter ses mises à jour, mais aussi son implémentation par des agents utilisateurs aux capacités et aux besoins de plus en plus variés (navigateurs graphiques, navigateurs pour mobiles, navigateurs vocaux). Les navigateurs peuvent ainsi implémenter des sous-ensembles de CSS3<ref>« {{langue|en|In such cases, a user agent may implement a subset of CSS. Subsets of CSS are limited to combining selected CSS modules, and once a module has been chosen, all of its features must be supported}}. », {{langue|en|Introduction to CSS3}}, http://www.w3.org/TR/css3-roadmap/#whymods.</ref>.

Dès lors, le degré d'avancement de CSS3 varie selon les modules et le degré de priorité qui leur a été donné par le groupe de travail CSS<ref>{{langue|en|Cascading Style Sheets Current Work}}, http://www.w3.org/Style/CSS/current-work.</ref>. En 2007, les modules les plus avancés (recommandations candidates) concernent :

* la mise en forme des annotations [[Ruby (linguistique)|ruby]]  ;
* la négociation de style entre serveurs et agents utilisateurs [[Media queries|(« {{langue|en|Media Queries}} »)]] ;
* le rendu web TV ;
*la gestion des couleurs ;
* la prise en compte de la configuration de l'interface utilisateur. 

Dans d'autres cas, des modules peuvent atteindre le stade de recommandation candidate, mais être par la suite ramenés au stade de document de travail en raison des difficultés mises à jour à la suite de l'appel à implémentation. C'est par exemple le cas du module de typographie « CSS Text ».

De même, les implémentations varient selon les stratégies et les besoins des différents navigateurs :

* [[Opera]] implémente par exemple les « {{langue|en|Media Queries}} », qui répondent à ses besoins spécifiques de navigateur [[multiplate-forme]] embarqué sur des clients ayant des capacités d'affichage très variées ;
* Firefox, davantage orienté vers le navigateur exploité en tant que [[Plate-forme applicative|plateforme]], privilégie en revanche des modules appropriés à cet usage comme le module sélecteurs avancés.

Un programmeur néerlandais, Jori Koolstra, propose en 2002 la notion de [[feuilles de style dynamiques en cascade]].

Certains membres du groupe de travail CSS, ainsi que des développeurs web, ont soulevé le problème de la lenteur de l'avancement de CSS3 :
* pour Ian Hickson, {{citation|le groupe de travail CSS est aujourd'hui atteint de dysfonctionnements chroniques}} : son caractère trop fermé le prive des contributeurs nécessaires pour l'édition des spécifications, leur relecture ou encore la rédaction des suites de test<ref>''« {{langue|en|An open group can iterate much faster than a closed group. With an open group we can get test implementations, feedback, tests, and discussion straight away, instead of waiting months and then pulling back the curtain and presenting a}} fait accompli, {{langue|en|at which points comments are perceived more as a pain than a help.}} »'', Ian Hickson, http://ln.hixie.ch/?start=1181118077&count=1.</ref> ;
* pour Daniel Glazman, cette lenteur s'explique par 3 erreurs originelles : le choix de développer CSS par niveau et non pas par versions successives, la priorité accordée à la révision CSS 2.1 au détriment de CSS3, le nombre excessif de modules CSS3 et la complexité des propriétés qui y sont développées<ref>Daniel Glazman, {{langue|en|[http://www.glazman.org/weblog/dotclear/index.php?post/2004/12/14/746-calling-for-a-new-css-revolution Calling for a new CSS revolution]}}.</ref>.

En 2008, aucun module n'est considéré comme terminé par le W3C, et l'implémentation dans les navigateurs est donc marginale, souvent à titre de test, comme les fonctions -moz-... du [[Gecko (moteur de rendu)|moteur Gecko]], dont le préfixe limite l'utilisation aux seuls navigateurs basés sur Gecko.

=== CSS4 ===
[[File:W3C CSS Snapshot.png|thumb|CSS Snapshot 2021]]
L'écriture du quatrième niveau des feuilles de styles en cascade débute dès 2010<ref>{{langue|en|[http://dev.w3.org/csswg/css4-background/ CSS Backgrounds and Borders Module Level 4] (Editor's Draft 1 April 2010)}}.</ref>, parallèlement aux modules CSS 3.

Certains modules étant figés ou en phase de l'être, des brouillons sont lancés pour continuer d'étendre les possibilités de ces derniers. Le travail se fait donc en complément de la couche précédente, voire en reprenant la couche inférieure pour les sélecteurs<ref>{{langue|en|[http://dev.w3.org/csswg/selectors4/ Selectors Level 4]}}.</ref>.

== Enjeux et principes ==
=== Enjeux ===
==== Séparation entre la structure et la présentation ====
L'un des objectifs majeurs des CSS est de permettre la mise en forme hors des documents. Il est par exemple possible de ne décrire que la structure d'un document en [[HTML]], et de décrire toute la présentation dans une feuille de style CSS séparée. Les styles sont appliqués au dernier moment, dans le navigateur web des visiteurs qui consultent le document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'[[Accessibilité du web|accessibilité]], de changer plus facilement de présentation, et de réduire la complexité de l'architecture d'un document.

Ainsi, les avantages des feuilles de style sont multiples :
* la structure du document et la présentation peuvent être gérées dans des fichiers séparés ;
* la conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d'être plus efficace ;
* dans le cas d'un [[site web]], la présentation est uniformisée : les documents (pages HTML) font référence aux mêmes feuilles de styles. Cette caractéristique permet de plus une remise en forme rapide de l'aspect visuel ;
* un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour l'impression et une pour la lecture à l'écran. Certains [[navigateur web|navigateurs web]] permettent au visiteur de choisir un style parmi plusieurs ;
* le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de balises ni d'attributs de présentation.

==== Présentation selon le média ====
CSS permet de définir le rendu d'un document en fonction du média de restitution et de ses capacités (type de [[Moniteur d'ordinateur|moniteur]] ou de dispositif [[Lecteur d'écran|vocal]]), de celles du navigateur ([[Navigateur web en mode texte|texte]] ou graphique), ainsi que des préférences de son utilisateur.

Les feuilles de styles peuvent être différenciées pour les médias suivants, selon CSS2.1<ref>{{en}} [http://www.w3.org/TR/CSS21/media.html#media-types {{langue|en|Recognized media types, Cascading Style Sheets Level 2 Revision 1 Specification}}].</ref> :
* <code>all</code> : quel que soit le média ;
* <code>screen</code> : écrans d'ordinateur de bureau ;
* <code>print</code> : pour l'impression papier ;
* <code>handheld</code> : écrans de très petite taille et clients aux capacités limitées ;
* <code>projection</code> : quand le document est projeté ;
* <code>tv</code> : quand le document est affiché sur un appareil de type [[télévision]] ;
* <code>speech</code> : pour le rendu via une synthèse vocale (remplaçant <code>aural</code>, initialement prévu par CSS2.0 puis déprécié par CSS2.1).

D'autres types de media sont théoriquement prévus par la spécification CSS2.1, mais ne sont pas implémentés par les agents utilisateurs : <code>braille</code> et <code>embossed</code> pour les tablettes brailles et les embosseuses, ainsi que <code>tty</code> pour les [[téléscripteur]]s.

Dans chaque média, les styles de présentation déterminés par l'auteur du document se combinent avec ceux par défaut de l'agent utilisateur et ceux issus des préférences de l'utilisateur et de sa configuration personnelle.

Les capacités du récepteur peuvent être prises en compte par les auteurs, à destination des agents utilisateurs implémentant le module CSS3 « {{langue|en|media queries}} »<ref>[http://www.w3.org/TR/css3-mediaqueries/ Media Queries].</ref> : celui-ci permet de conditionner la prise en compte d'une feuille de style à des contraintes concernant notamment la résolution ou la capacité de restitution des couleurs.

==== Cascade des styles ====
La « cascade » est la combinaison de différentes sources de styles appliqués à un même document, selon leur degré respectif de priorité. Différents modes de cascade peuvent se combiner :
* par origine des styles, issus de l'agent utilisateur, de l'auteur et de l'utilisateur. La priorité supérieure accordée aux styles de l'utilisateur est un des facteurs principaux de l'accessibilité des documents présentés à l'aide de CSS ;
* par média : une feuille de style générique peut s'appliquer à plusieurs média de restitution (affichage à l'écran, impression, projection) et être combinée avec des feuilles propres à chaque média ;
* selon l'architecture d'un ensemble de documents web : une feuille de style générique peut s'appliquer à la totalité des pages d'un [[site web]], être combinée avec des feuilles propres à chaque rubrique de celui-ci, ainsi qu'avec des styles propres à telle ou telle page spécifique ;
* selon l'architecture des feuilles elles-mêmes : une feuille de style externe au document peut être combinée à une feuille de style interne et à des styles appliqués directement à chaque élément qui le compose (styles « en ligne »). Une feuille de style peut également importer une ou plusieurs autres feuilles externes.

=== Principes techniques et syntaxe de CSS ===
==== Concepts fondamentaux : boîtes et flux CSS ====
Le rendu d'un document stylé est déterminé par les concepts de boîte et de flux. Le moteur de rendu CSS établit une « structure de formatage » reflétant l'[[Document Object Model|arbre logique du document]]. Chaque élément de cette structure génère une ou plusieurs zones dotées de propriétés d'affichage ou de rendu vocal paramétrables. L'affichage ou la lecture s'effectuent à partir du flux des boîtes successivement générées pour chaque élément tel qu'il apparaît dans l'ordre linéaire de la structure de formatage.

Selon les cas de figures, ces différents types de boîtes :
* peuvent avoir des propriétés de marges, de bordure, d'arrière-plan, de largeur ou de hauteur, etc. Dans un rendu vocal, des propriétés équivalentes permettent de déterminer des pauses dans la lecture avant ou après le contenu, de choisir une voix, de régler son débit ou son niveau sonore ;
* peuvent être déplacées par rapport à leur position par défaut dans le flux, ou avoir un comportement particulier dans celui-ci (permettre un rendu en colonnes adjacentes, se superposer aux boîtes voisines, ou être masquées par exemple).

==== Propriétés et valeurs ====
Les caractéristiques applicables aux boîtes CSS sont exprimées sous forme de couples <code>propriété: valeur;</code>.

La propriété et la valeur sont séparés par un double point '<nowiki/>''':'''<nowiki/>', et un point virgule '''';'''<nowiki/>' marque la fin de la boîte.

Les propriétés sont libellées à l'aide de mots-outils anglais tels que « {{langue|en|width}} » (largeur), « {{langue|en|font-size}} » (taille de la police de caractères) ou « {{langue|en|voice-volume}} » (volume sonore du rendu vocal).

Les valeurs peuvent être selon les cas exprimées à l'aide d'unités normalisées par ailleurs, ou de mots-clés propres à CSS. Par exemple, une couleur de fond ou de texte peut être exprimée à l'aide du modèle [[Rouge vert bleu|RGB]] ou des mots clés {{langue|en|black, blue, fuchsia}}, etc.

Les propriétés CSS ont été établies selon un compromis entre deux contraintes opposées : faciliter la lecture des feuilles de styles par les agents utilisateurs en multipliant les propriétés individuelles, ou faciliter leur écriture par les auteurs en recourant à un nombre plus réduit de propriétés combinées. Par exemple, la position d'une image d'arrière-plan est déterminée par une propriété unique (<code>background-position</code>), combinant les deux valeurs d'abscisse et d'ordonnée, et non par deux propriétés distinctes. De même, il existe des propriétés raccourcies permettant aux auteurs de simplifier l'écriture d'une série de propriétés : le raccourci <code>font</code> permet, par exemple, de résumer en une seule règle l'ensemble des propriétés de police de caractères, de taille, de hauteur de ligne, de casse, de graisse et d'italique. Mais l'utilisation du caractère « / » rend beaucoup plus complexe l'analyse syntaxique des feuilles de styles par les agents utilisateurs<ref>{{en}} [http://people.opera.com/howcome/2006/phd/#h-285 ''{{Langue|en|PhD Thesis: Cascading Style Sheets}}''].</ref>.

==== Sélecteurs et blocs de règles ====
Les propriétés sont regroupées par blocs de règles, délimités par les accolades {}. Chaque bloc est précédé d'un sélecteur désignant les éléments structurels auxquels les propriétés concernées doivent être appliquées :
<syntaxhighlight lang="css" line="1">
/*Je suis un commentaire qui commente le code et qui ne fait rien*/
body
{
    /*Couleur de fond : */
    background-color: green;
}
p
{
    /*Couleur du texte : */
    color: red;
    /*Taille du texte en px (pixel) : */
    font-size: 20px;
}
button
{
    /*Contour : */
    outline: none;
    /*Bordure*/
    border: none;
    /*Couleur de fond : */
    background-color: black;
    /*Couleur de texte : */
    color: white;
}
/*Hover veut dire au survol d'un bouton*/
button:hover
{
    /*Couleur de fond : */
    background-color: green;
}
/*Selection veut dire à la selection du texte*/
*::selection
{
    /*Couleur de fond : */
    background-color: black;
    /*Couleur du texte : */
    color: white;
}
</syntaxhighlight>

==== Classes ====
Les classes HTML peuvent êtres modifiés individuellement. Et le style de la classe est, en CSS déclarée de cette façon: <code>.nomDeLaClasse</code>.

Le code suivant aligne le titre HTML de la classe "Titre-HTML" au centre de la page:

Contenu du fichier index.html:<syntaxhighlight lang="html" line="1">
<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1 class="Titre-HTML">Ce titre est maintenant centré.</h1>
    </body>
</html>
</syntaxhighlight>Contenu du fichier style.css:<syntaxhighlight lang="css" line="1">
.Titre-HTML
{
    text-align: center;  
}
</syntaxhighlight>

==== CSSOO ====
Le CSS orienté-objet (en anglais {{langue|en|OOCSS}}), est une méthode créée en 2009<ref>{{Ouvrage |auteur1=Andy Budd |auteur2=Emil Björklund |titre=CSS Mastery |éditeur=Apress |date=26 juillet 2016 |isbn= |lire en ligne=https://books.google.fr/books?id=4L--DAAAQBAJ&pg=PA385&dq=%22OOCSS%22}}</ref> sur le modèle de la [[programmation orientée objet]], permettant de réutiliser ses styles dans plusieurs contextes<ref>{{lien web |titre=OOCSS expliqué avec Monsieur Patate<!-- Vérifiez ce titre --> |url=http://www.design-fluide.com/21-09-2011/le-css-oriente-objet-explique-avec-monsieur-patate/ |site=design-fluide.com |consulté le=08-04-2023}}.</ref>.

==== BEM ====
Le BEM (Block, element, modifier) est une technique d'écriture du CSS inventée en 2010<ref>{{lien web |titre=Bonnes pratiques en CSS : BEM et OOCSS |url=https://www.alsacreations.com/article/lire/1641-BonnespratiquesenCSSBEMetOOCSS.html#bem |site=Alsacréations |consulté le=09-11-2020}}.</ref>, consistant à déclarer les styles sous forme d'arborescence pour en améliorer la performance. Exemple :
<syntaxhighlight lang="css" line="1">
.product 
{

    &-productLabel 
    {
        ...
    }

    &-productPicture 
    {
        ...
    }
}
</syntaxhighlight>

NB : l'[[esperluette]] (&) représente l'objet parent en [[Sass (langage)|Sass]] et en [[LESS (langage)|LESS]].

==  Exemple avec du HTML et CSS ==
Contenu du fichier ''index.html'' :
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <title>Exemple HTML et CSS</title>
    </head>
    <body>
        <button class="btn" id="btn1">Premier bouton</button><br>
        <button class="btn" id="btn2">Deuxième bouton</button><br>
        <button class="btn" id="btn3">Troisième bouton</button>
    </body>
</html>
</syntaxhighlight>

Contenu du fichier ''style.css'' :

<syntaxhighlight lang="css">
.btn
{
    height: 50px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 2s;
    outline: none;
    border: none;
}
*::selection
{
    background-color: lightgreen;
    color: darkblue;
}
.btn:hover
{
    transition: background-color 2s;
}
#btn1
{
    background-color: lightgreen;
}
#btn1:hover
{
    background-color: darkgreen;
}
#btn2
{
    background-color: lightblue;
}
#btn2:hover
{
    background-color: darkblue;
}
#btn3
{
    background-color: red;
}
#btn3:hover
{
    background-color: orange;
}

</syntaxhighlight>
L'ouverture du fichier HTML dans un navigateur montre les styles configurés avec le fichier CSS.

== Limites de CSS ==
=== Indépendance entre présentation et structure ===
CSS ambitionnait initialement l'indépendance entre structure et présentation d'un document.

Ainsi, le site du {{langue|en|[[CSS Zen Garden]]}}, créé en [[2003]] par {{Lien|trad=Dave Shea (web designer)|Dave Shea}}, se veut la démonstration de la possibilité de modifier librement le rendu affiché d'une même page web, uniquement grâce à CSS et sans aucune modification de son code HTML<ref>[http://www.csszengarden.com/ {{langue|en|CSS Zen Garden}}].</ref> : il présente, en décembre 2006, 986 designs différents de sa page d'accueil<ref>[http://www.mezzoblue.com/zengarden/alldesigns/ {{langue|en|CSS Zen Garden Comprehensive Design List}}].</ref>. Cependant, la plupart de ces designs reposent en tout ou partie sur le remplacement du contenu textuel de la page par des images CSS qui le reproduisent en enrichissant son aspect<ref>{{Harvsp|Shea|Holzschlag|2005|p=14}}.</ref> : la liberté graphique repose toujours partiellement sur la transformation du texte en image. D'autre part, le CSS Zen Garden reste un exercice de style limité à un document unique, à la structure doublée d'éléments et attributs sémantiquement neutres, qui ne servent qu'à donner appui à des sélecteurs CSS<ref group="n.">« Depuis le lancement de CSS Zen Garden sont apparues des techniques de remplacement d'images sans recours à un span. De ce fait, la plupart des éléments span sont devenus inutiles. Et les classes supplémentaires n'étant pas exploitées dans 98 % des maquettes soumises, elles sont elles aussi redondantes. La liste d'éléments div et span vides à la fin du document est également superflue, sauf pour les possibilités d'ouverture offertes au designer. », {{Harvsp|Shea|Holzschlag|2005}}.</ref>.

S'il existe de nombreux exemples de documents HTML pour lesquels plusieurs feuilles de style ont été développées, il n'existe que peu d'exemples de feuilles de style génériques, indépendantes de la structure du document. Les styles par défaut des agents utilisateurs en sont un exemple, mais limité à des effets typographiques simples, sans définition de mise en page<ref group="n.">CSS1 propose un exemple de styles destiné notamment aux navigateurs : [http://www.w3.org/TR/REC-CSS1#appendix-a {{langue|en|Sample style sheet for HTML 2.0}}]. CSS2 définit une feuille de style type mais indicative pour cet usage : [http://www.w3.org/TR/CSS21/sample.html {{langue|en|Default style sheet for HTML 4}}]. Avec XHTML2.0, ces styles types sont susceptibles de devenir normatifs : [http://www.w3.org/TR/xhtml2/xhtml2-style.html#a_stylesheet {{langue|en|Style sheet for XHTML 2}}].</ref>. En général, les feuilles de style dépendent étroitement de la structure du document à styler et sont difficilement réutilisables sur des documents différemment structurés. C'est davantage à travers la création de patrons HTML CSS que s'exploite cette indépendance potentielle des styles envers la structure spécifique des documents.

Plus généralement :
* les difficultés et le manque d'implémentation d'une partie des propriétés CSS limitent la liberté de mise en page, et conduisent à l'utilisation de propriétés contraignantes quant à la structure HTML (par exemple, la propriété <code>float</code> impose un ordre précis du contenu ainsi mis en colonne ; de nombreux effets de rendu reposent d'autre part sur une surcharge de balisage sémantiquement neutre, tel que <code>div</code> et <code>span</code>) ;
* la réutilisation d'une structure unique sur des médias ou des matériels différents grâce à des feuilles de styles est limitée par les contraintes liées aux contenus eux-mêmes et à la capacité des agents utilisateurs à restituer ceux-ci, et par la nécessité d'une négociation de présentation entre client et serveur. Des procédés d'adaptation spécifiques du contenu, de la structure et du rendu côté agent utilisateur se sont avérés nécessaires, tels, que, par exemple, la technologie ERA ({{langue|en|Extensible Rendering Architecture}}) développée par [[Opera]]. Internet Explorer suit une voie similaire avec sa version 7 qui remodèle le rendu imprimé d'une page web afin de l'optimiser.

=== Accessibilité ===
CSS favorise l'[[Accessibilité du web|accessibilité d'une page web]] en donnant en dernier ressort à l'utilisateur le contrôle du rendu d'un document dans son navigateur : il est ainsi possible de l'adapter à des contraintes ou à des préférences concernant par exemple la taille d'affichage des caractères ou les couleurs. En séparant structure et présentation, CSS favorise également l'écriture de documents structurés de manière sémantique, potentiellement plus exploitables par les aides techniques : la liberté de présentation des éléments de titrage permet par exemple de respecter strictement l'ordre hiérarchique formel de ceux-ci, ce qui permet en retour aux aides techniques d'en établir une table des matières navigable. Enfin, en donnant aux auteurs les moyens d'enrichir la mise en forme du texte, CSS permet de limiter le recours aux textes mis en images<ref group="n.">« {{langue|en|However, pictures were also a threat to the web. Designers started to encode text in images in order to achieve certain fonts or other special effects. In order for HTML to remain a logical markup language (as opposed to a presentational language) a style sheet language was needed. So, the motivation for developing style sheets was twofold: we wanted to give authors the presentational effects they craved, while stopping HTML from sliding down the ladder of abstraction to become a presentational language}} », Interview with Håkon Wium Lie, 31 mars 2005, http://www.webstandards.org/2005/03/31/interview-with-hkon-wium-lie/.</ref>.

Cependant, certaines utilisations de CSS peuvent également compromettre l'accessibilité du contenu :
* en substituant à celui-ci des pseudo-contenus qui ne sont accessibles qu'aux utilisateurs qui peuvent percevoir le rendu CSS visuel : c'est le cas par exemple des informations qui seraient véhiculées par des images d'arrière-plan ;
* en bouleversant la cohérence nécessaire entre l'ordre linéaire de l'information dans le contenu structuré et l'ordre visuel du rendu CSS affiché. Les aides techniques telles que les [[Lecteur d'écran|lecteurs d'écran]] n'ont en effet accès qu'à cet ordre linéaire : une information qui ne prendrait son sens qu'en fonction de son positionnement CSS n'est pas compréhensible pour leurs utilisateurs ;
* dans une démarche d'accessibilité fondée sur la pertinence de la structure [[Hypertext Markup Language|HTML]], l'éventail des possibilités de mise en forme de contenu avec CSS peut faire perdre de vue la nécessité de baliser le contenu à l'aide d'éléments signifiants. Il est par exemple possible de délimiter visuellement une citation en la mettant en italique ou en l'encadrant de guillemets, mais l'information sur l'origine de ce texte ne sera perceptible, au sens des normes d'accessibilité, que via l'utilisation des [[éléments HTML|éléments]] <code>q</code> ou <code>blockquote</code>, qui sont les seuls permettant de définir une citation HTML et d'en indiquer la source via l'attribut approprié (<code>cite</code>).

Les méthodes d'application des [[Accessibilité du web|directives d'accessibilité des contenus web]] ([[Référentiel général d'accessibilité des administrations|RGAA]], {{langue|en|[[Unified Web Evaluation Methodology|UWEM]]}} par exemple) définissent donc des règles d'usages des styles CSS<ref>Par exemple, le test RGAA [http://rgaa.referentiels.modernisation.gouv.fr/index.php/front/web/points_de_controle/tous_les_tests_web/6_1/6_1_4 Accessibilité des informations affichées comme fonds d'éléments ''via'' les styles CSS].</ref>.

=== Simplicité ===
CSS répond à une volonté de disposer d'un format de présentation simple, tant dans ses fonctionnalités que dans sa syntaxe, afin d'en favoriser la manipulation directe par les auteurs et les utilisateurs. Cependant, cette simplicité est remise en cause par plusieurs facteurs :
* la difficulté à déterminer et à contrôler le résultat de la cascade lorsque les sources de styles se multiplient. Le rendu final d'un contenu précis dépend de la combinaison de plusieurs feuilles et peut alors devenir malaisé à faire évoluer. L'interdépendance des feuilles de styles peut rendre difficilement anticipable le résultat d'une modification apportée à l'une d'elles. Les auteurs sont alors placés devant un choix entre cette interdépendance qui optimise la quantité de code et la redondance de styles qui facilite sa maintenance<ref>Dave Shea, {{en}} [http://www.mezzoblue.com/archives/2005/01/20/redundancy_v/ {{langue|en|''Redundancy vs. Dependency''}}].</ref> ;
* La difficulté à écrire des styles utilisateurs sans disposer de compétences avancées. Les utilisateurs sont en théorie les premiers bénéficiaires des CSS, qui leur donnent la possibilité d'adapter la présentation des pages web. Cependant, le mécanisme des styles se prête difficilement au développement d'[[Environnement graphique|environnements graphiques]] qui faciliteraient la manipulation des propriétés CSS<ref>{{en}}Håkon Wium Lie, {{langue|en|''Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway, 2005''}}, http://people.opera.com/howcome/2006/phd/#h-337.</ref>. Dans la pratique, le recours aux styles utilisateur reste dès lors marginal.

== Standardisation ==

=== Frameworks ===
Les frameworks CSS sont des bibliothèques pré-préparées destinées à permettre un style plus facile et plus conforme aux normes des pages Web à l'aide du langage des feuilles de style en cascade. Ils incluent [[Blueprint (framework)|Blueprint]], [[Bootstrap (framework)|Bootstrap]], [[Cascade Framework]], et [[Foundation (framework)|Foundation]]. 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 "<nowiki><head></nowiki>". Ils fournissent un certain nombre d'options prêtes à l'emploi pour la conception et la mise en page Web. Bien que beaucoup de ces frameworks aient été publiés, certains auteurs les utilisent principalement pour le prototypage rapide, ou pour apprendre, et préfèrent le CSS "artisanal" qui est approprié à chaque site publié sans la conception, la maintenance et les frais de téléchargement liés à de nombreuses fonctionnalités inutilisées. dans le style du site<ref>{{Ouvrage|langue=en|prénom1=Dan|nom1=Cederholm|prénom2=Ethan|nom2=Marcotte|titre=Handcrafted CSS: More Bulletproof Web Design|éditeur=New Riders|date=2010-04-09|isbn=978-0-13-210481-4|lire en ligne=https://books.google.pl/books?id=UgrUeIwsS60C&pg=PA114&redir_esc=y#v=onepage&q&f=false|consulté le=2021-03-29}}</ref>.

=== 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 les performances 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 cascade organique), SMACSS (architecture évolutive et modulaire pour CSS) et BEM (bloc, élément, modificateur)<ref>{{Lien web |titre=OOCSS, ACSS, BEM, SMACSS: what are they? What should I use? – clubmate.fi |url=https://web.archive.org/web/20150602231126/http://clubmate.fi/oocss-acss-bem-smacss-what-are-they-what-should-i-use/ |site=web.archive.org |date=2015-06-02 |consulté le=2021-03-29}}</ref>.

== Notes et références ==
=== Notes ===
{{Références|groupe=n.|taille=35}}

=== Références ===
{{Références|taille=35}}

== Voir aussi ==

{{Autres projets
  | wikibooks         = Le langage CSS
  | wikibooks titre   = Le langage CSS
  | wikiversity       = Cascading Style Sheet
  | wikiversity titre = Cascading Style Sheet
  | commons           = Category:Cascading Style Sheets
  | commons titre     = Catégorie:Cascading Style Sheets
}}

=== Bibliographie ===

* {{Ouvrage |langue=fr |langue originale=en |prénom1=Jeffrey |nom1=Zeldman |lien auteur1=Jeffrey Zeldman |titre=Design web |sous-titre=utiliser les standards |éditeur=[[Eyrolles]] |lieu=Paris |année=2006 |mois=novembre |pages totales=381 |isbn=978-2-212-12026-4}}
* {{Ouvrage |prénom1=Dave |nom1=Shea |prénom2=Molly |nom2=Holzschlag |titre=Le Zen des CSS |éditeur=[[Eyrolles]] |année=2005 |mois=novembre |jour=17 |isbn=978-2-212-11699-1}}
* {{Ouvrage |langue=fr |langue originale=en |prénom1=Andy |nom1=Budd |prénom2=Cameron |nom2=Mall |prénom3=Simon |nom3=Collison |titre=Maîtrise des CSS |éditeur=Pearson |collection=Le Campus |lieu=Paris |année=2010 |numéro d'édition=2 |pages totales=290 |isbn=978-2-7440-2400-9}}
* {{Ouvrage |langue=en |prénom1=Håkon Wium |nom1=Lie |lien auteur1=Håkon Wium Lie |titre=Cascading Style Sheets |éditeur=[[Université d'Oslo|université d’Oslo]] |année=2005 |format=thèse de doctorat |isbn= |lire en ligne=http://people.opera.com/howcome/2006/phd/ |consulté le=4 octobre 2014 |archiveurl=https://web.archive.org/web/20141004215348/http://people.opera.com/howcome/2006/phd/ |archivedate=4 octobre 2014 |brisé le=23 juillet 2018}}
* {{Ouvrage |langue=en |prénom1=Håkon Wium |nom1=Lie |prénom2=Bert |nom2=Bos |titre=Cascading Style Sheets |sous-titre=designing for the Web |éditeur= |année=1999 |pages totales=396 |isbn=978-0-201-59625-0}}
* {{Ouvrage |prénom1=Raphaël |nom1=Goetter |titre=Mémento CSS3 |éditeur=[[Eyrolles]] |année= |isbn=978-2-212-13281-6}}
* {{en}} [http://dl.acm.org/citation.cfm?doid=2187836.2187946 On the Analysis of Cascading Style Sheets], [[Pierre Geneves]], Nabil Layaida, and Vincent Quint, Proceedings of the 21st International Conference on World Wide Web (WWW'12), {{p.|809-818}}, 2012.

=== Articles connexes ===
* [[Feuille de style]]
* [[Conception de site Web]]
* [[Flex Box CSS]]

== Liens externes ==
* {{en}} [http://www.w3schools.com/cssref/default.asp W3Schools' CSS reference], références, usage, tests et support par les navigateurs.
*{{en}} [https://mdbootstrap.com CSS Framework] - bibliothèques pré-préparées destinées à permettre un style plus facile et plus conforme aux normes des pages Web à l'aide du langage des feuilles de style en cascade

=== Recommandations du [[World Wide Web Consortium|W3C]] ===
* {{en}} [http://www.w3.org/TR/REC-CSS1 {{langue|en|Cascading Style Sheets, level 1}}], recommandation du W3C, 17 décembre 1996, revu le 11 janvier 1999
** [http://www.yoyodesign.org/doc/w3c/css1/ Les feuilles de style en cascade, niveau 1], traduction non officielle
* {{en}} [http://www.w3.org/TR/REC-CSS2 {{langue|en|Cascading Style Sheets, level 2, CSS2 Specification}}], recommandation du W3C, 12 mai 1998
** [http://www.yoyodesign.org/doc/w3c/css2/cover.html Les feuilles de style en cascade, niveau 2, Spécification CSS2], traduction non officielle
* {{en}} [http://www.w3.org/TR/CSS21/ {{langue|en|Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification}}], recommandation du W3C, 7 juin 2011
* {{en}} [http://www.w3.org/Style/CSS/current-work {{langue|en|Cascading Style Sheets Current Work}}], état d'avancement des travaux du ''{{langue|en|Cascading Style Sheets Working Group}}'', dont le développement de CSS3

{{Palette|Accessibilité du web}}

{{Portail|informatique|Internet|Web sémantique|Édition numérique}}

[[Catégorie:Langage informatique]]
[[Catégorie:Standard du web]]
[[Catégorie:Format ouvert]]
[[Catégorie:CSS| ]]