:has has a lot of possibilities with drag'n'drop. Here the developer uses 3 items: mushrooms, potions and .

For example: dragging some items to make parts of the site grow. https://lynnandtonic.com/assets/images/thoughts/case-study-2022-mushroom-header.mp4

See https://lynnandtonic.com/assets/images/thoughts/case-study-2022-david-rose.mp4 for more real interactions.

A potion adds color: https://lynnandtonic.com/assets/images/thoughts/case-study-2022-home-potions.mp4

Create an accessible <marquee> tag

This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.

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.