- 2023 a été une année énorme pour CSS. De nombreuses nouvelles fonctionnalités CSS et UI sont apparues, rendant possibles sur la plateforme web des choses qui étaient considérées comme impossibles
- Tous les principaux navigateurs prennent en charge les container queries, subgrid, le sélecteur
:has(), ainsi que de nouveaux espaces colorimétriques et de nouvelles fonctions
- Chrome prend en charge, avec CSS seul, les animations pilotées par le défilement et les transitions fluides entre les vues web
- Beaucoup de nouveaux fondamentaux ont été introduits pour améliorer l’expérience développeur, comme l’imbrication CSS et les styles à portée limitée
Fondations architecturales
Fonctions trigonométriques
- Chrome 111 prend en charge les fonctions trigonométriques comme
sin(), cos(), tan(), asin(), acos(), atan(), atan2()
- Ces fonctions sont très utiles pour les animations et les mises en page
Sélection complexe avec nth-*
- Le pseudo-sélecteur
:nth-child() permet de sélectionner des éléments du DOM par index
- Depuis Chrome 111, il est possible de passer en option une liste de sélecteurs à
:nth-child() et :nth-last-child()
Scope
- Chrome 118 prend en charge
@scope, qui permet de limiter la correspondance des sélecteurs à un sous-arbre spécifique du document
- Le sous-arbre ciblé est défini par une racine de portée et une limite de portée optionnelle
Imbrication
- Avant l’imbrication, il fallait déclarer tous les sélecteurs séparément et explicitement
- Il est désormais possible de regrouper des règles de style liées et de continuer à utiliser les sélecteurs de manière imbriquée
Subgrid
- CSS
subgrid permet de créer des grilles plus complexes et d’obtenir un meilleur alignement entre les mises en page enfants
- Il permet à une grille interne d’adopter les lignes et colonnes de la grille externe comme les siennes
Typographie
Initial-letter
- La propriété
initial-letter, introduite dans Chrome 110, est une petite fonctionnalité CSS mais puissante pour définir le placement de la lettrine
- La lettre peut être placée en lettrine descendante ou relevée
text-wrap: balance and pretty
- Les développeurs ne connaissent pas la taille finale, la taille de police, ni même la langue d’un titre ou d’un paragraphe
- Deux nouvelles techniques de retour à la ligne ont été introduites :
balance et pretty
Couleur
Espaces colorimétriques HD (Color Level 4)
- De nouvelles couleurs, davantage de couleurs, de nouveaux espaces colorimétriques, des fonctions de couleur et de nouvelles capacités ont été introduits en 2023
- CSS et la couleur permettent désormais de créer des dégradés en couleurs HDR et d’interpoler des dégradés dans différents espaces colorimétriques
Fonction color-mix
- Le mélange de couleurs est une opération classique, et il est devenu possible en CSS en 2023
- Il est possible de mélanger non seulement du blanc ou du noir, mais aussi de la transparence à une couleur, et de le faire dans l’espace colorimétrique choisi
Syntaxe de couleur relative
- La syntaxe de couleur relative (RCS) est une approche complémentaire à
color-mix() pour générer des variantes de couleur
- La RCS permet d’effectuer des manipulations relatives et absolues des couleurs
Design responsive
Container queries de taille
- Au lieu d’utiliser des informations globales de taille de viewport, les container queries permettent d’interroger l’élément parent dans la page
Container queries de style
- Les style queries permettent d’interroger les valeurs des propriétés personnalisées de l’élément parent
Sélecteur :has()
- Depuis près de 20 ans, les développeurs réclament un « sélecteur parent » en CSS
- Avec le sélecteur
:has(), il est possible de sélectionner un élément .card qui contient une image hero en enfant, comme .card:has(img.hero)
Media query update
- La media query
update permet d’adapter l’UI au taux de rafraîchissement de l’appareil
Media query scripting
- La media query de scripting peut être utilisée pour vérifier si JavaScript est disponible
Media query reduced-transparency
- Les interfaces non opaques peuvent provoquer des maux de tête ou être visuellement difficiles pour différents types de déficiences visuelles
- Cette media query indique que l’utilisateur dispose d’un réglage système lui permettant de réduire ou supprimer la transparence dans l’UI
Interaction
View transitions
- Les transitions de vue ont un impact important sur l’expérience utilisateur d’une page
- L’API View Transitions permet de créer une transition visuelle entre deux états de page dans une application monopage
Fonction linear-easing
- La fonction
linear() permet de créer simplement des fonctions d’easing complexes, au prix d’une légère perte de précision
Scroll End
- L’événement
scrollend fournit un événement de fin de défilement déclenché au bon moment, permettant de savoir si l’utilisateur est encore en train de faire un geste
Animations pilotées par le défilement
- Les animations pilotées par le défilement permettent de lier une animation existante CSS ou créée avec la Web Animations API à l’offset de défilement d’un scroller
Deferred timeline attachment
- Lorsqu’on applique des animations pilotées par le défilement via CSS, le mécanisme qui recherche le scroller de contrôle remonte toujours l’arbre DOM, ce qui le limite aux seuls ancêtres de défilement
Animations de propriétés discrètes
- Les animations discrètes, comme la possibilité d’animer depuis
display: none, ont été ajoutées comme nouvelle fonctionnalité en 2023
@starting-style
- La règle CSS
@starting-style s’appuie sur la nouvelle fonctionnalité web permettant d’animer depuis display: none
Overlay
- La nouvelle propriété CSS
overlay permet aux éléments stylés de premier niveau comme popover et dialog d’apparaître avec une animation fluide depuis la couche supérieure
Composants
Popover
- L’API Popover aide à créer des éléments qui se placent au-dessus du reste de la page
Règles horizontales dans select
- Chrome et Safari prennent en charge cette année la possibilité d’ajouter des éléments de règle horizontale (balises
) dans un élément
Pseudo-classes :user-valid et invalid
:user-valid et :user-invalid fonctionnent de manière similaire aux pseudo-classes :valid et :invalid, mais ne correspondent aux contrôles de formulaire qu’après une interaction significative de l’utilisateur avec la saisie
Accordéon exclusif
- Dans Chrome 120, l’élément `` prend en charge l’attribut
name
- Avec cet attribut, plusieurs éléments `` partageant la même valeur de
name forment un groupe sémantique
Aucun commentaire pour le moment.