À la fin de l'année dernière, Interop 2023 s'est achevée. Cette initiative des fournisseurs de navigateurs et d'autres parties vise à créer un Web plus interopérable, en limitant les différences d'un navigateur à l'autre pour vous tromper. Cet article présente les résultats finaux, ainsi que certaines des fonctionnalités préférées de l'équipe Chrome.
Les scores finaux
C'est super de voir autant de verdure, en comparant ce résultat aux scores début 2023. Nous avons beaucoup progressé, chaque navigateur ayant constaté une énorme augmentation du score.
Qu'est-ce qui nous enthousiasme ?
Retrouvez la liste complète des domaines prioritaires pour l'année 2023 dans le tableau de bord Interop 2023. Certains domaines d'action, tels que :has(), les requêtes de conteneur et l'attribut inert, couvrent l'intégralité d'une fonctionnalité. D'autres, comme le travail sur Flexbox, ont subi quelques échecs subtils de test dans une fonctionnalité multinavigateur existante.
:has()
"Enfin, un sélecteur de parent pour CSS. Nous l'avions demandé presque depuis le tout premier jour. Enfin, l'intégrer à tous les navigateurs est fantastique et signifie que les développeurs doivent exécuter moins de code JavaScript pour émuler ce sélecteur." – Thomas Steiner, ingénieur des relations avec les développeurs sur Chrome.
La pseudo-classe fonctionnelle :has() a suscité beaucoup d'enthousiasme, car elle a apporté à la plate-forme une demande clé de la part des développeurs. Il vous fournit un sélecteur de parent, qui vous permet de sélectionner un élément en fonction des éléments qu'il contient. Cependant, il peut être utilisé pour beaucoup plus de choses. Comme expliqué dans la section Encapsulés en CSS, vous pouvez sélectionner bien plus qu'un élément parent, et même effectuer des sélections latérales.
:has(): station d'accueilUna Kravets, ingénieure DevRel dans l'équipe Chrome, explique:
"Le sélecteur :has() est l'une des nouvelles fonctionnalités CSS les plus flexibles et puissantes. Vous pouvez ainsi appliquer un style à n'importe quel parent en fonction de la présence, de l'état ou même du nombre d'éléments enfants. Vous pouvez également le combiner à d'autres combinateurs pour appliquer un style à vos frères et sœurs, et ainsi contrôler davantage le style de votre interface utilisateur. C'est une fonctionnalité tellement flexible ! J'ai déjà vu une tonne de démonstrations sympas qui évitent d'avoir à utiliser des scripts supplémentaires pour tirer parti de la puissance de :has()."
Comme Philip Jägenstedt, ingénieur logiciel sur Chrome, m'a rappelé que :has() était la principale fonctionnalité avec laquelle les développeurs ont rencontré des difficultés en raison d'un manque d'assistance, posées dans l'enquête sur l'état des CSS en 2023.
Nous ne sommes donc pas les seules personnes
enthousiastes à l'idée d'avoir cette fonctionnalité.
Vous pouvez écouter Una, ainsi qu'Adam Argyle, parler de has() sur le CSS Podcast, puis en apprendre davantage sur :has() grâce à ces posts publiés par la communauté Web.
- Découvrir le sélecteur CSS
:has()à l'aide d'exemples - Verrouillage du défilement avec
:has() - Cas d'utilisation du CSS
:has()
Requêtes de conteneur
L'année 2023 a été riche en événements qui étaient autrefois considérés comme impossibles. En plus de :has(), la plate-forme Web a enfin obtenu la compatibilité avec plusieurs navigateurs pour les requêtes de conteneur. Vous avez demandé des requêtes de conteneur (ou d'élément) depuis 2011, seulement un an après l'introduction du concept de responsive design. Désormais, il est disponible et disponible dans les principaux moteurs de navigateur.
Una et Adam ont parlé des requêtes de conteneur dans le podcast CSS, et Una les a présentés dans un épisode de la série "Concevoir dans le navigateur". La communauté a partagé de nombreux conseils et idées.
Sous-réseau
Subgrid est mon inclusion préférée dans Interop 2023. Elle vous permet de définir une grille sur un élément parent, puis d'utiliser les tailles de suivi définies sur ce parent, sur des grilles imbriquées dans cette grille principale. Grâce au travail des ingénieurs de la plate-forme Web de Microsoft Edge, subgrid est devenue disponible dans tous les principaux moteurs de navigateur en 2023, afin d'améliorer le score de Chrome et de proposer cette fonctionnalité passionnante à tous.
Adriana Jara, ingénieure en relations avec les développeurs Chrome, m'a expliqué comment la grille et les sous-réseaux facilitaient la création d'une interface utilisateur de qualité,
"Je ne maîtrise pas bien les visuels, les mises en page, la cohérence de l'apparence et l'adaptation aux écrans. Mais avec la grille et les sous-grilles, il est possible de créer une conception qui fonctionne sur plusieurs tailles d'écran et s'adapte automatiquement au contenu ! C'est mon préféré, car il répond à un besoin fondamental de créer un site Web qui offre aux utilisateurs une expérience correcte sans une grande expertise."
J'ai rédigé quelques cas d'utilisation de "subgrid" dans un article de 12 Days of Web. Comme pour les autres fonctionnalités de cet article, vous pouvez écouter un épisode de podcast CSS. Il existe également de nombreuses ressources provenant du Web.
- Découvrir la sous-grille CSS
- Vidéo: mises en page faciles et plus cohérentes avec le sous-grille
- Mettre en page le contenu avec une grille et une sous-grille CSS
Espaces colorimétriques et fonctions
Il n'est pas surprenant que le développeur CSS Adam Argyle m'ait dit que les espaces de couleur et les fonctions étaient sa fonctionnalité préférée.
"Dites adieu aux calculs complexes sur la variable de valeur de canal HSL. Voici quelques phrases en une ligne pour la variante de couleur juste à temps. En plus de résoudre les problèmes liés au workflow de couleur, les nouveaux espaces et fonctions de couleur permettent d'accéder à des dégradés et des couleurs plus avancés, fiables et plus vives. Pourquoi ne pas aimer le fait de débloquer certaines fonctionnalités tout en vous facilitant la vie ? Saupoudrez ce plat d'assaisonnement, et ce plat est délicieusement coloré."
Adam a créé des contenus étonnants pour vous aider à comprendre ces nouvelles fonctionnalités, comme le Guide des couleurs CSS en haute définition et gradient.style, et vous parle des fonctions de couleur dans le podcast CSS.
Il est passionnant d'avoir ces fonctionnalités disponibles sur tous les principaux moteurs de navigateur. Lisez ces articles pour en savoir plus.
- Combiner des couleurs en CSS
- Formats de couleur en CSS
- Couleurs LCH en CSS: quoi, pourquoi et comment ?
Nous attendons l'interopérabilité en 2024
Une fois que les fonctionnalités deviennent interopérables, elles font partie de Baseline, une nouvelle bibliothèque disponible. Il est passionnant de voir le nombre de nouvelles fonctionnalités ajoutées dans ce groupe en 2023, en grande partie grâce au travail de toutes les personnes impliquées dans Interop 2023. Il sera bientôt temps d'annoncer les domaines d'action sélectionnés pour 2024, et nous avons tous hâte de découvrir à quel point la plate-forme Web pourra s'améliorer cette année.