Headings are not focusable because they are not interactive, as long as the headings are not links… ;)

Here an example of how to make focused element transition on focus:

section:focus {
  outline: 0;
  animation: yellowFade 3s forwards;
}
@keyframes yellowFade {
  from { background: lightYellow; }
  to   { background: white; }
}

and the code example: https://codesandbox.io/s/css-grid-blog-bonus-v2-nn7t2

Improved list designs. It's refreshing.

A simple, extensible CSS framework

Vanilla Framework aims for Level AA conformance with the Web Content Accessibility Guidelines (WCAG) 2.1.

Provide stats about the CSS on a page 👍

How CSS helped

Create Beautiful Fullscreen Scrolling Websites

fullPage.js is designed to be easy to use and customize. It includes tens of examples, great documentation, and both community and personal support.

The project is useful websites similar to slides or demos.

Avoiding media queries is possible but unreadable.

Some SCSS mixins make it more readable though: https://github.com/ryevych/adaptiveValueFunction/blob/main/scss/adaptiveValueFunction.scss

Two good examples are provided :)

A web component for drawing patterns with CSS

The images are actually impressive

And some figures: https://yuanchuan.dev/polygon-shapes

Easier clamp values with a min and max values, and the size of the viewport.

Example of usage of conic-gradient

object-fit: cover; is the one mostly used because it preserves the ratio of the image and it fits the dimension of the container.

There is multiple use cases:

• user avatars
• logos list
• article thumbnail
• hero background
• displaying videos

background-size is for the background and has 3 values: auto, contain and cover.

TL;DR;
apply every hover effect on devices that can not support the hover effect (smartphones, ...).

Use the @media (hover: hover) media query to target devices that have the :hover effect available, or @media (hover: none).

A state of the art library for vue components

I agree

An interactive gallery that demonstrated what's possible with just CSS gradients.

CSS variables that provoke invalid CSS declarations (for example --foo: ;) are set to unset.

Space toggle for numerical value: calc(1.5 var(--toggle-value, - .4))
with toggle value:

:root {
  --ON: initial
  --OFF: ;
}

Use variables for pure data, not CSS values as CSS values are often bound with a unit.

Relative values inherit as syntax tokens unless the property is registered. Registering a property as allows us to pass down ancestor font sizes.

Again CSS properties:

.box {
  padding: var(--py, 1rem) var(--px, 1rem);
}

.box--some-variant {
  --px: 2rem;
}