Modern CSS Techniques Every Developer Should Know in 2026
Explore the latest CSS features including container queries, :has() selector, cascade layers, and subgrid. Level up your styling skills with these modern techniques.
Modern CSS Techniques Every Developer Should Know in 2026
CSS has evolved dramatically in recent years. Let's explore the most impactful features that are now widely supported.
Container Queries
Container queries allow you to style elements based on their container's size, not just the viewport:
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 200px 1fr;
gap: 1rem;
}
}
@container card (min-width: 600px) {
.card {
grid-template-columns: 300px 1fr;
}
}
The :has() Selector
The parent selector we've been waiting for:
/* Style cards that have images */
.card:has(img) {
padding-top: 0;
}
/* Style forms with invalid inputs */
form:has(:invalid) .submit-btn {
opacity: 0.5;
pointer-events: none;
}
/* Style labels for required inputs */
label:has(+ input:required)::after {
content: " *";
color: red;
}
Cascade Layers
Control the specificity cascade with @layer:
@layer reset, base, components, utilities;
@layer reset {
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
@layer base {
h1 { font-size: 2rem; }
p { line-height: 1.6; }
}
@layer components {
.btn {
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
}
}
@layer utilities {
.mt-4 { margin-top: 1rem; }
.text-center { text-align: center; }
}
CSS Subgrid
Create nested grids that align with parent grids:
.page-layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 2rem;
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}
View Transitions API
Smooth page transitions with CSS:
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.3s;
}
::view-transition-old(root) {
animation: fade-out 0.3s ease-out;
}
::view-transition-new(root) {
animation: fade-in 0.3s ease-in;
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
Logical Properties
Write direction-agnostic CSS:
/* Instead of */
.card {
margin-left: 1rem;
margin-right: 1rem;
padding-top: 2rem;
padding-bottom: 2rem;
}
/* Use */
.card {
margin-inline: 1rem;
padding-block: 2rem;
}
Color Functions
Modern color manipulation:
:root {
--brand: oklch(65% 0.15 250);
--brand-light: oklch(from var(--brand) calc(l + 20%) c h);
--brand-dark: oklch(from var(--brand) calc(l - 20%) c h);
}
.button {
background: var(--brand);
border-color: color-mix(in oklch, var(--brand), black 20%);
}
.button:hover {
background: var(--brand-light);
}
Conclusion
These modern CSS features enable more maintainable and powerful stylesheets. Start using them today to write better CSS!
Want to modernize your frontend? Get in touch with our team.
Ananas Studio
Software Development Team
Building modern software solutions at Ananas Studio. We specialize in React, Next.js, and scalable architectures.
