Fonctions trigonométriques

Chrome 111 a ajouté la prise en charge des fonctions trigonométriques sin(), cos(), tan(), asin(), acos(), atan() et atan2(), qui sont désormais disponibles dans 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 autour d'un cercle en fonction d'un centre choisi.

En savoir plus sur les fonctions trigonométriques en CSS

Sélection complexe nth-*

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-*() tiennent compte de 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. Utilisez les menus déroulants pour modifier de manière dynamique le sélecteur utilisé.

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

Portée

Chrome 118 est compatible avec @scope, une règle at qui vous permet de limiter la correspondance du sélecteur à un sous-arbre 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 champ d'application ne ciblent que les éléments du sous-arbre découpé. 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

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

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

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 initialement publiée comportait une limitation qui nécessitait l'utilisation de & à divers endroits, mais elle a été levée avec une mise à jour de la syntaxe d'imbrication assouplie.

En savoir plus sur l'imbrication

Subgrid

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.

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

Initiale

La propriété initial-letter, qui est apparue au début de l'année dans Chrome 110, est une petite fonctionnalité CSS, mais puissante, qui définit le style de placement 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

En savoir plus sur initial-letter

text-wrap: équilibre et élégance

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, comme la taille de la police, la langue et la zone allouée, il est particulièrement adapté pour gérer la 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 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 manuellement. Il est incroyable de pouvoir les confier au navigateur et de les voir 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, du CSS aux lumières clignotantes, nos ordinateurs doivent s'employer pour essayer de représenter les couleurs aussi bien que nos yeux humains. En 2023, nous allons proposer de nouvelles couleurs, plus de couleurs, de nouveaux espaces de couleurs, de nouvelles fonctions de couleur et de nouvelles fonctionnalités.

Le CSS et la couleur 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.

En savoir plus sur Color 4 et les espaces de couleurs

Fonction color-mix

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.

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.

Le RCS vous permet d'effectuer des manipulations relatives et absolues sur une couleur. Une modification relative consiste à prendre la valeur actuelle de la saturation ou de la luminosité, puis à la modifier avec calc(). Une modification absolue consiste à remplacer une valeur de canal par une autre, par exemple en définissant l'opacité sur 50%. Cette syntaxe vous fournit des outils utiles pour la thématisation, les variantes au dernier moment et plus encore.

En savoir plus sur la syntaxe des couleurs relatives

Requêtes de conteneur de taille

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 à la Saint-Valentin de cette année (14 février).

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.

Découvrez comment utiliser les requêtes de conteneur.

Requêtes de style de conteneur

Les requêtes de style ont été implémenté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, vérifiez si une valeur de propriété personnalisée existe ou si elle est définie sur une valeur spécifique, telle que @container style(--rain: true).

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

Démonstration de la requête 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 modifier 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 en fonction de paires propriété-valeur telles que style(font-style: italic).

Découvrez comment utiliser les requêtes de style.

Sélecteur:has()

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 comportent une image hero en tant qu'enfant.

Capture d'écran de la démonstration de :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. 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.

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

Mettre à jour la requête multimédia

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. Les liseuses et les appareils tels que les systèmes de paiement à faible consommation d'énergie peuvent avoir un taux de rafraîchissement lent. 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.

En savoir plus sur @media (mise à jour)

Écrire une requête multimédia

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. Vous pouvez supprimer ces scripts, car le CSS peut désormais détecter le code JavaScript et s'y adapter.

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

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 le script

Requête multimédia à transparence réduite

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 permettant de réduire ou de supprimer la transparence de l'interface utilisateur. 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.

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 présente d'autres démonstrations inspirantes qui s'adaptent aux préférences des utilisateurs. Consultez-les si vous souhaitez savoir quand cette requête multimédia est utile.

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

Afficher les transitions

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 é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.

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

Fonction d'atténuation 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'atténuation complexes de manière simple, au prix d'une perte de précision.

Avant linear(), qui a été publié 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 amortissements en les simplifiant en une série de points, puis en interpolant linéairement entre ces points.

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

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.

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

Les animations basées sur le défilement sont une fonctionnalité intéressante disponible depuis la version 115 de Chrome. 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 un ScrollTimeline, vous pouvez suivre la progression globale d'un scroller, 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.

Avec une ViewTimeline, vous pouvez suivre un élément lorsqu'il traverse le conteneur de défilement. Le fonctionnement est semblable à celui d'IntersectionObserver qui suit 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 soit au centre.

É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 calendrier différée

Lorsque vous appliquez une animation basée sur le défilement via CSS, le mécanisme de recherche permettant de trouver le contrôleur de défilement remonte toujours l'arborescence DOM, ce qui la limite aux ancêtres de défilement uniquement. Cependant, très souvent, l'élément à animer n'est pas un enfant du défileur, 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.

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 avec le mot clé allow-discrete ou la propriété transition en tant que raccourci.

En savoir plus sur les transitions d'animations distinctes

@starting-style

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. Cela 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.

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

Superposition

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 ne définissez pas de transition pour la superposition, votre élément sera immédiatement de nouveau rogné, transformé et masqué, et vous ne verrez pas la transition. De même, overlay permet à ::backdrop de s'animer de manière fluide lorsqu'il est ajouté à un élément de couche supérieure.

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

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, 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é de fermeture rapide. 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, le prochain arrêt d'onglet se trouve dans le pop-up.
• Associations de clavier accessibles. Appuyer sur la touche esc ou activer/désactiver deux fois le bouton permet de fermer le pop-over et de rétablir la sélection.
• Liaisons de composants accessibles. Connecter sémantiquement un élément de popover à un déclencheur de popover

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. Toutefois, 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électionner "Démonstration en direct"

En savoir plus sur l'utilisation de l'heure dans la sélection

:user-valid et invalid pseudo classes

Stables dans tous les navigateurs cette année, les pseudo-classes :user-valid et :user-invalid se comportent de manière similaire aux pseudo-classes :valid et :invalid, mais ne correspondent à un contrôle de formulaire que lorsqu'un utilisateur a interagi de manière significative avec la saisie. 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.

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

Accordéon exclusif

Un composant 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 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, celui qui était 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 et sœurs. Ils peuvent être dispersés dans le document.