Découvrez quelques-unes des fonctionnalités qui sont devenues interopérables en 2022.
Une année s'achève, et le moment est venu de faire le point sur les améliorations apportées par les navigateurs, car nous collaborons pour améliorer l'interopérabilité de la plate-forme Web. Pour savoir comment les choses ont commencé, lisez notre post de mars de cette année, lorsque cette initiative a été lancée.
Les scores globaux à la fin de l'année révèlent une nette amélioration sur tous les moteurs.
Dans cet article, découvrez les progrès réalisés en 2022. En plus de ces fonctionnalités phares, tous les moteurs ont apporté de nombreuses améliorations mineures. Nous avons corrigé les petits problèmes susceptibles de provoquer des incohérences entre les moteurs et des problèmes pendant le développement. Nous sommes ravis de voir de grandes fonctionnalités disponibles sur plusieurs navigateurs, mais ce sont parfois les petits éléments qui causent le plus de problèmes, et nous sommes ravis de voir à quel point nous avons apporté des améliorations.
Couches en cascade
Les couches en cascade vous permettent de gérer la cascade en regroupant les sélecteurs dans des couches. Ce type de fonctionnalité n'est utile que lorsqu'il est disponible partout. Tous les principaux moteurs prennent désormais en charge les couches en cascade et les scores obtenus sur l'ensemble des 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 une facilité d'utilisation et une accessibilité que vous auriez autrement à développer et à tester pour créer 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-grille
Début 2022, le seul navigateur compatible avec les valeurs subgrid pour grid-template-rows et grid-template-columns était Firefox. Safari est pris en charge en 2022, et la fonctionnalité est en cours de développement dans Chrome. La date limite d'interopérabilité de fin d'année va bientôt être dépassée, mais elle est en bonne voie.
Unités de la fenêtre d'affichage
Les blocs de fenêtre d'affichage sont la seule fonctionnalité ayant réussi 100% des tests de réussite sur tous les moteurs. Cela inclut le concept de petite et de grande fenêtre d'affichage, qui tient compte de l'évolution de la taille de la fenêtre d'affichage sur mobile lorsque les éléments d'interface utilisateur de l'appareil apparaissent et disparaissent. Pour en savoir plus sur ces blocs, consultez l'article sur les grands, petits et blocs de fenêtre d'affichage dynamiques.
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 définition supérieure (par exemple, display p3, rec2020), mais aussi de fournir de nouvelles fonctions de couleur dotées chacune d'utilitaires uniques pour utiliser 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 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 de couleurs utilisé par leurs dégradés. Le même indicateur active également la compatibilité avec color-mix(), ce qui vous permet de mélanger deux couleurs dans un espace de votre choix. La fonction color-mix() se trouve é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 2023
J'espère que vous serez heureux d'apprendre que nous ne prévoyons pas de nous arrêter d'ici la fin de l'année 2022 et que Interop 2023 a déjà bien atteint la phase de planification initiale. En ce début d'année, nous serons en mesure d'annoncer les fonctionnalités qui ont été sélectionnées. Nous espérons que cette nouvelle année facilitera le développement pour le Web.
Image principale par Ian Schneider.