Baseline 2023

Baseline arrive sur caniuse.com. Cet article présente l'intégration ainsi que certaines des fonctionnalités qui ont été ajoutées à Baseline en 2023.

Avec la nouvelle définition de la référence, le cycle de vie d'une caractéristique comporte deux étapes. Premièrement, lorsqu'il devient nouveau, puis lorsqu'il devient largement disponible, après 30 mois. Une fonctionnalité est ajoutée à Baseline lorsqu'elle devient interopérable dans les navigateurs suivants:

• Safari (macOS et iOS)
• Firefox (ordinateur et Android)
• Chrome (ordinateur et Android)
• Edge (ordinateur)

Baseline atterrit sur "Can I Use"

L'étape suivante pour clarifier la disponibilité des fonctionnalités, la version de référence commence à se poser sur "Can I Use from today" (Est-ce que je peux l'utiliser à partir d'aujourd'hui). Sur certaines pages de "Can I Use", un badge vous indique si la fonctionnalité est disponible dans Baseline.

Les fonctionnalités nouvellement disponibles dans Baseline sont associées à un badge, ainsi qu'à l'année de leur mise à disposition. Ainsi, tout ce qui est devenu interopérable cette année sur l'ensemble du navigateur principal fait partie de Baseline 2023.

Dans la suite de cet article, découvrez les fonctionnalités qui ont franchi cette étape importante en 2023. Toutes ces fonctionnalités font partie de la nouvelle version de Baseline 2023.

Dimensionner les requêtes de conteneur et les unités de requête de conteneur

Les requêtes de conteneur de taille vous permettent d'interroger la taille d'un élément, à peu près de la même manière que les requêtes média vous permettent d'interroger la taille de la fenêtre d'affichage. Ils facilitent considérablement la création de composants réutilisables, car vous pouvez créer des composants qui réagissent à la taille de la zone dans laquelle ils sont placés.

La conception de la fiche suivante change en fonction de la largeur du composant. Pour en savoir plus, consultez Les requêtes de conteneur arrivent dans des navigateurs stables.

Nouveaux espaces de couleurs et nouvelles fonctions

CSS accepte désormais les espaces de couleur qui vous permettent d'accéder à des couleurs en dehors de la gamme sRVB. Cela signifie que vous pouvez utiliser les écrans HD (haute définition), avec des couleurs issues de gammes HD.

Nouveaux modèles de couleur

Dans la version de référence, les fonctions de couleur lch(), lab(), oklch() et oklab() donnent accès aux modèles de couleur LCH, Lab, OKLCH et OKLab.

La fonction color-mix()

En outre, de nouvelles fonctions de couleur ont été intégrées à la référence. La fonction color-mix() permet de mélanger une couleur avec une autre, dans n'importe quel espace colorimétrique. Dans le code CSS suivant, 25% du bleu est mélangé à du blanc dans l'espace colorimétrique srgb.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

En savoir plus sur color-mix().

La fonction color()

La fonction color() peut être utilisée pour n'importe quel espace colorimétrique qui spécifie des couleurs avec des canaux R, V et B. color() utilise d'abord un paramètre d'espace colorimétrique, puis une série de valeurs de canaux pour RVB et éventuellement un nombre alpha. Vous pouvez utiliser srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 et xyz-d65. Exemple :

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

Le guide des couleurs CSS en haute définition propose de nombreux autres exemples de nouveaux espaces de couleur et fonctions, ainsi que des informations sur ceux à utiliser et quand.

Flux de compression

L'API Compression Streams est une API JavaScript permettant de compresser et de décompresser des flux de données. Grâce à cette compression intégrée, les applications n'ont plus besoin d'inclure une bibliothèque de compression.

Pour en savoir plus, consultez Les flux de compression sont désormais compatibles avec tous les navigateurs.

Canevas hors écran

Avant OffscreenCanvas, les fonctionnalités de dessin de canevas étaient liées à l'élément <canvas>, ce qui signifiait qu'elles dépendaient directement du DOM. Comme son nom l'indique, OffscreenCanvas dissocie le DOM et l'API Canvas en les déplaçant hors de l'écran.

Grâce à ce découplage, le rendu d'OffscreenCanvas est entièrement dissocié du DOM. Il offre donc des améliorations de vitesse par rapport au canevas standard, car il n'y a pas de synchronisation entre les deux. De plus, il peut être utilisé pour déplacer le travail de rendu vers un Web Worker, même s'il n'existe pas de DOM disponible, ce qui libère le thread principal et rend l'application plus réactive.

Pour en savoir plus, consultez OffscreenCanvas : accélérez les opérations de canevas avec un nœud de calcul Web.

Préchargement du module

Le préchargement des modules peut réduire le temps de téléchargement et de traitement. Ajoutez rel="modulepreload" à l'élément "link" qui fait référence à un module JavaScript. Le navigateur récupère alors le module, l'analyse et le compile, puis place les résultats dans le mappage de module prêts à être exécutés.

Pour en savoir plus, consultez l'article Précharger des modules.

Fonctions trigonométriques en CSS

En 2023, les fonctions trigonométriques de la spécification Valeurs CSS et Unités de niveau 4 sont devenues interopérables. Cela signifie que les fonctions sin(), cos(), tan(), asin(), acos(), atan() et atan2() font partie de Baseline 2023.

Apprenez à utiliser ces fonctions et découvrez quelques cas d'utilisation dans la section Fonctions trigonométriques en CSS.

L'attribut inerte

Inerte signifie ne pas pouvoir se déplacer. Ainsi, lorsque vous marquez un élément inerte, vous supprimez tout mouvement ou toute interaction de ces éléments DOM. L'attribut inerte oblige le navigateur à ignorer l'élément.

• L'événement click ne se déclenche pas si un utilisateur clique sur l'élément.
• L'élément n'est pas sélectionné.
• L'élément et son contenu sont exclus de l'arborescence d'accessibilité.

Cet attribut doit être ajouté aux éléments qui se trouvent hors de l'écran ou sont masqués. Pour en savoir plus, consultez la section Attribut inerte.

Sous-grille dans une mise en page en grille CSS

La valeur subgrid pour grid-template-columns et grid-template-rows vous permet d'utiliser les pistes définies dans une grille parente, sur des grilles imbriquées. Cela signifie que vous pouvez aligner les éléments de ces grilles imbriquées les uns avec les autres.

Dans l'article Sous-grille CSS, vous trouverez des exemples, des liens vers de nombreux autres posts et des exemples illustrant les cas d'utilisation des sous-grilles.

NumberFormat V3

Intl.NumberFormat V3 est un ensemble de nouvelles fonctionnalités pour Intl.NumberFormat, qui ont été ajoutées à Baseline en 2023. Les fonctionnalités supplémentaires sont les suivantes:

• Trois nouvelles fonctions pour formater des plages de nombres: formatRange, formatRangeToParts et selectRange.
• Énumération du regroupement
• Nouvelles options d'arrondi et de précision
• Priorité d'arrondi
• Interpréter des chaînes sous forme de nombres décimaux
• Modes d'arrondi
• Signalétique négative

La proposition de NumberFormat V3 détaille chacune des nouvelles fonctionnalités.

API Fullscreen

L'API Fullscreen vous permet de placer un élément, comme un <video>, en mode plein écran en appelant la méthode requestFullscreen(). Elle fournit également des méthodes permettant de détecter si un élément est en mode plein écran et si le document est dans un état qui vous permettra de demander le mode plein écran.

Pour en savoir plus, consultez ce guide de l'API Fullscreen sur MDN.

Sélecteur CSS :has()

Baseline 2023 se limite au sélecteur :has(), qui arrivera dans Firefox 121 le 19 décembre. Ce sélecteur sert, entre autres, de sélecteur parent, ce qui vous permet de choisir un élément en fonction des éléments qu'il contient. Par exemple, vous pouvez appliquer différents CSS selon qu'un élément contient ou non une image.

Pour en savoir plus, consultez :has(): le sélecteur de famille.

Nouvelles fonctionnalités ajoutées à Baseline cette année

Cet article présente certaines des fonctionnalités clés qui ont été intégrées à Baseline cette année, mais ce n'est pas tout.

• Feuilles de style constructibles
• Sélecteurs n-ième enfant complexes en CSS
• Syntaxe de la plage pour les requêtes média
• Importer des cartes
• Plusieurs valeurs pour l'affichage CSS
• @style compteur
• Propriété CSS counter-set
• Fonction de lissage de vitesse linear()
• Système de fichiers privés d'origine (OPFS)
• Intégration CSS, y compris le changement qui ajoute une analyse assouplie.
• Sélecteur de pseudo-classe CSS :dir()
• Unité de longueur cap CSS
• Masquage CSS
• Compatibilité des requêtes média pour les éléments <source> vidéo HTML
• L'élément HTML <search>
• Chargement différé des éléments <iframe> (arrivée dans Firefox 121 le 19 décembre)
• Unités de hauteur de ligne des CSS lh et rlh

La plupart de ces fonctionnalités sont devenues compatibles grâce au travail collaboratif de l'édition Interop 2023. Il est passionnant de voir comment les caractéristiques peuvent être intégrées à l'aide de ce processus et arrivent dans Baseline en tant que nouvelles caractéristiques, ce qui retarde leur mise à disposition à grande échelle. Cela permet de déterminer plus facilement quand adopter des fonctionnalités dans vos propres projets.