CSS X : le problème d’un standard sans version
A l’instar du HTML Le HTML (HyperText Markup Language) est le langage standard utilisé pour structurer et afficher le contenu sur le web. Il définit des éléments comme les titres, paragraphes, liens, images, et autres composants d'une page web. LS ( LS pour Living Standard ), le CSS Le CSS (Cascading Style Sheets) est un langage utilisé pour décrire l'apparence et la mise en page des documents HTML, en définissant des styles comme les couleurs, polices, marges, et positionnements des éléments sur une page web. est un standard vivant et n’a donc plus de numéro de version. Et cela a des incidences que Bert Bos, membre du groupe de travail CSS au sein du W3C Le World Wide Web Consortium (W3C) est une organisation internationale qui développe des standards ouverts pour assurer la croissance à long terme du web, comme HTML, CSS, et XML. décrit dans un excellent article que je vous recommande. Résumé en 600 mots et analyse en français de ce texte d’environ 1500 mots :
La problématique
Le développement CSS a commencé en 1995. Au début cette technologie devait fournir une typographie enrichie pour des documents simples. Désormais elle permet de gérer plusieurs colonnes, des mises en pages complexes, des animations, etc. Depuis le paradigme HTML LS, il n’y a plus de numéro de version. Cela est valable pour HTML et CSS. Là où le premier évolue peu, le second lui évolue énormément avec de nouvelles possibilités qui s’ajoutent peu à peu à intervalles irréguliers.
Dès lors, ces nouvelles possibilités passent pour beaucoup inaperçues. En effet, tous les développeurs Web n’ont pas la disponibilité ou l’envie de suivre (comme artwaï) les nouveautés CSS publiées par le W3C et les différents éditeurs de logiciels. De plus, le W3C n’a plus l’occasion de faire un grand événement annonçant que «CSS X» est arrivé avec son lot de nouvelles fonctionnalités… Bert Bos y voit un doute majeur dans la signification que l’on donne à CSS :
Et c’est un problème pour les développeurs Web qui veulent se commercialiser eux-mêmes : Que mettent-ils dans leur CV ?
S’ils écrivent « expert CSS », cela pourrait tout aussi bien signifier le CSS d’il y a dix ans ou celui d’aujourd’hui.
Les modules CSS
Aujourd’hui, la spécification CSS est divisé en modules qui acquièrent individuellement une nouvelle version (appelée niveau) au fur et à mesure que de nouvelles fonctionnalités leur sont ajoutées.
Sur la page officielle du W3C relative à CSS, vous pouvez trouver la liste complète des modules.
Pas simple à suivre je vous l’avoue. Ce qu’il faut comprendre c’est que l’ensemble complet de modules de CSS comprend désormais de tout : des modules qui sont toujours de niveau 1 aux modules qui sont déjà de niveau 5… Chaque module évolue à sa propre vitesse. De sorte que l’ensemble complet des modules CSS, comprend des modules à la fois normalisés, stables et en cours de développement. C’est ce qu’on appelle un standard vivant !
Pratique pour ceux qui spécifient
Cela fonctionne bien pour le groupe de travail, qui peut publier de nouvelles fonctionnalités pour CSS chaque fois qu’elles sont prêtes, sans attendre que d’autres fonctionnalités non liées soient également prêtes.
Cela fonctionne aussi pour les fabricants de navigateurs et autres logiciels intégrants du CSS. En règle générale, si deux fabricants de logiciels réussissent à implémenter une fonctionnalité, cela prouve suffisamment que la fonctionnalité est viable. Mais il faut parfois du temps avant que d’autres se mettent à implémenter la même fonctionnalité.
Une méconnaissance pour les intégrateurs Web.
Mais cela fonctionne-t-il pour les personnes qui utilisent CSS pour écrire des feuilles de style ? Pas si évident : l’absence de version, la multitude et la complexité des modules, et l’irrégularité des publications rendent difficile la compréhension de l’ensemble. L’idée étant pour un intégrateur de savoir quand la spécification est utile et donc exploitable dans le cible navigateur qu’il s’est fixé.
En outre, les groupes de travail en CSS, ne suivent pas activement l’état des implémentations. Heureusement, d’autres personnes le font. Les sources les plus connues de l’état d’implémentation sont probablement MDN et Can I Use. Mais ce n’est pas suffisant…
La recommandation de Bert Bos
On pourrait résumer l’idée de Bert Bos ainsi : la publication d’une version de CSS tous les 3 ans reprenant les nouveaux modules intéressants qui ont été ajoutés au cours de cette période.
Selon artwaï
Vous vous doutez bien que si l’on vous parle de l’article « CSS X » de Bert Bos, c’est bien que nous approuvons complètement ses réflexions. Selon notre agence web rennaise, il y a un trésor de nouveautés sous-exploitées soit par habitude* soit par méconnaissance du panel des possibilités. Pour preuve, nous allons conclure cet article en vous donnant 10 exemples de propriétés ou sélecteurs CSS pourtant bien supportés mais pas assez utilisés :
- animation-delay :
propriété essentielle pour décaler ses animations afin de les appliquer à plusieurs éléments sans récréer une nouvelle animation, et sa valeur en seconde ou milliseconde peut même être négative. - background-blend-mode :
des effets sur des images de background pas essentiel mais créatif. - calc()
essentiel pour mixer des valeurs avec des unités fixes et relatives. - counter :
modifier la numérotation des listes mais aussi de tout autres éléments que l’on veut numéroter comme des titres. - position : sticky
fixer un élément dans la page mais aussi dans un autre élément parent. - quotes :
redéfinir le type de guillemets voir même le type de guillemets à l’intérieur d’autre guillemets. - scroll-snap :
on a parlé il y a peu. - shape-outside :
modifier la marge d’un élément selon une forme pour que le texte l’épouse. - will-change :
pour indiquer aux navigateurs d’optimiser un changement de valeur sur une propriété, pour améliorer la réactivité d’une animation par exemple. - -webkit-line-clamp :
pour gérer la limite d’affichage d’un texte sur plusieurs lignes.
Source : w3.org .
Image par Wojciech Krakowiak de Pixabay
*Note de l’auteur à ses collègues : je ne parle pas ici de ce foutu Flexbox ! Je sais parfaitement ce que ça fait ! Je trouve ça inutile dans 90% des cas. Un point, c’est tout.
