CSS (Les feuilles de style en cascade ) serait à nouveau redevenu « amusant » d'après l'ingénieur logiciel Jeff Sandberg,

Mais c'est loin d'être un avis généralement partagé

Jeff Sandberg, un ingénieur logiciel, nous invite à redécouvrir CSS, le langage de style des pages web, qui a connu une renaissance tranquille ces derniers temps. Il nous raconte comment CSS est passé d’un outil simple et limité à un langage riche et puissant, capable de réaliser des mises en page complexes, des effets visuels et des animations. Il nous présente les nouvelles fonctionnalités de CSS, comme les variables, la flexbox, les grilles, les sélecteurs avancés et les préférences de l’utilisateur. Sandberg explique pourquoi CSS est devenu plus facile à utiliser, et comment il peut nous aider à créer des sites web plus beaux, plus réactifs et plus accessibles.

Dans les années 90, les sites web étaient stylisés à l’aide d’attributs en ligne tels que bgcolor, font et friends. Si vous vouliez un style plus complexe, vous utilisiez des tableaux et des images découpées. Ou alors, on utilisait Flash, mais c’était une autre paire de manches. Lorsque le CSS est apparu, il était plutôt cool, mais beaucoup trop simple pour répondre à nos besoins. Il était possible de définir des couleurs, des tailles et quelques propriétés de positionnement, mais c’était un peu la limite. Il fallait toujours utiliser des tableaux pour réaliser des mises en page complexes.


Nous avons abandonné les tableaux avec l’arrivée de CSS 2 qui nous a donné des primitives pour positionner nos objets. Nous pouvions déplacer les éléments sur la page, les faire flotter sur le côté et ajuster une grande partie de leur apparence. CSS était enfin viable pour la réalisation d’une page entière. Cependant, nous nous sommes rapidement heurtés aux limites de ce que nous pouvions faire. Les coins arrondis nécessitaient encore un découpage d’image et les positionnements complexes, c’est-à-dire les grilles (si complexes !), nécessitaient JavaScript.

Pour beaucoup, c'est là que CSS a stagné. CSS n'a pas vraiment stagné. Il a lentement progressé, développant des éléments tels que les ombres, le rayon des bordures, puis plus tard la flexbox et les grilles. Mais, malgré cette lente progression, il avait acquis la réputation d'être fragile et difficile à utiliser. Des astuces comme les clearfixes sont apparues ; des bribes de connaissances qu'il suffisait de trouver et d'utiliser, puis d'appliquer comme du plâtre bon marché dans une maison que l'on a l'intention de retourner.

Les styles de réinitialisation sont apparus pour rendre les choses un peu plus cohérentes. Des outils externes comme Sass et PostCSS ont rationalisé le processus de création de CSS, vous évitant d'avoir à vous souvenir de tous les préfixes des navigateurs ou de la façon d'écrire tous les rayons des bordures. Enfin, certains développeurs ont commencé à se débarrasser de certaines parties de CSS, privilégiant des approches plus simples, sans savoir exactement ce qu'ils abandonnaient, mais en étant certains qu'ils n'en avaient pas besoin.

CSS a été développé par le W3C (World Wide Web Consortium) en 1996 pour une raison assez simple. Les éléments HTML n'ont pas été conçus pour avoir des balises qui aideraient à formater la page. Vous étiez uniquement censé écrire le balisage de la page web. Des balises comme <font> ont été introduites dans la version 3.2 de HTML, ce qui a causé beaucoup de problèmes aux développeurs web. Étant donné que les pages web ont des polices différentes, des arrière-plans colorés et des styles multiples, il était long, pénible et coûteux de réécrire le code. Le CSS a donc été créé par le W3C pour résoudre ce problème.

Le CSS n'est pas techniquement une nécessité, mais vous ne voudriez probablement pas regarder une page web qui ne contiendrait que des éléments HTML, car elle semblerait complètement dépouillée.

CSS est l'abréviation de Cascading Style Sheets (feuilles de style en cascade) et est utilisé pour styliser des éléments écrits dans un langage de balisage tel que HTML. Il sépare le contenu de la représentation visuelle du site. La relation entre HTML et CSS est étroitement liée puisque HTML est le fondement même d'un site et que CSS représente toute l'esthétique d'un site web.

Avantages des feuilles de style CSS sur les pages web

La différence entre une page web qui met en œuvre les feuilles de style CSS et une autre qui ne le fait pas est énorme et certainement perceptible. Vous avez peut-être déjà vu un site web qui ne se charge pas complètement et qui présente un arrière-plan blanc avec la plupart du texte en bleu et en noir. Cela signifie que la partie CSS de la page web ne s'est pas chargée correctement ou qu'elle n'existe pas du tout.

Voilà à quoi ressemblent les pages web composées uniquement de HTML, et je pense que vous conviendrez que ce n'est pas très attrayant. Avant l'utilisation des feuilles de style CSS, tous les éléments de style devaient être inclus dans le balisage HTML. Cela signifie que les développeurs web devaient décrire séparément la couleur d'arrière-plan, la taille de la police, les alignements, etc.

CSS vous permet de tout styliser dans un fichier différent, ce qui vous permet de créer le design à cet endroit et d'intégrer plus tard les fichiers CSS par-dessus le balisage HTML. Cela rend le balisage HTML actuel beaucoup plus propre et plus facile à maintenir.

En bref, grâce aux fonctions CSS, il n'est pas nécessaire de décrire à plusieurs reprises l'apparence de chaque élément. Cela permet de gagner du temps, de raccourcir le code et de le rendre moins sujet aux erreurs. CSS permet d'avoir plusieurs styles sur une page HTML, ce qui rend les possibilités de personnalisation presque infinies. De nos jours, cela devient plus une nécessité qu'une commodité.

CSS : évolution des fonctionnalités et des méthodes de mise en page

Au fil du temps, CSS s'est lentement enrichi de nouvelles fonctionnalités. La plupart d'entre elles étaient nouvelles, mais leur utilité était limitée. Les sélecteurs tels que :is et :where, bien qu'utiles, n'ont que peu fait bouger l'aiguille en termes de quantité de code à écrire. Flexbox et CSS Grids sont arrivés, ont facilité les choses pour ceux qui les utilisaient, mais ont reçu moins de fanfare qu'ils ne le méritaient ; de nombreux sites et cadres de mise en page utilisent encore des méthodes plus anciennes, celles que les développeurs ont apprises à l'épreuve du feu.

Les variables, ou propriétés personnalisées, ont fait grand bruit, notamment parce qu'elles permettent de réaliser des choses impossibles à faire autrement. Les variables du préprocesseur ne tiennent pas compte du contexte, elles ne peuvent pas être réinitialisées à l'aide d'éléments tels que les styles de médias ou les préférences de l'utilisateur, et elles ne sont donc que des espaces réservés super fantaisistes pour la recherche et le remplacement.

« Récemment, le rythme des nouvelles fonctionnalités s'est tellement accéléré que j'envie ceux qui apprennent CSS aujourd'hui et qui n'ont pas à apprendre tout le bagage et les anciennes façons de faire. Ils verront tous les nouveaux outils sur leur établi et se mettront au travail », déclare Sandberg.

L'imbrication CSS est la plus grande fonctionnalité du « préprocesseur », tous les préprocesseurs dignes de ce nom l'implémentent, et maintenant elle est réalisée en CSS natif. Il y a une petite mise en garde concernant la syntaxe, car des changements de dernière minute ont eu lieu, mais ce n'est pas tout à fait comme les préfixes d'antan ; vous devez juste utiliser un & dans plus de sélecteurs qu'il n'est idéal, et au fur et à mesure que les navigateurs mûrissent, cette limitation disparaîtra vraisemblablement.

Il est maintenant possible d’étendre les styles à un élément ou à un sélecteur spécifique, et écrire un support pour les différents psuedos qui sont communs, d'une manière propre, nette et non répétitive. Il est également possible d’écrire les media queries en ligne, là où elles doivent être, avec des propriétés à l'intérieur, plutôt que la redondance que nous avons vue auparavant.

Color-mix est une fonctionnalité de CSS qui permet de mélanger deux couleurs en utilisant des proportions données, dans un espace de couleur donné. Elle prend en charge l’espace colorimétrique et peut utiliser des propriétés personnalisées. Cette fonctionnalité permet d’écrire des styles plus simples et plus lisibles, sans avoir à utiliser des fonctions Sass telles que lighten, darken ou transparentize. Vous pouvez maintenant écrire ces styles avec du vrai CSS. Par exemple, si vous voulez créer une surbrillance à partir d’une couleur primaire qui est choisie et définie à l’extérieur, c’est plus simple avec color-mix.

Il s'agit d'un mélange de couleur primaire et de 50 % de blanc, dans l'espace sRGB. Il est également possible d’utiliser d'autres espaces colorimétriques plus récents et plus performants, tels que OKLCH. Le nouveau modèle de couleur OKLCH offre une façon intuitive et cohérente de créer des couleurs pour le web.

Containment et Style queries landed, qui vous permettent de créer des sections entières de votre feuille de style dont le style est basé sur leur taille, et non sur la taille de la fenêtre. Pour les conceptions basées sur des composants, c'est incroyable. Vous pouvez désormais créer des composants qui s'affichent d'une certaine manière lorsqu'ils sont « petits » et d'une autre manière lorsqu'ils sont plus grands.

Jeff Sandberg a fait une analyse intéressante de l’évolution de CSS. Il a souligné comment CSS est passé d’un outil simple et limité à un langage riche et puissant, capable de réaliser des mises en page complexes, des effets visuels et des animations. Il a également présenté les nouvelles fonctionnalités de CSS, telles que les variables, la flexbox, les grilles, les sélecteurs avancés et les préférences de l’utilisateur.

Cependant, sa déclaration selon laquelle CSS était trop simple pour répondre à nos besoins lorsqu’il est apparu peut être remise en question. Bien que les sites web des années 90 étaient stylisés à l’aide d’attributs en ligne tels que bgcolor, font et friends, il était possible d’utiliser des feuilles de style en cascade (CSS) pour réaliser des mises en page plus complexes. En fait, CSS était une amélioration significative par rapport aux méthodes précédentes telles que les tableaux et les images découpées.


On peut être d’accord avec Jeff Sandberg sur le fait que CSS est devenu plus facile à utiliser au fil du temps et qu’il peut aider à créer des sites web plus beaux, plus réactifs et plus accessibles. Cependant, il est important de noter que CSS n’est pas parfait et qu’il y a encore des limites à ce que nous pouvons faire avec lui. Par exemple, les coins arrondis nécessitent encore un découpage d’image et les positionnements complexes nécessitent JavaScript.

Source : Jeff Sandberg's blog post, Software Engineer

Et vous ?

L'analyse de Jeff Sandberg est-elle pertinente ?

Que pensez-vous de CSS et de son utilisation aujourd'hui ?

Voir aussi :

La fonctionnalité CSS Nesting Module passe en « First Public Working Draft », la possibilité d'imbriquer des sélecteurs CSS se dirige vers une normalisation

La version 3.0 de Tailwind CSS, le framework qui permet de créer rapidement des sites Web modernes, est disponible, il apporte des gains de performance incroyables

Tailwind CSS v3.3 est désormais disponible, et apporte un large éventail de nouvelles fonctionnalités, dont une palette de couleurs étendue pour les tons sombres et un support pour ESM/TS