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 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. À 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. Modifiez le sélecteur utilisé de façon dynamique à l'aide des listes déroulantes.

En savoir plus sur les sélections nth-* 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 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 portée ne ciblent 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> 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 publiée initialement avec une limitation 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

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

Atterrissant au début de l'année dans Chrome 110, la propriété initial-letter est une petite fonctionnalité CSS efficace qui définit un style pour l'emplacement 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 esthétique

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, 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à que deux nouvelles techniques de retour à la ligne entrent en jeu : balance et 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. 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 de couleur HD (niveau de couleur 4)

Du matériel au logiciel, du CSS aux lumières clignotantes, nos ordinateurs doivent souvent fournir beaucoup d'efforts pour essayer de représenter les couleurs aussi bien que nos yeux humains. 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 les couleurs 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 saturation ou de luminosité et à la modifier 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

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 le 14 février dernier (Saint-Valentin).

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.

En savoir plus sur l'utilisation des requêtes de conteneur

Requêtes de style de conteneur

Les requêtes de style ont été intégré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, 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 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 mettre à jour 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 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 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 ont une image de héros en tant qu'enfant.

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

Démonstration en direct :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 mé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. La fréquence d'actualisation des lecteurs de livres numériques et des appareils tels que les systèmes de paiement à faible consommation peut être lente. 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. 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 pour effectuer des tests 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 script.

Requête mé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 qui peuvent réduire ou supprimer la transparence de l'UI. 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 contient des démos 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 é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 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 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 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 des fonctions d'atténuation complexes de manière simple, au prix d'une perte de 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 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 liées au défilement sont une fonctionnalité intéressante disponible dans Chrome 115. 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 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'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. Son fonctionnement est semblable à celui utilisé par IntersectionObserver pour suivre 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 se trouve 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 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. Cependant, très souvent, l'élément à animer n'est pas un enfant de la barre de défilement, 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 à l'aide du mot clé allow-discrete, ou la propriété transition en guise de 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. Cette option 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 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 les superpositions 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, 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é Lumière désactivée 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, l'onglet suivant s'arrête dans le pop-up.
• Associations de clavier 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. 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. Cette année, toutefois, Safari et Chrome sont compatibles avec 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

Découvrez comment utiliser hr dans select.

:user-valid et invalid pseudo classes

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 sont mis en correspondance avec 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 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 modèle d'interface utilisateur courant sur le Web est un composant en accordéon. 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, l'élément précédemment ouvert se ferme automatiquement. Ce type d'accordéon est appelé accordéon exclusif.

Les éléments <details> qui font partie d'un accordéon exclusif n'ont pas nécessairement besoin d'être frères et sœurs. Ils peuvent être dispersés dans le document.