J'ai repris mon visionnage du livestream (enregistrement vidéo) de Kevin Powell(S'ouvre dans un nouvelle fenêtre) qui a inspiré une bonne partie des fondations de mon CSS et ajouté un certain nombre d'éléments
Définition de structures de contenus basiques
Je me suis inspiré de son reset pour définir quelques classes utilitaires :
.flow: Sert à (ré)appliquer la disposition classique de contenus éditoriaux, les uns à la suite des autres avec des marges maîtrisées (dépendantes de la taille du texte de ces éléments).grid-flow: Pour des contenus isolés où l'on souhaite conserver un espacement régulier des contenus. (Usages typiques : motifs de cartes, tuiles et autres conteneurs fréquemment répétés.).flex-group: Pour des séries d'éléments (pas forcément des listes) à disposer régulièrement sur une ou plusieurs lignes. (Usage typique : liste d'étiquettes.)
Information
Note
Je ne suis pas certain de l'intérêt de ces classes génériques. Pour garder un HTML propre, j'aurais plutôt tendance à étendre[1] les classes fonctionnelles que je pose sur mes éléments, au lieu de truffer mon HTML de classes utilitaires à la Bootstrap ou à la Tailwind.
D'ailleurs, j'ai placé des "placeholder selectors"[2] dans mon fichier de config, au cas où je déciderais d'abandonner ces classes utilitaires tout en conservant les déclarations associées.
Je verrais à l'usage.
La quatrième classe utilitaire que j'ai ajouté est déjà plus utile. Je l'ai même immédiatement utilisée dans mes pages listant des articles : .grid-auto-fit
Cette classe utilise une grille CSS pour automatiquement disposer des éléments en colonnes en fonction de la largeur de l'écran, mais sans points de bascule. J'utilise des propriétés dynamiques pour pouvoir personnaliser la largeur des colonnes pour les sélecteurs étendus avec cette classe.
// Utility class to quickly create a grid of elements
.grid-auto-fit {
display: grid;
// Set --grid-auto-fit-gap to tweak how elements are spaced (default: 16px)
gap: var(--grid-auto-fit-gap, 24px);
// set --grid-auto-fit-col-size on any element using this class to set the width of its columns (and thus, how many elements you can fit
grid-template-columns: repeat(
auto-fit,
minmax(
min(var(--grid-auto-fit-col-size, 320px), 100%),
1fr
)
);
}Mediaqueries
Ce n'est pas dans le reset de Kevin Powell mais pendant que j'expérimentais avec différentes dispositions j'ai eu des besoins de mediaqueries et ai vite vu le risque de les ajouter au fil de l'eau avec des valeurs arbitraires.
Pour garder tout cela sous contrôle, j'ai créé quelques variables SASS et des mixins :
// STEPS & MIXINS FOR MEDIAQUERIES
$media-phablet: 768px;
$media-tablet: 1024px;
@mixin media-min($min) {
@media screen and (min-width:$min){
@content;
}
}
@mixin phablet(){
@include media-min($media-phablet){
@content;
}
}
@mixin tablet(){
@include media-min($media-tablet){
@content;
}
}
@mixin motion-allowed(){
@media (prefers-reduced-motion: no-preference) {
@content;
}
}Information
Utiles ou superflues ?
il est tout à fait possible qu'au final ces mixins ne me servent pas, mais en attendant, elles n’alourdissent pas mon CSS
Respecter les préférences des utilisateurs
Kevin Powell pense bien à nous recommander de réserver la règle scroll-behavior: smooth aux personnes qui "acceptent"[3] (ou tolèrent) les animations :
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}En revanche il ne propose pas de désactiver tout forme d'animation pour ceux qui demandent à les réduire… En soit, ce n'est pas un problème : il suffit de ne jamais ajouter de transitions ou d'animations sans les placer dans une mediaquery comme celle ci-dessus.
Mais je préfère garantir le respect de cette préférence (pour un peu on croirait que je ne me fais pas confiance) avec ce bout de reset CSS d'Alsacréation, qui ressemble un peu à un bazooka mais reste imparable sans trop alourdir mon CSS :
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
transition-duration: 0s !important;
transition-delay: 0s !important;
animation-duration: 1ms !important;
animation-delay: -1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
scroll-behavior: auto !important;
}
}J'ajoute aussi un reset pour les boutons en mode "contraste élevé" (windows), trouvé sur cet article de Mike Mai : You are not a CSS dev if you have not made a CSS reset(Opens in a new window)
@media (forced-colors: active) {
button {
border: 1px solid;
}
}Prochaine étape : Dans sa vidéo, Kevin Powell évoque un usage intéressant des grilles CSS pour structurer une page sans mediaquery, appelé "Layout Breakouts". Je compte bien regarder ses autres vidéos sur le sujet pour voir si cela pourrait me convenir… J'adore (parfois trop) les trucs "malins" pour faire des choses qu'on sait déjà faire 😅
SASS permet "d'étendre" des sélecteurs avec des classes. C'est du pure "sucre" destiné aux développeurs, qui permet d'appliquer une série de déclaration à plusieurs sélecteurs, sans avoir à les regrouper au même endroit (C'est très utile pour regrouper logiquement son code mais une fois la compilation faite, nous avons bien une seule longue déclaration des différent sélecteurs "étendus"). Pour plus de détails, voir la documentation de
@extend(S'ouvre dans un nouvelle fenêtre)(lang=en) ↩︎Une autre fonction de SASS qui permet de déclarer de "fausses" classes qui peuvent ensuite être utilisées pour étendre d'autres sélecteurs, sans avoir à créer une classe utilitaire que nous ne prévoyons pas d'utiliser. Pour plus de détails, voir la doc SASS des Placeholder Selectors(Opens in a new window) ↩︎
Par défaut, tous les OS autorisent les animations. Les utilisateurs et utilisatrices qui ne veulent ou ne supportent pas les animations doivent aller activer eux-même une option pour dire qu'ils ne veulent pas d'animations… c'est la moindre des choses que nous restions à l'écoute de cette demande. ↩︎