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!

Some dark/light mode toggles

How to handle spacing between css elements in one line of code?

.flow > * + * {
    margin-block-start: var(--flow-space, 1em);
}

Ready to use design tokens

1. 140 named colors
2. RGB (the traditional notation)
   • Note we can replace rgba(255, 0, 0, 0.5) with rgb(255 0 0 / 0.5)
3. Hex codes (the de-facto used unit)
4. HSL (the human-readable format):
   • hue: the pigment used (deg)
   • saturation: how much pigment (%)
   • lightness: how light? (%)
5. display p3: only supported in Safari and Chrome but allow more colors than sRGB
6. LCH: a more human-friendly representation than HSL. It is only supported in recent versions of Chrome and Safari though. oklch fixes some bugs of lch.

How to get right proportions for a rounded corner inside of a rounded container?

outerRadius - gap = innerRadius

Better than writing you own utility classes because this tool will generate only the one needed :)

Another great tools initiated by Antfu

UnoCSS is an atomic-CSS engine instead of a framework. Everything is designed with flexibility and performance in mind. There are no core utilities in UnoCSS, all functionalities are provided via presets.

• using transform-style: preserve-3d; on all elements
• make cubes
• add animations
• one source of light and 3 shades:
  • Light: Direct light
  • Medium: Indirect light
  • Dark: No light

#idea #project we could build a library for this with SCSS. One to build objects, another that is a collection of items.

@media (prefers-color-scheme: dark) {
    html body {filter: invert(1);}
    /* the following really should be managed by a cascade layer */
    .some-container-items-or-images {
      box-shadow: 0.25em 0.25em 0.67em #FFF8;
    }
}

From Lary Hudson

you should also set “color-scheme: dark” so that scrollbars change to a dark tint as well.

• Confetti canon
• Bookmark Button: transitions between SVGs. The MorphSVG plugin comes in to allow different amount of points. It does the heavy lifting so you can smoothly transition between any SVG Shapes.

3 examples to build CSS Grid patterns