Code CSS encapsulé: 2023 !
Accéder au contenu:
- Fondations architecturales
- Fonctions trigonométriques
- Sélection n-ième* complexe
- Scope (Portée)
- Imbrication
- Design réactif
- Requêtes de conteneur
- Appliquer un style aux requêtes
- :comporte un sélecteur
- Mettre à jour la requête média
- Rédiger une requête multimédia
- Requête média concernant la transparence
Impressionnant ! 2023 a été une année charnière pour les CSS !
De #Interop2023 à de nombreuses nouveautés dans les CSS et l'UI, qui offrent aux développeurs des fonctionnalités qui pensaient 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 CSS uniquement et les animations fluides entre les vues Web grâce à des transitions de vue. Cerise sur le gâteau, de nombreuses nouvelles primitives sont disponibles pour offrir de meilleures expériences de développement, comme l'imbrication CSS et les styles de niveau d'accès.
Quelle année ! C'est pourquoi nous souhaitons terminer cette année importante en félicitant et en récompensant tout le travail acharné de la part des développeurs de navigateurs et de la communauté Web qui a rendu tout cela possible.
Fondations architecturales
Commençons par les mises à jour apportées au langage et aux fonctionnalités CSS principaux. Ces caractéristiques sont essentielles à la création et à l'organisation des styles, et apportent une grande puissance au développeur.
Fonctions trigonométriques
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 utiles pour l'animation et la 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.
En savoir plus sur les fonctions trigonométriques en CSS
Sélection n-ième* complexe
Navigateurs pris en charge
- 111
- 111
- 113
- 9
Avec le sélecteur de pseudo-classe :nth-child(), il est possible de sélectionner des éléments du DOM en fonction de leur indice. 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-*() tiennent compte de tous les éléments enfants. À partir de Chrome 111, vous pouvez éventuellement transmettre une liste de sélection à :nth-child() et :nth-last-child(). Ainsi, vous pouvez préfiltrer la liste des enfants avant que An+B n'effectue son action.
Dans la démonstration suivante, la logique 3n+1 n'est appliquée qu'aux petites poupées en les préfiltrent à l'aide de of .small. Utilisez les menus déroulants pour modifier de façon dynamique le sélecteur utilisé.
En savoir plus sur les sélections n-* complexes
Scope (Portée)
Navigateurs pris en charge
- 118
- 118
- x
- 17,4
Chrome 118 est compatible avec @scope, une règle @ qui vous permet de faire correspondre le sélecteur de champ d'application à une sous-arborescence spécifique du document. Avec le style cloisonné, vous pouvez être très précis quant aux éléments que vous sélectionnez sans avoir à écrire de sélecteurs trop spécifiques ou à les associer étroitement à la structure DOM.
Une sous-arborescence 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 champ d'application ne cibleront que les éléments de la sous-arborescence sculptée. Par exemple, la règle de style avec champ d'application 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 correspondent pas en raison de la limite de champ d'application appliquée.
Capture d'écran de la démonstration du champ d'application
Démonstration en direct du champ d'application
@scopePour en savoir plus sur les @scope, consultez l'article Comment utiliser @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.
Imbrication
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 accumulation de feuilles de style et une expérience de création éparse. Vous pouvez désormais poursuivre les sélecteurs en regroupant les règles de style associé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 l'imbrication
L'imbrication permet de réduire l'épaisseur d'une feuille de style, de réduire les frais généraux liés aux sélecteurs répétitifs et de centraliser les styles de composants. La syntaxe a d'abord été publiée avec une limite qui nécessitait l'utilisation de & à différents endroits, mais a depuis été levée avec une mise à jour de syntaxe assouplie de l'imbrication.
En savoir plus sur l'imbrication
Sous-réseau
Le 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 à l'intérieur d'une autre grille d'adopter les lignes et colonnes de la grille externe comme s'il s'agissait de leur propre grille, en utilisant subgrid comme valeur pour les lignes ou les colonnes de la grille.
Enregistrement d'écran sous-grille
Démonstration en direct d'une sous-grille
Elle est particulièrement utile pour aligner des éléments frères et sœurs par rapport au contenu dynamique d'un autre élément. Cela évite aux rédacteurs, aux rédacteurs UX et aux traducteurs d'essayer de créer une copie du projet qui « s'adapte » à la mise en page. Elle permet d'ajuster la mise en page afin de l'adapter au contenu.
En savoir plus sur les sous-réseaux
Typographie
Quelques mises à jour importantes ont été apportées à la typographie Web 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, dans le navigateur sans aucun script supplémentaire requis. Oubliez les longueurs de ligne gênantes et passez à une typographie plus prévisible !
Lettre initiale
Arrivant au début de l'année dans Chrome 110, la propriété initial-letter est une fonctionnalité CSS petite, mais puissante, qui définit le style pour l'emplacement des lettres initiales. Vous pouvez positionner des lettres à l'état abandonné ou déplié. La propriété accepte deux arguments: le premier pour indiquer la profondeur de la lettre dans le paragraphe correspondant, et le second pour indiquer la hauteur de la lettre au-dessus. Vous pouvez même combiner les deux, comme dans la démonstration suivante.
Capture d'écran de l'initiale
Démo de l'initiale
initial-letter du pseudo-élément ::first-letter pour qu'il se déplace.En savoir plus sur les initiales
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 au traitement efficace et esthétique du renvoi à la ligne du texte sont disponibles dans le navigateur. Comme 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 de haute qualité et avancée.
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 vise à créer un bloc de texte harmonieux, tandis que pretty cherche à éviter les orphelins et à garantir un trait d'union sain. Ces deux tâches sont traditionnellement effectuées à la main, et c'est génial de pouvoir confier cette tâche au navigateur et de le faire fonctionner dans n'importe quelle langue traduite.
Enregistrement d'écran avec retour automatique à la ligne
Démonstration en direct de retour à la ligne automatique
balance et pretty sur un titre et un paragraphe. Essayez de traduire la démo dans une autre langue.En savoir plus sur text-wrap: balance
Couleur
2023 a été l'année de la couleur pour la plate-forme Web. Grâce aux nouveaux espaces de couleurs et aux nouvelles fonctions qui permettent une thématisation de couleurs dynamique, rien ne vous empêche de créer des thèmes colorés et luxuriants que vos utilisateurs méritent, et de les rendre personnalisables.
Espaces de couleur HD (niveau de couleur 4)
Du matériel au logiciel, en passant par le CSS et les voyants clignotants, nos ordinateurs ont besoin de beaucoup de travail pour essayer de représenter les couleurs à la hauteur de ce que l'œil humain peut voir. En 2023, nous avons ajouté de nouvelles couleurs, davantage de couleurs, de nouveaux espaces colorimétriques, 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, par exemple Oklch ou Display P3.
- Spécifiez les couleurs HDR dans Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ, etc.
- Créer 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 couleur avec une syntaxe de couleur relative.
Enregistreur d'écran Color 4
Démo couleur 4
En savoir plus sur les couleurs 4 et les espaces de couleur
fonction color-mix
Mélanger les couleurs est une tâche classique. En 2023, le CSS peut aussi le faire. Vous pouvez non seulement associer du blanc ou du noir à une couleur, mais aussi appliquer la transparence, 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.
color-mix() Enregistreur d'écran
Démo color-mix()
Vous pouvez considérer color-mix() comme un moment dans le temps issu d'un dégradé. Où un dégradé indique tous les pas nécessaires pour passer du bleu au blanc, color-mix() n'en affiche qu'un seul. Les choses deviennent avancées lorsque vous commencez à prendre en compte les espaces colorimétriques et apprenez à 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 à color-mix() pour créer des variantes de couleur. Elle est légèrement plus puissante que color-mix(), mais elle offre également une stratégie différente pour travailler avec la couleur. color-mix() peut mélanger la couleur blanche pour éclaircir une couleur. Le RCS permet d'accéder précisément au canal de luminosité et 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 RCS
Le RCS vous permet d'effectuer des manipulations relatives et absolues d'une couleur. Une variation relative est une variation où vous prenez la valeur actuelle de saturation ou de luminosité et de la modifier avec calc(). Une modification absolue se produit lorsque vous remplacez la valeur d'un canal par une toute nouvelle, par exemple en définissant l'opacité sur 50%. Cette syntaxe vous fournit des outils utiles pour la thématisation, les variantes juste-à-temps, etc.
En savoir plus sur la syntaxe des couleurs relatives
Design réactif
Le responsive design a évolué en 2023. Cette année sans précédent a permis l'ouverture de nouvelles fonctionnalités qui changent complètement la façon dont nous concevons des expériences Web réactives et l'ouverture d'un nouveau modèle de responsive design basé sur des composants. La combinaison de requêtes de conteneur et de :has() est compatible avec les composants dont le style responsif et logique est basé sur la taille de leur parent, ainsi que sur la présence ou l'état 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.
Dimensionner les requêtes du conteneur
Plutôt que d'utiliser les informations de taille globales de la fenêtre d'affichage pour appliquer des styles CSS, les requêtes de conteneur prennent en charge l'interrogation d'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 vues. Les requêtes de conteneur concernant la taille sont devenues stables dans tous les navigateurs modernes le jour de la Saint-Valentin cette année (14 février).
Pour utiliser cette fonctionnalité, commencez par configurer le confinement de 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 requête du conteneur cqi (correspondant à la taille du conteneur intégré) est utilisée pour dimensionner l'en-tête de la carte.
Enregistreur d'écran @container
Démonstration de @container
En savoir plus sur l'utilisation des requêtes de conteneur
Appliquer un style aux requêtes de conteneur
Les requêtes de style ont été transférées avec une implémentation partielle 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, envoyez une requête pour déterminer si une valeur de propriété personnalisée existe ou si elle est définie sur une certaine valeur, comme @container style(--rain: true).
Capture d'écran d'une requête de style
Démonstration de style de requête
Bien que cela puisse sembler semblable à 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 prochaines 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 en fonction de paires propriété/valeur comme style(font-style: italic).
En savoir plus sur l'utilisation des requêtes de style
Sélecteur:has()
Depuis près de 20 ans, les développeurs ont demandé un "sélecteur de parent" dans les CSS. Avec le sélecteur :has() fourni dans Chrome 105, cela est désormais possible. Par exemple, si vous utilisez .card:has(img.hero), les éléments .card qui ont une image héros, enfant, seront sélectionnés.
Capture d'écran de démonstration :has()
:has() (démonstration en direct)
:has(): carte sans/avec imageÉtant donné que :has() accepte une liste de sélection relative comme argument, vous pouvez sélectionner beaucoup plus que l'élément parent. En utilisant différents combinateurs CSS, il est possible non seulement 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 pointe le curseur.
Enregistrement d'écran :has()
Démo :has()
:has(): station d'accueilEn savoir plus sur le sélecteur CSS :has()
Mettre à jour la requête média
La requête média update vous permet d'adapter l'UI à la fréquence d'actualisation d'un appareil. Cette fonctionnalité peut indiquer une valeur fast, slow ou none qui est liée aux fonctionnalités de différents appareils.
La plupart des appareils pour lesquels vous concevez sont susceptibles d'avoir une fréquence d'actualisation rapide. Cela concerne 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 peu puissants peut être lente. Sachant que l'appareil ne peut pas gérer les animations ni les mises à jour fréquentes, vous pouvez économiser la batterie et économiser les mises à jour des vues erronées.
Mettre à jour l'enregistrement d'écran
Mettre à jour la démo
En savoir plus sur @media (mise à jour)
Rédiger une requête multimédia
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 l'amélioration progressive. Avant cette requête média, une stratégie 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 JavaScript et s'adapter 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.
Enregistrement 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 fonctionner le changement par rapport aux préférences système, car aucun code JavaScript n'est disponible. Autre possibilité : si JavaScript est disponible, il est possible de faire glisser l'interrupteur d'un simple geste au lieu de simplement l'activer ou le désactiver. De nombreuses possibilités d'amélioration de l'expérience utilisateur si la fonctionnalité de script est disponible, tout en offrant une expérience de base significative si cette fonctionnalité est désactivée.
En savoir plus sur le script
Requête média à transparence réduite
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 ont des 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'accorde bien avec les autres requêtes médias axées sur les préférences, ce qui vous permet d'être créatif tout en tenant compte des utilisateurs.
Enregistrement d'écran Transparence réduit
Démo sur la transparence réduite
Dans certains cas, vous pouvez proposer une autre mise en page dont le contenu ne se superpose pas à un autre contenu. Dans d'autres cas, l'opacité d'une couleur peut être ajustée pour être opaque ou presque opaque. L'article de blog suivant propose des démonstrations plus inspirantes qui s'adaptent aux préférences des utilisateurs. N'hésitez pas à les consulter 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 à 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 rédaction et l'implémentation des interactions, offrant ainsi des parcours utilisateur plus fluides et une expérience Web plus affinée.
Afficher les transitions
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. Il peut s'agir de transitions complètes ou d'éléments plus petits 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 se charge de tout. Pour ce faire, il prend un instantané avant/après, puis passe de l'un à l'autre. En CSS, vous pouvez contrôler ce qui est capturé et, éventuellement, personnaliser l'animation de ces instantanés.
Enregistreur d'écran VT
Démo VT
API View Transitions pour les applications monopages disponible dans Chrome 111. En savoir plus sur les transitions de vues
Fonction de lissage de vitesse linéaire
Navigateurs pris en charge
- 113
- 113
- 112
- 17.2
Ne vous fiez pas au 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, avec un risque de perte de précision.
Avant linear(), disponible dans Chrome 113, il était impossible de créer des effets de rebond ou de rétroaction en CSS. Grâce à linear(), il est possible d'estimer ces lissages de vitesse en les simplifiant en une série de points, puis en effectuant une interpolation linéaire entre ces points.
linear() utilise ces points et les interpole de manière linéaire.Enregistrement d'écran avec lissage de vitesse linéaire
Démonstration de l'accélération linéaire
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
De nombreuses interfaces incluent des interactions de défilement. Parfois, l'interface doit synchroniser des informations correspondant à la position de défilement actuelle ou récupérer 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 encore sur l'écran. Avec l'événement scrollend, vous disposez d'un événement de fin de défilement parfaitement programmé qui détermine si l'utilisateur est toujours en train de faire son geste ou non.
Enregistreur d'écran de défilement
Démonstration de Scrollend
C'était important pour le navigateur, car JavaScript ne peut pas suivre la présence d'un doigt à l'écran lors d'un défilement. Les informations ne sont tout simplement pas disponibles. Les fragments de code lors de tentatives de défilement inexacte 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
Les animations liées au défilement sont une fonctionnalité intéressante disponible dans Chrome 115. Elles vous permettent de prendre une animation CSS existante ou une animation créée avec l'API Web Animations et de les associer au décalage de défilement d'un conteneur de défilement. Lorsque vous faites défiler l'écran vers le haut et vers le bas (ou vers la gauche et la droite dans un conteneur de défilement horizontal), l'animation associée avance et recule dans la réponse directe.
Avec ScrollTimeline, 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 s'affiche caractère par caractère.
Enregistrement d'écran SDA
Démo SDA
Une ViewTimeline vous permet de suivre un élément lorsqu'il traverse la zone de défilement. Le fonctionnement est le même que pour IntersectionObserver, qui suit un élément. Dans la démonstration suivante, chaque image s'affiche dès qu'elle entre dans la zone de défilement et se trouve au centre.
Enregistrement d'écran de démonstration SDA
Démonstration en direct du SDA
É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 obtenir des animations fluides, générées par le défilement, en dehors du thread principal avec seulement quelques lignes de code supplémentaire. Qu'est-ce qui ne va pas ?
Pour en savoir plus sur les animations liées au défilement, consultez cet article avec tous les détails ou accédez à Scroll-driven-animations.style, qui comprend de nombreuses démos.
Ajout de chronologie différée
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 remonte toujours dans l'arborescence DOM, ce qui limite le défilement aux ancêtres uniquement. Cependant, bien 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 la chronologie de défilement nommée d'un non-ancêtre, utilisez la propriété timeline-scope au niveau d'un parent partagé. Cela permet d'associer l'élément scroll-timeline ou view-timeline défini avec ce nom, ce qui étend son champ d'application. Une fois cette règle en place, n'importe quel enfant de ce parent partagé peut utiliser la chronologie avec ce nom.
timeline-scope déclaré sur le parent partagé, la scroll-timeline déclarée sur le conteneur de défilement est disponible par l'élément qui l'utilise comme animation-timelineDémonstration de l'enregistrement d'écran
Démo
En savoir plus sur timeline-scope.
Animations de propriété discrètes
En 2023, une autre nouvelle fonctionnalité permet d'animer des animations discrètes, comme 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é distincte à la valeur de 50% plutôt qu'à 0 %. Pour ce faire, utilisez la propriété transition-behavior à l'aide du mot clé allow-discrete ou dans la propriété transition en tant que raccourci.
Animal discret. Enregistrement d'écran
Animal discret. Démonstration
En savoir plus sur la transition des animations discrètes
@style-début
La règle CSS @starting-style s'appuie sur de nouvelles fonctionnalités Web pour l'animation vers et depuis display: none. Cette règle permet d'attribuer à un élément un style "avant l'ouverture" que le navigateur peut rechercher avant que l'élément ne soit ouvert sur la page. Cette fonctionnalité est très utile pour les animations d'entrée et pour les animations dans des éléments tels qu'une fenêtre contextuelle ou une boîte de dialogue. Cela peut également être utile chaque fois que 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) de façon fluide dans la vue et dans la couche supérieure depuis l'extérieur de la fenêtre d'affichage.
Enregistreur d'écran de style @starting
Démonstration de style @starting
En savoir plus sur @starting-style et les autres animations d'entrée
Superposition
Vous pouvez ajouter la nouvelle propriété CSS overlay à votre transition pour permettre aux éléments avec des styles de calques supérieurs (tels que popover et dialog) d'animer de manière fluide en dehors de la couche supérieure. Si vous n'effectuez pas de transition en superposition, votre élément revient immédiatement à être coupé, 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 la couche supérieure.
Superposition d'écran
Démonstration 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 entre le style et les composants HTML, avec la page popover. De nombreux travaux sont en cours 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 besoin d'utiliser des bibliothèques supplémentaires ni de créer vos propres systèmes de gestion des états à partir de zéro à chaque fois.
Pop-over
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. Pour créer un pop-over simple, ajoutez l'attribut popover et un id à l'élément qui s'affiche, puis associez son attribut id à un bouton d'appel à l'aide de popovertarget="my-popover". L'API Popover prend en charge:
- Promotion sur 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 manipuler le z-index.
- Fonctionnalité Light-Ignorer. Si vous cliquez en dehors de la zone pop-up, celui-ci se ferme et le curseur est rétabli.
- Gestion des sélections par défaut. Si vous ouvrez le pop-over, l'onglet suivant s'arrête dans celui-ci.
- Combinaisons de claviers accessibles. Appuyez sur la touche
escou basculez deux fois pour fermer le pop-up et rétablir le curseur. - Liaisons de composants accessibles. Connecter un élément de pop-over à un déclencheur de pop-over sémantiquement.
Enregistrement d'écran pop-up
Démonstration en direct du pop-over
Règles horizontales dans la sélection
Une autre modification mineure du code HTML, disponible dans Chrome et Safari cette année, est la possibilité d'ajouter des éléments de règle horizontale (balises <hr>) dans les éléments <select> pour vous aider à diviser visuellement votre contenu. Auparavant, le fait d'insérer une balise <hr> dans une sélection ne s'affichait tout simplement pas. Toutefois, cette année, Safari et Chrome sont tous deux compatibles avec cette fonctionnalité, ce qui permet une meilleure séparation des contenus au sein des éléments <select>.
Sélectionner une capture d'écran
Sélectionner "Démo en direct"
En savoir plus sur l'utilisation des heures dans "select"
:Pseudo-classes valides et non valides
Stable dans tous les navigateurs cette année, :user-valid et :user-invalid se comportent comme les pseudo-classes :valid et :invalid, mais ne correspondent à une commande de formulaire qu'après une interaction importante 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. La même commande ne correspondra pas à :user-invalid tant que l'utilisateur n'aura pas modifié l'entrée et la laisser 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 un utilisateur.
:utilisateur-* Enregistreur d'écran
:user-* Démonstration en direct
En savoir plus sur l'utilisation de pseudo-éléments de validation de formulaire user-*
Accordéon exclusif
Navigateurs pris en charge
- 120
- 120
- x
- 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 quelques éléments <details>, en les regroupant souvent visuellement pour indiquer qu'ils appartiennent les uns aux autres.
Nouveauté de Chrome 120 : l'attribut name est compatible avec 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.
Les éléments <details> qui font partie d'un accordéon exclusif n'ont pas nécessairement besoin d'être frères. Ils peuvent être éparpillés dans le document.
Les CSS ont connu une telle renaissance ces dernières années, et plus particulièrement en 2023. Si vous débutez avec les CSS ou si vous souhaitez simplement vous rafraîchir la mémoire, consultez notre cours sans frais Learn CSS, ainsi que les autres cours sans frais proposés sur web.dev.
Nous vous souhaitons de bonnes fêtes de fin d'année et espérons que vous aurez bientôt l'occasion d'intégrer certaines de ces nouvelles fonctionnalités CSS et UI brillantes à votre travail.
⇾ L'équipe DevRel de l'UI Chrome,
