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 selector
• text-wrap: balance (only chromium): definitely a good one
• initial-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.

Transition a CSS grid row from 0 to 1fr to get an accordion working :D
An Advantage is the text is already rendered for screen readers.

Wow I didn't think about it. It seems practical!

With a list with data-index attributes such as <li class="searchable" data-index="newtoncronintorphy.dorothea@gmail.com(121)644-5577">
and the snippet:

<script type="text/javascript">
var searchStyle = document.getElementById('search_style');
document.getElementById('search').addEventListener('input', function() {
  if (!this.value) {
    searchStyle.innerHTML = "";
    return;
  }
  // look ma, no indexOf!
  searchStyle.innerHTML = ".searchable:not([data-index*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
  // beware of css injections!
});
</script>

A simple CSS code to check bot messages on social media (mastodon).

A minimalist CSS library with special work on sidenotes, figures, and epigraphs.

An example of layout top to bottom with different width 👍

A color picker with the oklch format

oklch is based on human perception instead of the RGB for LCH.