Using radial gradients to create shapes. They are similar in some ways to svgs.

:root {
  overscroll-behavior: none;
}

A codepen demo https://codepen.io/michellebarker/pen/vYbrpbX

CSS has gotten easier to write than it is different to write.

• use :is to group multiple selectors such as a:hover and a:focus
• using logical properties instead of marg
• margin-trim can help by removing the last margin child element of a list for example. It is experimental, so Flexbox with the gap property
• aspect-ratio to set only one dimension between the height and the width, while keeping proportions
• .card:has(:hover, :focus) is easier and straightforward than a.card-link:hover > .card
• an easier way to define color palette with --gray-dark: color-mix(in srgb, var(--primary-color), [#fff](https://shaarli.lyokolux.space/./add-tag/fff) 25%);. It is more maintainable!
• ch for managing line lengths; text-wrap: balance is a work in progress (65% of users can use it)

and more with cascade layers, container queries, <selectmenu> and CSS nesting

This website is a single HTML file. It simply uses the #anchor suffix (from 1992) and the :target CSS selector to show and hide pages/content.

This setup1 is databaseless, javascriptless, and buildshit-free, so you can edit your website with a text editor and upload it somewhere2 like a normal person.

and ho it differs from SCSS.

We can now calculate the remainder rem() and the modulo mod in css.

We will have to wait a bit though for browser support: https://caniuse.com/?search=rem() and https://caniuse.com/?search=mod()

1. Consider mixing kebab-casing with camelCasing: --system-color-controlAccent: blue;
2. Using namespaces can help to avoid collision. In the upper example: system is a namespace.
3. Value typing hints to the use cases of the variable. In the upper example: color. It could be fontSize for example
4. Descriptive names can use 2 patterns: icyBlue which is value-based or accent which is usage-based.
5. Dark mode is simpler with usage-based variables

When to use between value- and usage-base?

Variables with value-based names can be useful for restricting the number of values in your interface. Using numbers can be useful, but sometimes overkill.

Usage-based tend to be useful to describe scopes of capability and utility within the project. The utility of a usage-based name comes in how it guides a developer or designer in its use.

There are often 3 levels of abstractions:

• defining the values
• different property for custom controls such as --color-accentColor
• the CSS variable of use in the component such as --button-color

Use padding, relative line-height and a flow layout instead.

Pollen is a highly configurable, responsive library of style-agnostic CSS variables for your next design system. It lets you write faster, more consistent, and more maintainable styles.

A great way to use CSS properties is to make "private" properties for a class and then create variants based on other CSS class modifiers that sets these variables.

The semantic version is 8 × smaller, renders faster, and is easier to modify and extend.

A class named "secondary" is definitely more explicit.

It will solves a lot of tooltip or popover issues

A search input that expands itself on focus. It animates the width, but it uses CSS grid for the main layout.

We can use css (attributes) selectors to style external links, and I think it is a great idea.

Examples of relevant class names.

A consistent set of design tokens already defined