If you ask an AI to write your CSS today, it will probably give you code from 2021. It will suggest a JavaScript event listener to detect scroll position, or a heavy library just to animate an element entering the DOM.

But we are CSS Dorks. We know that the browser engine is always faster than the V8 JavaScript engine.

As we move into 2026, the baseline for "Modern CSS" has shifted. Here are the 10 features you need to master to keep your site fast, your code clean, and your dependencies low.

1. Inline Conditionals with if()

The Holy Grail is finally here. For years, we’ve abused classes like .is-active to toggle styles. The new inline if() function allows for logic directly inside your property values.

CSS
.card {
  /* Syntax: if(condition, true-value, false-value) */
  padding: if(style(--variant: compact), 10px, 20px);
  background: if(media(width < 500px), var(--surface-mobile), var(--surface-desktop));
}

Why it matters: It drastically reduces the complexity of your CSS utility classes.

2. Scroll-Driven Animations

Goodbye, IntersectionObserver. You used to need JS to expand a progress bar as the user scrolled down. Now, you bind animation timelines directly to the scroll position of a container.

CSS
@keyframes grow-progress {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

.progress-bar {
  animation: grow-progress linear;
  animation-timeline: scroll(); /* The magic sauce */
}

Why it matters: This runs off the main thread. Even if your React/Next.js hydration is lagging, your scroll animations stay buttery smooth.

3. @starting-style (Entry Animations)

Animating from display: none is finally possible. Historically, you couldn't animate an element appearing because the browser didn't know its "before" state if it was display: none. Now we have @starting-style.

CSS
.modal {
  transition: opacity 0.5s, translate 0.5s;
  opacity: 1;
  translate: 0 0;
  
  @starting-style {
    opacity: 0;
    translate: 0 20px;
  }
}

Why it matters: You can delete Framer Motion or React Transition Group for simple UI toggles.

4. field-sizing: content

No more auto-growing text-area hacks. You know that hack where you use a hidden div or a JS script to make a <textarea> grow as the user types? It’s one line of CSS now.

CSS
textarea {
  field-sizing: content;
  min-height: 40px; /* Prevent it from disappearing */
}

Why it matters: It respects the form layout engine perfectly without layout thrashing.

5. The light-dark() Function

Dark mode made easy. Stop writing separate @media (prefers-color-scheme: dark) blocks for every single component. Define the split right in the property.

CSS
:root {
  color-scheme: light dark;
}

button {
  /* First value is Light Mode, second is Dark Mode */
  background-color: light-dark(#ffffff, #121212);
  color: light-dark(#000000, #ffffff);
}


6. Relative Colors (rgb(from ...))

Dynamic palettes without the math. Want to take your brand color and make it 50% opaque, or slightly darker, without defining a new variable?

CSS
.btn-primary {
  background: var(--brand-blue);
}

.btn-primary:hover {
  /* Take brand-blue, keep R, G, B, but change Alpha */
  background: rgb(from var(--brand-blue) r g b / 0.8);
}


7. Native CSS Nesting

RIP SASS. If you are still compiling SCSS just for nesting, stop. All major browsers support native nesting now.

CSS
.card {
  background: white;
  
  & .card-title {
    font-weight: bold;
  }

  &:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }
}


8. text-wrap: balance & pretty

Typesetting for the web. Designers hate "orphans" (a single word on a new line). JS solutions for this were heavy and caused layout shifts.

  • balance: Best for headlines. Forces lines to be equal width.

  • pretty: Best for paragraphs. Prevents orphans at the end of text blocks.

CSS
h1 {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}


9. Container Queries (@container)

The Component Revolution. Media queries look at the screen size. Container queries look at the parent element's size. This makes your components truly portable.

CSS
.sidebar-widget {
  container-type: inline-size;
}

@container (max-width: 300px) {
  .card-layout {
    flex-direction: column; /* Stack vertically if inside a small sidebar */
  }
}


10. The :has() Parent Selector

Selecting the past. We can finally style a parent based on its children. This unlocks logic that previously required messy jQuery.

CSS
/* Style the card border ONLY if it contains a checked checkbox */
.card:has(input[type="checkbox"]:checked) {
  border-color: green;
  background: #f0fff4;
}

The Future is Native

Every line of JavaScript you delete is a win for performance. As we migrate CSSDorks to a more modern stack, we will be using these native features to build faster, cleaner tools.

Which of these are you using in production yet? Let me know in the comments.