CSS in 2026: Modern Features You Can Use Today

CSS has evolved rapidly. Many features that once needed preprocessors, hacks or JavaScript are now built into browsers. Here are some worth using, with the usual advice to check browser support for your audience.

Layout

• Grid and subgrid: two-dimensional layouts, with child elements aligning to the parent grid.
• Container queries: components respond to the size of their container, not just the screen.
• Flexbox gap: easy spacing between items without margin hacks.

Selectors and structure

• :has(): style a parent based on its children, which is very helpful for forms and cards.
• Native nesting: write nested rules without a preprocessor.
• Cascade layers (@layer): control the order of styles and tame specificity conflicts.

Colour and typography

• color-mix(): create shades and tints directly in CSS.
• Custom properties: theme colours and spacing with variables, including dark mode.
• Fluid type with clamp(): text that scales smoothly between screen sizes.

Motion and interaction

• View transitions: smooth animated changes between states or pages.
• Scroll-driven animations: effects tied to scrolling, where supported.
• prefers-reduced-motion: honour users who need less movement.

Adopt with care

Check support on a site such as Can I Use, use feature queries (@supports) and provide sensible fallbacks. Progressive enhancement lets you use new features safely.