CSS in 2025 has reached unprecedented levels of sophistication, offering developers native solutions to problems that previously required JavaScript or complex workarounds. These features are not just theoretical—they’re production-ready and transforming how we build modern web applications.
1. CSS Nesting (Native)
After years of relying on preprocessors, CSS now supports native nesting, making stylesheets more organized and maintainable.
.navigation {
background: #1a1a1a;
padding: 1rem;
& .nav-list {
display: flex;
gap: 2rem;
margin: 0;
& .nav-item {
list-style: none;
& a {
color: white;
text-decoration: none;
transition: color 0.2s ease;
&:hover {
color: #64b5f6;
}
&.active {
font-weight: bold;
color: #2196f3;
}
}
}
}
@media (width < 768px) {
& .nav-list {
flex-direction: column;
gap: 1rem;
}
}
}Why it matters: Eliminates the need for Sass/Less for basic nesting, reduces build complexity, and improves code readability.
2. View Transitions API
Create smooth page transitions without JavaScript frameworks, enabling app-like experiences with pure CSS.
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: slide-out 0.3s ease-out;
}
::view-transition-new(root) {
animation: slide-in 0.3s ease-in;
}
@keyframes slide-out {
to {
transform: translateX(-100%);
}
}
@keyframes slide-in {
from {
transform: translateX(100%);
}
}
/* Custom transitions for specific elements */
.page-header {
view-transition-name: header;
}
::view-transition-old(header) {
animation: fade-scale-out 0.4s ease;
}
::view-transition-new(header) {
animation: fade-scale-in 0.4s ease;
}
@keyframes fade-scale-out {
to {
opacity: 0;
transform: scale(0.9);
}
}
@keyframes fade-scale-in {
from {
opacity: 0;
transform: scale(1.1);
}
}Why it matters: Creates seamless navigation experiences that rival native apps, all with declarative CSS.
3. Anchor Positioning
Position elements relative to other elements anywhere on the page, solving complex layout challenges elegantly.
.tooltip-anchor {
anchor-name: --my-tooltip;
}
.tooltip {
position: absolute;
position-anchor: --my-tooltip;
position-area: top;
margin-bottom: 8px;
background: #2d2d2d;
color: white;
padding: 0.5rem 1rem;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s ease;
&::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #2d2d2d;
}
}
.tooltip-anchor:hover + .tooltip {
opacity: 1;
}
/* Complex positioning example */
.dropdown-trigger {
anchor-name: --dropdown;
}
.dropdown-menu {
position: absolute;
position-anchor: --dropdown;
position-area: bottom start;
margin-top: 4px;
min-width: anchor-size(width);
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
@media (width < 600px) {
position-area: bottom span-all;
left: 1rem;
right: 1rem;
min-width: auto;
}
}Why it matters: Eliminates JavaScript positioning calculations and creates robust, responsive positioning systems.
4. Advanced Subgrid
Subgrid has matured, allowing nested grids to participate in their parent’s grid structure seamlessly.
.article-layout {
display: grid;
grid-template-columns: 1fr 300px;
grid-template-rows: auto 1fr auto;
gap: 2rem;
min-height: 100vh;
}
.main-content {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
grid-column: 1 / -1;
grid-row: 1 / -1;
}
.article-header {
grid-column: 1 / 2;
grid-row: 1;
}
.article-body {
grid-column: 1 / 2;
grid-row: 2;
display: grid;
grid-template-columns: subgrid;
gap: inherit;
}
.sidebar {
grid-column: 2 / 3;
grid-row: 1 / 3;
background: #f8f9fa;
padding: 1.5rem;
}
.article-footer {
grid-column: 1 / -1;
grid-row: 3;
border-top: 1px solid #e0e0e0;
padding-top: 2rem;
}
/* Responsive subgrid */
@container (width < 1024px) {
.article-layout {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto;
}
.sidebar {
grid-column: 1;
grid-row: 2;
}
.article-body {
grid-row: 3;
}
}Why it matters: Creates sophisticated layouts where nested components align perfectly with parent grids.
5. CSS Scope and Layers
Manage CSS specificity and component isolation with unprecedented control.
/* Define cascade layers */
@layer reset, components, utilities, overrides;
@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
}
}
@layer components {
.button {
background: #2196f3;
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background: #1976d2;
transform: translateY(-1px);
}
&.secondary {
background: #6c757d;
&:hover {
background: #5a6268;
}
}
}
.card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s ease;
&:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
}
}
@layer utilities {
.text-center {
text-align: center;
}
.mb-4 {
margin-bottom: 2rem;
}
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
}
/* Scoped styles */
@scope (.theme-dark) {
.card {
background: #2d2d2d;
color: white;
}
.button {
background: #64b5f6;
&:hover {
background: #42a5f5;
}
}
}Why it matters: Provides fine-grained control over CSS specificity and enables true component-based styling.
6. Dynamic Viewport Units
New viewport units that account for mobile browser UI changes and dynamic content.
.hero-section {
/* Uses the large viewport when browser UI is hidden */
height: 100lvh;
/* Falls back to stable viewport for browsers without support */
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.mobile-navigation {
position: fixed;
bottom: 0;
left: 0;
right: 0;
/* Adjusts to small viewport when browser UI is visible */
height: calc(60px + env(keyboard-inset-height, 0px));
background: white;
border-top: 1px solid #e0e0e0;
transform: translateY(0);
transition: transform 0.3s ease;
}
.fullscreen-modal {
width: 100vw;
height: 100dvh; /* Dynamic viewport height */
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
}
/* Container queries with new units */
.responsive-card {
container-type: inline-size;
width: clamp(300px, 50vw, 600px);
height: clamp(200px, 25svh, 400px); /* Small viewport height */
}
@container (height > 500px) {
.card-content {
padding: 2rem;
font-size: 1.125rem;
}
}Why it matters: Solves mobile viewport issues and creates truly responsive designs that adapt to browser UI changes.
7. Advanced Color Functions and Spaces
CSS now supports modern color spaces and powerful color manipulation functions.
:root {
/* Using modern color spaces */
--primary: oklch(70% 0.15 250);
--secondary: oklch(80% 0.12 120);
--accent: color(display-p3 0.2 0.8 0.9);
/* Dynamic color mixing */
--hover-primary: color-mix(in oklch, var(--primary), white 20%);
--dark-primary: color-mix(in oklch, var(--primary), black 30%);
}
.button {
background: var(--primary);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s ease;
&:hover {
background: var(--hover-primary);
}
&:active {
background: var(--dark-primary);
}
}
/* Relative color syntax */
.theme-variations {
--base-color: #3498db;
/* Create variations from base color */
--light-variant: color-mix(in srgb, var(--base-color), white 40%);
--dark-variant: color-mix(in srgb, var(--base-color), black 20%);
--saturated: color-mix(in oklch, var(--base-color), oklch(70% 0.3 240) 50%);
}
/* Gradient with color-mix */
.dynamic-gradient {
background: linear-gradient(
45deg,
var(--primary),
color-mix(in oklch, var(--primary), var(--secondary) 60%),
var(--secondary)
);
}
/* High dynamic range colors */
@media (color-gamut: p3) {
:root {
--vibrant-blue: color(display-p3 0 0.5 1);
--vibrant-green: color(display-p3 0 1 0.3);
}
}Why it matters: Enables more precise color control, better accessibility, and support for modern display technologies.
8. CSS Conditional Rules (@when/@else)
Write conditional CSS logic directly in stylesheets without media queries.
/* Feature-based conditional styling */
@when supports(anchor-name: --test) {
.tooltip {
position: absolute;
position-anchor: --tooltip-anchor;
position-area: top;
}
} @else {
.tooltip {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
}
}
/* Preference-based conditionals */
@when media(prefers-color-scheme: dark) and supports(color-mix(in oklch, red, blue)) {
:root {
--surface: color-mix(in oklch, #1a1a1a, #2d2d2d 20%);
--on-surface: oklch(90% 0.02 270);
}
} @else when media(prefers-color-scheme: dark) {
:root {
--surface: #1a1a1a;
--on-surface: #ffffff;
}
} @else {
:root {
--surface: #ffffff;
--on-surface: #1a1a1a;
}
}
/* Container size conditionals */
@when container(width >= 600px) and supports(subgrid) {
.card-grid {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}
} @else {
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
}Why it matters: Reduces the need for multiple CSS files and enables more sophisticated feature detection.
9. Enhanced Math Functions
Perform complex calculations directly in CSS with improved mathematical functions.
.responsive-layout {
/* Advanced calculations */
--base-size: 16px;
--scale-ratio: 1.25;
--container-width: 1200px;
/* Exponential scaling */
font-size: calc(var(--base-size) * pow(var(--scale-ratio), 2));
/* Dynamic spacing based on container size */
padding: calc(
clamp(1rem, 3vw, 2rem) * sqrt(min(100vw, var(--container-width)) / var(--container-width))
);
/* Trigonometric functions for animations */
--angle: 45deg;
transform: rotate(var(--angle)) translateX(calc(cos(var(--angle)) * 100px))
translateY(calc(sin(var(--angle)) * 100px));
}
.circular-progress {
--progress: 0.7; /* 70% */
--circumference: calc(2 * pi * 40px);
stroke-dasharray: var(--circumference);
stroke-dashoffset: calc(var(--circumference) * (1 - var(--progress)));
transition: stroke-dashoffset 0.5s ease;
}
/* Complex responsive grid */
.adaptive-grid {
--min-item-width: 250px;
--gap: 1rem;
--available-width: calc(100vw - 2rem);
--items-per-row: max(
1,
floor(var(--available-width) / (var(--min-item-width) + var(--gap)))
);
display: grid;
grid-template-columns: repeat(var(--items-per-row), 1fr);
gap: var(--gap);
padding: 1rem;
}Why it matters: Eliminates the need for JavaScript calculations and creates more dynamic, mathematical layouts.
10. Modern Pseudo-selectors and State Queries
New pseudo-selectors that provide powerful state-based styling capabilities.
/* User preference pseudo-selectors */
@media (prefers-reduced-motion: no-preference) {
.animate-on-scroll {
animation: slide-in 0.6s ease;
&:not(:user-invalid) {
animation-delay: calc(var(--index) * 100ms);
}
}
}
/* Form state selectors */
.form-field {
input {
border: 2px solid #e0e0e0;
border-radius: 6px;
padding: 0.75rem;
transition: all 0.2s ease;
&:user-valid {
border-color: #4caf50;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234caf50"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1rem;
}
&:user-invalid {
border-color: #f44336;
background-color: #fff5f5;
}
&:placeholder-shown {
background-color: #f8f9fa;
}
}
/* Style parent based on input state */
&:has(input:user-invalid) .field-label {
color: #f44336;
}
&:has(input:user-valid) .field-label {
color: #4caf50;
}
}
/* Advanced interaction states */
.interactive-card {
transition: all 0.2s ease;
&:hover:not(:active) {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
&:focus-visible {
outline: 2px solid #2196f3;
outline-offset: 2px;
}
/* Multi-condition selectors */
&:is(:hover, :focus-visible):not(:active) .card-title {
color: #2196f3;
}
}
/* Modal and dialog states */
dialog {
&[open] {
animation: modal-appear 0.3s ease;
}
&:not([open]) {
display: none;
}
&::backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
}Why it matters: Provides more precise control over element states and reduces JavaScript dependencies for interactive features.
Putting It All Together
These features work best when combined. Here’s a modern component that showcases multiple 2025 CSS capabilities:
@layer components {
.modern-card {
container-type: inline-size;
anchor-name: --card-anchor;
background: var(--surface);
border-radius: 12px;
padding: clamp(1rem, 3cqw, 2rem);
transition: all 0.3s ease;
view-transition-name: card;
&:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px color-mix(in oklch, #000000, transparent 85%);
}
@container (width >= 400px) {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1rem;
align-items: center;
}
.card-actions {
position: absolute;
position-anchor: --card-anchor;
position-area: top end;
margin: 0.5rem;
opacity: 0;
transition: opacity 0.2s ease;
}
&:is(:hover, :focus-within) .card-actions {
opacity: 1;
}
&:has(.priority-high) {
border-left: 4px solid oklch(60% 0.2 0);
}
}
}Browser Support and Implementation
Most of these features have excellent modern browser support:
- Widely supported: Nesting, Subgrid, Advanced Math Functions
- Good support: View Transitions, Anchor Positioning, Dynamic Viewport Units
- Emerging: CSS Scope, @when/@else, Some advanced color functions
Always check MDN Web Docs for the latest compatibility information and use progressive enhancement strategies.
Conclusion
CSS in 2025 has evolved into a sophisticated, powerful language that rivals traditional programming languages in many aspects. These features enable:
- Reduced JavaScript dependencies for many UI interactions
- More maintainable and scalable stylesheets
- Better performance through native browser optimizations
- Enhanced user experiences with smooth transitions and responsive designs
- Improved developer productivity with less boilerplate code
Start experimenting with these features in your projects. Begin with CSS nesting and custom properties if you haven’t already, then gradually introduce view transitions and anchor positioning for more dynamic interfaces.
The future of CSS is incredibly bright, and mastering these features will keep you at the forefront of modern web development. Remember to always consider progressive enhancement and provide fallbacks for older browsers when necessary.