Key Takeaways from the CSS Annual Report – Layout, Graphics, Interaction, Typography and Emerging Features

In this overview the author walks through the most interesting findings of the CSS Annual Report, focusing on practical features that developers can start using today.

Layout

Flexbox remains the workhorse for most layouts, while display: grid is adopted by 99.3% of respondents. The report shows a growing interest in subgrid , which lets a child grid inherit the tracks of its parent grid, enabling more complex arrangements. An example demonstrates a grid with subgrid rows and columns:

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
  gap: 20px;
}
.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  row-gap: 0;
}
.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}

Multi‑column layout ( column-count ) is still rarely used, but the author shows a simple example that splits a container into three columns with a single property.

.container {
  column-count: 3;
}

The position: sticky property for sticky headers is widely known, and logical properties ( margin-inline-start , padding-inline , etc.) are highlighted as a way to write direction‑aware CSS for LTR and RTL languages.

Graphics and Images

New shape capabilities ( shape-outside ) allow text to wrap around arbitrary shapes such as circles:

img {
  float: left;
  shape-outside: circle(50%);
}

The object-fit property is explained with its five values (fill, contain, cover, none, scale‑down). The article also covers clip-path as a modern replacement for clip , blend modes ( mix-blend-mode: difference etc.), CSS filters, color-gamut media queries, perspective for simple 3D effects, and intrinsic sizing keywords ( min-content , max-content ).

Interaction

Scroll‑snap is demonstrated with a minimal demo that locks the viewport to sections after scrolling:

.slider {
  scroll-snap-type: x mandatory;
  display: flex;
  overflow-x: scroll;
}
section {
  scroll-snap-align: start;
  min-width: 100vw;
  height: 100vh;
}

Other interactive properties such as overscroll-behavior , touch-action , pointer-events , and the experimental scroll-timeline (part of Scroll‑Linked Animations) are briefly introduced.

Typography

The author reviews font-variant (including small‑caps), initial-letter (poorly supported), and the widely used line-clamp technique for truncating text after a fixed number of lines.

Variable fonts are highlighted as a way to pack multiple weight and style variations into a single .otf file, enabling fine‑grained control such as font-weight: 550 .

Other Features

CSS custom properties ( --var ) have an 84% adoption rate. Feature queries ( @supports ) are shown with examples for detecting property support, custom property support, and selector support. Containment ( contain ) and will-change are presented as performance‑optimisation tools, while calc() remains a staple for dynamic sizing.

The article also touches on Houdini (only 3% usage) and the newer comparison functions ( min() , max() ).

Pre‑processors, Frameworks and CSS‑in‑JS

A quick comparison of Sass/SCSS, Less, Stylus and PostCSS is given, noting PostCSS’s growing popularity. Framework satisfaction data shows Ant Design gaining traction, while Bootstrap still leads usage and Tailwind CSS is rising fast.

CSS‑in‑JS solutions such as Styled Components, Emotion and others are discussed, with pros (scoped styles, dynamic theming) and cons (runtime cost, readability, lack of standards). A short Emotion example demonstrates inline CSS with template literals.

import { css, jsx } from '@emotion/react';
const color = 'darkgreen';
render(
Hello ConardLi
);

Awards

The most‑used feature this year is CSS comparison functions, with a 15.5% increase. PostCSS tops satisfaction at 91%, and CSS Modules attract the most interest (74%).

For the full report see https://2021.stateofcss.com/ .