Découvrez quelques-unes des fonctionnalités qui sont devenues interopérables en 2022.
Une autre année touche à sa fin. Le moment est venu de nous intéresser aux améliorations apportées par les navigateurs dans le cadre de notre collaboration visant à améliorer l'interopérabilité de la plate-forme Web. Découvrez comment tout a commencé dans notre article du mois de mars de cette année, lorsque l'initiative était lancée.
À la fin de l'année, les scores globaux montrent une nette amélioration sur l'ensemble des moteurs.
Dans cet article, découvrez les progrès accomplis en 2022. En plus de ces fonctionnalités principales, de nombreuses améliorations mineures ont été apportées par tous les moteurs. Les petits problèmes pouvant provoquer des incohérences entre les moteurs et vous faire exploser pendant le développement ont été résolus. Les fonctionnalités disponibles sur plusieurs navigateurs sont très intéressantes, mais ce sont parfois les petites choses qui causent le plus de problèmes, et nous sommes ravis de constater toutes les améliorations apportées.
Couches en cascade
Les couches en cascade vous permettent de gérer la cascade en regroupant les sélecteurs en couches. Ce type de fonctionnalité n'est utile que lorsqu'elle est prise en charge partout. Tous les principaux moteurs prennent désormais en charge les couches en cascade et les scores de tous les navigateurs reflètent l'interopérabilité de la fonctionnalité. Il ne reste plus que quelques tests à réussir pour Firefox.
Élément de boîte de dialogue
L'élément de boîte de dialogue permet de créer des boîtes de dialogue modales et non modales. Il s'agit d'un modèle courant sur le Web, et l'utilisation de cet élément vous offre la facilité d'utilisation et l'accessibilité que vous auriez dû développer et tester lors de la création de vos propres composants. Dans l'article Créer un composant de boîte de dialogue, Adam Argyle explique comment s'appuyer sur cet élément pour créer différents types de boîtes de dialogue.
Sous-réseau
Début 2022, Firefox était le seul navigateur compatible avec la valeur subgrid pour grid-template-rows et grid-template-columns. En 2022, Safari a été pris en charge, et la fonctionnalité est en cours de développement dans Chrome. La date limite d'interopérabilité pour la fin d'année va être dépassée, mais elle est en passe.
Unités de la fenêtre d'affichage
Les unités de la fenêtre d'affichage sont la seule fonctionnalité à avoir atteint 100% de tests réussis sur l'ensemble des moteurs. Cela inclut le concept de fenêtre d'affichage petite et grande, qui tient compte de l'évolution de la taille de la fenêtre d'affichage sur mobile lorsque les éléments de l'interface utilisateur des appareils apparaissent et disparaissent. Pour en savoir plus sur ces blocs d'affichage, consultez les articles consacrés aux grands, petits et grands blocs de fenêtre d'affichage.
Navigateurs pris en charge
- 108
- 108
- 101
- 15,4
Couleur 4
Cette collection de couleurs permet au CSS non seulement de spécifier des couleurs dans des gammes de meilleure définition (par exemple, display p3, rec2020), mais fournit également de nouvelles fonctions de couleur, chacune ayant des utilitaires uniques pour travailler avec la couleur. Les nouveaux espaces de couleur sont lch(), oklch(), lab(), oklab(), display-p3, rec2020, a98-rgb, prophoto-rgb, xyz, xyz-d50 et xzy-d65: essayez-les dans Canary dès aujourd'hui avec cet indicateur activé. Ces modifications s'appliquent également aux dégradés, ce qui permet aux auteurs de spécifier l'espace colorimétrique que leurs dégradés utilisent. Le même indicateur active également la compatibilité avec color-mix(), ce qui vous permet de mélanger deux couleurs dans l'espace de votre choix. La fonction color-mix() est également derrière un indicateur dans Safari et Firefox. Plus de couleurs, de meilleures couleurs, de meilleurs dégradés et de meilleurs outils.
Interopérabilité 2023
J'espère que vous serez heureux d'apprendre que nous ne prévoyons pas de s'arrêter fin 2022 et que Interop 2023 est déjà en phase de planification initiale. Au début de l'année, nous annoncerons le lancement des fonctionnalités qui ont été sélectionnées. Nous nous réjouissons de poursuivre cette année afin de faciliter le développement sur le Web.
Image principale d'Ian Schneider