The gap is handled differently between these three type of values.

Centered for auto and 1fr, but overflowing for 50%.

Auto overflows for text content.

The behavior is also different for an image: The sturdy 50% column remain in place, and the image overflows it. The auto column grows, but not only to contain the image but a bit wider. The column using fr units grows to contain the image.

Ok but why o_O

Still interesting, but I already have few use cases for container queries. Maybe because I am too dependent of design that uses screen sizes.

This is exactly what I think of a great design system color handling.

The heart is the mapping of semantic CSS colors to modifiers, and thethey can be slapped on every components.

There is always color definitions, then semantic colors such as --color-primary-muted, --color-primary-vivid and then css variables used by the components.

A generator is available as snippet on https://codepen.io/cferdinandi/pen/dPojzmN

All I see so far is this will need more computation or battery drain for this.

The library is available at https://github.com/Specy/liquid-glass

A transition to open or close a modal

Width and height in CSS does not work properly, The parent height takes priority over the child height.

In order for something like height: 50% to work, the parent’s height can’t depend on the child’s height.

A fixed height works just fine. There is one thing to consider though

when we tell

to have height: 50%, that percentage isn’t based on the parent element’s total size, it’s based on the parent’s “content box”. This is the space inside the element, within its border and padding.

It doesn't work with min-height because the size of the element is dynamic.

CSS Grid's children will grow to fill their grid cell as if they have a height: 100%. Another approach is to use flexbox with flex: 1 on the child.

Layouts are mini-languages indeed. See https://shaarli.lyokolux.space/shaare/TPKfkQ

Une vidéo explicative de Grafikart.

(via https://warriordudimanche.net/article2114/6825e02dcfcba)

Only transfer the useful part of a font. It subsets static Unicode-ranges, so only a part of the font will be downloaded.

WebTUI is a CSS library that brings the beauty of Terminal User Interfaces (TUIs) to the browser

Funny!

There is a new lh for "line-height" unit in css.

Browser support is 92% though

* + * as known as the howl selector: targets all elements that have the previous same selector.

This selector is great because it has no specificity.

An alternative is *:not(:first-child)

Use appearance: base; on legen style could unlock a lot of styling issues for <legend>

1. Too small target areas
2. Not using gap with Flexbox
3. Unforgiving target areas for dropdowns
4. No delay before closing drodowns
5. Not animating anchor links

text-wrap: pretty avoids short last lines, bad rag, poor hyphenation and typographic river.

pretty can be applied to anything on the page.
balance should be used for anything where you want all the lines to be the same length