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

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

Démonstration en direct de 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 */
}

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.

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

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

Démonstration des lettres initiales

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.

En savoir plus sur text-wrap: balance

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.

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.

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.

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

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.

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

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()

Démonstration en direct :has()

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

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

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.

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.

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)

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.

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

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.

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.

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.

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.

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

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.

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.

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.

En savoir plus sur la superposition et les autres animations de sortie

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.

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

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.

En savoir plus sur l'utilisation de pseudo-éléments de validation de formulaire par l'utilisateur*

Accordéon exclusif

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.