Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

2024-01-02 - Fondations.md 3.8KB

10 个月前
9 个月前
10 个月前
10 个月前
123456789101112131415161718192021222324252627282930313233343536373839
  1. # Fondations
  2. Tellement de choses sont dorénavant possibles en CSS, je suis submergé par l’ampleur de la tâche. J’ai envie d’essayer trop de choses : des *grids*, des *layers*, des fonctionnalités avancées de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j’ai un peu délaissé cet aspect au fil du temps.
  3. Je commence par regarder à quoi ressemble une page nue avec la précédente sémantique HTML. Ce n’est pas si mal mais les icônes en SVG pourraient avoir des dimensions plus appropriées. Je les retire, il est temps de gagner en légèreté. Je regarde à quoi ressemblent des *reset* modernes :
  4. * [A (more) Modern CSS Reset](https://piccalil.li/blog/a-more-modern-css-reset/) par Andy Bell ;
  5. * [My Custom CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/) par Josh W. Comeau ;
  6. * [CSS Remedy](https://github.com/jensimmons/cssremedy) par Jen Simmons et Miriam Suzanne ;
  7. * [A tiny modern CSS reset](https://jgthms.com/minireset.css/) par Jeremy Thomas.
  8. J’aimerais commencer ma CSS par `@layer reset` mais c’est sur du [Baseline™ 2022](https://caniuse.com/css-cascade-layers). Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. ==Au pire, cette page nue est consultable== et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des [CSS layers](https://css-tricks.com/css-cascade-layers/) mais quand je fais une refonte de cet espace je ne suis pas *que* sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. **Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.** Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de colon.
  9. Je finis par tout jeter / ré-interroger et je m’en sors avec 6 règles.
  10. J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique — [coucou Antoine](https://www.quaternum.net/2023/06/02/fabrique-concept/) — fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui *est* le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations [à fond perdu](https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu) tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes publications.
  11. Je suis satisfait de mon résultat très minimaliste du jour.
  12. ---
  13. > Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des rêves.
  14. >
  15. > <cite>*[notes](https://www.la-grange.net/2023/07/10/notes-train)*</cite>
  16. 🧡
  17. ---
  18. Plus tard, je me rends compte en voulant faire les choses proprement que j’avais déjà fait des essais il y a un peu plus d’un an :
  19. ![Capture d’écran de l’essai](/static/david/2024/2024-01-02-ancien-essai.png "Capture d’écran de l’essai.")
  20. Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les *layers* qu’une refonte sérieuse (et cette typo 😱 (Bizmeud, [en retraite](https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/))). Il n’est pas exclus que les essais actuels finissent également à la poubelle.
  21. Tiens, est-ce que j’arrive à faire déborder l’image du flux aussi ? Oui, et ça ouvre des perspectives d’agencements photographiques à explorer…
  22. #expérience #technique #web