Le Hollandais Volant

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

Ah tiens, on peut utiliser le RGBA directement en HEX : #RRGGBBAA. Je n’étais pas au courant.

La liste des regrets des auteurs de CSS.

Ça donne des idées en même temps de faire peur.

Plus ça va, plus j’ai l’impression que je vais progressivement aller vers du minimalisme absolu. Le CSS c’est cool et j’adore ça (y compris le débuguage, car on apprend plein de choses sur le fonctionnement d’un navigateur, du rendu, etc.) mais plus ça va, plus ça devient intenable à maintenir.

Heureusement, avec Flex/Grid, une fois que c’est en place, c’est le nav qui gère les marges et tout le reste. Même sans media-queries, ça s’organise de façon fluide.

L’avantage d’une page sans CSS, c’est que c’est plus passe-partout que le plus passe-partout du CSS.

An element (type) or pseudo-element selector gets 1 point of specificity.

A class or pseudo-class selector gets 10 points of specificity.

An ID selector gets 100 points of specificity, as long as you use an ID selector (#myID) and not an attribute selector ([id="myID"]).

This is actually false.

Lets have the HTML :

<div id="myid" class="one two three four five six seven eigth nine ten eleven">Lorem Ipsum</div>

And this CSS :

#myid {
    color: red;
}

.one.two.three.four.five.six.seven.eigth.nine.ten.eleven {
    color: blue;
}

The #id gives it 10 points.
The .classes give them 1 point each, wich gives the div 11 points.

Yet, the div will be red.

With the given explanation, you give the impression that enough .classes can overtake an #id al long as there are enough of them.

This. Is. Untrue.

The specificity is not 1, 10, 100, 1000. It’s not even numeric and so the can’t be compared.
Individual classes do add up… among classes only.

This would turn the div red :

.one.two.three { color: red; } /* specificity of 3 */
.one.two { color: blue; } /* specificity of 2 */

However, when you mix selectors, keep in mind that they occupy ranks, not powers of ten.
And a rank of an id will always be above a rank of a class.

So, the specificity of one #id will overtake even a thousand classes.

Personally, I prefer using hyphens to denote ranks :

#id.class .class > span+span+span  {}

has a specificity of 1-2-3, because this selector sums 1 #id, 2 .classes and 3 elements.
And 1-0-0 will overtake even 0-100000-100000. The rank matters, not the amount of selectors.

Yes, I saw you ended that tutorial with this notation, but it begins on a somehow poorly manner that might induce errors.

+1

Tout le monde est là « nianiania, petit joueur ! CSS c’est pas un vrai langage ! » pourtant les trois-quart du temps, tout le monde se pète les dents dessus :D

Et pour le HTML, c’est pas parce que c’est « juste » de la mise en page que c’est pas important ni difficile.
Essayez donc de réciter tous les éléments HTML : https://codepen.io/plfstr/full/zYqQeRw ! Je paris que la plupart en omettront au moins une quarantaine.

Version moderne pour faire un angle en CSS qui grandit.

*css facepalm*

TL;DR :
– osef des sélecteurs et du contenu du CSS. Les navigateurs sont rapides pour ça.
– bossez plutôt sur la taille du CSS à charger et sur la façon dont il se charge (async, preload, nombre de fichiers CSS…)

+1

Essayez de lire une page web sombre sur son mobile dans un environnement très éclairé.
Je suis aussi d’avis de laisser le choix à l’utilisateur, idéalement en mettant une option « définie par le système » par défaut, puis des options « forcer le thème clair » ou « forcer le thème sombre ».

Il faut proposer le thème système, car quelqu’un peut très bien avoir réglé son ordi pour qu’il passe en sombre la nuit et clair le jour (perso c’est ce qui me manque sur Android: dans android 10 ça n’est pas automatique, alors que l’éclairage nocturne, lui, s’active bien tout seul :-/).

…

Grid c’est puissant.
Tellement puissant que j’ai peur de l’utiliser car les j’imagine que les algos de positionnement doivent être complexes au point de pouvoir créer un trou noir si un dev là-dedans oubliait un point-virgule.

Ça fait trois fois que j’essaye d’écrire ce que je fais, mais j’ai pas mes mots, du coup je fais un codepen : https://codepen.io/lehollandaisvolant/pen/LYxmdzz?editors=1100

C’est très très souple et j’ai bien peur que ça résolve peu à peu tous mes problèmes. Je m’étais épris de flex il y a quelques années, je suis en train de tomber dans les bras de grid là…

Un guide sur la disposition grid en CSS. Avec des images très parlantes.