原文
Updated for 2026
Stop writing CSS
like it's 2015.
Modern CSS code snippets, side by side with the old hacks they replace. Every technique you still Google has a clean, native replacement now.
Old
.child {position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Modern
.parent {display: grid;
place-items: center;
}
/* child needs nothing. */
All comparisons
56 snippets
Browser compatibility:
Workflow
Advanced
Range style queries without multiple blocks
Old
/* Multiple style() blocks */
@container style(--p: 51%) {}
@container style(--p: 52%) {}
/* ...for each value */
@container style(--p: 51%) {}
@container style(--p: 52%) {}
/* ...for each value */
Modern
@container style(
--progress > 50%
) {
.bar { ... }
}
see modern →
--progress > 50%
) {
.bar { ... }
}
Animation
Intermediate
Sticky & snapped element styling without JavaScript
Old
window.addEventListener(
'scroll', () => {
/* check position */
});
'scroll', () => {
/* check position */
});
Modern
@container scroll-state(
stuck: top
) {
.header { ... }
}
see modern →
stuck: top
) {
.header { ... }
}
Workflow
Intermediate
Typed attribute values without JavaScript
Old
// JS reading dataset
el.style.width =
el.dataset.pct + '%';
el.style.width =
el.dataset.pct + '%';
Modern
.bar {
width: attr(
data-pct type(
);
}
see modern →
width: attr(
data-pct type(
);
}
Workflow
Intermediate
Inline conditional styles without JavaScript
Old
// JavaScript toggling
el.classList.toggle(
'primary', isPrimary
);
el.classList.toggle(
'primary', isPrimary
);
Modern
.btn {
background: if(
style(--variant: primary):
blue; else: gray
);
}
see modern →
background: if(
style(--variant: primary):
blue; else: gray
);
}
Workflow
Intermediate
Reusable CSS logic without Sass mixins
Old
// Sass function
@function fluid($min, $max) {
@return clamp(...);
}
@function fluid($min, $max) {
@return clamp(...);
}
Modern
@function --fluid(
--min, --max
) {
@return clamp(...);
}
see modern →
--min, --max
) {
@return clamp(...);
}
Layout
Beginner
Corner shapes beyond rounded borders
Old
.card {
clip-path: polygon(
... /* 20+ points */
);
}
clip-path: polygon(
... /* 20+ points */
);
}
Modern
.card {
border-radius: 2em;
corner-shape: squircle;
}
see modern →
border-radius: 2em;
corner-shape: squircle;
}
Animation
Advanced
Responsive clip paths without SVG
Old
.shape {
clip-path: path(
'M0 200 L100 0...'
);
}
clip-path: path(
'M0 200 L100 0...'
);
}
Modern
.shape {
clip-path: shape(
from 0% 100%, ...
);
}
see modern →
clip-path: shape(
from 0% 100%, ...
);
}
Selector
Intermediate
Scroll spy without IntersectionObserver
Old
const observer = new
IntersectionObserver(cb);
/* 15+ lines of JS */
IntersectionObserver(cb);
/* 15+ lines of JS */
Modern
nav a:target-current {
color: var(--accent);
}
see modern →
color: var(--accent);
}
Layout
Beginner
Filling available space without calc workarounds
Old
.full {
width: calc(100% - 40px);
/* or width: 100% and overflow */
}
width: calc(100% - 40px);
/* or width: 100% and overflow */
}
Modern
.full {
width: stretch;
}
/* fills container, keeps margins */
see modern →
width: stretch;
}
/* fills container, keeps margins */
Animation
Intermediate
Staggered animations without nth-child hacks
Old
li:nth-child(1) { --i: 0; }
li:nth-child(2) { --i: 1; }
li:nth-child(3) { --i: 2; }
/* repeat for every item… */
li:nth-child(2) { --i: 1; }
li:nth-child(3) { --i: 2; }
/* repeat for every item… */
Modern
li {
transition-delay:
calc(0.1s * (sibling-index() - 1));
}
see modern →
transition-delay:
calc(0.1s * (sibling-index() - 1));
}
Layout
Advanced
Carousel navigation without a JavaScript library
Old
// Swiper.js or Slick carousel
new Swiper('.carousel', {
navigation: { /* … */ },
pagination: { /* … */ },
});
new Swiper('.carousel', {
navigation: { /* … */ },
pagination: { /* … */ },
});
Modern
.carousel::scroll-button(right) {
content: "➡";
}
.carousel li::scroll-marker {
content: '';
}
see modern →
content: "➡";
}
.carousel li::scroll-marker {
content: '';
}
Typography
Beginner
Vertical text centering without padding hacks
Old
.btn {
padding: 10px 20px;
/* looks off-center, tweak top/bottom */
padding-top: 8px; /* hack */
}
padding: 10px 20px;
/* looks off-center, tweak top/bottom */
padding-top: 8px; /* hack */
}
Modern
h1, button {
text-box: trim-both cap alphabetic;
}
/* true optical centering */
see modern →
text-box: trim-both cap alphabetic;
}
/* true optical centering */
Layout
Intermediate
Hover tooltips without JavaScript events
Old
// JS: mouseenter + mouseleave
btn.addEventListener('mouseenter',
() => showTooltip())
/* + focus, blur, positioning */
btn.addEventListener('mouseenter',
() => showTooltip())
/* + focus, blur, positioning */
Modern
interestfor="tip">Hover me
id="tip" popover=hint>
Tooltip content
Tooltip content
Layout
Beginner
Modal controls without onclick handlers
Old
onclick="
document.querySelector('#dlg')
.showModal()">Open
document.querySelector('#dlg')
.showModal()">Open
Modern
commandfor="dlg"
command="show-modal">Open
id="dlg">...
see modern →
command="show-modal">Open
Layout
Beginner
Dialog light dismiss without click-outside listeners
Old
// JS: listen for click on ::backdrop
dialog.addEventListener('click',
(e) => { /* check bounds */ })
dialog.addEventListener('click',
(e) => { /* check bounds */ })
Modern
closedby="any">
Click outside to close
/* no JS listeners */
see modern →
Click outside to close
/* no JS listeners */
Layout
Intermediate
Customizable selects without a JavaScript library
Old
// Select2 or Choices.js
new Choices('#my-select');
/* rebuilds entire DOM */
new Choices('#my-select');
/* rebuilds entire DOM */
Modern
select,
select ::picker(select) {
appearance: base-select;
}
see modern →
select ::picker(select) {
appearance: base-select;
}
Color
Intermediate
Vivid colors beyond sRGB
Old
.hero {
color: rgb(200, 80, 50);
}
/* sRGB only, washed on P3 */
color: rgb(200, 80, 50);
}
/* sRGB only, washed on P3 */
Modern
.hero {
color: oklch(0.7 0.25 29);
}
/* or color(display-p3 1 0.2 0.1) */
see modern →
color: oklch(0.7 0.25 29);
}
/* or color(display-p3 1 0.2 0.1) */
Color
Advanced
Color variants without Sass functions
Old
/* Sass: lighten($brand, 20%), darken($brand, 10%) */
.btn { background: #e0e0e0; }
.btn { background: #e0e0e0; }
Modern
.btn {
background: oklch(from var(--brand) calc(l + 0.2) c h);
}
see modern →
background: oklch(from var(--brand) calc(l + 0.2) c h);
}
Typography
Beginner
Multiline text truncation without JavaScript
Old
/* JS: slice text by chars/words, add "..." */
.card-title { overflow: hidden; }
.card-title { overflow: hidden; }
Modern
.card-title {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
}
see modern →
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
}
Typography
Beginner
Drop caps without float hacks
Old
.drop-cap::first-letter {
float: left;
font-size: 3em; line-height: 1;
}
float: left;
font-size: 3em; line-height: 1;
}
Modern
.drop-cap::first-letter {
initial-letter: 3;
}
see modern →
initial-letter: 3;
}
Layout
Beginner
Positioning shorthand without four properties
Old
.overlay {
top: 0; right: 0;
bottom: 0; left: 0;
}
top: 0; right: 0;
bottom: 0; left: 0;
}
Modern
.overlay {
position: absolute;
inset: 0;
}
see modern →
position: absolute;
inset: 0;
}
Workflow
Intermediate
Lazy rendering without IntersectionObserver
Old
// JS IntersectionObserver
new IntersectionObserver(
(entries) => { /* render */ }
).observe(el);
new IntersectionObserver(
(entries) => { /* render */ }
).observe(el);
Modern
.section {
content-visibility: auto;
contain-intrinsic-size: auto 500px;
}
see modern →
content-visibility: auto;
contain-intrinsic-size: auto 500px;
}
Layout
Beginner
Dropdown menus without JavaScript toggles
Old
.menu { display: none; }
.menu.open { display: block; }
/* + JS: click, clickOutside, ESC, aria */
.menu.open { display: block; }
/* + JS: click, clickOutside, ESC, aria */
Modern
button[popovertarget=menu] { }
#menu[popover] {
position: absolute;
}
see modern →
#menu[popover] {
position: absolute;
}
Layout
Advanced
Tooltip positioning without JavaScript
Old
/* Popper.js / Floating UI: compute rect,
position: fixed, update on scroll */
.tooltip { position: fixed; }
position: fixed, update on scroll */
.tooltip { position: fixed; }
Modern
.trigger { anchor-name: --tip; }
.tooltip {
position-anchor: --tip;
top: anchor(bottom);
}
see modern →
.tooltip {
position-anchor: --tip;
top: anchor(bottom);
}
Workflow
Advanced
Scoped styles without BEM naming
Old
// BEM: .card__title, .card__body
.card__title { … }
.card__body { … }
// or CSS Modules / styled-components */
.card__title { … }
.card__body { … }
// or CSS Modules / styled-components */
Modern
@scope (.card) {
.title { font-size: 1.25rem; }
.body { color: #444; }
}
/* .title only inside .card */
see modern →
.title { font-size: 1.25rem; }
.body { color: #444; }
}
/* .title only inside .card */
Workflow
Advanced
Typed custom properties without JavaScript
Old
// --hue was a string, no animation
:root { --hue: 0; }
hsl(var(--hue), …) /* no interpolation */
:root { --hue: 0; }
hsl(var(--hue), …) /* no interpolation */
Modern
@property --hue {
syntax: "" ;
inherits: false;
initial-value: 0deg;
}
/* animatable, validated */
see modern →
syntax: "
inherits: false;
initial-value: 0deg;
}
/* animatable, validated */
Animation
Beginner
Independent transforms without the shorthand
Old
.icon { transform: translateX(10px) rotate(45deg) scale(1.2); }
/* change one = rewrite all */
/* change one = rewrite all */
Modern
.icon {
translate: 10px 0;
rotate: 45deg;
scale: 1.2;
}
/* animate any one without touching the rest */
see modern →
translate: 10px 0;
rotate: 45deg;
scale: 1.2;
}
/* animate any one without touching the rest */
Animation
Intermediate
Animating display none without workarounds
Old
// wait for transitionend then display:none
el.addEventListener('transitionend', …)
visibility + opacity + pointer-events
el.addEventListener('transitionend', …)
visibility + opacity + pointer-events
Modern
.panel { transition: opacity .2s, overlay .2s;
transition-behavior: allow-discrete; }
.panel.hidden { opacity: 0; display: none; }
/* no JS wait or visibility hack */
see modern →
transition-behavior: allow-discrete; }
.panel.hidden { opacity: 0; display: none; }
/* no JS wait or visibility hack */
Animation
Intermediate
Entry animations without JavaScript timing
Old
// add class after paint
requestAnimationFrame(() => {
el.classList.add('visible');
});
requestAnimationFrame(() => {
el.classList.add('visible');
});
Modern
.card { transition: opacity .3s, transform .3s; }
.card { @starting-style { opacity: 0; transform: translateY(10px); } }
/* no rAF/setTimeout */
see modern →
.card { @starting-style { opacity: 0; transform: translateY(10px); } }
/* no rAF/setTimeout */
Animation
Advanced
Page transitions without a framework
Old
// Barba.js or React Transition Group
Barba.init({ … })
transition hooks + duration state
Barba.init({ … })
transition hooks + duration state
Modern
document.startViewTransition(() => updateDOM());
.hero { view-transition-name: hero; }
/* no Barba, no React TG */
see modern →
.hero { view-transition-name: hero; }
/* no Barba, no React TG */
Layout
Intermediate
Scroll snapping without a carousel library
Old
// Slick, Swiper, or scroll/touch JS
$('.carousel').slick({ … })
touchstart / scroll handlers
$('.carousel').slick({ … })
touchstart / scroll handlers
Modern
.carousel { scroll-snap-type: x mandatory; }
.carousel > * { scroll-snap-align: start; }
/* no lib, no touch handlers */
see modern →
.carousel > * { scroll-snap-align: start; }
/* no lib, no touch handlers */
Typography
Beginner
Balanced headlines without manual line breaks
Old
// manual
or Balance-Text.js
h1 { text-align: center; }
.balance-text /* JS lib */
or Balance-Text.js
h1 { text-align: center; }
.balance-text /* JS lib */
Modern
h1, h2 {
text-wrap: balance;
}
/* no br or JS */
see modern →
text-wrap: balance;
}
/* no br or JS */
Typography
Beginner
Font loading without invisible text
Old
@font-face { ... }
/* Default: invisible text until load */
/* Default: invisible text until load */
Modern
@font-face {
font-family: "MyFont";
font-display: swap;
}
see modern →
font-family: "MyFont";
font-display: swap;
}
Typography
Intermediate
Multiple font weights without multiple files
Old
@font-face { font-weight: 400; }
@font-face { font-weight: 700; }
/* 4+ files */
@font-face { font-weight: 700; }
/* 4+ files */
Modern
@font-face {
font-family: "MyVar";
src: url("MyVar.woff2");
font-weight: 100 900;
}
see modern →
font-family: "MyVar";
src: url("MyVar.woff2");
font-weight: 100 900;
}
Workflow
Beginner
Dark mode defaults without extra CSS
Old
@media (prefers-color-scheme: dark) {
input, select, textarea { ... }
}
input, select, textarea { ... }
}
Modern
:root {
color-scheme: light dark;
}
see modern →
color-scheme: light dark;
}
Color
Intermediate
Dark mode colors without duplicating values
Old
@media (prefers-color-scheme: dark) {
color: #eee;
}
color: #eee;
}
Modern
color: light-dark(#111, #eee);
color-scheme: light dark;
see modern →
color-scheme: light dark;
Selector
Intermediate
Low-specificity resets without complicated selectors
Old
.reset ul, .reset ol { ... }
/* or (0,0,1) specificity, still wins */
/* or (0,0,1) specificity, still wins */
Modern
:where(ul, ol) {
margin: 0;
padding-inline-start: 1.5rem;
}
see modern →
margin: 0;
padding-inline-start: 1.5rem;
}
Layout
Intermediate
Direction-aware layouts without left and right
Old
margin-left: 1rem;
padding-right: 1rem;
[dir="rtl"] .box { margin-right: ... }
padding-right: 1rem;
[dir="rtl"] .box { margin-right: ... }
Modern
margin-inline-start: 1rem;
padding-inline-end: 1rem;
border-block-start: 1px solid;
see modern →
padding-inline-end: 1rem;
border-block-start: 1px solid;
Layout
Beginner
Naming grid areas without line numbers
Old
float: left; /* clearfix, margins */
grid-column: 1 / 3;
grid-row: 2;
grid-column: 1 / 3;
grid-row: 2;
Modern
.layout {
display: grid;
grid-template-areas: "header header" "sidebar main" "footer footer";
}
see modern →
display: grid;
grid-template-areas: "header header" "sidebar main" "footer footer";
}
Layout
Advanced
Aligning nested grids without duplicating tracks
Old
.child-grid {
grid-template-columns: 1fr 1fr 1fr;
/* duplicate parent tracks */
}
grid-template-columns: 1fr 1fr 1fr;
/* duplicate parent tracks */
}
Modern
.child-grid {
display: grid;
grid-template-columns: subgrid;
}
see modern →
display: grid;
grid-template-columns: subgrid;
}
Layout
Intermediate
Modal dialogs without a JavaScript library
Old
.overlay { position: fixed; z-index: 999; }
/* + JS: open/close, ESC, focus trap */
/* + JS: open/close, ESC, focus trap */
Modern
dialog {
padding: 1rem;
}
dialog::backdrop { background: rgb(0 0 0 / .5); }
see modern →
padding: 1rem;
}
dialog::backdrop { background: rgb(0 0 0 / .5); }
Color
Beginner
Styling form controls without rebuilding them
Old
appearance: none;
// + 20+ lines of custom box/border/background
// + 20+ lines of custom box/border/background
Modern
input[type="checkbox"],
input[type="radio"] {
accent-color: #7c3aed;
}
see modern →
input[type="radio"] {
accent-color: #7c3aed;
}
Selector
Beginner
Grouping selectors without repetition
Old
.card h1, .card h2, .card h3, .card h4 {
margin-bottom: 0.5em;
}
margin-bottom: 0.5em;
}
Modern
.card :is(h1, h2, h3, h4) {
margin-bottom: 0.5em;
}
see modern →
margin-bottom: 0.5em;
}
Selector
Beginner
Focus styles without annoying mouse users
Old
:focus { outline: 2px solid blue; }
// Shows on mouse click too, or people remove it (a11y fail)
// Shows on mouse click too, or people remove it (a11y fail)
Modern
:focus-visible {
outline: 2px solid var(--focus-color);
}
see modern →
outline: 2px solid var(--focus-color);
}
Workflow
Intermediate
Controlling specificity without !important
Old
.card .title { ... }
.page .card .title { ... }
.page .card .title.special { color: red !important; }
.page .card .title { ... }
.page .card .title.special { color: red !important; }
Modern
@layer base, components, utilities;
@layer utilities { .mt-4 { margin-top: 1rem; } }
see modern →
@layer utilities { .mt-4 { margin-top: 1rem; } }
Workflow
Beginner
Theme variables without a preprocessor
Old
// Sass: $primary: #7c3aed;
// Compiles to static #7c3aed
.btn { background: $primary; }
// Compiles to static #7c3aed
.btn { background: $primary; }
Modern
:root {
--primary: #7c3aed;
}
.btn { background: var(--primary); }
see modern →
--primary: #7c3aed;
}
.btn { background: var(--primary); }
Typography
Intermediate
Fluid typography without media queries
Old
h1 { font-size: 1rem; }
@media (min-width: 600px) { h1 { font-size: 1.5rem; } }
@media (min-width: 900px) { h1 { font-size: 2rem; } }
@media (min-width: 600px) { h1 { font-size: 1.5rem; } }
@media (min-width: 900px) { h1 { font-size: 2rem; } }
Modern
h1 {
font-size: clamp(1rem, 2.5vw, 2rem);
}
see modern →
font-size: clamp(1rem, 2.5vw, 2rem);
}
Layout
Beginner
Spacing elements without margin hacks
Old
.grid > * { margin-right: 16px; }
.grid > *:last-child { margin-right: 0; }
.grid > *:last-child { margin-right: 0; }
Modern
.grid {
display: flex;
gap: 16px;
}
see modern →
display: flex;
gap: 16px;
}
Layout
Beginner
Aspect ratios without the padding hack
Old
.wrapper { padding-top: 56.25%; position: relative; }
.inner { position: absolute; inset: 0; }
.inner { position: absolute; inset: 0; }
Modern
.video-wrapper {
aspect-ratio: 16 / 9;
}
see modern →
aspect-ratio: 16 / 9;
}
Layout
Beginner
Sticky headers without JavaScript scroll listeners
Old
// JS: scroll listener + getBoundingClientRect
// then add/remove .fixed class
.header.fixed { position: fixed; }
// then add/remove .fixed class
.header.fixed { position: fixed; }
Modern
.header {
position: sticky;
top: 0;
}
see modern →
position: sticky;
top: 0;
}
Animation
Advanced
Scroll-linked animations without a library
Old
// JS + IntersectionObserver
observer.observe(el)
el.style.opacity = …
observer.observe(el)
el.style.opacity = …
Modern
animation-timeline: view();
animation-range: entry;
/* pure CSS, GPU-accelerated */
see modern →
animation-range: entry;
/* pure CSS, GPU-accelerated */
Workflow
Beginner
Nesting selectors without Sass or Less
Old
// requires Sass compiler
.nav {
& a { color: #888; }
}
.nav {
& a { color: #888; }
}
Modern
.nav {
& a { color: #888; }
}
/* plain .css, no build */
see modern →
& a { color: #888; }
}
/* plain .css, no build */
Layout
Intermediate
Responsive components without media queries
Old
@media (max-width: 768px) {
.card { … }
}
/* viewport, not container */
.card { … }
}
/* viewport, not container */
Modern
@container (width < 400px) {
.card { flex-direction: column; }
}
see modern →
.card { flex-direction: column; }
}
Colors
Intermediate
Mixing colors without a preprocessor
Old
// Sass required
$blend: mix(
$blue, $pink, 60%);
$blend: mix(
$blue, $pink, 60%);
Modern
background: color-mix(
in oklch, #3b82f6,
#ec4899);
see modern →
in oklch, #3b82f6,
#ec4899);
Selectors
Intermediate
Selecting parent elements without JavaScript
Old
// JavaScript required
el.closest('.parent')
.classList.add(…)
el.closest('.parent')
.classList.add(…)
Modern
.card:has(img) {
grid-template: auto 1fr;
}
see modern →
grid-template: auto 1fr;
}
Layout
Beginner
Centering elements without the transform hack
Old
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
top: 50%; left: 50%;
transform: translate(-50%,-50%);
Modern
.parent {
display: grid;
place-items: center;
}
see modern →
display: grid;
place-items: center;
}