46 liens privés
Une approche originale et très mathématique pour le rythme et l'équilibre des designs
L'idée est d'appliquer les container queries pour créer des composants réutilisables et dont l'agencement interne s'adapte en fonction de la place qu'ils occupent.
Tout est dans le titre
Un problème de mise en page CSS
Tout est dans le titre
L'auteur montre aussi l'utilisation de variables CSS pour créer des déclinaisons
C'est subtil...
Un article excellent sur les masques CSS (via https://www.hteumeuleu.fr/demain-la-veille-7/ )
Une sélection des possibilités offertes par les CSS : cibler le parent, typographie responsive, etc.
L'auteur montre comment afficher des ombres avec un dégradé
Une jolie démonstration des possibilités des CSS
Un autre cas d'utilisation de :has()
L'auteur présente des cas d'utilisation du sélecteur CSS :has()
Une présentation de la fonction CSS clamp
Le code css pour avoir un dark mode minimaliste
@media (prefers-color-scheme: dark) {
html body {filter: invert(1);}
/* the following really should be managed by a cascade layer */
html img,
html img.book.cover,
html img.book.cover.big,
html [#archipelago](https://raphael.salique.fr/liens/./add-tag/archipelago) a:hover img {filter: invert(1);}
html [#thoughts](https://raphael.salique.fr/liens/./add-tag/thoughts) figure.standalone img {
box-shadow: 0.25em 0.25em 0.67em [#FFF8](https://raphael.salique.fr/liens/./add-tag/FFF8);
}
}
:has est un sélecteur CSS3 qui "plante" en cas d'erreur sur le contenu de la sélection. Par exemple :has(h2) fonctionne alors :has(h2, ul, ::-truc-qui-rate) ne fonctionnera même pas pour h2 ou ul.
L'auteur détaille pas-à-pas la création d'une arborescence en CSS, en combinant CSS et éléments HTML bien choisis
L'auteur présente les formats utilisables tels que les noms de couleur, rgb et hsl, mais aussi des formats à venir / en cours d'implémentation comme lch.
Il termine en préconisant hsl car ce format est bien plus intuitif (couleur devinable) et manipulable (facile d'éclaircir / assombrir)
L'auteur donne quelques conseils dans l'utilisation des "Logical Properties". Cela consiste, par exemple, à remplacer l'utilisation de "left" et "right" par "begin" et "end". Le travail pour tenir compte des langues se lisant de droite à gauche est ainsi facilité.