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.

Naming conventions for CSS

Focus by demotion or the focus stands out because all other elements are hidden.

A switch input with an Astronaut

minimal HTML, powered by the offset property, responsive.