Explore 24 Cutting‑Edge CSS Features from LondonCSS 2020 – Motion Blur, Scroll‑Timeline, Subgrid & More

1. Motion Blur

Motion blur (dynamic blur) adds realistic blur to moving elements. The proposal introduces motion-rendering and motion-shutter-angle properties, which can be used in @keyframes animations. A simple CSS example demonstrates how to apply these properties, and a JavaScript fallback using filter: blur() is provided. Alternative implementations using SVG filters and a JavaScript library (MotionBlurJS) are also discussed.

.animated-layer {
  animation: rotate .5s linear infinite;
  motion-rendering: blur;
  motion-shutter-angle: 180deg;
}
@keyframes rotate { to { transform: rotate(1turn); } }

2. Scroll‑Timeline

The Scroll‑Linked Animations draft adds the @scroll-timeline at‑rule, allowing scroll‑driven animations without JavaScript. Examples show a collision animation of two circles and a progress bar that fills as the page scrolls.

@media (prefers-reduced-motion: no-preference) {
  @scroll-timeline collision-timeline {
    source: selector(#container);
    orientation: block;
    start: 200px;
    end: 300px;
  }
  @keyframes left-circle { to { transform: translate(300px); } }
}

3. Subgrid

CSS Grid Level 2 introduces subgrid, allowing nested grids to inherit the parent’s track definitions. This simplifies complex layouts and resolves alignment issues in nested grids.

.grid {
  display: grid;
}
.item {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

4. Containment and Content‑Visibility

The contain property (e.g., contain: strict) tells the browser that an element’s layout, style, and size are independent, dramatically improving performance for large DOM trees. content-visibility: auto defers layout and painting of off‑screen content, boosting initial render speed.

.item { contain: strict; }
.container { content-visibility: auto; }

5. Data Saver Media Query

The new media feature (prefers-reduced-data: reduce) enables developers to serve lighter assets when users enable low‑data mode, for example swapping a high‑resolution image for an AVIF version.

@media (prefers-reduced-data: reduce) {
  header { background-image: url(/grunge.avif); }
}

6. Variable Fonts

Variable fonts allow fine‑grained control over font axes via font-variation-settings. Examples illustrate dynamic weight, style, and custom axes, with live editing in Firefox’s dev tools.

.text {
  font-weight: 800;
  font-style: italic;
  font-variation-settings: "SSTR" 183, "INLN" 648;
  transition: font-variation-settings .28s ease;
}
.text:hover { font-weight: 400; font-style: normal; }

7. Accessibility Pseudo‑Classes

The :focus-within selector styles a parent when any descendant receives focus, while :focus-visible applies focus styles only when the focus is keyboard‑driven, improving keyboard navigation.

form:focus-within { box-shadow: 0 0.2em 2.5em #c4c4c4; transform: scale(1.025); }
a:focus-visible { outline: 2px solid #005fcc; }

8. New Color Functions (Level 4 & 5)

CSS Color Level 4/5 adds functions such as hwb(), lab(), lch(), gray(), color(), color-mix(), and color-contrast(). The display-p3 color space and color() syntax enable wider gamuts on supported devices.

.colour { --fn-notation: hsl(2rad 50% 50% / 80%); --neon-pink: color(display-p3 1 0 1); }

9. Marker and Text‑Emphasis

The ::marker pseudo‑element customizes list markers, while text-emphasis adds decorative symbols to text. New properties like text-emphasis-skip improve control.

ul li::marker { content: "★"; color: gold; }
.emphasis { text-emphasis: triangle rebeccapurple; text-emphasis-position: under; }

10. Color‑Scheme

The color-scheme property (or <meta name="color-scheme">) informs the browser of supported color modes (dark/light), allowing native UI elements to adapt automatically.

:root { color-scheme: dark light; }

11. Nesting and @property

CSS Nesting Module brings Sass‑like nesting with & and @nest. The @property at‑rule registers custom properties with syntax, initial value, and inheritance, enabling smooth transitions.

@property --gradient-start { syntax: "<color>"; initial-value: white; inherits: false; }
.el { --gradient-start: white; background: linear-gradient(var(--gradient-start), black); transition: --gradient-start 1s; }
.el:hover { --gradient-start: red; }

Related links: https://www.londoncss.dev/, https://github.com/w3c/csswg-drafts/issues/3837, https://tympanus.net/codrops/2015/04/08/motion-blur-effect-svg/, … (list of references omitted for brevity).