Baseline 2023

Rachel Andrew

Baseline sera bientôt disponible sur caniuse.com. Dans ce post, découvrez à propos de l'intégration et à découvrir certaines des fonctionnalités qui ont été intégrées Référence en 2023.

Avec la nouvelle définition de Baseline, sont deux étapes du cycle de vie d'une fonctionnalité: la date à laquelle elle devient nouvellement disponible, et puis lorsqu'elle devient largement disponible au bout de 30 mois. Une fonctionnalité devient Baseline est désormais disponible lorsqu'elle devient interopérable dans navigateurs:

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

Baseline revient sur Can I Use

Pour clarifier la disponibilité des fonctionnalités, la phase de référence commence à atterrissez sur Can I Use à partir d’aujourd’hui. Lorsque vous visitez certaines pages de la page Can I Use, vous voyez un badge indiquant si la fonctionnalité est disponible pour tous dans Baseline.

Les fonctionnalités nouvellement disponibles dans Baseline seront également accompagnées d'un badge l'année de leur mise à disposition. Tout ce qui est devenu interopérable dans le navigateur principal de cette année 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 sont Baseline 2023 : nouvelle version disponible.

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

Taille des requêtes de conteneur vous permettent d'interroger la taille d'un élément, de la même façon que les requêtes média vous permettent d'interroger la taille de la fenêtre d'affichage. Ils facilitent la création de composants réutilisables en créant des composants qui s'adaptent à la taille de la zone où elles sont placées.

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 105
• <ph type="x-smartling-placeholder"></ph> 105
• <ph type="x-smartling-placeholder"></ph> 110
• <ph type="x-smartling-placeholder"></ph> 16 ans

Source

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

Nouveaux espaces de couleur et nouvelles fonctions

CSS prend désormais en charge les espaces colorimétriques qui vous permettent d'accéder aux couleurs en dehors de la gamme sRVB. Cela signifie que vous pouvez afficher des écrans HD (haute définition) avec des couleurs issues de la HD. réseaux sociaux.

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 couleurs LCH, Lab, OKLCH et OKLab.

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15 ans

Source

<ph type="x-smartling-placeholder">

</ph>

Essayez les nouveaux espaces de couleur à l'aide de gradient.style.

Fonction color-mix()

De plus, de nouvelles fonctions de couleur ont été intégrées à Baseline. color-mix() permet de mélanger une couleur dans une autre, dans n'importe quel espace de couleur. Dans le code CSS suivant, 25% du bleu est mélangé au blanc dans l'espace colorimétrique s rgb.

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

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15 ans

Source

En savoir plus sur color-mix()

Fonction color()

color() peut être utilisée pour tout espace colorimétrique spécifiant les couleurs avec R, V et B canaux de distribution. color() prend d'abord un paramètre d'espace colorimétrique, puis une série de de canal RVB et, éventuellement, de alpha. Vous pouvez utiliser l'une des options suivantes: 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);
}

Guide des couleurs CSS haute définition vous donne de nombreux autres exemples des nouveaux espaces de couleurs et fonctions, ainsi que des informations sur lesquelles utiliser quand.

Flux de compression

L'API Compression Streams est une API JavaScript permettant de compresser et de décompresser des flux de données. Applications qui utilisent cette compression intégrée n'ont plus besoin d'inclure une bibliothèque de compression.

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 80
• <ph type="x-smartling-placeholder"></ph> 80
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 16,4

Source

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 sur canevas étaient liées à <canvas> qui dépendait directement du DOM. L'application OffscreenCanvas est dissociée le DOM depuis l'API Canvas en déplaçant le canevas en dehors de l'écran.

Grâce à ce découplage, le rendu d'OffscreenCanvas est complètement dissocié le DOM. Il est donc plus rapide que le canevas standard, il n'y a pas de synchronisation entre les deux. Il peut également être utilisé pour déplacer à un Web Worker, même s'il n'y a pas de DOM disponible, ce qui libère le thread principal et rendre l'application plus réactive.

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 69
• <ph type="x-smartling-placeholder"></ph> 79
• <ph type="x-smartling-placeholder"></ph> 105
• <ph type="x-smartling-placeholder"></ph> 16,4

Source

Pour en savoir plus, consultez la section OffscreenCanvas : accélérez les opérations de canevas avec un employé Web.

Préchargement du module

Le préchargement des modules peut réduire le temps de téléchargement et de traitement. Ajouter rel="modulepreload" à l'élément link faisant référence à un module JavaScript, et le navigateur obtient module, l'analyse et le compile, puis place les résultats dans le mappage du module, à exécuter.

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 66
• <ph type="x-smartling-placeholder"></ph> ≤79
• <ph type="x-smartling-placeholder"></ph> 115
• <ph type="x-smartling-placeholder"></ph> 17 ans

Source

Pour en savoir plus, consultez la section Précharger des modules.

Fonctions trigonométriques en CSS

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

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 108
• <ph type="x-smartling-placeholder"></ph> 15,4

Source

<ph type="x-smartling-placeholder">

</ph>

Cette démonstration utilise les fonctions trigonométriques pour déplacer des éléments sur un tracé circulaire autour d'un point central.

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

L'attribut inerte

Lorsque vous marquez un élément DOM comme inert, vous supprimez tout mouvement ou interaction de L'attribut inerte oblige le navigateur à ignorer l'élément:

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

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 102
• <ph type="x-smartling-placeholder"></ph> 102
• <ph type="x-smartling-placeholder"></ph> 112
• <ph type="x-smartling-placeholder"></ph> 15,5

Source

Ajoutez cet attribut aux éléments qui ne sont pas affichés à l'écran ou qui sont masqués. Pour plus consultez la section Attribut inerte.

Sous-grille dans la mise en page en grille CSS

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

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 117
• <ph type="x-smartling-placeholder"></ph> 117
• <ph type="x-smartling-placeholder"></ph> 71
• <ph type="x-smartling-placeholder"></ph> 16 ans

Source

Dans la sous-grille CSS, vous trouverez des exemples et des liens vers de nombreux autres articles et exemples en soulignant les cas d'utilisation de la sous-grille.

Format numérique V3

Intl.NumberFormat V3 est un ensemble de nouvelles fonctionnalités pour Intl.NumberFormat qui sont désormais de Baseline en 2023. Les fonctionnalités supplémentaires sont les suivantes:

• Trois nouvelles fonctions permettant de mettre en forme des plages de nombres: formatRange, formatRangeToParts et selectRange
• Énumération de regroupement
• Nouvelles options d'arrondi et de précision
• Priorité d'arrondi
• Interpréter des chaînes comme des nombres décimaux
• Modes d'arrondi
• Signer sur l'affichage négatif

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 106
• <ph type="x-smartling-placeholder"></ph> 106
• <ph type="x-smartling-placeholder"></ph> 116
• <ph type="x-smartling-placeholder"></ph> 15,4

Source

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

API Plein écran

L'API Fullscreen vous permet de placer un élément tel qu'un <video> en plein écran en appelant la méthode requestFullscreen(). Il fournit également des méthodes en détectant 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.

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 71
• <ph type="x-smartling-placeholder"></ph> 79
• <ph type="x-smartling-placeholder"></ph> 64
• <ph type="x-smartling-placeholder"></ph> 16,4

Source

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

Sélecteur CSS :has()

Le sélecteur :has(), qui arrivera dans Firefox, sera simplement Baseline 2023. 121 le 19 décembre. Entre autres utilisations, ce sélecteur sert Le sélecteur parent, qui 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'il existe ou non une image à l'intérieur d'un élément.

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 105
• <ph type="x-smartling-placeholder"></ph> 105
• <ph type="x-smartling-placeholder"></ph> 121
• <ph type="x-smartling-placeholder"></ph> 15,4

Source

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

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

Voici d'autres fonctionnalités qui ont été intégrées à la version de référence cette année:

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

Un grand nombre de ces fonctionnalités sont interopérables par le biais du travail collaboratif pour Interop 2023. C'est passionnant de voir comment les fonctionnalités peuvent être intégrées par ce processus et intégrées à Baseline lorsque de nouvelles données sont disponibles, ce qui déclenche le minuteur pour qu'ils soient largement disponibles. Cela crée un vous permet de décider plus facilement quand adopter des fonctionnalités dans vos propres projets.