Modern CSS in 2026

The state of CSS in 2026

CSS has evolved dramatically in recent years. Features that previously required preprocessors or JavaScript are now native to the browser. This lesson covers the most important additions.

Native CSS Nesting

You no longer need Sass or Less to nest selectors. Native CSS supports nesting:

.nav {
  display: flex;
  gap: 1rem;

  & a {
    color: inherit;
    text-decoration: none;

    &:hover {
      color: #b056ff;
    }
  }

  @media (width < 768px) {
    flex-direction: column;
  }
}

The & represents the parent selector. For pseudo-classes and pseudo-elements, the & is optional. For type selectors (p, h1), it is required.

The :has() selector

:has() is the "parent selector" that CSS never had. It lets you style an element based on what it contains:

/* Card that contains an image: different layout */
.card:has(img) {
  display: grid;
  grid-template-rows: auto 1fr;
}

/* Form with invalid fields: disabled button */
form:has(:invalid) button[type="submit"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Sidebar open: adjust main */
body:has(.sidebar.open) .main {
  margin-inline-start: 280px;
}

Common use cases for :has()

• Visual form validation without JavaScript
• Conditional layouts based on content
• Global states (sidebar open, modal visible)
• Sibling styles (.item:has(+ .item-active))

The light-dark() function

Greatly simplifies light/dark theming:

:root {
  color-scheme: light dark;
}

body {
  background: light-dark(#fff, #0a0a0f);
  color: light-dark(#1a1a2e, #e8e8e8);
}

You no longer need to duplicate blocks with @media (prefers-color-scheme: dark) for each property.

@scope: style encapsulation

@scope limits the reach of styles to a specific DOM tree, avoiding collisions:

@scope (.panel) {
  h2 { font-size: 1.5rem; }
  p { color: #555; }
}

With the lower boundary (to), you can exclude parts of the tree:

@scope (.panel) to (.panel__slot) {
  /* Styles that do NOT affect the slot content */
  p { margin: 0; }
}

Anchor positioning

Position tooltips, popovers, and dropdown menus relative to an anchor element, without JavaScript:

.trigger {
  anchor-name: --my-button;
}

.popover {
  position: fixed;
  position-anchor: --my-button;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 0.5rem;
}

Advanced math functions

CSS now includes full math functions:

.element {
  /* Round to the nearest multiple of 4px */
  padding: round(nearest, 1.3rem, 4px);
}

Scroll-driven animations

Animate elements based on the scroll position, without JavaScript:

@keyframes appear {
  from { opacity: 0; scale: 0.9; }
  to   { opacity: 1; scale: 1; }
}

.section {
  animation: appear linear both;
  animation-timeline: view();
  animation-range: entry 10% entry 40%;
}

view() creates a timeline based on when the element enters and leaves the viewport.

View Transitions API

Animated transitions between views in a SPA or between pages:

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fade-out 300ms ease;
}

::view-transition-new(root) {
  animation: fade-in 300ms ease;
}

Styling Forms

Forms are one of the hardest parts of CSS to style. New modern pseudo-classes and properties change this entirely.

Validation states: `:valid`, `:invalid`, `:user-invalid`

CSS can react to the validation state of form fields:

/* Applied ONLY after user interaction */
.field:user-invalid {
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgb(231 76 60 / 20%);
}

.field:valid {
  border-color: #2ecc71;
}

[!TIP] Prefer :user-invalid over :invalid. The :invalid pseudo-class marks fields as invalid immediately on page load, while :user-invalid waits until the user has interacted with the field.

Floating labels with `:placeholder-shown`

The "floating label" pattern can be achieved without JavaScript, using :placeholder-shown and the adjacent sibling combinator ~:

.field-group {
  position: relative;
}

.field-group .field::placeholder {
  color: transparent; /* Hide the real placeholder */
}

.field-group .label {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  translate: 0 -50%;
  transition: all 200ms ease;
  color: #888;
  pointer-events: none;
}

/* When the field has text or is focused, the label moves up */
.field-group .field:not(:placeholder-shown) ~ .label,
.field-group .field:focus ~ .label {
  top: 0;
  translate: 0 -50%;
  font-size: 0.75rem;
  background: white;
  padding-inline: 0.25rem;
  color: #b056ff;
}

`accent-color` and `caret-color`

Theming native browser controls (checkboxes, radios, range sliders) is now trivial:

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: #b056ff;
}

input, textarea {
  caret-color: #b056ff; /* Text cursor color */
}

accent-color tints the primary color of native controls. The browser handles contrast automatically.

`field-sizing: content` for textareas

A new property that allows <textarea> elements to grow automatically based on their content:

.textarea-auto {
  field-sizing: content;
  min-height: 3lh;  /* Minimum 3 lines */
  max-height: 10lh; /* Maximum 10 lines */
}

[!INFO] The lh unit equals the computed line-height of the element. It is ideal for defining heights based on lines of text.

Customizing `` with `appearance: none` To create a custom dropdown, remove the native browser styles: .custom-select { appearance: none; background: white url("data:image/svg+xml,...") no-repeat right 0.75rem center; padding: 0.5rem 2rem 0.5rem 0.75rem; border: 1px solid #ccc; border-radius: 6px; }appearance: none removes the native arrow and all default styling, giving you full control over the <select> appearance. `:focus-visible` vs `:focus` :focus-visible shows the focus indicator only when it is useful — typically during keyboard navigation, not when clicking with the mouse: /* Visible focus: keyboard and assistive technologies */ .field:focus-visible { outline: 2px solid #b056ff; outline-offset: 2px; } /* Buttons: hide ring on click, show with keyboard */ .button:focus-visible { outline: 2px solid #b056ff; outline-offset: 2px; } .button:focus:not(:focus-visible) { outline: none; } [!TIP] Never use outline: none without a :focus-visible alternative. Removing the focus indicator entirely is a violation of WCAG 2.4.7 accessibility guidelines. Browser support summary All features covered in this lesson are supported in evergreen browsers (Chrome, Firefox, Safari, Edge) as of early 2026. Check caniuse.com if you need to support older browsers. You have explored the entire landscape of modern CSS. It is time to put everything into practice in the final project. Practice Refactor with CSS nesting: Take an existing component with flat selectors and rewrite it using native CSS nesting with the & operator. Implement visual validation with :has(): Create a form where the submit button is visually disabled when any field is invalid, using .form:has(:invalid) .button { opacity: 0.5 }. Use light-dark() for theming: Set color-scheme: light dark on :root and apply light-dark() to the background and text colors of a component to support both themes without media queries.