Code CSS enveloppé: 2023 !

En-tête CSS encapsulé

Code CSS encapsulé: 2023 !

Impressionnant ! 2023 a été une année charnière pour les CSS !

De #Interop2023 à de nombreuses nouveautés dans l'espace CSS et UI, les développeurs de fonctionnalités pensaient auparavant impossibles sur la plate-forme Web. Désormais, tous les navigateurs récents sont compatibles avec les requêtes de conteneur, les sous-grilles, le sélecteur :has(), ainsi qu'une multitude de nouveaux espaces de couleur et fonctions. Chrome prend en charge les animations basées sur le défilement en CSS uniquement et les animations fluides entre les vues Web avec des transitions de vue. Pour couronner le tout, de nombreuses nouvelles primitives ont permis d'améliorer l'expérience développeur, comme l'imbrication CSS et les styles limités.

Quelle année incroyable ! C'est pourquoi nous souhaitons clore cette année décisive pour célébrer et saluer tout le travail acharné des développeurs de navigateurs et de la communauté Web qui ont rendu tout cela possible.

Bases architecturales

Commençons par les mises à jour apportées au langage et aux fonctionnalités CSS de base. Ces fonctionnalités sont essentielles à la façon dont vous créez et organisez les styles, et elles offrent un grand pouvoir aux développeurs.

Fonctions trigonométriques

Navigateurs pris en charge

  • Chrome: 111 <ph type="x-smartling-placeholder">
  • Edge: 111 <ph type="x-smartling-placeholder">
  • Firefox: 108 <ph type="x-smartling-placeholder">
  • Safari: 15.4. <ph type="x-smartling-placeholder">

Source

Chrome 111 est compatible avec les fonctions trigonométriques sin(), cos(), tan(), asin(), acos(), atan() et atan2(), ce qui les rend disponibles sur tous les principaux moteurs. Ces fonctions sont très pratiques à des fins d'animation et de mise en page. Par exemple, il est désormais beaucoup plus facile de disposer les éléments sur un cercle autour d'un centre choisi.

Démonstration des fonctions trigonométriques

En savoir plus sur les fonctions trigonométriques en CSS

Sélection n-ième* complexe

Navigateurs pris en charge

  • Chrome: 111 <ph type="x-smartling-placeholder">
  • Edge: 111 <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Le sélecteur de pseudo-classe :nth-child() permet de sélectionner des éléments du DOM en fonction de leur index. La microsyntaxe An+B vous permet de contrôler précisément les éléments que vous souhaitez sélectionner.

Par défaut, les pseudos :nth-*() prennent en compte tous les éléments enfants. À partir de Chrome 111, vous pouvez, si vous le souhaitez, transmettre une liste de sélecteurs à :nth-child() et :nth-last-child(). De cette façon, vous pouvez préfiltrer la liste des enfants avant que An+B ne fasse son travail.

Dans la démonstration suivante, la logique 3n+1 n'est appliquée qu'aux petites poupées en les préfiltreant à l'aide de of .small. Modifiez le sélecteur utilisé de façon dynamique à l'aide des listes déroulantes.

Démonstration de la sélection complexe de type n-ième*

En savoir plus sur les sélections n-ième* complexes

Portée

Navigateurs pris en charge

  • Chrome: 118 <ph type="x-smartling-placeholder">
  • Edge: 118 <ph type="x-smartling-placeholder">
  • Firefox: derrière un drapeau.
  • Safari: 17.4. <ph type="x-smartling-placeholder">

Source

Chrome 118 prend en charge @scope, une règle @ qui vous permet de faire correspondre un sélecteur de champ d'application à une sous-arborescence spécifique du document. Avec le style cloisonné, vous pouvez sélectionner très précisément les éléments que vous sélectionnez sans avoir à écrire de sélecteurs trop spécifiques ni à les associer étroitement à la structure DOM.

Une sous-arborescence délimitée est définie par une racine de champ d'application (la limite supérieure) et une limite de champ d'application facultative (la limite inférieure).

@scope (.card) {  } /* scoping root */
@scope (.card) to (.card__content) {  } /* scoping root + scoping limit*/

Les règles de style placées dans un bloc de portée ne ciblent que les éléments de la sous-arborescence découpée. Par exemple, la règle de style délimitée suivante ne cible que les éléments <img> situés entre l'élément .card et tout composant imbriqué correspondant au sélecteur [data-component].

@scope (.card) to ([data-component]) {
  img {  }
}

Dans la démonstration suivante, les éléments <img> du composant carrousel ne sont pas mis en correspondance en raison de la limite de champ d'application appliquée.

Capture d'écran de la démonstration de l'habilitation

Capture d&#39;écran de référence pour la démonstration de @scope

Démonstration en direct de Scope

Démo de CSS @scope
.

Pour en savoir plus sur les @scope, consultez l'article Utiliser des @scope pour limiter la couverture de vos sélecteurs. Dans cet article, vous découvrirez le sélecteur :scope, le traitement de la spécificité, les champs d'application sans prélude et l'impact de @scope sur la cascade.

Nidification

Navigateurs pris en charge

  • Chrome: 120 <ph type="x-smartling-placeholder">
  • Edge: 120 <ph type="x-smartling-placeholder">
  • Firefox: 117 <ph type="x-smartling-placeholder">
  • Safari: 17.2. <ph type="x-smartling-placeholder">

Source

Avant l'imbrication, chaque sélecteur devait être explicitement déclaré séparément les uns des autres. Cela entraîne des répétitions, l'encombrement de la feuille de style et une expérience de création éparse. Vous pouvez désormais continuer à utiliser des sélecteurs avec les règles de style associées regroupées dans celles-ci.

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

Enregistrement d'écran imbriqué

Démonstration en direct de Nesting

Modifier le sélecteur d'imbrication assoupli pour décider du vainqueur de la course
.

L'imbrication permet de réduire l'épaisseur d'une feuille de style, la surcharge des sélecteurs qui se répètent et de centraliser les styles de composants. La syntaxe initialement publiée avec une limitation qui nécessitait l'utilisation de & à différents endroits, mais a depuis été levée avec une mise à jour de la syntaxe d'imbrication flexible.

En savoir plus sur l'imbrication

Sous-grille

Navigateurs pris en charge

  • Chrome: 117 <ph type="x-smartling-placeholder">
  • Edge: 117 <ph type="x-smartling-placeholder">
  • Firefox: 71 <ph type="x-smartling-placeholder">
  • Safari: 16. <ph type="x-smartling-placeholder">

Source

Le CSS subgrid vous permet de créer des grilles plus complexes avec un meilleur alignement entre les mises en page enfants. Elle permet à une grille située à l'intérieur d'une autre grille d'adopter les lignes et les colonnes de la grille externe comme si elle était propre, en utilisant subgrid comme valeur pour les lignes ou les colonnes de la grille.

Enregistrement d'écran sous-grille

Démonstration en direct du sous-réseau

L'en-tête, le corps et les pieds de page s'alignent sur la taille dynamique des frères et sœurs.

La sous-grille est particulièrement utile pour aligner des frères et sœurs au contenu dynamique d'un autre. Cela évite aux rédacteurs, aux rédacteurs UX et aux traducteurs d'essayer de créer des textes de projet "adaptés" dans la mise en page. Avec la sous-grille, la mise en page peut être ajustée pour s'adapter au contenu.

En savoir plus sur la sous-grille

Typographie

La typographie Web a fait l'objet de quelques mises à jour clés en 2023. La propriété text-wrap est une amélioration progressive particulièrement intéressante. Cette propriété permet l'ajustement typographique de la mise en page, composée dans le navigateur sans qu'aucun script supplémentaire ne soit requis. Dites adieu aux longueurs de lignes gênantes et passez à une typographie plus prévisible !

Lettre initiale

Navigateurs pris en charge

  • Chrome: 110. <ph type="x-smartling-placeholder">
  • Edge: 110 <ph type="x-smartling-placeholder">
  • Firefox: non compatible. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Source

Atterrissant au début de l'année dans Chrome 110, la propriété initial-letter est une petite fonctionnalité CSS puissante qui définit un style pour l'emplacement des lettres initiales. Vous pouvez placer les lettres selon qu'elles sont en relief ou non. La propriété accepte deux arguments: le premier permet de définir la profondeur à laquelle placer la lettre dans le paragraphe correspondant, et le second indique le niveau de hauteur de la lettre située au-dessus. Vous pouvez même combiner les deux, comme dans la démonstration suivante.

Capture d'écran de la lettre initiale

Capture d&#39;écran de la démo de la première lettre

Démonstration des lettres initiales

Modifiez les valeurs de initial-letter pour le pseudo-élément ::first-letter afin qu'il se déplace.

En savoir plus sur la lettre initiale

text-wrap: équilibre et beauté

En tant que développeur, vous ne connaissez pas la taille finale, la taille de police, ni même la langue d'un titre ou d'un paragraphe. Toutes les variables nécessaires à un traitement efficace et esthétique de l'habillage du texte se trouvent dans le navigateur. Étant donné que le navigateur connaît tous les facteurs, tels que la taille de la police, la langue et la zone allouée, il est idéal pour gérer une mise en page de texte avancée et de haute qualité.

C'est là qu'interviennent deux nouvelles techniques de renvoi à la ligne du texte, l'une appelée balance et l'autre pretty. La valeur balance cherche à créer un bloc de texte harmonieux, tandis que pretty cherche à éviter les orphelins et à garantir un trait d'union correct. Jusqu'à présent, ces deux tâches étaient effectuées à la main. C'est génial de pouvoir le faire fonctionner dans n'importe quelle langue de traduction.

Enregistreur d'écran avec retour automatique à la ligne

Démonstration en direct avec retour automatique à la ligne

Dans la démonstration suivante, vous pouvez comparer les effets de balance et pretty sur un titre et un paragraphe en faisant glisser le curseur. Essayez de traduire la démonstration dans une autre langue.

En savoir plus sur text-wrap: balance

Couleur

2023 a été l'année des couleurs pour la plate-forme Web. Grâce aux nouveaux espaces de couleurs et aux nouvelles fonctions qui permettent une thématisation dynamique des couleurs, rien ne vous empêche de créer des thèmes éclatants et luxuriants que vos utilisateurs méritent, et de les rendre également personnalisables.

Espaces de couleur HD (niveau de couleur 4)

Navigateurs pris en charge

  • Chrome: 111 <ph type="x-smartling-placeholder">
  • Edge: 111 <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 15. <ph type="x-smartling-placeholder">

Source

Navigateurs pris en charge

  • Chrome: 111 <ph type="x-smartling-placeholder">
  • Edge: 111 <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 15. <ph type="x-smartling-placeholder">

Source

Du matériel au logiciel, en passant par le CSS et les lumières clignotantes, nos ordinateurs peuvent demander beaucoup de travail pour essayer de représenter des couleurs aussi belles que nos yeux humains peuvent les voir. En 2023, nous proposerons de nouvelles couleurs, davantage de couleurs, de nouveaux espaces de couleurs, des fonctions de couleur et de nouvelles fonctionnalités.

Le CSS et la couleur peuvent désormais: - Vérifiez si le matériel de l'écran de l'utilisateur est compatible avec les couleurs HDR larges. - Vérifiez si le navigateur de l'utilisateur comprend la syntaxe des couleurs comme Oklch ou l'écran P3. - Indiquez les couleurs HDR dans Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ, etc. - Créez des dégradés avec des couleurs HDR. - Interpoler les dégradés dans d'autres espaces de couleurs - Mélangez les couleurs avec color-mix(). - Créez des variantes de couleurs avec une syntaxe de couleur relative.

Enregistrement d'écran couleur 4

Démonstration couleur 4

Dans la démonstration suivante, vous pouvez comparer les effets des attributs "équilibre" et "joli" sur un titre et un paragraphe en faisant glisser le curseur. Essayez de traduire la démonstration dans une autre langue.

En savoir plus sur la couleur 4 et les espaces de couleurs

fonction color-mix

Navigateurs pris en charge

  • Chrome: 111 <ph type="x-smartling-placeholder">
  • Edge: 111 <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 16.2. <ph type="x-smartling-placeholder">

Source

Mélanger les couleurs est une tâche classique, et en 2023, CSS peut le faire aussi. Vous pouvez non seulement mélanger le blanc ou le noir à une couleur, mais aussi la transparence, le tout dans l'espace colorimétrique de votre choix. Il s'agit à la fois d'une fonctionnalité de couleur de base et d'une fonctionnalité de couleur avancée.

Enregistreur d'écran color-mix()

Démonstration de color-mix()

La démonstration vous permet de choisir deux couleurs à l'aide d'un sélecteur, l'espace colorimétrique et la proportion de chaque couleur à dominant dans le mélange.

Vous pouvez considérer color-mix() comme un moment précis d'un dégradé. Lorsqu'un dégradé indique toutes les étapes nécessaires pour passer du bleu au blanc, color-mix() n'affiche qu'un seul pas. Les choses évoluent une fois que vous commencez à prendre en compte les espaces de couleurs et que vous découvrez à quel point l'espace colorimétrique de mélange peut être différent des résultats.

En savoir plus sur color-mix()

Syntaxe des couleurs relatives

La syntaxe de couleur relative (RCS) est une méthode complémentaire de color-mix() pour créer des variantes de couleur. Cette fonction est légèrement plus puissante que color-mix(), mais propose également une stratégie différente pour utiliser les couleurs. color-mix() peut mélanger le blanc pour éclaircir une couleur. Le RCS permet un accès précis au canal de luminosité et la possibilité d'utiliser calc() sur le canal pour réduire ou augmenter la luminosité par programmation.

Enregistreur d'écran RCS

Démonstration du RCS en direct

Changez la couleur, changez de décor. Chacun utilise une syntaxe de couleur relative pour créer des variantes à partir de la couleur de base.

RCS vous permet d'effectuer des manipulations relatives et absolues sur une couleur. Une modification relative consiste à modifier la valeur actuelle de saturation ou de luminosité avec calc(). On parle de modification absolue lorsque vous remplacez une valeur de canal par une nouvelle valeur, par exemple en définissant l'opacité sur 50%. Cette syntaxe vous fournit des outils utiles pour la thématisation, uniquement dans les variantes temporelles, et plus encore.

En savoir plus sur la syntaxe des couleurs relatives

Conception responsive

Le responsive design a évolué en 2023. Cette année avant-gardiste La combinaison de requêtes de conteneur et de :has() prend en charge les composants qui possèdent un style responsif et logique basé sur la taille de leur parent, ainsi que de la présence ou de l'état de n'importe lequel de leurs enfants. Cela signifie que vous pouvez enfin séparer la mise en page au niveau de la page de la mise en page au niveau du composant et écrire la logique une seule fois pour utiliser votre composant partout.

Tailler les requêtes de conteneur

Navigateurs pris en charge

  • Chrome: 105. <ph type="x-smartling-placeholder">
  • Edge: 105 <ph type="x-smartling-placeholder">
  • Firefox: 110 <ph type="x-smartling-placeholder">
  • Safari: 16. <ph type="x-smartling-placeholder">

Source

Plutôt que d'utiliser les informations de taille globale de la fenêtre d'affichage pour appliquer des styles CSS, les requêtes de conteneur permettent d'interroger un élément parent dans la page. Cela signifie que les composants peuvent être stylisés de manière dynamique dans plusieurs mises en page et dans plusieurs vues. Les requêtes de conteneur relatives à la taille sont devenues stables dans tous les navigateurs modernes à la Saint-Valentin de cette année (14 février).

Pour utiliser cette fonctionnalité, commencez par configurer le confinement sur l'élément que vous interrogez, puis, comme pour une requête média, utilisez @container avec les paramètres de taille pour appliquer les styles. En plus des requêtes de conteneur, vous obtenez la taille des requêtes de conteneur. Dans la démonstration suivante, la taille de la requête du conteneur cqi (correspondant à la taille du conteneur intégré) est utilisée pour dimensionner l'en-tête de carte.

@container Enregistreur d'écran

Démonstration de @container

En savoir plus sur l'utilisation des requêtes de conteneur

Requêtes de conteneur de style

Navigateurs pris en charge

  • Chrome: 111 <ph type="x-smartling-placeholder">
  • Edge: 111 <ph type="x-smartling-placeholder">
  • Firefox: non compatible. <ph type="x-smartling-placeholder">
  • Safari: 18. <ph type="x-smartling-placeholder">

Source

Les requêtes de style ont été intégrées partiellement dans Chrome 111. Actuellement, les requêtes de style vous permettent d'interroger la valeur des propriétés personnalisées d'un élément parent lorsque vous utilisez @container style(). Par exemple, demandez s'il existe une valeur de propriété personnalisée ou si elle est définie sur une certaine valeur, telle que @container style(--rain: true).

Capture d'écran d'une requête de style

Capture d&#39;écran de la démonstration des requêtes de conteneur de style, cartes météorologiques

Démonstration des requêtes de style

Changez la couleur, changez de décor. Chacun utilise une syntaxe de couleur relative pour créer des variantes à partir de la couleur de base.

Bien que cela ressemble à l'utilisation de noms de classe en CSS, les requêtes de style présentent certains avantages. Premièrement, avec les requêtes de style, vous pouvez mettre à jour la valeur dans CSS si nécessaire pour les pseudo-états. De plus, dans les futures versions de l'implémentation, vous pourrez interroger des plages de valeurs pour déterminer le style appliqué, comme style(60 <= --weather <= 70), et le style basé sur des paires propriété-valeur comme style(font-style: italic).

En savoir plus sur l'utilisation des requêtes de style

Sélecteur:has()

Navigateurs pris en charge

  • Chrome: 105. <ph type="x-smartling-placeholder">
  • Edge: 105 <ph type="x-smartling-placeholder">
  • Firefox: 121 <ph type="x-smartling-placeholder">
  • Safari: 15.4. <ph type="x-smartling-placeholder">

Source

Depuis près de 20 ans, les développeurs ont demandé un "sélecteur parent" en CSS. C'est désormais possible avec le sélecteur :has() fourni dans Chrome 105. Par exemple, l'utilisation de .card:has(img.hero) permet de sélectionner les éléments .card qui ont une image de héros en tant qu'enfant.

Capture d'écran de la démonstration :has()

Capture d&#39;écran de référence pour la démonstration de :has()

Démonstration en direct :has()

Démo CSS :has(): fiche sans/avec image
.

Étant donné que :has() accepte une liste de sélecteurs relative comme argument, vous pouvez sélectionner beaucoup plus que l'élément parent. À l'aide de différents combinateurs CSS, il est non seulement possible de remonter dans l'arborescence DOM, mais aussi d'effectuer des sélections latérales. Par exemple, li:has(+ li:hover) sélectionne l'élément <li> qui précède l'élément <li> sur lequel vous pointez actuellement.

:has() Enregistreur d'écran

Démo :has()

Démonstration de CSS :has(): station d'accueil
.

En savoir plus sur le sélecteur CSS :has()

Mettre à jour la requête média

Navigateurs pris en charge

  • Chrome: 113 <ph type="x-smartling-placeholder">
  • Edge: 113 <ph type="x-smartling-placeholder">
  • Firefox: 102. <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

Source

La requête média update vous permet d'adapter l'UI à la fréquence d'actualisation d'un appareil. La fonctionnalité peut signaler une valeur fast, slow ou none en fonction des capacités des différents appareils.

La plupart des appareils pour lesquels vous concevez sont susceptibles d'avoir une fréquence d'actualisation rapide. Cela inclut les ordinateurs de bureau et la plupart des appareils mobiles. La fréquence d'actualisation peut être lente sur les lecteurs de livres numériques et les appareils tels que les systèmes de paiement à faible consommation. Sachant que l'appareil n'est pas en mesure de gérer les animations ou les mises à jour fréquentes, vous risquez d'économiser la batterie ou d'afficher des mises à jour défectueuses.

Mettre à jour l'Enregistreur d'écran

Mettre à jour la démo

Simulez (en choisissant une option d'option) une valeur de vitesse de mise à jour et pour voir son impact sur le canard.

En savoir plus sur @media (update)

Rédiger une requête média

Navigateurs pris en charge

  • Chrome: 120 <ph type="x-smartling-placeholder">
  • Edge: 120 <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

Source

La requête média de script peut être utilisée pour vérifier si JavaScript est disponible ou non. C'est très pratique pour les améliorations progressives. Avant cette requête média, une stratégie pour détecter si JavaScript était disponible consistait à placer une classe nojs dans le code HTML, puis à la supprimer avec JavaScript. Ces scripts peuvent être supprimés, car CSS peut désormais détecter le code JavaScript et effectuer des ajustements en conséquence.

Découvrez comment activer et désactiver JavaScript sur une page à des fins de test via les outils pour les développeurs Chrome.

Enregistreur d'écran de script

Démonstration de script

Prenons l'exemple d'un changement de thème sur un site Web. La requête média de script peut aider à faire en sorte que le changement fonctionne à l'encontre des préférences du système, car aucun JavaScript n'est disponible. Vous pouvez aussi envisager d'utiliser un composant switch : si JavaScript est disponible, vous pouvez faire glisser le bouton d'un simple geste au lieu de l'activer et de le désactiver. Beaucoup d’excellentes opportunités d’améliorer l’expérience utilisateur si les scripts sont disponibles tout en offrant une expérience de base significative si les scripts sont désactivés.

En savoir plus sur script.

Requête média à transparence réduite

Navigateurs pris en charge

  • Chrome: 118 <ph type="x-smartling-placeholder">
  • Edge: 118 <ph type="x-smartling-placeholder">
  • Firefox: derrière un drapeau.
  • Safari: non compatible. <ph type="x-smartling-placeholder">

Source

Les interfaces non opaques peuvent causer des maux de tête ou être une difficulté visuelle pour divers types de déficiences visuelles. C'est pourquoi Windows, macOS et iOS disposent de préférences système qui peuvent réduire ou supprimer la transparence de l'interface utilisateur. Cette requête média pour prefers-reduced-transparency s'adapte bien aux autres requêtes média de préférence, ce qui vous permet d'être créatif tout en s'adaptant aux utilisateurs.

Enregistreur d'écran à transparence réduite

Démo de la transparence réduite

Dans certains cas, vous pouvez fournir une mise en page alternative où aucun contenu ne se superpose au contenu. Dans d'autres cas, l'opacité d'une couleur peut être réglée pour être opaque ou presque opaque. L'article de blog suivant contient des démonstrations plus inspirantes qui s'adaptent aux préférences des utilisateurs. Consultez-les si vous souhaitez connaître les moments où cette requête média est utile.

En savoir plus sur @media (prefers-reduced-transparency)

Interaction

L'interaction est la pierre angulaire des expériences numériques. Elle aide les utilisateurs à savoir sur quoi ils ont cliqué et où ils se trouvent dans un espace virtuel. Cette année, de nombreuses fonctionnalités intéressantes ont été introduites. Elles ont facilité la rédaction et l'implémentation des interactions, ce qui a permis de simplifier les parcours utilisateur et d'optimiser l'expérience Web.

Afficher les transitions

Navigateurs pris en charge

  • Chrome: 111 <ph type="x-smartling-placeholder">
  • Edge: 111 <ph type="x-smartling-placeholder">
  • Firefox: non compatible. <ph type="x-smartling-placeholder">
  • Safari: 18. <ph type="x-smartling-placeholder">

Source

Les transitions de vue ont un impact considérable sur l'expérience utilisateur d'une page. L'API View Transitions vous permet de créer des transitions visuelles entre deux états de page de votre application monopage. Ces transitions peuvent être des transitions d'une page entière ou de petites choses sur une page, comme l'ajout ou la suppression d'un nouvel élément dans une liste.

La fonction document.startViewTranstion est au cœur de l'API View Transitions. Transmettez une fonction qui met à jour le DOM vers le nouvel état. L'API s'occupe de tout. Pour ce faire, il prend un instantané avant et après, puis passe de l'un à l'autre. Avec CSS, vous pouvez contrôler ce qui est capturé et, éventuellement, personnaliser la façon dont ces instantanés doivent être animés.

Enregistrement d'écran VT

Démonstration de VT

Voir la démonstration des transitions
.

L'API View Transitions pour les applications monopages disponible dans Chrome 111. En savoir plus sur les transitions des vues

Fonction de lissage de vitesse linéaire

Navigateurs pris en charge

  • Chrome: 113 <ph type="x-smartling-placeholder">
  • Edge: 113 <ph type="x-smartling-placeholder">
  • Firefox: 112 <ph type="x-smartling-placeholder">
  • Safari: 17.2. <ph type="x-smartling-placeholder">

Ne vous laissez pas tromper par le nom de cette fonction. La fonction linear() (à ne pas confondre avec le mot clé linear) vous permet de créer facilement des fonctions de lissage de vitesse complexes, sans toutefois perdre en précision.

Avant linear(), qui était disponible dans Chrome 113, il était impossible de créer des effets de rebond ou de rebond en CSS. Grâce à linear(), il est possible de se rapprocher de ces lissages de vitesse en les simplifiant à l'aide d'une série de points, puis en effectuant une interpolation linéaire entre ces points.

<ph type="x-smartling-placeholder">
</ph> Graphique d&#39;une courbe de lissage de vitesse avec rebond, avec l&#39;ajout de plusieurs points
La courbe de rebond initiale en bleu est simplifiée par un ensemble de points clés affichés en vert. La fonction linear() utilise ces points et effectue une interpolation linéaire entre eux.

Enregistrement d'écran avec lissage linéaire

Démonstration du lissage de vitesse linéaire

Démo de CSS linear()

En savoir plus sur linear(). Pour créer des courbes linear(), utilisez le générateur de lissage de vitesse linéaire.

Fin du défilement

Navigateurs pris en charge

  • Chrome: 114 <ph type="x-smartling-placeholder">
  • Edge: 114 <ph type="x-smartling-placeholder">
  • Firefox: 109 <ph type="x-smartling-placeholder">
  • Safari: non compatible. <ph type="x-smartling-placeholder">

Source

De nombreuses interfaces incluent des interactions de défilement, et l'interface a parfois besoin de synchroniser des informations correspondant à la position de défilement actuelle ou d'extraire des données en fonction de l'état actuel. Avant l'événement scrollend, vous deviez utiliser une méthode de délai d'inactivité inexacte qui pouvait se déclencher lorsque le doigt de l'utilisateur était immobile à l'écran. Avec l'événement scrollend, vous disposez d'un événement de défilement parfaitement synchronisé qui détermine si l'utilisateur est toujours en train de faire son geste ou non.

Enregistreur d'écran défilementend

Démonstration de défilement

Ce point était important pour le navigateur, car JavaScript ne peut pas suivre la présence d'un doigt sur l'écran lors d'un défilement. Les informations ne sont tout simplement pas disponibles. Les fragments de code tentant de terminer le défilement inexact peuvent désormais être supprimés et remplacés par un événement de haute précision appartenant au navigateur.

En savoir plus sur scrollend

Animations liées au défilement

Navigateurs pris en charge

  • Chrome: 115 <ph type="x-smartling-placeholder">
  • Edge: 115 <ph type="x-smartling-placeholder">
  • Firefox: derrière un drapeau.
  • Safari: non compatible. <ph type="x-smartling-placeholder">

Source

Les animations liées au défilement sont une fonctionnalité intéressante disponible dans Chrome 115. Ils vous permettent de combiner une animation CSS ou une animation créée avec l'API Web Animations au décalage de défilement d'un conteneur de défilement. Lorsque vous faites défiler l'écran vers le haut ou vers le bas (ou vers la gauche et la droite dans un conteneur de défilement horizontal), l'animation liée avance et recule en réponse directe.

Avec une timeline de défilement, vous pouvez suivre la progression globale d'un conteneur de défilement, comme illustré dans la démonstration suivante. Lorsque vous faites défiler la page jusqu'à la fin, le texte apparaît, caractère par caractère.

Enregistrement d'écran SDA

Démo SDA

Démonstration des animations CSS liées au défilement: timeline de défilement
.

Avec ViewTimeline, vous pouvez suivre un élément lorsqu'il traverse la zone de défilement. Son fonctionnement est semblable à celui utilisé par IntersectionObserver pour suivre un élément. Dans la démonstration suivante, chaque image s'affiche à partir du moment où elle entre dans la zone de défilement jusqu'à ce qu'elle soit au centre.

Enregistrement d'écran de la démo SDA

Démo SDA en direct

Démonstration des animations CSS liées au défilement: timeline d'affichage
.

Étant donné que les animations liées au défilement fonctionnent avec les animations CSS et l'API Web Animations, vous pouvez bénéficier de tous les avantages de ces API. Cela inclut la possibilité d'exécuter ces animations en dehors du thread principal. Vous pouvez désormais disposer d'animations fluides, déclenchées par le défilement, qui s'exécutent sur le thread principal avec quelques lignes de code supplémentaires. Qu'est-ce qui ne vous convient pas ?

Pour en savoir plus sur les animations liées au défilement, consultez tous les détails de cet article ou visitez le fichier "Défilement-Animations-Animations" qui inclut de nombreuses démonstrations.

Pièce jointe de la chronologie différée

Navigateurs pris en charge

  • Chrome: 116 <ph type="x-smartling-placeholder">
  • Edge: 116 <ph type="x-smartling-placeholder">
  • Firefox: non compatible. <ph type="x-smartling-placeholder">
  • Safari: non compatible. <ph type="x-smartling-placeholder">

Source

Lorsque vous appliquez une animation liée au défilement via CSS, le mécanisme de recherche permettant de trouver le conteneur de défilement de contrôle parcourt toujours l'arborescence DOM, ce qui lui permet de ne faire défiler que les ancêtres. Très souvent, l'élément qui doit être animé n'est pas un enfant du conteneur de défilement, mais un élément situé dans une sous-arborescence entièrement différente.

Pour permettre à l'élément animé de trouver une timeline de défilement nommée d'un non-ancêtre, utilisez la propriété timeline-scope sur un parent partagé. Cela permet d'associer scroll-timeline ou view-timeline défini avec ce nom, ce qui lui donne un champ d'application plus large. Ainsi, tout enfant du parent partagé pourra utiliser la chronologie portant ce nom.

<ph type="x-smartling-placeholder">
</ph> Visualisation d&#39;une sous-arborescence DOM avec une portée timeline utilisée sur un parent partagé
Avec timeline-scope déclaré sur le parent partagé, le scroll-timeline déclaré sur le conteneur de défilement peut être trouvé par l'élément qui l'utilise comme animation-timeline

Enregistrement d'écran de la démo

Démo

Démonstration des animations liées au défilement CSS: rattachement de timeline différée
.

En savoir plus sur timeline-scope.

Animations de propriétés discrètes

Autre nouveauté en 2023 : la possibilité d'animer des animations discrètes, telles que l'animation vers et depuis display: none. À partir de Chrome 116, vous pouvez utiliser display et content-visibility dans les règles d'image clé. Vous pouvez également effectuer la transition de n'importe quelle propriété discrète au point de 50% plutôt qu'au point 0 %. Pour ce faire, utilisez la propriété transition-behavior à l'aide du mot clé allow-discrete ou la propriété transition en guise de raccourci.

Anime discret. Enregistrement d'écran

Anime discret. Démo

En savoir plus sur la transition des animations discrètes

@starting-style

Navigateurs pris en charge

  • Chrome: 117 <ph type="x-smartling-placeholder">
  • Edge: 117 <ph type="x-smartling-placeholder">
  • Firefox: 129 <ph type="x-smartling-placeholder">
  • Safari: 17.5. <ph type="x-smartling-placeholder">

Source

La règle CSS @starting-style s'appuie sur de nouvelles fonctionnalités Web d'animation vers et depuis display: none. Cette règle permet d'attribuer une "avant-ouverture" à un élément style que le navigateur peut rechercher avant que l'élément ne soit ouvert sur la page. Ceci est très utile pour les animations d'entrée et pour animer des éléments tels qu'une fenêtre pop-up ou une boîte de dialogue. Elle peut également être utile chaque fois que vous créez un élément et souhaitez lui donner la possibilité de l'animer. Prenons l'exemple suivant, qui anime un attribut popover (voir la section suivante) dans la vue et dans la couche supérieure de manière fluide depuis l'extérieur de la fenêtre d'affichage.

Enregistrement d'écran de style @starting

Démonstration de @starting-style

En savoir plus sur @starting-style et les autres animations d'entrée

Superposition

Navigateurs pris en charge

  • Chrome: 117 <ph type="x-smartling-placeholder">
  • Edge: 117 <ph type="x-smartling-placeholder">
  • Firefox: non compatible. <ph type="x-smartling-placeholder">
  • Safari: non compatible. <ph type="x-smartling-placeholder">

Source

Vous pouvez ajouter la nouvelle propriété CSS overlay à votre transition pour permettre aux éléments avec des styles de calque supérieur (popover et dialog, par exemple) de s'animer en douceur depuis la couche supérieure. Si vous n'effectuez pas de transition en superposition, votre élément est immédiatement rogné, transformé et recouvert, et la transition ne se produit pas. De même, overlay permet à ::backdrop de s'animer de manière fluide lorsqu'il est ajouté à un élément de couche supérieure.

Enregistrement d'écran en superposition

Démo en direct en superposition

En savoir plus sur la superposition et les autres animations de sortie

Composants

2023 a été une année importante pour l'intersection du style et des composants HTML, avec une page de destination popover et beaucoup de travail sur le positionnement des ancrages et l'avenir des menus déroulants de style. Ces composants facilitent la création de modèles d'interface utilisateur courants sans avoir à utiliser des bibliothèques supplémentaires ni à créer vos propres systèmes de gestion des états à partir de zéro à chaque fois.

Fenêtre pop-up

Navigateurs pris en charge

  • Chrome: 114 <ph type="x-smartling-placeholder">
  • Edge: 114 <ph type="x-smartling-placeholder">
  • Firefox: 125 <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

Source

L'API Popover vous aide à créer des éléments qui se superposent au reste de la page. Il peut s'agir de menus, d'une sélection et d'info-bulles. Vous pouvez créer un pop-up simple en ajoutant l'attribut popover et un id à l'élément qui s'affiche, puis en connectant son attribut id à un bouton d'appel à l'aide de popovertarget="my-popover". L'API Popover est compatible avec:

  • Promotion dans la couche supérieure. Les fenêtres pop-up s'affichent sur une couche distincte au-dessus du reste de la page, ce qui vous évite d'avoir à manipuler le z-index.
  • Fonctionnalité Lumière désactivée Si vous cliquez en dehors de la zone, cette dernière se ferme et le curseur est à nouveau activé.
  • Gestion du focus par défaut. Lorsque vous ouvrez le pop-up, l'onglet suivant s'arrête dans le pop-up.
  • Combinaisons de touches accessibles : Appuyez sur la touche esc ou appuyez deux fois sur l'écran pour fermer le pop-up et replacer le curseur au premier plan.
  • Liaisons de composants accessibles. Connexion sémantique d'un élément de pop-over à un déclencheur de fenêtre contextuelle.

Enregistrement d'écran pop-over

Démonstration en direct Popover

Règles horizontales pour une sélection

Une autre modification mineure du code HTML, qui a été introduite cette année dans Chrome et Safari, concerne la possibilité d'ajouter des règles horizontales (balises <hr>) dans les éléments <select> pour faciliter la séparation visuelle de votre contenu. Auparavant, l'ajout d'une balise <hr> dans une sélection ne s'affichait tout simplement pas. Toutefois, cette année, Safari et Chrome proposent cette fonctionnalité, ce qui permet une meilleure séparation du contenu au sein des éléments <select>.

Sélectionner une capture d'écran

capture d&#39;écran de &quot;hr dans Select&quot; avec les thèmes clair et sombre dans Chrome

Sélectionner une démonstration en direct

En savoir plus sur l'utilisation de "hr" dans une sélection

:pseudo-classes valides et non valides pour l'utilisateur

Navigateurs pris en charge

  • Chrome: 119 <ph type="x-smartling-placeholder">
  • Edge: 119 <ph type="x-smartling-placeholder">
  • Firefox: 88 <ph type="x-smartling-placeholder">
  • Safari: 16.5. <ph type="x-smartling-placeholder">

Source

Stables dans tous les navigateurs cette année, :user-valid et :user-invalid se comportent de la même manière que les pseudo-classes :valid et :invalid, mais ne mettent en correspondance une commande de formulaire qu'après une interaction significative de l'utilisateur avec l'entrée. Une commande de formulaire obligatoire et vide correspond à :invalid même si l'utilisateur n'a pas commencé à interagir avec la page. Cette même commande ne correspondra pas à :user-invalid tant que l'utilisateur n'aura pas modifié l'entrée et la laissera dans un état non valide.

Grâce à ces nouveaux sélecteurs, il n'est plus nécessaire d'écrire du code avec état pour suivre les entrées modifiées par un utilisateur.

:user-* Enregistreur d'écran

Démonstration en direct :user-*

En savoir plus sur l'utilisation de pseudo-éléments de validation de formulaire par l'utilisateur*

Accordéon exclusif

Navigateurs pris en charge

  • Chrome: 120 <ph type="x-smartling-placeholder">
  • Edge: 120 <ph type="x-smartling-placeholder">
  • Firefox: 130 <ph type="x-smartling-placeholder">
  • Safari: 17.2. <ph type="x-smartling-placeholder">

Un modèle d'interface utilisateur courant sur le Web est un composant en accordéon. Pour implémenter ce modèle, vous combinez quelques éléments <details>, souvent en les regroupant visuellement pour indiquer qu'ils vont ensemble.

Une nouveauté de Chrome 120 est la prise en charge de l'attribut name sur les éléments <details>. Lorsque cet attribut est utilisé, plusieurs éléments <details> ayant la même valeur name forment un groupe sémantique. Un seul élément du groupe peut être ouvert à la fois: lorsque vous ouvrez l'un des éléments <details> du groupe, l'élément précédemment ouvert se ferme automatiquement. Ce type d'accordéon est appelé accordéon exclusif.

Démo exclusive de l'accordéon

Les éléments <details> qui font partie d'un accordéon exclusif ne doivent pas nécessairement être des frères et sœurs. Ils peuvent être dispersés dans le document.

Les CSS ont connu une telle renaissance ces dernières années, en particulier en 2023. Si vous débutez avec le CSS ou si vous souhaitez simplement rafraîchir vos connaissances sur les principes de base, consultez notre cours sans frais Learn CSS, ainsi que les autres cours sans frais disponibles sur le site web.dev.

Nous vous souhaitons de joyeuses fêtes de fin d'année et espérons que vous aurez bientôt l'occasion d'intégrer certaines de ces formidables nouvelles fonctionnalités CSS et UI à votre travail.

⇾ L'équipe des développeurs d'UI Chrome,