Code CSS enveloppé: 2023 !

Code CSS encapsulé: 2023 !

Accéder au contenu:

• Fondations architecturales
• Fonctions trigonométriques
• Sélection complexe nth-*
• Portée
• Nidification

• Typographie
• Initiale
• Équilibre/esthétique du retour à la ligne

• Couleur
• Niveau de couleur 4
• Fonction de mélange de couleurs
• Syntaxe des couleurs relatives

• Design responsif
• Requêtes de conteneur
• Requêtes de style
• :contient un sélecteur
• Mettre à jour la requête média
• Écrire une requête multimédia
• Requête multimédia de transparence

• Interaction
• Afficher les transitions
• Fonction d'atténuation linéaire
• Scrollend
• Animations déclenchées par le défilement
• Pièce jointe de calendrier différée
• Transitions de propriété discrètes
• Règle de style de départ
• Animation en superposition

• Composants
• Pop-up
• Heure dans la sélection
• Pseudo-classes valides/non valides pour l'utilisateur
• Accordéon exclusif

Impressionnant ! 2023 a été une année exceptionnelle pour le CSS !

De #Interop2023 à de nombreuses nouvelles pages de destination dans l'espace CSS et UI qui permettent des fonctionnalités que les développeurs pensaient autrefois impossibles sur la plate-forme Web. Désormais, tous les navigateurs modernes sont compatibles avec les requêtes de conteneur, la sous-grille, le sélecteur :has() et une multitude de nouveaux espaces et fonctions de couleurs. Chrome est compatible avec les animations liées au défilement CSS uniquement et les animations fluides entre les vues Web avec des transitions de vue. Pour couronner le tout, de nombreuses nouvelles primitives ont été ajoutées pour améliorer l'expérience des développeurs, comme l'imbrication CSS et les styles à portée.

Quelle année incroyable ! Nous souhaitons donc terminer cette année importante en célébrant et en reconnaissant tout le travail acharné des développeurs de navigateurs et de la communauté Web qui ont rendu tout cela possible.

Recherchez les nouveaux badges de référence à côté des titres des fonctionnalités. En savoir plus

• = Nouveauté disponible dans toutes les versions stables des principaux navigateurs.

• = Disponibilité partielle dans les principaux navigateurs.

Fondations architecturales

Commençons par les mises à jour du langage et des fonctionnalités de base du CSS. Ces fonctionnalités sont essentielles à la façon dont vous créez et organisez les styles, et elles sont très utiles au développeur.

Fonctions trigonométriques

Navigateurs pris en charge

• 111
• 111
• 108
• 15,4

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

• 111
• 111
• 113
• 9

Le sélecteur de pseudo-classe :nth-child() permet de sélectionner des éléments du DOM par 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 éventuellement transmettre une liste de sélecteurs dans :nth-child() et :nth-last-child(). Vous pouvez ainsi 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éfiltrant à l'aide de of .small. Modifiez le sélecteur utilisé de façon dynamique à l'aide des listes déroulantes.

Démonstration complexe de la sélection nth-*

En savoir plus sur les sélections nth-* complexes

Portée

Navigateurs pris en charge

• 118
• 118
• 
• 17,4

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 de portée, vous pouvez être très précis sur les éléments que vous sélectionnez sans avoir à écrire des sélecteurs trop spécifiques ni à les associer étroitement à la structure DOM.

Un sous-arbre de portée est défini par une racine de portée (limite supérieure) et une limite de portée facultative (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 à portée 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émo de la portée

Démonstration en direct de Scope

Démonstration de CSS @scope

Pour en savoir plus sur @scope, consultez l'article Utiliser @scope pour limiter la portée de vos sélecteurs. Cet article présente le sélecteur :scope, la gestion de la spécificité, les champs d'application sans prélude et l'impact de @scope sur la cascade.

Imbriquer

Navigateurs pris en charge

• 120
• 120
• 117
• 17.2

Source

Avant l'imbrication, chaque sélecteur devait être déclaré explicitement, séparément les uns des autres. Cela entraîne des répétitions, une taille importante des feuilles de style et une expérience d'écriture fragmentée. Les sélecteurs peuvent désormais être poursuivis avec des règles de style associées regroupées.

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 flexible pour déterminer le gagnant de la course

L'imbrication peut réduire le poids d'une feuille de style, réduire les frais généraux des sélecteurs répétitifs et centraliser les styles de composants. La syntaxe publiée initialement avec une limitation 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

• 117
• 117
• 71
• 16

Source

CSS subgrid vous permet de créer des grilles plus complexes avec un meilleur alignement entre les mises en page enfants. Il permet à une grille située dans une autre grille d'adopter les lignes et les colonnes de la grille extérieure comme s'il s'agissait de la sienne, en utilisant subgrid comme valeur pour les lignes ou les colonnes de la grille.

Enregistrement d'écran Subgrid

Démonstration en direct du sous-réseau

L'en-tête, le corps et les pieds de page s'alignent sur les tailles dynamiques de leurs frères et sœurs.

Les sous-grilles sont particulièrement utiles pour aligner les éléments frères sur les contenus dynamiques les uns des autres. Les rédacteurs, les rédacteurs UX et les traducteurs n'ont donc pas à essayer de créer un texte qui "s'adapte" à 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 connu quelques mises à jour importantes en 2023. La propriété text-wrap est particulièrement intéressante pour l'amélioration progressive. Cette propriété permet d'ajuster la mise en page typographique, composée dans le navigateur sans script supplémentaire requis. Dites adieu aux longueurs de ligne incohérentes et bonjour à une typographie plus prévisible.

Initiale

Navigateurs pris en charge

• 110
• 110
• x
• 9

Source

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

Capture d'écran de la lettre initiale

Démo de la première lettre

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

En savoir plus sur initial-letter

text-wrap: équilibre et esthétique

En tant que développeur, vous ne connaissez pas la taille finale, la taille de la police ni même la langue d'un titre ou d'un paragraphe. Toutes les variables nécessaires à un traitement efficace et esthétique du retour à la ligne 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à que deux nouvelles techniques de retour à la ligne entrent en jeu : balance et 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. Ces deux tâches étaient traditionnellement effectuées manuellement. Il est incroyable de pouvoir les confier au navigateur et de les voir fonctionner pour n'importe quelle langue traduite.

Enregistrement d'écran sur le retour à la ligne automatique

Démonstration en direct du retour à 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

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

Espaces de couleur HD (niveau de couleur 4)

Navigateurs pris en charge

• 111
• 111
• 113
• 15

Source

Navigateurs pris en charge

• 111
• 111
• 113
• 15

Source

Du matériel au logiciel, du CSS aux lumières clignotantes, nos ordinateurs doivent souvent fournir beaucoup d'efforts pour essayer de représenter les couleurs aussi bien que nos yeux humains. 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 les couleurs peuvent désormais : - Vérifier si le matériel de l'écran de l'utilisateur est compatible avec les couleurs HDR à large gamme. - Vérifiez si le navigateur de l'utilisateur comprend la syntaxe des couleurs, comme Oklch ou Display P3. - Spécifiez les couleurs HDR dans les formats Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ, etc. - Créez des dégradés avec des couleurs HDR. - Interpolez des dégradés dans d'autres espaces de couleurs. - Mélangez des couleurs avec color-mix(). - Créez des variantes de couleur à l'aide de la syntaxe de couleur relative.

Enregistrement d'écran de la Color 4

Démo de Color 4

Dans la démonstration suivante, vous pouvez comparer les effets de "balance" et de "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 Color 4 et les espaces de couleurs

fonction color-mix

Navigateurs pris en charge

• 111
• 111
• 113
• 16.2

Source

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

Enregistrement d'écran de color-mix()

Démo de color-mix()

La démonstration vous permet de choisir deux couleurs à l'aide d'un sélecteur de couleur, l'espace de couleurs et la quantité de chaque couleur qui doit être dominante dans le mélange.

Vous pouvez considérer color-mix() comme un moment donné d'un gradient. Alors qu'un dégradé affiche toutes les étapes nécessaires pour passer du bleu au blanc, color-mix() n'en affiche qu'une seule. Les choses se compliquent lorsque vous commencez à prendre en compte les espaces de couleurs et à découvrir à quel point l'espace de couleurs 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. Il est légèrement plus puissant que color-mix() et utilise une stratégie différente pour travailler avec les couleurs. color-mix() peut mélanger la couleur blanche pour éclaircir une couleur, tandis que le RCS offre 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é de manière programmatique.

Enregistreur d'écran RCS

Démonstration en direct du RCS

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

Le RCS vous permet d'effectuer des manipulations relatives et absolues sur une couleur. Une modification relative consiste à prendre la valeur actuelle de saturation ou de luminosité et à la modifier 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 pertinents pour la thématisation, uniquement dans les variantes temporelles, et plus encore.

En savoir plus sur la syntaxe des couleurs relatives

Responsive design

Le responsive design a évolué en 2023. Cette année révolutionnaire a permis de proposer de nouvelles fonctionnalités qui changent complètement la façon dont nous créons des expériences Web responsives, et a inauguré un nouveau modèle de conception responsive basée sur les composants. La combinaison de requêtes de conteneur et de :has() prend en charge les composants qui possèdent leur style responsif et logique en fonction de la taille de leur parent, ainsi que de la présence ou de l'état de n'importe lequel de leurs enfants. Vous pouvez ainsi enfin séparer la mise en page au niveau de la page de celle au niveau du composant, et écrire la logique une seule fois pour utiliser votre composant partout.

Requêtes de conteneur de taille

Navigateurs pris en charge

• 105
• 105
• 110
• 16

Source

Au lieu d'utiliser les informations de taille globale du viewport pour appliquer des styles CSS, les requêtes de conteneur permettent d'interroger un élément parent sur 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 taille des conteneurs sont devenues stables dans tous les navigateurs modernes le 14 février dernier (Saint-Valentin).

Pour utiliser cette fonctionnalité, configurez d'abord la structuration sur l'élément que vous interrogez, puis, comme pour une requête multimédia, utilisez @container avec les paramètres de taille pour appliquer les styles. Vous obtenez également les tailles des requêtes de conteneur. Dans la démonstration suivante, la taille de la requête de conteneur cqi (qui représente la taille du conteneur intégré) est utilisée pour dimensionner l'en-tête de la fiche.

@container Enregistreur d'écran

Démo @container

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

Requêtes de style de conteneur

Navigateurs pris en charge

• 111
• 111
• x
• 18

Source

Les requêtes de style ont été intégrées partiellement dans Chrome 111. Avec les requêtes de style, vous pouvez actuellement interroger la valeur des propriétés personnalisées sur 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 de la requête de style

Démonstration de la requête de style

Changez la couleur, changez les scènes. Chacune 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 en 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

• 105
• 105
• 121
• 15,4

Source

Depuis près de 20 ans, les développeurs demandent un "sélecteur parent" en CSS. C'est désormais possible grâce au 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 de :has()

Démonstration en direct :has()

Démonstration CSS :has(): carte sans/avec image

Étant donné que :has() accepte une liste de sélecteurs relatifs comme argument, vous pouvez sélectionner bien plus que l'élément parent. Grâce à différents combinateurs CSS, vous pouvez non seulement remonter l'arborescence DOM, mais aussi 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.

Enregistreur d'écran :has()

Démonstration de :has()

Démonstration 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

• 113
• 113
• 102
• 17

Source

La requête multimédia update vous permet d'adapter l'interface utilisateur à la fréquence d'actualisation d'un appareil. La fonctionnalité peut renvoyer une valeur de fast, slow ou none, qui correspond aux fonctionnalités de différents appareils.

La plupart des appareils pour lesquels vous concevez des applications ont probablement une fréquence d'actualisation élevée. Cela inclut les ordinateurs de bureau et la plupart des appareils mobiles. La fréquence d'actualisation des lecteurs de livres numériques et des appareils tels que les systèmes de paiement à faible consommation peut être lente. Sachant que l'appareil ne peut pas gérer l'animation ni les mises à jour fréquentes, vous pouvez économiser la batterie ou éviter les mises à jour de vue défectueuses.

Mettre à jour l'Enregistreur d'écran

Mise à jour de la démonstration

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

En savoir plus sur @media (mise à jour)

Écrire une requête multimédia

Navigateurs pris en charge

• 120
• 120
• 113
• 17

Source

La requête multimédia de script peut être utilisée pour vérifier si JavaScript est disponible ou non. C'est très utile pour l'amélioration progressive. Avant cette requête multimédia, la stratégie permettant de 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 l'ajuster en conséquence.

Découvrez comment activer et désactiver JavaScript sur une page pour effectuer des tests 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 multimédia de script peut aider à faire fonctionner le changement par rapport aux préférences système, car aucun code JavaScript n'est disponible. Prenons l'exemple d'un composant de bouton d'activation/de désactivation. Si JavaScript est disponible, le bouton peut être activé/désactivé par balayage, au lieu d'être simplement activé/désactivé. De nombreuses opportunités s'offrent à vous pour améliorer l'expérience utilisateur si le script est disponible, tout en offrant une expérience de base significative si le script est désactivé.

En savoir plus sur script.

Requête média à transparence réduite

Navigateurs pris en charge

• 118
• 118
• 
• x

Source

Les interfaces non opaques peuvent provoquer des maux de tête ou être difficiles à appréhender pour les personnes souffrant de différents 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'UI. Cette requête multimédia pour prefers-reduced-transparency s'intègre bien aux autres requêtes multimédias de préférences, qui vous permettent d'être créatif tout en vous adaptant aux utilisateurs.

Enregistrement d'écran avec transparence réduite

Démonstration de la réduction de la transparence

Dans certains cas, vous pouvez fournir une autre mise en page qui ne superpose pas de contenu. Dans d'autres cas, l'opacité d'une couleur peut être ajustée pour qu'elle soit opaque ou presque opaque. L'article de blog suivant contient des démos 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 un élément essentiel des expériences numériques. Il permet aux utilisateurs d'obtenir des commentaires sur ce 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é lancées, ce qui a facilité la composition et l'implémentation des interactions, permettant ainsi de fluidifier les parcours utilisateur et d'améliorer l'expérience Web.

Afficher les transitions

Navigateurs pris en charge

• 111
• 111
• x
• 18

Source

Les transitions de vue ont un impact énorme 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 avec le nouvel état, et l'API s'occupe de tout. Pour ce faire, il prend un instantané avant et après, puis effectue une transition entre les deux. Le CSS vous permet de contrôler ce qui est capturé et, si vous le souhaitez, de personnaliser l'animation de ces instantanés.

Enregistrement d'écran VT

Démo de VT

Regarder la démonstration des transitions

L'API View Transitions pour les applications monopages a été publiée dans Chrome 111. En savoir plus sur les transitions d'affichage

Fonction de lissage de vitesse linéaire

Navigateurs pris en charge

• 113
• 113
• 112
• 17.2

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 des fonctions d'atténuation complexes de manière simple, au prix d'une perte de 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 d'approximer ces amortissements en les simplifiant en une série de points, puis en interpolant linéairement entre ces points.

La courbe de rebond d'origine en bleu est simplifiée par un ensemble de points clé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émo de l'atténuation linéaire

Démonstration de CSS linear().

En savoir plus sur linear(). Pour créer des courbes linear(), utilisez le générateur d'atténuation linéaire.

Fin du défilement

Navigateurs pris en charge

• 114
• 114
• 109
• x

Source

De nombreuses interfaces incluent des interactions de défilement. Parfois, l'interface doit synchroniser les informations pertinentes pour la position de défilement actuelle ou extraire des données en fonction de l'état actuel. Avant l'événement scrollend, vous deviez utiliser une méthode de délai avant expiration inexacte qui pouvait se déclencher alors que le doigt de l'utilisateur était toujours sur l'écran. Avec l'événement scrollend, vous disposez d'un événement de fin de défilement parfaitement synchronisé qui détermine si un utilisateur est toujours en train de faire un geste ou non.

Enregistrement d'écran défilant

Démo de défilement

Il était important que le navigateur en soit le propriétaire, car JavaScript ne peut pas suivre la présence d'un doigt sur l'écran pendant un défilement. Les informations ne sont tout simplement pas disponibles. Les segments de code d'essai de fin de défilement inexacts peuvent désormais être supprimés et remplacés par un événement haute précision appartenant au navigateur.

En savoir plus sur scrollend

Animations déclenchées par le défilement

Navigateurs pris en charge

• 115
• 115
• 
• x

Source

Les animations liées au défilement sont une fonctionnalité intéressante disponible dans Chrome 115. Ils vous permettent de prendre une animation CSS ou une animation créée avec l'API Web Animations existante, et de la coupler au décalage de défilement d'un dispositif de défilement. Lorsque vous faites défiler la page vers le haut ou vers le bas (ou vers la gauche ou vers la droite dans un défilement horizontal), l'animation associé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'en bas, le texte s'affiche caractère par caractère.

Enregistreur d'écran SDA

Démo SDA

Démonstration d'animations CSS liées au défilement: chronologie de défilement

Avec une ViewTimeline, vous pouvez suivre un élément lorsqu'il traverse le conteneur de défilement. Son fonctionnement est semblable à celui utilisé par IntersectionObserver pour suivre un élément. Dans la démonstration suivante, chaque image se révèle à partir du moment où elle entre dans le scrollport jusqu'à ce qu'elle se trouve au centre.

Enregistrement d'écran de la démo de l'SDA

Démonstration en direct de l'SDA

Démonstration d'animations CSS liées au défilement: chronologie de la vue

Étant donné que les animations liées au défilement fonctionnent avec les animations CSS et l'API Web Animations, vous pouvez profiter 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 créer des animations fluides, basées sur le défilement, exécutées sur le thread principal avec seulement quelques lignes de code supplémentaires. Que demander de plus ?

Pour en savoir plus sur les animations déclenchées par le défilement, consultez cet article ou accédez à scroll-driven-animations.style, qui inclut de nombreuses démonstrations.

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

Navigateurs pris en charge

• 116
• 116
• x
• x

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. Cependant, très souvent, l'élément à animer n'est pas un enfant de la barre de défilement, mais un élément situé dans un sous-arbre complètement différent.

Pour permettre à l'élément animé de trouver une timeline de défilement nommée d'un élément qui n'est pas un ancêtre, utilisez la propriété timeline-scope sur un parent partagé. Cela permet à l'scroll-timeline ou à l'view-timeline défini avec ce nom de s'y associer, ce qui lui donne une portée plus large. Ainsi, tous les enfants de ce parent partagé peuvent utiliser la chronologie avec ce nom.

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é

En savoir plus sur timeline-scope.

Animations de propriétés distinctes

En 2023, vous pourrez également animer des animations distinctes, par exemple entre display: none et display: none. À partir de Chrome 116, vous pouvez utiliser display et content-visibility dans les règles de clés-images. Vous pouvez également effectuer la transition de n'importe quelle propriété discrète au point 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

Animation discrète Démo

En savoir plus sur les transitions d'animations distinctes

@starting-style

Navigateurs pris en charge

• 117
• 117
• 129
• 17,5

Source

La règle CSS @starting-style s'appuie sur de nouvelles fonctionnalités Web pour animer les éléments vers et depuis display: none. Cette règle permet d'attribuer à un élément un style "avant ouverture" que le navigateur peut rechercher avant que l'élément ne s'ouvre sur la page. Cette option est très utile pour les animations de saisie et pour animer des éléments tels qu'un pop-up ou une boîte de dialogue. Il peut également être utile lorsque vous créez un élément et que vous souhaitez lui donner la possibilité de s'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.

@starting-style Screencast

Démo @starting-style

En savoir plus sur @starting-style et d'autres animations de saisie

Superposition

Navigateurs pris en charge

• 117
• 117
• x
• x

Source

Vous pouvez ajouter la nouvelle propriété CSS overlay à votre transition pour permettre aux éléments avec des styles de couche supérieure (tels que popover et dialog) de s'animer en douceur en dehors de 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émonstration en direct de la superposition

En savoir plus sur les superpositions et les autres animations de sortie

Composants

2023 a été une année importante pour l'intersection du style et des composants HTML, avec le lancement de popover et de nombreux travaux sur le positionnement des ancres et l'avenir du style des menus déroulants. Ces composants facilitent la création de modèles d'UI courants sans avoir à s'appuyer sur des bibliothèques supplémentaires ni à créer vos propres systèmes de gestion des états à partir de zéro à chaque fois.

Pop-over

Navigateurs pris en charge

• 114
• 114
• 125
• 17

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, de sélections et d'info-bulles, par exemple. Vous pouvez créer un popover 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 les éléments suivants :

• Promotion vers la couche supérieure. Les pop-ups s'affichent sur une couche distincte au-dessus du reste de la page. Vous n'avez donc pas besoin de jouer avec l'indice z.
• Fonctionnalité Lumière désactivée Cliquez en dehors de la zone du pop-up pour le fermer et rétablir la sélection.
• Gestion de la mise au point par défaut Lorsque vous ouvrez le pop-up, l'onglet suivant s'arrête dans le pop-up.
• Associations de clavier 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. Connecter sémantiquement un élément de popover à un déclencheur de popover

Enregistrement d'écran du pop-up

Démonstration en direct du pop-over

Règles horizontales dans la sélection

Une autre petite modification apportée au code HTML dans Chrome et Safari cette année est la possibilité d'ajouter des éléments de ligne horizontale (balises <hr>) dans des éléments <select> pour structurer visuellement votre contenu. Auparavant, l'affichage d'une balise <hr> dans un élément de sélection ne s'effectuait pas. Cette année, toutefois, Safari et Chrome sont compatibles avec cette fonctionnalité, ce qui permet une meilleure séparation du contenu au sein des éléments <select>.

Sélectionner une capture d'écran

Sélectionner une démonstration en direct

Découvrez comment utiliser hr dans select.

:user-valid et invalid pseudo classes

Navigateurs pris en charge

• 119
• 119
• 88
• 16,5

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 sont mis en correspondance avec 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 un utilisateur n'a pas commencé à interagir avec la page. La même commande ne correspond pas à :user-invalid tant que l'utilisateur n'a pas modifié la saisie et ne l'a pas laissée dans un état non valide.

Avec ces nouveaux sélecteurs, il n'est plus nécessaire d'écrire du code avec état pour suivre les entrées modifiées par l'utilisateur.

Enregistreur d'écran :user-*

Démonstration en direct de :user-*

En savoir plus sur l'utilisation des pseudo-éléments de validation de formulaire user-*

Accordéon exclusif

Navigateurs pris en charge

• 120
• 120
• 130
• 17.2

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

Chrome 120 est compatible avec 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 n'ont pas nécessairement besoin d'être frères et sœurs. Ils peuvent être dispersés dans le document.

Conclusion

Le CSS a connu une véritable 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 de base, consultez notre cours sans frais Apprendre le CSS, ainsi que les autres cours sans frais proposés sur web.dev.

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

⇾ L'équipe DevRel de l'UI Chrome

Una Kravets

Bramus

Adam Argyle