Introduction à view-transition en CSS. Pas encore supporté pleinement dans Firefox mais ça arrive tout doucement.
La propriété CSS field-sizing: content permet d'ajuster la taille d'un <textarea> en fonction de son contenu, mais elle fonctionne également sur les <input> et <select>.
Un CSS reset léger et simple, expliqué en détail par son auteur.
Un guide sur les couleurs en CSS, et tout l'éventail d'outils qu'on a pour les manipuler et les configurer.
Il est loin le temps du choix binaire entre l'hexadecimal et la fonction rgb !
Exemples d'utilisation créative de la nouvelle propriété CSS corner-shape.
Seulement dans Chromium pour le moment.
Utilisation ingenieuse de anchor positioning CSS (positionnement par ancre) pour créer un indicateur de focus qui "flotte" d'un élément à l'autre quand vous appuyez sur TAB.
Les media queries CSS sont devenues très complètes et vont bien au delà de la détection de la largeur du navigateur.
Une contrainte importante à prendre en compte avec @starting-style comparé aux keyframes.
Finalement cette nouvelle option ne semble pas ouvrir beaucoup de nouvelles possibilités par rapport aux keyframes.
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.