• 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.

How to make this better with little css.
Inherit font-size, line-height, word-spacing, border and padding.

There are also

• Under-Engineered Select Menus
• Under-Engineered Custom Radio Buttons and Checkboxen

In order to migrate code bases efficiently to the css logical properties, one should use a migration tool.

There is already a way to parse CSS with https://github.com/servo/rust-cssparser.
What we need is simply to replace some of its value :)

There is also a simple find-and-replace example with a gist: https://gist.github.com/cchaos/acfd24d603acd5f176766ab86b5dd1d5.

Depending on the vessel (ship):
Stern (back), port (left), bow (forward), starboard (right). These directions are based on the vessel "cap".

Depending on the skiers:
"skier's Left" is based on a skier facing down the mountain.

Depending on the reader:

• inline is how a sentence is read
• block is the perpendicular of inline
• start is where the flow... starts
• end is where the flow ... ends

I find it still hard to explain and I got it with examples. Read more on mdn

block/inline and start/end can be mixed up to target a specific location. From our Latin reader perspective, it applies as follows: https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/03/block-dir.png?w=720&ssl=1

It's user-centric because its language direction is respective. [...] We can embrace diversity, complexity, and unpredictability and rely on the browser engines to properly lay it out.

Why all of these? Because right, left, top, and bottom can be interpreted differently between the explainer's and the public points of view.

A clear starting point on logical properties!

I keep:

1. Container query: indeed
2. Scroll snap
3. Grid Pile: centering everything in one cell with display: grid; place-content: center; and in all direct children: grid-area: 1/1
4. Quick circles with inline-size: 25ch; aspect-ratio: 1; border-radius: 50%;
5. Logical properties :D

They are better because:

1. Hum they are logical
2. They are ready for language translation

So why?

1. People needs to know about them
2. Legacy projects that needs both syntax or a complete rewrite
3. Conflicts: if a non-logical and a logical property currently affect the same thing, it’s a specificity (including source order) game.
4. The rollout doesn't feel totally done: linear gradients with to left and to bottom, translate, etc...

A good starter to use cases for the :has() selector

A great example!