In a nutschell: font-variant-numeric: tabular-nums; to make space between digit in a number consistent.

See https://twitter.com/i/status/1486059026064584711 for a animated example

Use gap to insert space on both axis left and right between elements

Nesting
Subgrid
Cascade Layers
New CSS color functions
accent-color
@when / @else
:has()
@container() query

I totally agree :)

Stylus on the Chrome Web Store has more than half a million users. Stylish has over three million. That’s a lot of people modifying the web to get what they want.

It is possible to activate/deactivate a class with node.classList.toggle('className', true/false)

The example provided about forms is impressive ! HTML and CSS are so much powerful ! I think I will use them more in vue and svelte :)

There is a <template> tag in HTML 5.

The componentization is still to be done though. I always forgot how HTML5 and CSS are powerful nowadays.

TL;DR; using css variables again

aspect-ratio can have two types of values:

• 3 / 2: a ratio of 3 in width and 2 in height
• 3: a simple number where the width and height are equal

How to program a dark theme for a website. It is easier than expected with @media (prefers-color-scheme: dark) and css variables !

TL;DR; Use hsl isntead of RGB to create a gradient. This will avoid a grey zone. But using hsl is not available in CSS for now, so we can use a linear-gradient from a multiple of colors instead. Each color have to be similar to its neighbors... and it works !

and here the tool: https://www.joshwcomeau.com/gradient-generator/

Display an item on scroll.

TL;DR but still interesting. In case I need it, I know how to find it

I bookmark this post especially for this code snippet:

body {
    margin: 0 auto;
    max-width: 40rem; // can be bigger but not too much ! (<= 80 I think)
    font-size: 1.2rem;
}

It makes a HTML website directly readable :)

Now I understand how it is useful 👍‍

A minimal CSS reset with every line explained.

Why would I use this?

If you just want to launch already.
An MVP is a temporary site, it doesn't have to be and shouldn't be perfect.

Solution: Using 1 subgrid per element inside a grid.

Codepen: https://codepen.io/michellebarker/pen/JjGNdNY

In the console: $0.offsetParent → $0 is the currently set element.

Then we can use the offsetParent object property to find the closest ancestor to that element that has its position set to something other than static.

Solutions:

1. styling it manually through CSS :

   input:focus {
   outline: 2px solid deeppink;
   }

2. A keyup tab event listener. Think about adding the class through JS, that way the focus will still be accessible if JS fails to load.

3. the property ::focus-visible