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)

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

Better CSS defaults

rgba(from currentColor r g b /. 35
or for better support:
color-mix(in srgb, currentColor 35%, [#0000)](https://shaarli.lyokolux.space/./add-tag/0000))

I can see potential advantages to target all details content (except summary) as one container.

Browser support is not enough (~69% at the time of writing) and Firefox does not support it though: https://caniuse.com/?search=%3A%3Adetails-content

Let's see in months or 1-2 years!

Sometimes the outline is hidden because of some overflow though.

a:not(:is(:hover, :focus)) {
  text-decoration-color: 
    color-mix(in srgb, currentColor, transparent 75%);
}

"The Jedi use the cascade for knowledge and defense, never for attack."

...

"But only the Sith deal in absolutes!"

:where() apply styles with 0 specificity. It's a great way to provide defaults to css classes.

Another modern solution is to use @layer.

Wow! mix-blend-mode: multiply; and the linear-gradient effect are awesome.

There can be a day where Carousels will be implemented only in CSS.

Avoid layered text-shadows for text outlines.

Use paint-order: stroke fill instead!

How to customize gaps between elements?

We don't have a great way to do it currently.

• Adjust the vertical margin of the title or description.
  Wrap title and description in a new container and re-apply flexbox with a smaller spacing.
  Use the default flow layout with margins.

Show elements in an input?

✨ Chrome: DevTools Settings > Preferences > Elements > ✅Show user agent shadow DOM

✨ Firefox: about:config > set devtools.inspector.showAllAnonymousContent to true

Use inset: -8px to make the element overflows in its container.