L'équipe Chrome a été très présente lors de la conférence CSS Day cette année. Nous avons géré le centre d'assistance CSS, en répondant aux questions des participants, mais nous avons également utilisé un tableau blanc pour demander aux participants ce qui leur manquait encore dans CSS. Dans cet article, je vais partager les résultats de cette question et vous demander de nous dire ce qui vous manque dans le HTML et le CSS en répondant à cette courte enquête. Êtes-vous d'accord avec les participants à la CSS Day ?
Les dix requêtes les plus fréquentes
Les participants ont été invités à écrire leurs idées sur des notes adhésives et à les ajouter au tableau. Ils peuvent également voter pour des idées en ajoutant un autocollant. Voici les dix principales fonctionnalités.
Prise en charge du style des entrées
Il s'agit de la fonctionnalité la plus demandée, avec 21 votes. Vous voulez vraiment trouver un moyen de styliser ces éléments d'interface utilisateur courants de manière cohérente.
Il s'agit d'un point sensible pour les développeurs, et nous travaillons actuellement à de meilleures solutions pour eux. Par exemple, les éléments sélectionnables personnalisables visent à permettre d'activer un nouveau comportement de stylisation. Vous pouvez ensuite ajouter des images ou même un style plus élaboré aux options. L'avantage de cette approche est qu'elle utilisera un menu de sélection standard, ce qui permet d'en faire une amélioration progressive.
Masquées visuellement
Avec 19 votes lors du CSS Day, il s'agit de la deuxième requête la plus populaire. La demande consiste à trouver un moyen d'ajouter du contenu utilisé uniquement par les lecteurs d'écran. Il peut s'agir d'un élément HTML, où le contenu n'est pas affiché et n'est lu que par un lecteur d'écran.
Pour ce faire, les développeurs créent généralement une classe .visually-hidden pour masquer le contenu, mais le rendre accessible aux lecteurs d'écran.
Bien que cette demande soit populaire, certains ne pensent pas qu'elle devrait être implémentée. Pour en savoir plus, consultez Le contenu masqué visuellement est un piratage qui doit être résolu, et non entériné et cette discussion sur le problème 560 du CSSWG.
position: sticky inside overflow:hidden
Cette demande a reçu 16 votes. Actuellement, position: sticky ne fonctionne que lorsque tous les parents sont overflow: visible.
Un problème ouvert datant de 2017 demande cela. Bien que l'utilisation initiale de l'activation de overflow: hidden pour effacer les flottants soit moins nécessaire aujourd'hui, de nombreux autres scénarios sont détaillés dans le fil de discussion.
Animer vers height: auto
Sur 12 votes, de nombreux participants ont souhaité animer height: auto. Nous sommes heureux de pouvoir annoncer que cette fonctionnalité sera disponible sur la plate-forme Web avec la propriété CSS interpolate-size et la fonction calc-size().
Ils seront disponibles à partir de Chrome 129.
Nous vous communiquerons plus d'informations à ce sujet dans un prochain post.
Autres types d'entrée
HTML5 a introduit de nombreux types différents pour l'élément <input>, par exemple type="email" pour une adresse e-mail ou type="range" pour un curseur de plage.
Lors du CSS Day, nous avons reçu 10 votes pour d'autres types, par exemple la plage double ou la saisie semi-automatique avec une liste de données personnalisée.
Nombres aléatoires réels en CSS
Une autre requête ayant reçu 10 votes concernait de véritables nombres aléatoires dans le CSS. Cette fonctionnalité a été demandée et a été contournée par le passé pour une durée d'animation aléatoire.
Classes de style de mixin
Le CSS a ajouté un certain nombre de fonctionnalités auparavant présentes dans les préprocesseurs CSS : variables avec des propriétés personnalisées, et maintenant imbrication CSS. Cependant, les mixins réutilisables ne font pas encore partie du langage, mais sept des participants à la journée CSS étaient impatients de les voir.
Le groupe de travail CSS a pris une résolution pour commencer à travailler sur une spécification de cette fonctionnalité. Vous pouvez ajouter vos commentaires et cas d'utilisation à la discussion sur ce problème.
Styles globaux dans le Shadow DOM
Un autre problème qui fait l'objet d'un long fil de discussion sur les cas d'utilisation est la demande d'autoriser les styles CSS globaux à s'appliquer dans un DOM ombragé. Six personnes l'ont demandé lors du CSS Day. Cette fonctionnalité permettrait aux styles de réinitialisation globaux de s'appliquer également dans les composants Web, et aux fichiers CSS individuels de fonctionner dans tous les composants d'un site. Consultez ce résumé des cas d'utilisation et indiquez-nous si vous souhaitez également bénéficier de cette fonctionnalité.
Diviser des unités mixtes
Une proposition pour Interop 2024 a demandé la possibilité de diviser par des unités mixtes, par exemple calc(100vw / 1px). Il a été jugé trop large pour Interop 2024, mais de nombreux développeurs, dont six personnes lors de la journée CSS, aimeraient le voir implémenté.
nth-letter
Le CSS comporte un certain nombre de pseudo-éléments qui se comportent comme si vous aviez englobé une section de contenu dans une span. Par exemple, le pseudo-élément ::first-letter cible la première lettre de la première ligne du conteneur de bloc auquel il est appliqué.
::nth-letter ne figure pas dans cette liste. Vous demandez ::nth-letter depuis environ vingt ans. Nous savons donc que les développeurs Web demandent depuis longtemps cette fonctionnalité. Lors du CSS Day, six personnes ont voté pour cette fonctionnalité, ce qui en fait la dernière de notre top 10 des fonctionnalités souhaitées.
Êtes-vous d'accord avec le top 10 de la CSS Day ?
Nous aimerions connaître l'avis d'un public plus large sur ces problèmes. Y en a-t-il un qui figure dans votre top 10 ? Sinon, y a-t-il autre chose que vous aimeriez voir dans CSS et HTML ? Pour nous en faire part, remplissez ce court formulaire. Nous résumerons les réponses dans un autre post.