From CSS3 to Modern CSS: Revolutionary Features Shaping Front‑End Development

1. CSS evolution

Timeline of major milestones: CSS1 (1996) → CSS2 (1998) → CSS2.1 (2004) → modular CSS3 (2011+) → Modern CSS (2020+). Ongoing modular development adds new specifications such as Selectors Level 4, Flexbox Level 1, Grid Level 2, Color Level 5, Cascade Level 5, etc.

2. CSS Custom Properties (variables)

2.1 Basic usage

:root {
  --primary: #0052d9;
  --font-size-base: 16px;
}

.button {
  background: var(--primary);
  font-size: var(--font-size-base);
  color: var(--text-color, #fff); /* default fallback */
}

2.2 Dynamic theming with JavaScript

// Update a variable at runtime
document.documentElement.style.setProperty('--primary', '#52c41a');

// Read the current value
const primary = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary');

2.3 Component‑level (local) variables

/* Global defaults */
:root {
  --btn-bg: #0052d9;
  --btn-color: #fff;
  --btn-radius: 6px;
}

/* Override inside a component */
.btn-danger { --btn-bg: #ff4d4f; }

.btn {
  background: var(--btn-bg);
  color: var(--btn-color);
  border-radius: var(--btn-radius);
}

2.4 Combining variables with calc()

:root {
  --spacing: 8px;
  --cols: 3;
  --gap: 16px;
}

.grid-item {
  width: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
}

/* Font‑scale system */
:root {
  --scale: 1.25;
  --font-sm:   calc(1rem / var(--scale));   /* 0.8rem */
  --font-base: 1rem;
  --font-lg:   calc(1rem * var(--scale));   /* 1.25rem */
  --font-xl:   calc(1rem * var(--scale) * var(--scale)); /* 1.56rem */
}

3. CSS Cascade Layers

Large projects often suffer priority clashes among base styles, third‑party libraries, and component styles, leading developers to rely on selector stacking or !important, which is fragile.

3.1 @layer syntax

/* Declare layer order (later layers win) */
@layer base, components, utilities;

/* Base layer */
@layer base {
  * { box-sizing: border-box; }
  body { font-family: system-ui, sans-serif; line-height: 1.5; }
  a { color: inherit; }
}

/* Components layer */
@layer components {
  .btn { padding: 8px 16px; border-radius: 6px; font-weight: 500; }
}

/* Utilities layer (highest priority) */
@layer utilities {
  .hidden { display: none !important; }
  .flex { display: flex; }
  .text-center { text-align: center; }
}

3.2 Integrating third‑party libraries

/* Lower third‑party priority */
@layer vendor {
  @import url('normalize.css');
}

/* Component styles automatically override vendor */
@layer components {
  button { background: var(--primary); }
}

4. Container Queries

Media queries react only to viewport width, which fails when a component is placed in containers of differing widths.

4.1 Defining a container

.card-wrapper {
  container-type: inline-size;
  container-name: card-container; /* optional */
}

4.2 Querying based on container size

@container (min-width: 400px) {
  .card { flex-direction: row; }
}

@container card-container (min-width: 600px) {
  .card__image { width: 40%; }
}

4.3 Real‑world responsive card component

<!-- Same Card component placed in different‑width containers -->
<div class="narrow-sidebar">
  <div class="card-wrapper">
    <article class="card">...</article>
  </div>
</div>

<div class="wide-main">
  <div class="card-wrapper">
    <article class="card">...</article>
  </div>
</div>

.card-wrapper { container-type: inline-size; }

/* Default vertical layout */
.card { display: flex; flex-direction: column; gap: 12px; }
.card__image { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; }

/* ≥480px → horizontal layout */
@container (min-width: 480px) {
  .card { flex-direction: row; align-items: flex-start; }
  .card__image { width: 160px; aspect-ratio: 4/3; flex-shrink: 0; }
}

/* ≥700px → larger image */
@container (min-width: 700px) {
  .card__image { width: 240px; }
}

4.4 Container units

@container (min-width: 300px) {
  .card__title {
    font-size: clamp(16px, 4cqi, 24px); /* cqi = container query inline size */
  }
}

5. :has() – parent selector

5.1 Basic selectors

.card:has(img) { padding-top: 0; }
.form-group:has(input:checked) { background: #f0f8ff; }
.field:has(.error-message) { border-color: red; }
.field:has(.error-message) label { color: red; }
section:has(+ section) { border-bottom: 1px solid #eee; }

5.2 Real‑world cases

<!-- Card with a checkbox -->
<div class="card">
  <input type="checkbox" id="check">
  <label for="check">Mark as read</label>
</div>

.card:has(input:checked) {
  opacity: 0.6;
  background: #f9f9f9;
}

.card:has(input:checked) label {
  text-decoration: line-through;
  color: #999;
}

.nav:has(.nav-item.active) { border-bottom: 2px solid var(--primary); }

5.3 Combining with media queries

@media (min-width: 1024px) {
  body:has(.sidebar) .main-content { margin-left: 240px; }
}

6. Native CSS Nesting

6.1 Basic syntax (supported by major browsers since 2023)

.card {
  background: white;
  border-radius: 8px;

  & .title { font-size: 18px; color: #333; }
  & .description { color: #666; line-height: 1.6; }
  &:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }

  @media (max-width: 768px) { padding: 12px; }
}

6.2 BEM + nesting

.button {
  padding: 8px 16px;
  border-radius: 6px;

  & .button__icon { margin-right: 6px; }
  &.button--primary { background: var(--primary); color: white; }
  &.button--sm { padding: 4px 10px; font-size: 12px; }

  &:hover { opacity: 0.9; }
  &:disabled { opacity: 0.5; cursor: not-allowed; }
}

7. :is() and :where() selectors

:is() – simplify complex selectors

/* Traditional */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }

/* Using :is() */
:is(h1, h2, h3, h4, h5, h6) a { color: inherit; }

.content :is(h2, h3, h4) { margin-top: 1.5em; }

:is(.card, .panel, .modal):is(:hover, :focus-within) { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }

:where() – zero‑specificity selector

:where(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(a) { text-decoration: none; color: inherit; }
:where(button) { border: none; background: none; cursor: pointer; font: inherit; }

8. Logical properties

Map physical directions to writing‑mode‑relative properties, enabling RTL support.

.element {
  /* Margin */
  margin-block-start: /* top */;
  margin-block-end:   /* bottom */;
  margin-inline-start: /* left */;
  margin-inline-end:   /* right */;
  margin-block: 16px;   /* top & bottom */
  margin-inline: 24px;  /* left & right */

  /* Padding */
  padding-block: 12px;
  padding-inline: 16px;

  /* Size */
  inline-size: 100%;   /* width */
  block-size: auto;    /* height */

  /* Position */
  inset-block-start: 0;
  inset-inline-start: 0;
  inset: 0; /* shorthand for all sides */

  /* Border */
  border-block: 1px solid #eee;
  border-inline-start: 3px solid var(--primary);
}

9. color-mix() function

:root { --primary: #0052d9; }

.button { background: var(--primary); }

.button:hover { background: color-mix(in srgb, var(--primary), black 10%); }

.button-light { background: color-mix(in srgb, var(--primary), white 80%); color: var(--primary); }

.gradient-bg {
  background: linear-gradient(
    to right,
    color-mix(in oklch, blue, purple 30%),
    color-mix(in oklch, purple, red 50%)
  );
}

10. CSS Subgrid

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.product-card {
  display: grid;
  grid-row: span 3;               /* occupies 3 rows */
  grid-template-rows: subgrid;   /* children follow parent rows */
  gap: 0;
}

.product-card__image       { align-self: start; }
.product-card__title        { align-self: start; }
.product-card__description  { align-self: start; }
.product-card__price        { align-self: end; }

11. View Transitions API

/* Enable view transitions for a multi‑page app */
@view-transition { navigation: auto; }

/* Custom slide‑in / slide‑out */
@keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slide-out { from { transform: translateX(0); } to { transform: translateX(-100%); } }

::view-transition-old(root) { animation: slide-out 0.3s ease forwards; }
::view-transition-new(root) { animation: slide-in 0.3s ease forwards; }

.hero-image { view-transition-name: hero; }

// SPA usage
document.startViewTransition(() => {
  // Update DOM
  updateContent();
});

12. @starting-style – entry animation

.dialog {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s, transform 0.3s, display 0.3s allow-discrete;

  @starting-style {
    opacity: 0;
    transform: scale(0.9);
  }
}

.dialog[open] { display: block; }

13. anchor() positioning – next‑gen pop‑up placement

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

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  top: anchor(bottom);   /* tooltip top aligns to anchor bottom */
  left: anchor(left);   /* tooltip left aligns to anchor left */
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}

14. Feature detection with @supports

@supports (display: grid) {
  .container { display: grid; grid-template-columns: repeat(3, 1fr); }
}

@supports not (display: grid) {
  .container { display: flex; flex-wrap: wrap; }
}

@supports (aspect-ratio: 1) { .square { aspect-ratio: 1; } }

@supports selector(:has(a)) { .parent:has(.active) { font-weight: bold; } }

15. Browser support (2026)

CSS Variables – Chrome 49+, Firefox 31+, Safari 9.1+ – ✅ Full support

Container Queries – Chrome 105+, Firefox 110+, Safari 16+ – ✅ Full support

:has() – Chrome 105+, Firefox 121+, Safari 15.4+ – ✅ Full support

CSS Nesting – Chrome 112+, Firefox 117+, Safari 17.2+ – ✅ Full support

@layer – Chrome 99+, Firefox 97+, Safari 15.4+ – ✅ Full support

color-mix() – Chrome 111+, Firefox 113+, Safari 16.2+ – ✅ Full support

View Transitions – Chrome 111+, Firefox 119+, Safari 18+ – ✅ Basic support

@starting-style – Chrome 117+, Firefox 129+, Safari 17.5+ – ✅ Basic support

CSS Anchor – Chrome 125+, Firefox 135+, Safari 18.2+ – ⚠️ Partial support

Subgrid – Chrome 117+, Firefox 71+, Safari 16+ – ✅ Full support