Code CSS encapsulé: 2023 !
Accéder au contenu:
- Design responsif
- Requêtes de conteneur
- Requêtes de style
- :contient un sélecteur
- Mettre à jour la requête média
- Rédiger une requête média
- Transparence concernant les requêtes média
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
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.
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 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.
En savoir plus sur les sélections n-ième* complexes
Portée
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'écran de référence pour la démonstration de @scope Capture d'écran de référence pour la démonstration de @scope](https://developer.chrome.com/static/blog/css-wrapped-2023/image/at-scope.png?authuser=5&hl=fr)
Démonstration en direct de Scope
@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
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
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
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
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
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'écran de la démo de la première lettre](https://developer.chrome.com/static/blog/css-wrapped-2023/image/initial-letter.png?authuser=5&hl=fr)
Démonstration des lettres initiales
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
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)
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
En savoir plus sur la couleur 4 et les espaces de couleurs
fonction color-mix
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()
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
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 pertinents 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
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
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'écran de la démonstration des requêtes de conteneur de style, cartes météorologiques](https://developer.chrome.com/static/blog/css-wrapped-2023/image/stylecq.png?authuser=5&hl=fr)
Démonstration des requêtes de style
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()
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'écran de référence pour la démonstration de :has() Capture d'écran de référence pour la démonstration de :has()](https://developer.chrome.com/static/blog/css-wrapped-2023/image/has-demo-1.png?authuser=5&hl=fr)
Démonstration en direct :has()
: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()
: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. 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
En savoir plus sur @media (update)
Rédiger une requête mé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 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 l'ajuster 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
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
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
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
- 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 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.
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
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, 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 un 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
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 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'à la fin, le texte apparaît, caractère par caractère.
Enregistrement d'écran SDA
Démo SDA
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
É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 cet article avec tous les détails ou visitez le fichier "Défilement-Animations-animations.style" qui inclut de nombreuses démonstrations.
Pièce jointe de la 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 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 l'élément 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.
![Visualisation d'une sous-arborescence DOM avec une portée timeline utilisée sur un parent partagé Visualisation d'une sous-arborescence DOM avec une portée timeline utilisée sur un parent partagé](https://developer.chrome.com/static/blog/css-wrapped-2023/image/defferedtimeline.png?authuser=5&hl=fr)
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
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
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
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
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. Vous n'avez donc pas à manipuler le z-index.
- Fonctionnalité Lumière désactivée Si vous cliquez en dehors de la zone qui s'affiche, celle-ci se ferme et vous remettez le curseur en avant.
- 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'écran de "hr dans Select" avec les thèmes clair et sombre dans Chrome](https://developer.chrome.com/static/blog/css-wrapped-2023/image/hrselect.jpg?authuser=5&hl=fr)
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
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
- 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>
, 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.
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,