Si vous rêvez du "container query" , @heydon a créé un "custom component" qui utilise l'API ResizeObserver pour en simuler un ! 🎉
github.com/Heydon/watched-box
J'ai aussi vu passer ce bac à sable de @sturobson@twitter.com aussi qui peut aider à comprendre le fonctionnement
codepen.io/sturobson/project/l

Dans quel ordre s'applique les propriétés de transformation : `translate`, `rotate`, `scale`, `offset`, etc.
danielcwilson.com/blog/2020/02
Et oui, `offset` et notament `offset-path`, qui permet de définir un tracé de mouvement non-linéaire à l'aide de coordonnées .

Vous pouvez utiliser la propriété `scroll-margin-top` pour empêcher votre contenu de passer sous une entête fixe lors d'une navigation vers une ancre
gomakethings.com/how-to-preven
Et en plus c'est plutôt bien supporté <3

Si vous voulez vous amusez un peu, voici un article pour générer des images de fond à l'aide de l'API Paint (Houdini)
blog.logrocket.com/how-to-crea

Sara Soueidan démystifie les filtres que l'on applique grâce à la propriété `filter` lors d'un conférence d'une heure
aneventapart.com/news/post/svg

Un super article qui fait le tour des images responsives
cloudfour.com/thinks/responsiv
Comment utiliser les propriétés `src`, `srcset`, et `sizes` ?
Quelles tailles d'images dois-je générer ?
Comment savoir si tout va bien ?
...

Attention, les propriétés `grid-gap`, `grid-column-gap`, et `grid-row-gap`vont être dépréciées.
Il faudra utiliserles propriétés génériques : `gap`, `column-gap`, and `row-gap`
w3.org/TR/css-align-3/#gap-leg

🧡 RT @MiriSuzanne@twitter.com: If you can pre-process it, it's not a custom property – it's exactly like any other variable.

The coolest features in CSS can never be polyfilled, for good reason. The primary design goal of CSS is that it always adapt to context.

You can't pre-compile that flexibility.

twitter.com/MiriSuzanne/status

BEM Cheat Sheet - Un bien jolie page pour expliquer BEM par la pratique <3 <3
9elements.com/bem-cheat-sheet/

Si vous vous posez des questions sur le système de couleur LCH, @leaverou@twitter.com a écrit un long article pour expliquer son intérêt
lea.verou.me/2020/04/lch-color

Show thread

Vous pouvez faire un effet de coin arrondis et plié à l'aide de la propriété `clip-path` <3
codepen.io/joshwcomeau/pen/VwL

Tout ce que vous devez savoir sur la propriété `overflow` et ses usages : ishadeed.com/article/overflow-

RT @romaricpascal@twitter.com
There's a shorthand in for the `top`, `bottom`, `left` and `right` properties called `inset`.
caniuse.com/#search=inset
Only Firefox supports it for now, but there is a PostCSS plugin
github.com/jonathantneal/postc

MVP.css — A minimalist stylesheet for HTML elements
andybrewer.github.io/mvp/
Une feuille de styles pour démarrer un projet doucement, sans classes et sans framework. MVP.css utilise directement les éléments HTML sémantiques 👍

The CSS Podcast : c'est désormais possible d'apprendre les bases de à l'aide d'un podcast *
thecsspodcast.libsyn.com/
Un grand merci à Una Kravets and Adam Argyle

* Si vous êtes à l'aise avec l'anglais

Quand j'entends “De toute façon, les CSS n'ont pas vraiment bougées ces dernières années, je veux dire à part Flexbox et CSS Grid”, je pense à ce genre de code.
Emprunté ici : webkit.org/blog/10042/wide-gam

Le module Motion Path de niveau 1 introduit la possibilité à des éléments de suivre un parcours défini <3
alsacreations.com/tuto/lire/18
Par @goetter@twitter.com

Une petite vidéo d'intro pour présenter le principe de Flexbox par @ZenikaIT@twitter.com
youtu.be/t9XFUI_qZ3g
Et pour ceux qui en doute encore, oui, c'est désormais facile d'aligner des éléments en CSS !

En attendant le support de propriété `text-underline-offset`, vous pouvez déjà utiliser `text-underline-position` sous la ligne de base, à une position où elle ne traversera pas de jambage
webplatform.news/issues/2020-0

Une proposition de spécification pour pouvoir définir une animation par le temps, oui chaque étape est définie en secondes.
github.com/w3c/csswg-drafts/is
Pour moi, c'est un grand oui \o/ N'hésitez pas à réagir pour lui donner de la visibilité si ça vous intéresse

Show more
L'instance Mastodon de tzi

The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!