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.
A flexbox playground in which code and a nicer UI can be toggled.
A quick win is to use font-variant-emoji: emoji;
Another drop-in css library that authors wished to have to start on every new little website.
Everything that does not have to be JS anymore, and there is a lot !
I didn't know about the accesskey attribute :)
A paper-style imitation library
Now I get it. As often, the container of the node matter.
A guide to primary navigation on the related HTML tags. About HTML, inert
and tabindex
are explained.
For CSS, an optimal focus indicator is explained. There are also :focus-within
and :focus-visible
.
Finally some patterns such as Accordion, Tooltips and skip links are explained.
It looks good.
In order to create tokens (without meaning), the best possible options are:
- $font-14 (px)
- $font-100 (abstract 100s value)
So new tokens can be
- $font-16, $font-36
- $font-150, $font-125, etc..
Names are then important! --level-3
, --spacing
, etc...
- container queries
- style queries (only chromium)
:has
(FF catches up)nth-of
selectortext-wrap: balance
(only chromium): definitely a good oneinitial-letter
(only chromium and safari)- dynamic viewport units (svh, sve, lvh, lvw, dvh, dvw)
- wide gamut color spaces
color-mix
- CSS nesting (FF have to implement it)
- CSS trigonometric functions
- individual transform properties (hey that was supported by FF since v72...)
- popover and selectmenu tags are WIP
and more
A text with a dynamic size depending of the container width:
.container {
container-type: inline-size;
}
.fluid-type {
font-size: clamp(1rem, 4cqi, 3rem);
}
Strategy 2: Grow From a Base Font Size with calc()
font-size: calc(var(--font-size-base) + var(--font-size-fluid, 3cqi));
An upper-bound size can be set with min
if needed.
Strategy 3: Generate Styles Using a Type Scale Ratio
The reason behind Atomic CSS
UnoCSS is an engine instead of a framework because there are no core utilities - all the functionalities are provided via presets or inline configurations.