Using icons as design tokens can be a great idea to switch icon names.

The technique is to use:

.example,
.sample {
  display: flex;
}

instead of

.example {
  display: flex;
}

.sample {
  display: flex;
}

Gaining 1-3% on the bundle size is few IMHO. The tool to make it happen is available at https://github.com/j9t/css-dedup

This technique is not widely supported in the browser yet.

The takeaway here is that we don’t have to scroll in order to trigger the animation. We just need to have more content for a container to overflow.

It will be widely available two years.

The features are only supported by 65% of the users according to caniuse.com. That's few

Solutions to align the icons with the text:

• the lh unit in translateY
• icon as pseudo-elements

The author solution:

.list-item {
  display: flex;
  gap: 0.5rem;
}

.list-item::before {
  content: "";
  --size: var(--icon-size);
  --offset: calc((1lh - var(--size)) / 2);
  flex-shrink: 0;
  aspect-ratio: 1;
  width: var(--size);
  height: auto;
  background-image: url("data:image/svg+xml,%3Csvg ....");
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(var(--offset));
}

A boilerplate of pre-defined native CSS architecture, styling, and HTML to kickstart your project.

@media (scripting: enabled) and @media (scripting: none)

There's also an initial-only value, which is for scripting that is enabled during page load but not after

Before this feature, one approach for detecting JavaScript support was by setting a custom selector on the opening html tag—a common one seen in the wild is the no-js class name.

When needed, the anchor positioning can be really useful.The browser support is not there yet though.

A recap of the font specification.

With text-box-trim we gain control over which boundary line text boxes are cropped to, and finally we can trim away this extra space to work with a font’s actual visual height.

One of the most common use cases for a lot of us is visually centering text within elements like buttons or notifications. This is especially handy for fonts that have awkward spacing like Josefin Sans.

There are plenty of creative uses [...] I placed headings with their baseline flush against sections below using negative margins. [Using text-box-trim remove the use of margins and put the heading just on the line of the next section, https://quarterre.com/studio]

Another example is to put the line on the font baseline like https://www.wepioneer.co/

[class^="btn-"],
[class*=" btn-"] 

works but it is 20 times slower (3ms per frame).

It uses the :highlight() selector instead of spans.

CSS.highlights.set(category, textRanges) is used to higlight the code blocks.

Note it's useful to use "pixelated" image rendering for QR Code for examples. Another way is to distribute the QR Codes as SVGs.

1) Useful for vertical spacing for content. The spacing of two paragraphs become natural.

2) It's precise to build the paper line effect with a background-size: 100% 1lh;.

3) When the image should scale, the lh is perfect to align the image with an amount of line:

.content img {
  float: left;
  height: calc-size(auto, round(up, size, 1lh));
}

Note calc-size is not widely supported, so let's build an alternative:

.content img {
  float: left;
  aspect-ration: 1; // put the ratio of the image here, or remove a `width` limitation
  height: 5lh
}

4) Faded content with a max-height
5) Size an icon based on the line height