Add a grid on a view. It can be useful to debug and design.

Another powerful way to handle font sizes

The solar system in CSS

"typed css variables". @property adds some feature, but I don't find excellent use cases for now.

1. aspect-ratio
2. objectif-fit
3. martin-inline and logical properties
4. text-underline-offset
5. outiline-offset
6. scroll-margin
7. color-scheme
8. accent-color
9. width: fit-content
10. overscroll-behavior
11. texte-wrap
12. scrollbar-gutter

A great example of what the popover API can achieve

About the level 3 and level 4 of CSS grid

Awesome slides

1. Add display in the keyframes to set display none at the end of the keyframe
2. transition-behavior: allow-discrete (but it does only work on chromium at the moment https://caniuse.com/?search=allow-discrete)

How to implement fluid typography and layout with a simple example. That's great :)

Media queries can be nested in css classes and that's awesome!

OTP fields (one character per field) from a single input? Yes it seems great because it has all features builtin: copy/paste, typing in the previous or next fields...

[Following https://shaarli.lyokolux.space/shaare/pkpvPQ]
Ok ok another use case for container queries:

Notice that the horizontal style became too condensed, this is because we used a media query. When using a media query, the browser doesn’t care about what will happen to the components if the available space isn’t enough. [...] As you’ve seen using a media query to change the card style isn’t logical in this case. The number of cards can increase or decrease and that will affect the card’s content.

new CSS features limitations are our brain:

• feature fatigue
• browser support (well is 90% for the container queries enough?)
• invisible improvements: a big chunk of the new features today are “invisible” though - they focus more on code composition and architecture.
• I don't know where I would even use the feature
• break the habit
• keep one step at a time
• find inspiration

The part on re-thinking established patterns is awesome to understand how to use the cascade, @layer and @container ! https://mxb.dev/blog/old-dogs-new-css-tricks/#h-re-thinking-established-patterns