You simply substract the side distance [y-axis] from the larger corner radius.

That way you end up with the right one for the smaller shape.

Seen on Twitter but I could not find the author again

When using auto-fill, the items will grow once there is no space to place empty tracks.

When using auto-fit, the items will grow to fill the remaining space because all the empty tracks will be collapsed to 0px.

More recently, the idea to treat attribute selectors on par with classes as first-class citizens has been proposed more widely. We’re no longer talking about edge cases, but challenging the very defaultness of classes, all while not giving up that sense of structure that many of us look for in CSS naming conventions.

👍‍

And think of aria-selectors too ! This promotes an a11y-first mindset — if there is no attribute or pseudo selector available to represent the state we wish to style, should we add one?

this is the principle that class selectors violate. An element’s classes are never guaranteed to reflect their state

Using data attributes instead seems a good idea to avoid impossible states!

And there’s a reason why

looks attractive — it’s mirroring the APIs we’re used to seeing in design systems and component libraries, but bringing it to vanilla HTML and CSS.
Indeed, it’s a small step from data attribute selectors to custom pseudo selectors or prop-based selectors when using Web Components (think ).

Styling based on ARIA attributes encourages more accessible markup, and styling based on custom data attributes makes it more robust and readable — a better experience for users and developers alike.

A CSS-only tree view

Define a grid fast

Creates animation based on a timeline

:last-child, :nth-last-child(2), nth-child(2), nth-child(3n), nth-child(even), nth-child(odd), nth-child(n+3), nth-child(-n+3), nth-child(3n+1), nth-child(3n-1)

TL;DR Use HTML attributes with the content: attr() CSS property.

Here is an example with a notification icon with a counter nudge.

Minimal CSS to look great: 58 bytes, 100 bytes, and 100 more bytes.

Physical properties (margin, paddings) seems wrong: we need to specify intent in the design. That's why flow-relative or directions were introduced: inline-size, flexbox, block-size, ...

Examples of original icon hover effects 👍

Examples of original button effects 👍

Examples of original link effects 👍

Two circular navigation demos

A demo of 3 types of navigation menu with sublebels:

1. Overlapping levels
2. Covering levels
3. Overlapping levels with backlinks

CSS specificity as image 👍

You're encountering a flexbox default setting.

A flex item cannot be smaller than the size of its content along the main axis.

The defaults are...

• min-width: auto
• min-height: auto
  ...for flex items in row-direction and column-direction, respectively.

display: contents is underrated: it removes the box layout of the element!

grid-row or grid-column only works on explicit layout: workaround at 18:55

Why not :)

#idea #project fork it to provide a demo