25437 shaares
1 résultat
taggé
@layer
L'article présente 10 fonctionnalités récentes des CSS :
- Min, max and clamp - min et max se passent de commentaires, et clamp permet de combiner les deux - une valeur minimale, une valeur préférée, et une valeur maximale
- Container queries - les container query font que les éléments répondent à la taille du conteneur de leur parent plutôt qu'à celle du viewport
- text-wrap: balance & pretty - cette propriété contrôle comment le texte est réparti entre les lignes pour améliorer la lisibilité, la valeur "balance" crée des lignes de longueur égale, alors que "pretty" évite les orphelines (mots se retrouvant seuls sur la dernière ligne)
- CSS Relative Color Syntax - la syntaxe "from" permet d'extraire et de modifier des composants individuels pour toute source de couleur
- Margin Block/Inline Properties - ces propriétés de marge et de padding (margin-block, margin-inline, padding-block, padding-inline) répondent aux besoins induits par différents modes d'écriture et de direction de lecture en CSS, remplaçant les propriétés left / right / top / bottom
- @starting-style - permet d'animer des éléments depuis display:none, en définissant des styles initiaux quand un élément apparaît
- :has() - permet de sélectionner des éléments parents, en se basant sur leurs enfants
- Media Query Ranges - simplifie la syntaxe pour définir des intervalles min/max - light-dark - est un raccourci pour définir différentes valeurs basées sur les préférences de l'utilisateur sur le mode (sombre / light)
- color-scheme - est utile en combinaison avec light-dark, pour informer le navigateur quel jeu de couleurs est supporté par un composant, ce qui permet aux éléments natifs de correspondre automatiquement aux préférences de l'utilisateur
- Nesting - permet d'écrire des CSS en imbriquant les sélecteurs enfants dans leurs parents
- Units - de nouvelles unités comme dvh sont apparues (pour les navigateurs mobiles)
- @layer - permet de gérer des conflits de spécificité en ordonnant explicitement les groupes de styles.