Le Hollandais Volant

J’ai refait (rapidement) le thème de mon site.
J’ai ajouté un thème sombre, qui s’affiche si votre navigateur est configuré pour afficher un thème sombre.

Tout est dans le titre.

J’ajouterais juste que certaines sont très simples à utiliser : quelques lignes de CSS simples et un :hover.

Ça change des effets qui ont besoin de 5 éléments HTML invisibles, 5 ko de CSS expérimental supportées uniquement dans Chrome et une plâtrée de JS.

div[data-testid="placementTracking"] { display: none!important; }

Ce CSS appliqué sur Twitter masquera les tweets sponsorisés et suggérés.

Il peut être utilisé avec uBlock Origin, ou avec StopTheMadness (sous iOS).

(Merci à David, pour la suggestion de StopTheMadness, d’ailleurs : l’app est payante, mais permet d’appliquer sur CSS/JS à tous les sites, en plus de virer les "utm" des URL, de virer les bandeaux de cookies et autres « essayez notre app ! », de réactiver le zoom sur les sites qui l’empêchent, désactiver les playback vidéo automatique…)

Un petit récapitulatif des nouveaux CSS depuis CSS3 : filtres, media-queries, dark/light, path, grid…

CSS is a language for changing the design of websites. Every ruleset you write likely changes the defaults of something.

+1.

Les styles navigateur sont un fallback, pas une sacro-sainte relique à laquelle on ne peut pas toucher.
D’ailleurs, j’aimerais bien connaître les scores d’accessibilités d’un site sans styles (juste les styles navigateur).

Qu’il y ait des règles tacites auxquelles on s’est habitué (les liens en bleu, par exemple), c’est une chose, mais n’interdit pas de changer la couleur.

Je rappelle que mon site dispose d’une feuille CSS dédiée à l’impression.

Le but ? Permettre une impression « propre » :

– pas d’image ou de couleur de fond
– police sérif
– entête, footer, navbar… non imprimés
– images ou paragraphes non scindés sur deux pages (oui y existe du CSS pour ça)
– les liens (non clicables sur papier) sont affichés en entier, avec a[href]::after { content: attr(href); }

Le CSS est très concis par ailleurs : https://couleur-science.eu/themes/2021/style-print.css !

En CSS, on ne peut pas utiliser les commentaires avec « // commentaire ».
Il n’y a que les « /* commentaire */ »

… à moins que… Si ?

En fait si, mais c’est un peu un hack et le « // » ne suffit pas.
Vous lirez l’article pour voir pourquoi, mais il faut faire ça, avec « // » au début et « {} » à la fin, sur la même ligne :

selecteur {
// ceci est un commentaire {}
width: 100%;
color: red;
}

(du coup, c’est pas du tout plus rapide que de faire /* commentaire */)

Un bout de code CSS qui donne à la couleur du texte ("color") une valeur de telle sorte que ça soit toujours correctement contrasté par rapport à la couleur de fond ("background-color").

Ainsi, sans rien toucher d’autre que la couleur de fond, le texte sera blanc sur les couleurs sombres et noir sur les couleurs claires. Le tout fait usage d’un calcul bien précis sur le R, G, B pour donner soit du blanc soit du noir.

Tout ça c’est uniquement en CSS, avec le calc() et les variables. Pas de JS.

Note :
- sur chaque div, on donne trois variables, correspondant au R, G et B. La couleur de fond est alors directement « background-color :(rgb(R,G,B)) ».

La couleur du texte, lui, passe dans la moulinette du calc() et ressort sous forme de blanc ou de noir.

Comment ça marche ? Tout simplement en saturant la luminosité : après le calcul sur R, G, B avec des facteurs empiriques, on a une valeur comprise entre −0.5 et +0.5. On fait alors un ×1000% histoire de saturer l’échelle 0-1 sur laquelle on va mettre cette valeur.

Cette valeur, enfin, est placée dans le color, où la couleur est donnée en HSL(0,0,L) ou le L correspond à notre valeur. Vu qu’on a saturé la valeur, CSS, ou le navigateur, va automatiquement prendre soit 0, soit 1, selon que c’est négatif ou positif.

J’utilise un truc similaire ici : https://lehollandaisvolant.net/tout/tools/color-second/ (où la couleur de fond évolue chaque seconde).

Je le fais en JS :

// I use YIQ color scheme to determine is a color is dark or light
var yiq = ((r*299)+(g*587)+(b*114))/1000;

if (yiq >= 128) {
    // set dark-fond
} else {
    // set light-font
}

Une astuce CSS (en draft pour l’instant) pour afficher temporairement le contenu d’un champ password, sans JS.

Je crois que cette techno résume tout le bullshit ambiant pour faire des sites-web.

Au lieu d’écrire le CSS directement, ils utilisent Typescript pour le faire. Typescript, qui est déjà lui-même un framework JS ?

À quand un truc qui utilise Typescript pour produire du SCSS ? Comme ça on utilisera un langage A pour produire un langage B, où ni A, ni B ne sont des technos supportés où que ce soit sans avoir besoin d’une traduction intermédiaire ?

Bref, moi ça me fait rien. Comme le jQuery me faisait rire y a 10 ans (et étrangement on n’en entend plus beaucoup parler). Et les sites qui en recommandent l’apprentissage le font non pas par sa valeur ajoutée, mais plutôt parce qu’un énorme paquet de sites sont coincés avec et que si on a un jour à bosser dessus, faut mieux connaître un minimum…

Ce n’est que mon avis personnel, mais je préfère rester sur du JS et CSS de base. Au moins y a pas plus rapide et léger et ça marche très bien. Et ça marchera encore dans 25 ans quand tous les framework seront obsolètes.

(Par contre, utiliser JS pour faire ses styles, c’est NON. C’est juste pour ceux qui ne maîtrisent pas le principe de la cascade et la hiérarchie des sélecteurs.)

Pourquoi les sites web à très large audience, et donc qui ont besoin d’un support d’une très large variété de plateformes préfèrent utiliser une soupe de DIV améliorés en CSS plutôt que les éléments natifs ?

Réponse courte : parce que les nav et les plateformes dérivent d’une utilisation à la souris sur un ordinateur et un grand écran. Ce n’est ni adapté au tactile, ni aux lecteurs d’écran, ni aux dispositifs destinés à l’accessibilité.
L’usage de DIV permet sa souplesse en CSS (pas besoin de "CSS-reset" dans tous les sens), et les différents attributs comme "role" sont là pour sémantiser tout ça artificiellement.

Bref, ça revient à utiliser des briques simples pour construire des compliqués, plutôt que des pièces compliquées pour construire des trucs simples. Ça se tient, même si je ne pense pas que c’est comme ça que le HTML va progresser sémantiquement parlant.

Quelques astuces pour faire des ombres CSS plus jolies.

Remplacer toutes les propriétés CSS par des classes, puis, dans le fichier CSS, faire autant de classes avec une seule déclaration que le CSS a de propriétés.

Quelle horreur.

(Et pauvre navigateur)

Petit article qui m’a moi même permis de comprendre tout ça. En fait, il n’y a pas grand chose à comprendre : ces nombres imaginaires n’ont rien de mystiques et y a pas besoin de voir en 12 dimensions pour les visualiser. Pas plus que les nombres relatifs.

~

Sinon, pour les web-dev, une petite astuce pour faire afficher des images PNG transparentes à la fois sur les fonds clairs et les fonds sombres.
C’est valables pour les schémas et autres diagrammes :

@media (prefers-color-scheme: dark) {
	img[src$=".png"] {
		filter: invert(1);
	}
}

Ça cible les PNG uniquement (donc les seules avec transparence, pas les JPG (généralement utilisées pour les photos) et ça inverse les couleurs : le noir devient blanc, le blanc devient noir, mais le transparent n’est pas touché.
Seul soucis : le rouge devient vert, etc. Mais sur un schéma ou diagramme, ça ne gêne pas.

Autre méthode, mais moins jolie : ajouter un fond blanc sur toutes les images. Comme ça, sur un texte clair sur fond sombre, les images noir sur fond blanc restent noirs sur fond blanc (et donc lisibles) :

img[src$=".png"] {
	background: white;
}

huehuehue