Baseline arrive sur caniuse.com. Dans cet article, vous allez découvrir l'intégration et certaines des fonctionnalités qui ont été intégrées à Baseline en 2023.
Avec la nouvelle définition de la référence, le cycle de vie d'une fonctionnalité comporte deux étapes: lorsqu'elle devient nouvellement disponible, puis lorsqu'elle devient largement disponible, après 30 mois. Une fonctionnalité devient une partie de Baseline disponible 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 à s'inscrire sur "Can I Use from today" (Puis-je utiliser). 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 affichent également un badge, ainsi que l'année de leur mise à disposition. 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 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 ils vous permettent de 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 tout espace colorimétrique spécifiant des couleurs avec les 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 une valeur 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 haute définition fournit 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. Les applications qui utilisent cette compression intégrée 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. OffscreenCanvas dissocie le DOM de l'API Canvas en déplaçant le canevas 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. Il peut également être utilisé pour déplacer le rendu vers un Web Worker, même si aucun DOM n'est 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 du module prêts à être exécutés.
Pour en savoir plus, consultez la section Précharger des modules.
Fonctions trigonométriques en CSS
En 2023, les fonctions trigonométriques issues 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
Lorsque vous marquez un élément DOM comme inert, vous supprimez son mouvement ou toute interaction. L'attribut inerte oblige le navigateur à ignorer l'élément:
- L'événement
clickne 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é.
Ajoutez cet attribut 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 grilles imbriquées distinctes les uns avec les autres.
Dans le sous-réseau 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,formatRangeToPartsetselectRange - É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 présente en détail chacune de ces nouvelles fonctionnalités.
API Fullscreen
L'API Fullscreen vous permet de placer un élément tel qu'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 permet 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. Entre autres utilisations, ce sélecteur sert de sélecteur parent, ce qui vous permet de sélectionner 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
Cette année, nous avons également intégré les fonctionnalités suivantes à Baseline:
- 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 la modification qui ajoute une analyse assouplie.
- Sélecteur de pseudo-classe CSS
:dir() - Unité de longueur
capCSS - 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
lhetrlh
Un grand nombre de ces fonctionnalités sont interopérables grâce au travail collaboratif d'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 générale. Cela permet de déterminer plus facilement quand adopter des fonctionnalités dans vos propres projets.