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é.
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre