Les polices d'écriture modernes ont atteint un niveau de flexibilité et de "configurabilité" assez hallucinant.
Un tour d'horizon de ce que CSS permet, qui ne pouvait être accompli que grâce à JavaScript (et autres) par le passé.
Prenez-en connaissance, c'est autant de code que vous pouvez maintenant épargner à vos visiteurs.
Un outil pour créer des gradients.
Découverte du positionnement par ancre en CSS. Ce n'est pas encore supporté par Firefox mais j'imagine que ça ne devrait pas trop tarder.
Une explication de cette notation plutôt récente pour représenter les couleurs en CSS.
Un "framework" CSS dont j'aime particulièrement la philosophie. Je mets des gros guillemets parce qu'il s'agit en fait plus d'une lib d'utilitaires dont il est possible de ne choisir qu'une petite partie.
Point très important : il se repose au maximum sur les standards CSS modernes (variables, layers, webcomponents, etc.) et il n'y a pas besoin de build.
Ça signifie que vous pouvez ajouter uniquement les composants qui vous intéressent avec @import et c'est tout ! Et tout est customisable dynamiquement en modifiant la valeur des variables CSS.
J'aime tout particulièrement la simplicité et pour autant l'élégance des layouts qui couvrent 95% des cas courants.
A UI library for people who love HTML, powered by modern CSS and Web Components. Vanilla CSS and JavaScript. Easily customized. No build step.
Exemple d'utilisation des fonctions CSS.
Je ne sais pas trop quoi en penser, je vois les perspectives que ça ouvre mais en même temps ça va rendre le code plus complexe et plus "opinionated".
Aujourd'hui quand on ouvre un projet CSS quel qu'il soit, on comprend le code immédiatement, toutes les fonctions sont natives. Le seul aspect à intégrer est l'organisation du code et des fichiers.
Demain, il faudra en plus aller voir chaque fonction pour comprendre ce que le développeur précédent a voulu factoriser, comme on le fait dans les languages traditionnels, et ce sera évidemment complètement différent d'un projet à l'autre.
Pas infaisable, mais ça va ajouter une couche de pénibilité supplémentaire lors de l'onboarding 🤔
Testez vos connaissances CSS ! 48/60 de mon côté, ce qui est bien mais pas top.
Une bonne astuce pour élargir la zone cliquable d'un bouton de manière invisible et sans distordre le visuel du bouton lui-même.
button::after {
content: "";
position: absolute;
inset: -5px;
}Il semblerait qu'il soit maintenant possible d'utiliser Tailwind (un framework CSS) en meilleure harmonie avec le CSS natif. On peut par exemple utiliser les tokens de Tailwind dans du CSS classique, rendant inutile l'usage de @apply. Je n'aime toujours pas ces frameworks "utility-first" mais il faut admettre que ce virage est fait dans la bonne direction.
Styliser le gap CSS. Encore un peu tôt pour l'utiliser, c'est uniquement supporté par Chrome pour l'instant.
Rester à la page avec CSS. Des articles chaque semaine.
Linter du code CSS avec Stylelint comme on le fait généralement pour le code JS avec ESLint.
Une excellente explication de la notion de height (hauteur) en CSS et de sa différence majeure avec width (largeur) que je n'avais jamais pris le temps de verbaliser mais qui est complètement sensée.
La propriété CSS currentColor est souvent méconnue.
Un guide utile pour l'API view-transiton.
Voir aussi https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/
Une sorte de reset CSS un peu différent, qui se focalise sur l'amélioration de certains styles manquants par défaut dans les navigateurs, notamment pour l'accessibilité.
La fonction CSS shape() permet de définir des formes avec la même logique que SVG mais au lieu de M, L etc. on utilise des mots clés CSS comme top, bottom, 50%, ce qui permet de rendre les formes responsives !
Je ne savais pas que le style par défaut de la balise <h1> peut varier si elle est contenue à l'intérieur d'une ou plusieurs <section> par exemple. Cette particularité disparaîtra bientôt.