color-scheme
- Même si un site web prend en charge le mode sombre, il arrive que la barre de défilement reste d’un blanc éclatant
- En définissant la propriété
color-scheme sur dark light, on indique au navigateur que la page peut gérer à la fois le mode sombre et le mode clair, et la barre de défilement devient elle aussi sombre
- Il est possible d’appliquer
color-scheme au document via une balise méta, ce qui permet au navigateur de connaître la préférence de l’utilisateur avant le chargement du CSS
- Utilisée avec la fonctionnalité média
prefers-color-scheme, elle permet de contrôler précisément les éléments à modifier selon la préférence de l’utilisateur
- On peut utiliser le sélecteur
:has() pour appliquer la propriété color-scheme à l’élément racine lorsque body possède une classe dark
text-wrap
- Il arrive que les retours à la ligne dans un titre ou une légende soient maladroits, avec un dernier mot isolé sur la dernière ligne
- En utilisant la valeur
balance pour la propriété text-wrap, on peut équilibrer les titres d’un site web
- Cette fonctionnalité ne dépend pas du navigateur, fonctionne bien dans les environnements modernes et se dégrade proprement dans les environnements plus anciens
Scroll-margin
- Lorsqu’on utilise des liens d’ancrage sur une page web, il arrive que l’élément cible soit masqué à cause d’un en-tête fixe
- On peut résoudre ce problème avec la propriété CSS
scroll-margin, en ajustant scroll-margin-top à la hauteur de l’en-tête fixe
- Le sélecteur
:is permet d’appliquer le même traitement à plusieurs éléments comme h2, h3 ou h4, et des unités comme ex ou lh peuvent être utilisées pour définir un espacement dynamique
4 commentaires
C'est vraiment une astuce en or, merci.
La barre de défilement est sympa.
La barre de défilement blanche ressort beaucoup. Je l’ai aussi appliqué immédiatement en mode sombre et clair sur GeekNews. Il y avait donc une méthode simple.
En comparant avec Naver, l’écart est énorme. Même ce que Naver n’arrive pas (?) à faire, GeekNews l’a réussi... !