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

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

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

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

Un petit tutoriel sur la mot-clé `currentColor` en
js-craft.io/blog/how-to-use-th
Utiliser cette fonctionnalité peut être un vrai plus pour la maintenabilité de certains composants 👍
/via @stephaniewalter

Vous voulez participez à la spécification ?
On a besoin de vous pour trouver le nom d'une propriété pour remplacer `display: none` !
social.tzi.fr/@thomas/10387854

Vous faîtes des orientés composants ? C'est sûrement le cas si vous utilisez React, Vue, Angular, mais aussi si vous utiliser un styleguide.
Le conseil du jour est : n'utilisez pas de marges sur vos composants <3
mxstbr.com/thoughts/margin

Faire ce type d'effet en , c'est possible avec 3 propriétés !
Avec l'outil pour le générer, c'est quand même plus simple 😉
neumorphism.io/#55b9f3

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!