@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.

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

The entire element such as a card is interactive as a button for visual users. The button or link remains correct for the rest of the users.

A classless stylesheet.

There are also many other themes out there!

• HTML only
• awsm.css
• bahunya
• bamboo
• bootstrap
• evenbettermotherfucking
• holiday.css
• kacit
• marx
• meyer
• minicss
• mvp.css
• no-class
• pico.css
• sakura
• sakura-vader
• simple.css
• stylize.css
• tacit
• thebestmotherfucking
• tufte
• vanillacss
• w3c-chocolate
• w3c-traditional
• water.css-dark
• water.css-light
• writ
• yorha

project: https://github.com/spiritov/ds.css

TL;DR
Use shortand when it's obvious (padding-block and padding-inline have a great padding shorthand);
When each value is a distinct type (an animation for example)
When the syntax has its own rules until it stops carrying its weight (background)

That's a way

It's a chrome-only thing for now using shape()

• choose fonts wisely
• optimize the font display:

  body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }

• golden ratio for line-height
• keep the amount of characters per line to 90
• prefer SVG and WEBP formats

A guide to display: grid-lanes

I learned the content property has an alt (similar to images) if needed.

The snippet:

[href^="http"]:not(.btn, :has(svg)):not([href^="https://gomakethings.com"], [href^="http://localhost"])::after {
background-color: currentColor;
    content: "" / "(external link)";
    display: inline-block;
    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg>');
    mask-size: cover;
}

There is an @page to set the property of a page. There is also rules to break the page at desired.

The navigation can be hidden.
Links and <abbr> content must be placed in the view with content: attr(href).
Check the forms.

It can be worth checking for a black and white version while printing it.