Publié le 6 décembre 2024
Les résultats de l'état du CSS en 2024 et de l'état du HTML en 2024 sont désormais disponibles. Cet article présente un aperçu initial de certains des résultats les plus intéressants de ces enquêtes.
Optimisme concernant la plate-forme Web
Avant d'examiner certains des problèmes rencontrés par les utilisateurs avec le HTML et le CSS, les enquêtes témoignent d'un optimisme certain concernant la plate-forme. Lorsqu'on leur a demandé si la plate-forme Web allait dans la bonne direction dans l'ensemble, 58% des participants à l'étude State of HTML ont répondu "oui", dont 18 % "tout à fait".
Pour le CSS, :has() a été la nouvelle fonctionnalité CSS préférée, 36% des personnes la classant comme la meilleure. Le deuxième favori est @container avec 17 %, à égalité avec l'imbrication CSS.
Que faites-vous ?
Les données CSS ont révélé quelques surprises. Par exemple, plus de 75% des utilisateurs ont utilisé des effets de filtre CSS, ce qui en fait la fonctionnalité la plus utilisée. Compte tenu du nombre de plaintes concernant la cascade au fil des ans, il est intéressant de constater que les calques en cascade ne sont utilisés que par 18,9% des utilisateurs. Il est possible que cela soit lié à l'adoption d'outils tels que Tailwind, qui empêchent les utilisateurs de rencontrer des problèmes liés à la cascade plus souvent.
Les éléments de repère tels que <main> et <nav> arrivent en tête de l'enquête HTML pour les éléments que vous utilisez. C'est formidable de voir autant de personnes utiliser le chargement différé et les techniques d'images responsives.
Principaux problèmes de compatibilité avec les navigateurs
Les problèmes d'interopérabilité ou de compatibilité des fonctionnalités avec les navigateurs surviennent toujours lorsque nous discutons avec les développeurs. Les enquêtes vous ont directement demandé les problèmes que vous avez rencontrés. Voici les 10 fonctionnalités les plus problématiques, classées par pourcentage de personnes qui les ont sélectionnées.
- API Popover
- Positionnement des ancrages
- Requêtes de conteneur
:has()- Vue d'imbrication CSS
- API Transition
- Sous-grille
- Grille
<dialog>- Progressive web apps
Le positionnement des ancres a obtenu 11% dans les deux enquêtes, l'API View Transition 9% dans l'état du CSS et 8% dans l'état du HTML, ce qui montre à quel point ces fonctionnalités sont considérées comme utiles par les développeurs.
Il est intéressant de noter que plusieurs des fonctionnalités sont interopérables. Les requêtes de conteneur, :has(), l'imbrication CSS et la sous-grille sont disponibles en tant que référence. L'API Popover le serait également, mais en raison d'un problème de fermeture légère sur iOS. L'élément <dialog> est désormais largement disponible, tout comme la mise en page en grille CSS. Il peut être utile d'examiner ces résultats pour identifier les problèmes rencontrés par les utilisateurs. Les réponses concernant la grille, par exemple, font souvent référence à sa difficulté d'apprentissage plutôt qu'à un problème d'interopérabilité réel.
Nous espérons que la référence aidera les développeurs à comprendre l'état des choses et à savoir si un problème qu'ils rencontrent est dû à un manque de compatibilité avec le navigateur ou à autre chose. Nous sommes ravis de constater que ces enquêtes mettent en avant l'état de référence des fonctionnalités. Vous pouvez également consulter l'état de disponibilité dans les différents navigateurs pour les principaux problèmes liés aux CSS sur webstatus.dev.
Certaines fonctionnalités sont manquantes
Les enquêtes permettent également de savoir quelles fonctionnalités sont manquantes sur la plate-forme. Cela nous aide à voir ce qui est encore difficile à réaliser. Les taux de réponse à cette question étaient plus faibles. Toutefois, dans l'enquête sur l'état du CSS, les personnes ont demandé le plus souvent des mixins, une logique conditionnelle et une mise en page en maçonnerie.
Fait intéressant, les utilisateurs ont également demandé un sélecteur parent (:has() fournit cette fonctionnalité) et l'imbrication, qui existe déjà et est disponible en tant que nouvelle référence.
La question posée aux participants à l'étude sur l'état du code HTML était la suivante : "Si vous pouviez ajouter trois éléments au code HTML, quels seraient-ils ?". 51% des personnes ont demandé des tableaux de données. Les autres options populaires incluent les onglets et les éléments d'activation/de désactivation.
Sur quel sujet souhaitez-vous en savoir plus ?
Les enquêtes comportent une fonctionnalité qui vous permet d'ajouter des éléments à une liste de lecture si vous souhaitez en savoir plus à leur sujet après avoir terminé l'enquête. Il s'agit de données précieuses, en particulier si vous créez du contenu pour les développeurs. La liste suivante présente les dix principales fonctionnalités des deux enquêtes, classées par pourcentage de personnes qui les ont ajoutées à leur liste.
- CSS
hanging-punctuation - CSS
offset-path @scope- Positionnement des ancrages
- Sélection personnalisable
view-timelinescroll-timelinefocusgroupattribut- Animation des propriétés discrètes
image()
Consultez les résultats complets avec la liste de lecture CSS et la liste de lecture HTML.
Un signal de la communauté Web
Chrome accepte ces enquêtes, car elles nous permettent d'obtenir des informations sur vos principaux problèmes et sur les sujets qui vous intéressent le plus sur la plate-forme Web. Ce n'est pas le seul signal que nous utilisons, mais c'est un moyen de nous faire part directement de vos commentaires. Si vous avez répondu à l'une ou aux deux de ces enquêtes, merci. Vous nous aidez à améliorer le Web comme vous le souhaitez. Si vous souhaitez nous aider, il est encore temps de participer à The State of JS.