Pour la future mouture du présent blog j'ai décidé de partir de 0, sans framework CSS ni copier-collage sauvage.

J'en suis toujours à la modélisation et j'ai décidé de caser deux choses présentées auparavant dans des brèves:

• Menu navigation "responsive" sans JavaScript — Utilise un checkbox caché et un sélecteur CSS obscur pour afficher ou masquer un menu sans que JS ne soit nécessaire;
• Modal et Overlay simples et propres sans jQuery — Je reprends juste la technique d'avoir un overlay en tant qu'élément :after de body qui s'active sur la présence d'un attribut.

Ce qui m'amène à avoir un prototype assez sympa de menu de navigation, qui est en plus hypothétiquement accessible aux screen readers, et fonctionne très bien sans JavaScript (avec les transitions, mais pas d'overlay).

Je me suis aussi mis en tête d'utiliser BEM pour les CSS mais... Mes noms de classes sont immenses et j'ai l'impression que ça augmente considérablement la taille du HTML. Je vais peut-être devoir explorer les possibilités de minifier les noms de classe CSS pour le build prod.

J'utilise également les variables CSS dans l'idée d'avoir un système de thème dynamique plus tard (pourra être utilisé pour le MODE NUIT) sachant qu'il faudra peut-être polyfill ce truc. Joie.

Finalement, j'expérimente le chargement de SVGs de meilleure qualité dans l'en-tête après le chargement initial. L'idée ce sera d'avoir ce comportement pour certaines images aussi, j'ai piqué l'idée du projet Gatsby qui crée automatiquement une version floue légère des images qui charge la version finale.

Par contre je ne suis pas certain de comment ils l'implémentent pour que ça fonctionne sans JS. Peut-être avec un tag picture et plusieurs sources?

Y a encore du travail.

Voir l'état du chantier.

Puis dans une iframe comme d'hab: