I didn't push the thought to this point! The distinction between the focus indication area and the contrasting area is also pertinent.

A set of resources to use fluid typography instead of media queries

The state of the art CSS parser and minifier.

This tool is used by Mozilla for Firefox.

Each theme provides an accent, special, and neutral palette with 6 tints and 6 shades for a total of 13 generated colors each. Some themes use preset hues for each color, and others are generated based on color-theory.

A dark mode with an invert option is provided.

Using 0 as CSS value breaks the calc function if the two values are not pixels.

The only difference between a , a , and a is in the units applied. A like 1 becomes a if you add length-units (1px, 1em, etc) and a if you add time-units (1s, 1ms, etc).

Actually

For zero and only zero, we can use a when CSS expects a .

0 is not allowed in some functions such as rgb or HSL, because these expects degree or percentages.

A color gamut is a dimension in which we define colors, and the color space defines how we define a color inside the gamut.

For example, sRGB is a color gamut that spans a range of colors, and Hex, RGB and HSL are the spaces available to explore the gamut.

and the sRGB gamut becomes inconvenient:

• The technology allows better colors (at least a wider gamut than allowed by sRGB)
• Dead grey zones between two points in space.
• inconsistent levels of lightness

So two units have landed. One is oklch:

• l controls the lightness, and measured in a range of 0% to 100%
• c is the chroma value, measured in decimals between 0 and 0.37
• h is the same old hue of HSL, in the same range of 0deg to 360deg
• / a is the alpha in the oklch.

The chroma limit value could be infinite, but P3 Iphone display and sRGB are limited to 0.37.

“Chroma refers to the purity of a color. A hue with high chroma has no black, white, or gray added to it. Conversely, adding white, black, or gray reduces its chroma. It’s similar to saturation but not quite the same. Chroma can be thought of as the brightness of a color in comparison to white.” — Cameron Chapman

How to make an accessible skeleton with ARIA ?

Note that the skeleton pattern hides a bad design where the UI is slower than expected. So avoid it as much as possible.

That would be awesome indeed: using @scope (.classname) to specify styles that only applies from this class.

In the meantime:

.visually-hidden:not(:focus):not(:active) {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

A company buy a concurrent. Then they do not put effort into creating new content or the one existing on it.

It is sad for the users, Digitalocean.

CSS tricks is indeed full of resources.

Basic validation can be done with HTML/CSS and the CSS selector :user-valid or :user-invalid pseudo-selectors

Update the styles of the web pages with custom ones :)

It contains all the gotcha we can find with the flow and cross axis, minimal width, align-content, margin auto, etc...

You need to be using the appropriate elements (s are your friend!), and managing the appropriate attributes and their values to make truly accessible user experiences.

The idea: uses CSS to detect accessibility issues.

The author uses different code snippets for it. One ensures the outline of the focus is never clipped. Another makes sure that not expanded content (aria-exanded="false") is not displayed. Another one targets aria-invalid elements. A busy container is not displayed in CSS, etc...

Every time you come up with a style that reflects a state or property of something (open, closed, expanded, collapsed, on, off, checked, disabled, busy, locked, selected, sobbing uncontrollably), do not use a class.

And an argument against utility-classes such as Tailwind: If you use these tools, you still need to know CSS. On top of that, you may need to know the tools’ syntax in order to incorporate any CSS that goes beyond what they offer. If you build these tools, please consider how you can use CSS that promotes and reinforces good and accessible underlying HTML syntax.

It provide a good example: this semantic HTML

<button
  id="navbar-toggle"
  type="button"
  aria-label="Toggle menu"
  aria-controls="navbar-menu"
  aria-expanded="true"
></button>
<ul id="navbar-menu" aria-labelledby="navbar-toggle"></ul>

should be styled as follow in CSS

/* State: closed. Click to open. */
#navbar-toggle[aria-expanded="false"] {}

/* State: open. Click to close. */
#navbar-toggle[aria-expanded="true"] {}

Just as before, it turns out that the class name was completely redundant. In fact, because we reached for a class name prematurely, we forgot to communicate the right semantics at the markup level.

The benefits of min-width: 0; while overflowing with flexbox

As it turns out, links are not focusable in Safari if they have 0 dimensions. Adding 1px padding, border, or width and height fixes the issue.