Fonctions trigonométriques

Chrome 111 a ajouté la prise en charge des fonctions trigonométriques sin(), cos(), tan(), asin(), acos(), atan() et atan2(), les rendant 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 des éléments sur un cercle autour d'un centre choisi.

En savoir plus sur les fonctions trigonométriques dans CSS

Sélection nth-* complexe

Le sélecteur de pseudo-classe :nth-child() permet de sélectionner des éléments dans le 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. Depuis Chrome 111, vous pouvez, si vous le souhaitez, transmettre une liste de sélecteurs à :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émo suivante, la logique 3n+1 n'est appliquée qu'aux petites poupées en les préfiltrant à l'aide de of .small. Utilisez les menus déroulants pour modifier dynamiquement le sélecteur utilisé.

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

Portée

Chrome 118 a ajouté la prise en charge de @scope, une règle @ qui vous permet de limiter la correspondance des sélecteurs à un sous-arbre spécifique du document. Avec le style limité, 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 coupler étroitement à la structure DOM.

Un sous-arbre à portée limité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 cibleront 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> qui se trouvent entre l'élément .card et tout composant imbriqué correspondant au sélecteur [data-component].

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

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

Capture d'écran de la démo de Scope

Démonstration en direct de Scope

Pour en savoir plus sur @scope, consultez l'article Utiliser @scope pour limiter la portée de vos sélecteurs. Cet article vous présente le sélecteur :scope, la façon dont la spécificité est gérée, les portées sans prélude et l'impact de :scope sur la cascade.@scope

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 feuille de style volumineuse et une expérience de création dispersée. Désormais, les sélecteurs peuvent être poursuivis avec des règles de style associées regroupées à l'intérieur.

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 */
}

L'imbrication peut réduire le poids d'une feuille de style, les frais généraux liés à la répétition des sélecteurs et centraliser les styles de composants. La syntaxe initialement publiée comportait une limitation qui nécessitait l'utilisation de & à différents endroits, mais cette limitation a été levée avec une mise à jour de la syntaxe pour autoriser l'imbrication.

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. Il permet à une grille située à l'intérieur d'une autre grille d'adopter les lignes et les colonnes de la grille extérieure comme les siennes, en utilisant subgrid comme valeur pour les lignes ou les colonnes de la grille.

Les sous-grilles sont particulièrement utiles pour aligner les éléments frères sur le contenu dynamique de chacun. Les rédacteurs, les rédacteurs UX et les traducteurs n'ont ainsi plus besoin d'essayer de créer des textes de projet qui "s'intègrent" à la mise en page. Avec les sous-grilles, la mise en page peut être ajustée pour s'adapter au contenu.

En savoir plus sur la sous-grille

Initial-letter

Disponible depuis le début de l'année dans Chrome 110, la propriété initial-letter est une petite fonctionnalité CSS puissante qui définit le style de placement des lettres initiales. Vous pouvez positionner les lettres en position abaissée ou surélevée. La propriété accepte deux arguments : le premier indique la profondeur à laquelle la lettre doit être insérée dans le paragraphe correspondant, et le second indique la hauteur à laquelle la lettre doit être placée au-dessus. Vous pouvez même combiner les deux, comme dans la démo suivante.

Capture d'écran de la première lettre

Démonstration de la lettre initiale

En savoir plus sur initial-letter

text-wrap: balance and pretty

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 de l'habillage de texte se trouvent dans le navigateur. Étant donné que le navigateur connaît tous les facteurs, comme la taille de la police, la langue et la zone allouée, il est un excellent candidat pour gérer la mise en page avancée et de haute qualité du texte.

C'est là qu'interviennent deux nouvelles techniques d'habillage de texte, l'une appelée balance et l'autre pretty. La valeur balance vise à créer un bloc de texte harmonieux, tandis que pretty vise à éviter les orphelins et à assurer une césure correcte. Ces deux tâches étaient traditionnellement effectuées à la main. Il est incroyable de pouvoir les confier au navigateur et de les faire fonctionner pour n'importe quelle langue traduite.

En savoir plus sur text-wrap: balance

Espaces colorimétriques HD (niveau de couleur 4)

Du matériel au logiciel, en passant par le CSS et les lumières clignotantes, il faut beaucoup de travail à nos ordinateurs pour essayer de représenter les couleurs aussi bien que nos yeux humains peuvent les voir. En 2023, nous avons ajouté de nouvelles couleurs, de nouveaux espaces colorimétriques, des fonctions de couleur et de nouvelles fonctionnalités.

CSS et les couleurs peuvent désormais : - Vérifier si 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 Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ et plus encore. - Créez des dégradés avec des couleurs HDR. - Interpolez des dégradés dans d'autres espaces colorimétriques. - Mélangez les couleurs avec color-mix(). - Créez des variantes de couleur avec la syntaxe de couleur relative.

En savoir plus sur Color 4 et les espaces colorimétriques

Fonction color-mix

Mélanger les couleurs est une tâche classique, et en 2023, 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 l'espace colorimétrique de votre choix. Il s'agit à la fois d'une fonctionnalité de couleur de base et avancée.

Vous pouvez considérer color-mix() comme un moment dans le temps à partir d'un gradient. Alors qu'un dégradé montre toutes les étapes nécessaires pour passer du bleu au blanc, color-mix() n'en montre qu'une seule. Les choses se compliquent lorsque vous commencez à prendre en compte les espaces colorimétriques et à comprendre à quel point l'espace colorimétrique de mixage 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 constitue également une stratégie différente pour travailler avec les couleurs. color-mix() peut mélanger la couleur blanche pour éclaircir une couleur, tandis que RCS donne un accès précis au canal de luminosité et permet d'utiliser calc() sur le canal pour réduire ou augmenter la luminosité de manière programmatique.

RCS vous permet d'effectuer des manipulations relatives et absolues sur une couleur. Un changement relatif est un changement dans lequel vous prenez la valeur actuelle de saturation ou de luminosité et la modifiez avec calc(). Un changement absolu consiste à remplacer une valeur de canal par une toute nouvelle, par exemple en définissant l'opacité sur 50 %. Cette syntaxe vous offre des outils utiles pour la création de thèmes, les variantes juste à temps et plus encore.

En savoir plus sur la syntaxe des couleurs relatives

Requêtes de conteneur de taille

Au lieu d'utiliser les informations sur la 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 sur 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 pour la taille sont devenues stables dans tous les navigateurs modernes le 14 février de cette année.

Pour utiliser cette fonctionnalité, configurez d'abord 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 des tailles de requêtes de conteneur. Dans la démo 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 carte.

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é implémentées partiellement dans Chrome 111. Avec les requêtes de style actuelles, vous pouvez interroger la valeur des propriétés personnalisées d'un élément parent lorsque vous utilisez @container style(). Par exemple, vous pouvez interroger si une valeur de propriété personnalisée existe ou est définie sur une certaine valeur, telle que @container style(--rain: true).

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

Démonstration de requête de style

Bien que cela ressemble à l'utilisation de noms de classes en CSS, les requêtes de style présentent certains avantages. La première est que les requêtes de style vous permettent de mettre à jour la valeur dans le CSS selon les besoins 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()

Pendant près de 20 ans, les développeurs ont demandé un "sélecteur parent" en CSS. C'est désormais possible grâce au sélecteur :has() disponible dans Chrome 105. Par exemple, l'utilisation de .card:has(img.hero) sélectionnera les éléments .card qui ont une image de bannière comme enfant.

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

Démonstration en direct de :has()

Étant donné que :has() accepte une liste de sélecteurs relatifs comme argument, vous pouvez sélectionner bien plus que l'élément parent. En utilisant différents combinateurs CSS, il est possible non seulement de remonter l'arborescence DOM, mais aussi de faire 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 le curseur est actuellement placé.

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

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 renvoyer une valeur de fast, slow ou none, qui correspond aux capacités des différents appareils.

La plupart des appareils pour lesquels vous concevez des applications sont susceptibles d'avoir une fréquence d'actualisation rapide. Cela inclut les ordinateurs de bureau et la plupart des appareils mobiles. Les liseuses électroniques et les appareils tels que les systèmes de paiement à faible consommation peuvent avoir un taux d'actualisation lent. En sachant que l'appareil ne peut pas gérer les animations ni les mises à jour fréquentes, vous pouvez économiser la batterie ou éviter les mises à jour de vues défectueuses.

En savoir plus sur @media (update)

Scripting media query

La requête média de script peut être utilisée pour vérifier si JavaScript est disponible. C'est très utile pour l'amélioration progressive. 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 et à la supprimer avec JavaScript. Ces scripts peuvent être supprimés, car le CSS peut désormais détecter JavaScript et s'adapter en conséquence.

Découvrez comment activer et désactiver JavaScript sur une page pour effectuer des tests à l'aide des outils pour les développeurs Chrome.

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 à la préférence système, car aucun JavaScript n'est disponible. Vous pouvez également envisager un composant de type bouton bascule. Si JavaScript est disponible, le bouton bascule peut être activé ou désactivé par un geste au lieu d'un simple clic. Il existe de nombreuses opportunités d'améliorer l'UX si le script est disponible, tout en offrant une expérience de base pertinente si le script est désactivé.

En savoir plus sur les scripts

Requête média "reduced-transparency"

Les interfaces non opaques peuvent provoquer des maux de tête ou être difficiles à lire 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'interface utilisateur. Cette requête média pour prefers-reduced-transparency s'intègre bien aux autres requêtes média de préférence, qui vous permettent d'être créatif tout en vous adaptant aux utilisateurs.

Dans certains cas, vous pouvez fournir une mise en page alternative dans laquelle le contenu ne se superpose pas à d'autres contenus. Dans d'autres cas, l'opacité d'une couleur peut être ajustée pour être opaque ou presque opaque. L'article de blog suivant présente d'autres démos inspirantes qui s'adaptent aux préférences de l'utilisateur. N'hésitez pas à le consulter si vous souhaitez en savoir plus sur les cas où cette requête média est utile.

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

Transitions de vue

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 de page entière ou des é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, et l'API s'occupe de tout pour vous. Pour ce faire, il prend un instantané avant et après, puis effectue une transition entre les deux. À l'aide du CSS, vous pouvez contrôler ce qui est capturé et, si vous le souhaitez, personnaliser l'animation de ces instantanés.

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

Fonction d'interpolation linéaire

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'interpolation complexes de manière simple, au détriment d'une certaine précision.

Avant linear(), qui a été lancé dans Chrome 113, il était impossible de créer des effets de rebond ou de ressort en CSS. Grâce à linear(), il est possible d'approximer ces courbes d'accélération en les simplifiant en une série de points, puis en effectuant une interpolation linéaire entre ces points.

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

Fin du défilement

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 imprécise qui pouvait se déclencher alors que le doigt de l'utilisateur était encore sur l'écran. L'événement scrollend vous permet de déclencher un événement scrollend parfaitement synchronisé, qui comprend si l'utilisateur est toujours en train de faire un geste ou non.

Il était important que le navigateur soit propriétaire de cette fonctionnalité, car JavaScript ne peut pas suivre la présence d'un doigt sur l'écran pendant le défilement. Ces informations ne sont tout simplement pas disponibles. Les blocs de code de fin de défilement inexacts 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 déclenchées par le défilement

Les animations basées sur le défilement sont une fonctionnalité intéressante disponible depuis Chrome 115. Elles vous permettent de prendre une animation CSS ou une animation créée avec l'API Web Animations existantes et de les coupler au décalage de défilement d'un élément 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 carrousel horizontal), l'animation associée avance ou recule en réponse directe.

Avec une ScrollTimeline, vous pouvez suivre la progression globale d'un élément de défilement, comme le montre la démonstration suivante. Lorsque vous faites défiler la page jusqu'à la fin, le texte se révèle caractère par caractère.

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

Comme 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, déclenchées par le défilement et exécutées en dehors du 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 visitez scroll-driven-animations.style, qui inclut de nombreuses démonstrations.

Pièce jointe de calendrier différé

Lorsque vous appliquez une animation liée au défilement via CSS, le mécanisme de recherche du scroller de contrôle remonte toujours l'arborescence DOM, ce qui le limite aux ancêtres de défilement uniquement. Toutefois, très souvent, l'élément à animer n'est pas un enfant du scroller, mais un élément situé dans un sous-arbre entièrement différent.

Pour permettre à l'élément animé de trouver une timeline de défilement nommée d'un élément non ancêtre, utilisez la propriété timeline-scope sur un parent commun. Cela permet à la scroll-timeline ou à la view-timeline définie portant ce nom de s'y rattacher, ce qui lui donne une portée plus large. Une fois cette configuration en place, n'importe quel enfant de ce parent partagé peut utiliser la timeline portant ce nom.

En savoir plus sur timeline-scope.

Animations de propriétés discrètes

En 2023, vous pourrez également animer des animations discrètes, par exemple vers et depuis display: none. À partir de Chrome 116, vous pouvez utiliser display et content-visibility dans les règles de keyframe. Vous pouvez également faire passer n'importe quelle propriété discrète au point de 50 % plutôt qu'au point de 0 %. Pour ce faire, utilisez la propriété transition-behavior avec le mot clé allow-discrete ou la propriété transition comme raccourci.

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 permettant d'animer vers et depuis display: none. Cette règle permet d'attribuer à un élément un style "before-open" (avant ouverture) que le navigateur peut rechercher avant que l'élément ne soit ouvert sur la page. Cela est très utile pour les animations d'entrée et pour animer des éléments tels qu'un pop-over 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é d'être animé. Prenons l'exemple suivant, qui anime un attribut popover (voir la section suivante) pour qu'il apparaisse et se déplace en douceur vers le calque supérieur depuis l'extérieur de la fenêtre d'affichage.

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

Superposition

La nouvelle propriété CSS overlay peut être ajoutée à votre transition pour permettre aux éléments avec des styles de couche supérieure, tels que popover et dialog, de s'animer en douceur hors de la couche supérieure. Si vous ne faites pas de transition de superposition, votre élément sera immédiatement à nouveau coupé, transformé et masqué, et vous ne verrez pas la transition se produire. De même, overlay permet à ::backdrop de s'animer en douceur lorsqu'il est ajouté à un élément de premier plan.

En savoir plus sur l'encart et les autres animations de sortie

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. Vous pouvez créer un pop-over simple en ajoutant l'attribut popover et un id à l'élément qui s'affiche, et 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 à la couche supérieure. Les pop-ups s'affichent sur un calque distinct au-dessus du reste de la page, ce qui vous évite de jouer avec le z-index.
• Fonctionnalité de fermeture légère. Si vous cliquez en dehors de la zone du pop-over, celui-ci se ferme et la sélection revient à l'élément précédent.
• Gestion de la mise au point par défaut L'ouverture du popover fait que le prochain arrêt de tabulation se trouve à l'intérieur du popover.
• Associations de touches accessibles. Appuyer sur la touche esc ou double-cliquer sur le bouton bascule fermera le pop-over et rétablira le focus.
• Liaisons de composants accessibles. Associer sémantiquement un élément popover à un déclencheur popover.

Règles horizontales dans la sélection

Une autre petite modification apportée à HTML, qui a été implémentée 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 aider à séparer visuellement votre contenu. Auparavant, l'insertion d'une balise <hr> dans une sélection ne produisait aucun résultat. Mais cette année, Safari et Chrome prennent en charge cette fonctionnalité, ce qui permet de mieux séparer le contenu dans les éléments <select>.

Sélectionner une capture d'écran

Sélectionnez "Démonstration en direct".

En savoir plus sur l'utilisation de hr dans select

: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 correspondent à un élément de formulaire qu'après qu'un utilisateur a interagi de manière significative avec l'entrée. Un contrôle de formulaire obligatoire et vide correspondra à :invalid même si un 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é la saisie et l'aura laissée 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.

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

Accordéon exclusif

Un composant d'accordéon est un modèle d'UI courant sur le Web. 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 désormais 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. Au maximum, un seul élément du groupe peut être ouvert à la fois : lorsque vous ouvrez l'un des éléments <details> du groupe, celui qui était ouvert précédemment 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. Elles peuvent être dispersées dans le document.