L'équipe Chrome était très présente à la conférence CSS Day cette année. Nous avons géré le service d'assistance CSS, en répondant aux questions des participants, mais nous avions également un tableau blanc où nous demandions aux gens ce qui, selon eux, manquait encore à CSS. Dans cet article, je vais partager les résultats de cette question et vous demander de nous dire ce qui, selon vous, manque à HTML et CSS en répondant à cette courte enquête. Êtes-vous d'accord avec les participants du CSS Day ?
Les dix demandes les plus fréquentes
Les participants ont été invités à écrire leurs idées sur des notes autocollantes et à les ajouter au tableau. Les utilisateurs peuvent également voter pour des idées en ajoutant un autocollant. Voici les dix principales fonctionnalités.
Compatibilité avec la mise en forme des entrées
Il s'agit de la fonctionnalité la plus demandée (21 votes). Vous avez vraiment besoin de moyens pour styliser ces éléments d'UI courants de manière cohérente.
Nous sommes bien conscients de ce problème chez Chrome, car il s'agit d'un point sensible majeur pour les développeurs. Nous nous efforçons de créer de meilleures solutions pour eux. Par exemple, les éléments de sélection personnalisables visent à fournir un moyen d'activer le nouveau comportement de style. Vous pouvez ensuite ajouter des images ou des styles plus élaborés aux options. L'avantage de cette approche est qu'elle reviendrait à un menu de sélection classique, ce qui permettrait une amélioration progressive.
Visuellement masqué
Avec 19 votes lors du CSS Day, il s'agissait de la deuxième demande la plus populaire. La demande concerne un moyen d'ajouter du contenu utilisé uniquement par les lecteurs d'écran. Il peut s'agir d'un élément HTML dont le contenu n'est pas affiché, mais uniquement lu par un lecteur d'écran.
Aujourd'hui, les développeurs y parviennent généralement en créant une classe .visually-hidden pour masquer le contenu tout en le rendant accessible aux lecteurs d'écran.
Bien que cette demande soit populaire, certaines personnes pensent que cette fonctionnalité ne devrait pas être implémentée. Pour en savoir plus, consultez Visually hidden content is a hack that needs to be resolved, not enshrined et cette discussion sur CSS WG issue 560.
position: sticky inside overflow:hidden
Cette demande a recueilli 16 votes. Actuellement, position: sticky ne fonctionne que lorsque tous les parents sont overflow: visible.
Il existe un problème ouvert depuis 2017 à ce sujet. Bien que le cas d'utilisation initial de l'activation de overflow: hidden pour effacer les flottants soit peut-être moins nécessaire aujourd'hui, de nombreux autres scénarios sont détaillés dans le fil de discussion.
Animer vers height: auto
Avec 12 votes, de nombreux participants souhaitaient que l'animation soit height: auto. Nous sommes heureux de vous annoncer que cette fonctionnalité sera bientôt disponible sur la plate-forme Web grâce à la propriété CSS interpolate-size et à la fonction calc-size().
Elles seront disponibles à partir de Chrome 129.
Nous publierons prochainement un article contenant plus d'informations à ce sujet.
Types d'entrée supplémentaires
HTML5 vous a apporté 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 double plage ou la saisie semi-automatique avec une liste de données personnalisée.
Nombres aléatoires réels en CSS
Une autre demande ayant recueilli 10 votes concernait les nombres aléatoires réels dans CSS. Cela a déjà été demandé et contourné dans le passé pour une animation-duration aléatoire.
Classes de style Mixin
CSS a ajouté un certain nombre de fonctionnalités déjà présentes dans les préprocesseurs CSS : les variables avec des propriétés personnalisées et maintenant l'imbrication CSS. Les mixins réutilisables ne font pas encore partie du langage, mais sept participants au CSS Day ont exprimé leur intérêt pour cette fonctionnalité.
Le groupe de travail CSS a décidé de commencer à travailler sur une spécification pour cette fonctionnalité. Vous pouvez ajouter vos réflexions et vos cas d'utilisation à la discussion dans ce problème.
Styles globaux dans le Shadow DOM
Un autre problème qui a fait l'objet d'un long fil de discussion sur les cas d'utilisation est la demande d'autorisation d'appliquer des styles CSS globaux à l'intérieur d'un Shadow DOM. Six personnes ont demandé cela lors du CSS Day. Cette fonctionnalité permettrait d'appliquer des styles de réinitialisation globaux dans les composants Web et d'utiliser des fichiers CSS uniques dans tous les composants d'un site. Consultez ce récapitulatif des cas d'utilisation et dites-nous si cette fonctionnalité vous intéresse.
Diviser des unités mixtes
Une proposition pour Interop 2024 demandait la possibilité de diviser par des unités mixtes, par exemple calc(100vw / 1px). Il a été jugé trop vaste pour Interop 2024, mais de nombreux développeurs, dont six personnes lors du CSS Day, souhaiteraient le voir mis en œuvre.
nth-letter
CSS comporte un certain nombre de pseudo-éléments qui agissent comme si vous aviez inséré une balise span autour d'une section de contenu. 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 une vingtaine d'années. Nous savons donc que les développeurs Web souhaitent cette fonctionnalité depuis longtemps. Six personnes ont voté pour cette fonctionnalité lors de la CSS Day, ce qui en fait la dernière de notre top 10 des fonctionnalités les plus demandées.
Êtes-vous d'accord avec le top 10 du CSS Day ?
Nous aimerions recueillir l'avis d'un plus large public sur ces problèmes. L'un d'eux figure-t-il dans votre top 10 ? Sinon, y a-t-il autre chose que vous aimeriez voir dans CSS et HTML ? Pour nous en informer, remplissez ce court formulaire. Nous résumerons les réponses dans un autre post.