CSS⚓︎
Scroller en douceur⚓︎
2022-08
smooth.css | |
---|---|
Prendre en compte les préférences utilisateur·ice pour lancer une animation⚓︎
2022-08
Une autre option est de le faire directement en ne chargeant la CSS dédiée aux animations que si la préférence utilisateur·ice la rend acceptable :
motion-link.html | |
---|---|
Voir aussi ce qu’il est possible de faire en HTML et en JS.
Avoir un bon ratio pour les vidéos⚓︎
2022-08
Une façon documentée par ici pour afficher des incrustations vidéos dans un format convenable :
Un reset minimaliste⚓︎
2022-08
Un reset très bien documentée par ici qui est relativement court :
J’ajoute souvent aussi ces quelques règles que j’estime être importantes pour avoir des styles par défaut cohérents :
reset-extras.css | |
---|---|
Il y a d’autres projets comme minireset.css qui existent.
Masquer du contenu⚓︎
2022-08
Il y a plusieurs façons de le faire mais je trouve que la meilleure explication vient de Kitty Giraudel à travers deux articles de 2020.
C’est ensuite utilisable ainsi, par exemple pour un lien d’accès direct au contenu où l’on a besoin de conserver le focus :
Changement de graisse⚓︎
2022-08
Lorsqu’on clic sur un élément pour le rendre gras (ou l’inverse), ça modifie l’espace réservé par le navigateur pour ce(s) terme(s). Parfois, cela peut engendrer des effets disgracieux (hover sur un lien, item actif d’un onglet, etc).
Une solution trouvée par ici est de charger le contenu en gras
dans un ::before
reserve-bold-space.css | |
---|---|
On peut ensuite l’appeler ainsi dans le HTML :
Notez bien qu’il faut que le contenu du data-text
soit le même que
le contenu affiché !
Augmenter la spécificité d’une classe⚓︎
2022-08
Si vous n’avez accès qu’à une classe et qu’il vous faut la spécificité
d’un id par exemple, il est possible d’utiliser :not()
avec un
id ce qui va artificiellement passer ce sélecteur à une spécificité d’id
même si celui-ci n’existe pas ! Merci Robert Koritnik.
Pour tester les spécificités en CSS : Specificity Calculator
Cas d’usages de is()
et has()
⚓︎
2022-08
Support navigateur
Attention, si is()
n’est pas trop mal supporté,
has()
n’est pas implémenté par de nombreux navigateurs
à ce jour (22 août 2022). Je consigne les cas d’usage ici pour
l’avenir mais ça n’est pas envisageable en production pour l’instant.
Il est possible de tester son existence avec @supports
+ selector()
:
Plein d’exemples qui viennent du blog de webkit.
Lorsque tu veux que les éléments qui suivent un titre soient proches de ce titre :
has-titles.css | |
---|---|
Lorsque tu veux que ton formulaire t’indique un peu mieux où est l’erreur :
Ici, j’applique un style au label
mais ça pourrait être
plus large bien entendu, ça ouvre de très nombreuses possibilités !
Lorsque tu veux changer des variables CSS en fonction d’un choix utilisateur·ice (par exemple un sélecteur de thème) :
has-choice.css | |
---|---|
Ça ne fait qu’effleurer les possibilités mais ça promet .
Un article par Bramus Van Damme à ce sujet ainsi qu’un article sur le blog de Chrome qui donnent d’autres exemples.
Trouver les déclarations CSS non utilisées⚓︎
2022-10
Un petit script à copier-coller dans sa console pour afficher toutes les déclarations CSS qui ne sont pas utilisées dans la page en cours (inspiré de cet article, ce site est une mine).
Info
Les CSS sont généralement utilisées pour plusieurs pages à la fois donc ça peut ne pas être très pertinent mais ça donne quand même une aperçu de ce qui pourrait être optimisé pour l’affichage de cette seule page !
Scroll et sticky header⚓︎
2022-11
La propriété scroll-margin-top
permet de gérer la distance depuis le haut de la page et l’endroit jusqu’où scrolle la page lorsqu’il y a une ancre ciblée.
C’est particulièrement intéressant dans un contexte de header sticky
:
scroll-sticky-header.css | |
---|---|
- La taille du texte plus les deux paddings.
Une arborescence à base de ul
et de details
⚓︎
2022-11
Un article détaillé de Kate Rose Morley pour recréer une arborescence en CSS en combinant des ul
/li
et des details
/summary
, particulièrement malin !
Par ici un exemple complet assez brut car c’est toujours chouette de jouer avec en direct :
Utiliser hsl()
et des variables CSS pour décliner des styles⚓︎
2023-01
Manuel Matuzović montre comment utiliser des variables CSS et la fonction hsl()
pour adapter un design en ne changeant qu’une seule variable de teinte (hue) de couleur :
C’est fascinant car cela permet de jouer avec la variable dans l’inspecteur de styles, par exemple en modifiant le curseur j’arrive rapidement à :
Exemples de CSS minimalistes / sans classe⚓︎
2022-10
- Simple.css
- Basic.css
- new.css
- Water.css
- Almond.css
- Neat CSS
- Bolt CSS
- Marx (forcément)
- Toute une liste ici
Pour jouer⚓︎
2022-10