Le Hollandais Volant

Un très succincte introduction aux couleurs OkLCh, et leur intérêt.

(Voir aussi mon article, bien plus large)

Un QCM pour se maintenir à niveau sur le CSS (en web design).

On est loin des color, font-size, ou margin ici. Les trucs liés à grid ou flex sont ici la partie facile. Il y a pas mal de questions sur les très nombreuses @rules par exemple.

Je suis à 48/60, mais je suis visiblement très en retard.

Oh, je connaissais les moyens CSS de gérer les compteurs (dans UL ou OL), mais je ne savais pas qu’il existait tous ces attributs HTML pour directement dire à quel numéro un OL commence, s’il doit être inversé (décroissant), quel est sont style (chiffres arabes, romains…), etc.

Bien-sûr, on peut utiliser les compteurs sur tous les éléments dans une page, ils ne sont pas réservés aux OL/UL.

Typiquement, on peut les ajouter aux titres H1, H2, etc. : https://codepen.io/lehollandaisvolant/pen/wJgGdR

C’est ce que j’utilise dans la plupart de mes pages tutos.

Un playground CSS « flex-box ».

Ça fait longtemps que je voulais le miens, car les autres sont lourds, plein de trackers, pas à mon goût et faute d’avoir perdu celui que j’avais en bookmark (le site a fermé), je n’arrive pas à en trouver un qui soit bien. Et les miens seront jamais bardés de pub ni de trackers.
Ah et parce que je ne sais jamais qui fait quoi dans align-content et justify-content.

Fait amusant : la page, l’outil lui-même, utilise Grid, pas Flex :-D

D’ailleurs je prévois de faire un playground pour Grid aussi. Mais je ne la ferais pas en Flex ^^.

PS : concernant ma suite d’outils en ligne, j’en ai 141 désormais. Oui y en a beaucoup de nouveaux ces derniers temps : je m’aide d’une AI pour aller plus vite. Pas parfait, mais on gagne du temps. Quant à l’inspiration, elles vient de partout.
– Dans un épisode de Détective Conan, il décode un code écrit en T9. → Un outil de décodage T9.
– Dans un film (Benjamin Gates), ils utilisent un chiffrement Playfair. → Un outil pour ça. Et en étudiant le truc, je découvre les chiffrements rail-fence et scytale. Hop, deux de plus (faut que j’étende par conséquent l’énigme cachée sur mon site, celle qui commence par le code Konami sur la page d’accueil).
– J’ai vu passer ce mini jeu sur Super Mario où il fallait trouver la tête de Luigi sur l’écran (façon "trouver Charlie", mais en mouvement). → Hop, un petit jeu.
– Ah et j’ai fait un accéléromètre pour smartphone aussi. Pas vraiment concluant (quelqu’un pilote un Rafale pour tester ?), mais c’est là.
– Un calculateur de décimales de Pi aussi. Le JS est limité question précision, mais les 50 000 premières décimales calculées sont justes.

Et comme il me faut un outil pour faire ces outils, c’est la raison d’être de ces playgrounds Flex/Grid.

Bref, je commence à en avoir beaucoup.

En CSS, parmi les couleurs nommées, il y a une couleur qui s’appelle « rebeccapurple », dont l’équivalent en hex est #663399.

L’origine est intéressante, mais triste (comme souvent). C’est un easter-egg commémoratif, en somme.

Elle fait partie des standard W3 au sein de la liste des couleurs CSS-4, et les navigateurs la supportent depuis longtemps.

Voir également là : https://medium.com/@valgaze/the-hidden-purple-memorial-in-your-web-browser-7d84813bb416

That’s just under half of developers who never had to deal with the headaches of table layouts, clearfix hacks, image sprites, spacer images, and rasterized rounded corners.

Oh merde, sayé je suis un vieux !

J’ai connu le dév pour IE6, IE7, les commentaires conditionnels et les hacks pour que tout marche dans Presto, Gecko, Webkit, Trident, KHTML…

Le mauvais vieux temps.

Flexbox et Grid sont quand-même pratiques. Je me souviens des hack comme les colonnes factices pour faire des boîtes avec des colonnes de taille identiques :D

J’adore ce site, qui montre tout ce qui ne va pas dans les UI actuelles.

D’une façon générale, je trouve que les framework graphiques sont peut-être jolies et uniformes, mais à force de vouloir traiter tous les cas, ils n’en traitent aucun correctement, et font de la merde même pour les choses les plus simples.

WTF ?

On peut faire du CSS nesting en natif maintenant ?

Ça marche dans Firefox et Vivaldi là : https://codepen.io/lehollandaisvolant/pen/OJeVoXw

Pour ceux qui ne connaissent pas, le nesting des sélecteurs, c’est faire ça :

ul {
	color: green;
	li {
		color: blue;
	}
}

Donc l’équivalent normal serait ça :

ul {
	color: green;
}
ul > li {
	color: blue;
}

Et qui était plutôt réservé aux préprocesseurs comme SASS, qui ont introduit le concept.
Ici, ça fonctionne donc en natif, visiblement.

Bon ben j’ai refait le thème du blog, et je pense qu’il va rester un petit moment.
Ça fait un moment que je cherchais quelque chose de nouveau et de joli, mais j’étais moyennement satisfait.

Du coup j’ai ressorti ce vieux thème (2014) et l’a mis à jour. C’est l’un des plus satisfaisant, à mes yeux, que j’ai jamais fait.
Désormais je ne garde [presque] que le contenu, sans les calendrier, tags cloud, etc. inutiles.

Ce thème était par défaut sombre, mais j’ai ajouté une version claire. Le tout s’adapte à la préférence de votre navigateur. Notez comment j’ai utilisé des effets d’ombres sur le thème clair, et des effets de bordure sur le thème sombre : physiquement, une ombre dans le noir, ça n’a pas de sens, et il convient de respecter cela pour faire quelque chose de réaliste, de matériel.
Chose que j’explique ici : https://lehollandaisvolant.net/?d=2023/06/17/14/36/05-astuces-css-pour-faire-un-theme-sombre

En CSS4, on devrait pouvoir utiliser les couleurs HWB. C’est similaire au HSV ou HSL, sauf qu’on dose à la fois le blanc (W) et le noir (B).

Pour faire les gris, on met W et B de telle sorte que W+B = 100%. Ça ne laisse plus de place au reste et ça fait du gris (plus proche du blanc si W>B et plus proche du noir sur W<B).

Elle semble assez intuitive de cette façon.

Je me note ça, un effet sympa en CSS : des fenêtres semi-tranparentes avec un effet verre fumé :

#laFenêtre {
    background-color: rgba(255, 255, 255, .7);
    backdrop-filter: blur(33px);
}

C’est inspiré de ce que fait MacOS / iOS essentiellement, mais ça pourrait s’appliquer ailleurs. Perso je suis très fan du Material Design de chez Google, mais avec le temps ils perdent un peu leur philosophie où les choses sont basées sur les matériaux et la réalité. C’est tout devenu plastique et arrondi, et ça n’a plus le sens initial.

Le retour des thèmes façon « verre » ou « cristal » qu’on avait au milieu des années 2000 me plaît bien, et ici y a donc l’effet verre-fumé.

Ici, il faut bien noter que la fênêtre est semi-transparente (d’où un fond en RGBA), et c’est ce qui est vu à travers qui est flouté. La fenêtre elle-même et le texte contenu dedans ne sont eux pas floutés. Ni le fond de la page sur lequel est posée la fenêtre. La seule chose floue ce qui se trouve sous la fenêtre

On peut imagine l’inverse, c’est à dire une fenêtre opaque, et où on floute tout le reste. Ça ferait ressortir la fenêtre opaque (pour une fenêtre modale par exemple).
C’est ce que je fais ici : https://lehollandaisvolant.net/tout/tools/post-it/

Avec UL, LI, SUMMARY et DETAILS.

Et si on veut numéroter les sections façon 1, 1.1, 1.2, 2, 2.1, etc. on peut utiliser les compteurs CSS : https://codepen.io/lehollandaisvolant/pen/wJgGdR

C’est un truc très vieux, mais ça marche très bien.
C’est ce que j’utilise par exemple sur ces pages : https://lehollandaisvolant.net/tuto/pagespd/

Une introduction au flex-box en CSS.
C’est assez complet.

Bien qu’il se demande lui-aussi si Flexbox n’est pas un peu démodé avec Grid, je reste d’accord avec sa réponse : les deux résolvent des problèmes différents.

Et perso, je préfère (et utilise) largement flexbox. Grid est puissant et utile pour certains trucs, mais justement : je ne suis pas fan des dispositions en grilles/tableaux. Flex a l’avantage de se faire sur un seul axe, et donc d’être facilement transposé d’un écran horizontal à un écran vertical (par exemple).

Une feuille de style de 58 octets.

Ça se limite à ça :

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

En gros, le contenu reçoit une largeur max et le tout est centré. C’est tout.

C’est pas très joli, mais au moins c’est entièrement lisible : les styles par défaut des navigateurs font le reste, en particulier pour ce qui est de la taille des titres ou des bordures des input ou des tableaux.

Y a aussi un version 100 octets et 200 octets :
https://t.mkws.sh/100bytes/
https://t.mkws.sh/100morebytes/

Une page web qui mesure 18,94 kilomètres de haut :D
Il n’est pas allé plus loin car Gecko, le moteur de rendu de Firefox, a un problème avec les pages plus hautes que ça.

Pour le côté technique, il a utilise ça :

font-size: 100cm;
height: 2840em;

J’ai scrollé tout ça en 2 min 17,40 secondes sur mon PC. Ce qui nous fait une vitesse de défilement de 496,24 km/h. Pas mal.

Via : https://lesjoiesducode.fr/ivre-il-cree-la-page-web-la-plus-longue-a-scroller-au-monde-css