# modern-css.com

> Every old CSS hack next to its clean, modern replacement. The old way and the modern way, side by side.

modern-css.com is a reference site for web developers. It shows side-by-side comparisons of outdated CSS patterns and their modern native replacements, plus in-depth tutorials and a curated resource directory.

Full content (all 85 snippets with explanations and code): https://modern-css.com/llms-full.txt

## Content

Each comparison includes:
- The old approach (what developers used before)
- The modern approach (what native CSS supports now)
- A live interactive demo
- Browser support data with Baseline status (widely/newly/limited availability)
- MDN documentation links and caniuse.com links
- Polyfill links where available
- A plain-language explanation of how the modern approach works

Snippets can be filtered by Baseline availability status on the home and category pages.

## Topics covered

- Centering elements: absolute + transform vs grid place-items
- Parent selection: JavaScript closest() vs CSS :has()
- Color mixing: Sass mix() vs native color-mix()
- Responsive components: @media vs @container queries
- Selector nesting: Sass/Less vs native CSS nesting
- Scroll animations: IntersectionObserver vs animation-timeline
- Sticky headers: JavaScript scroll listeners vs position: sticky
- Aspect ratios: padding-top hack vs aspect-ratio property
- Spacing elements: margin hacks vs gap property
- Fluid typography: media query breakpoints vs clamp()
- Theme variables: Sass variables vs CSS custom properties
- Specificity control: !important vs @layer cascade layers
- Focus styles: :focus vs :focus-visible
- Selector grouping: repetition vs :is()
- Form controls: appearance: none rebuild vs accent-color
- Nested grids: duplicate tracks vs subgrid
- Grid areas: line numbers vs grid-template-areas
- Direction-aware layouts: left/right vs logical properties
- Low-specificity resets: tricks vs :where()
- Dark mode colors: duplicate values vs light-dark()
- Dark mode defaults: manual styles vs color-scheme
- Variable fonts: multiple files vs one variable font
- Font loading: FOIT vs font-display: swap
- Balanced headlines: manual breaks vs text-wrap: balance
- Scroll snapping: JS carousel vs scroll-snap
- Page transitions: JS framework vs View Transitions API
- Entry animations: JS timing vs @starting-style
- Display none animation: JS workarounds vs transition-behavior: allow-discrete
- Independent transforms: shorthand vs separate properties
- Typed custom properties: untyped vs @property
- Scoped styles: BEM naming vs @scope
- Tooltip positioning: Popper.js vs CSS anchor positioning
- Dropdown menus: JS toggles vs popover API
- Lazy rendering: IntersectionObserver vs content-visibility
- Positioning shorthand: four properties vs inset
- Drop caps: float hacks vs initial-letter
- Multiline truncation: JS vs line-clamp
- Color variants: Sass functions vs relative color syntax
- Wide gamut colors: sRGB vs oklch/display-p3
- Customizable selects: Select2/Choices.js vs appearance: base-select
- Hover tooltips: JS mouseenter/mouseleave vs popover=hint + interestfor
- Vertical text centering: padding hacks vs text-box trim
- Carousel navigation: Swiper.js vs ::scroll-button() + ::scroll-marker
- Staggered animations: nth-child hacks vs sibling-index()
- Fill available space: calc(100% - margins) vs stretch keyword
- Scroll spy: IntersectionObserver vs :target-current pseudo-class
- Responsive clip paths: SVG path() vs CSS shape() function
- Corner shapes: clip-path polygon hacks vs corner-shape property
- Reusable CSS logic: Sass functions vs native CSS @function
- Inline conditional styles: JS class toggling vs CSS if()
- Typed attribute values: JS dataset access vs advanced attr() with types
- Sticky/snapped styling: JS scroll events vs scroll-state() container queries
- Range style queries: multiple @container blocks vs range comparison syntax
- Height auto animation: JS scrollHeight measurement vs interpolate-size: allow-keywords
- Auto-growing textarea: JS oninput resize handler vs field-sizing: content
- Form validation styles: JS .touched class on blur vs :user-valid / :user-invalid
- Responsive images: background-image + background-size: cover vs object-fit: cover
- Scroll chaining: JS wheel/touchmove preventDefault vs overscroll-behavior: contain
- Layout shift from scrollbar: overflow-y: scroll or hardcoded padding vs scrollbar-gutter: stable
- Frosted glass: pseudo-element blurred background copy vs backdrop-filter
- Perceptually uniform colors: hex / HSL guess-and-check vs oklch()
- Readable text colors: hardcoded white/black per background vs contrast-color()
- Element scaling: transform: scale() + negative margin hacks vs zoom
- Path shapes: SVG clipPath or px-based path() vs CSS shape() function
- Text highlighting: innerHTML DOM mutation vs CSS Custom Highlight API

## Categories

- https://modern-css.com/category/layout/ — Layout comparisons
- https://modern-css.com/category/animation/ — Animation comparisons
- https://modern-css.com/category/color/ — Color comparisons
- https://modern-css.com/category/selector/ — Selector comparisons
- https://modern-css.com/category/typo/ — Typography comparisons
- https://modern-css.com/category/workflow/ — Workflow comparisons

## Articles

- https://modern-css.com/articles/build-a-styled-select-dropdown/ — Build a fully styled select dropdown with base-select
- https://modern-css.com/articles/build-a-css-only-carousel/ — Build an accessible carousel with only CSS
- https://modern-css.com/articles/build-a-tooltip-system/ — Build a tooltip system with popover hint and anchor positioning
- https://modern-css.com/articles/the-state-of-css-centering/ — A decision guide to centering in CSS across grid, flexbox, and newer methods
- https://modern-css.com/articles/why-css-animations-beat-javascript/ — Why CSS animations run smoother than JavaScript, and when JS still wins

## What's New in CSS

A year-by-year reference of modern CSS features shipping in browsers.

- https://modern-css.com/whats-new/ — Archive of all CSS features by year
- https://modern-css.com/whats-new-in-css-2025/ — What's New in CSS 2025 (16 features)
- https://modern-css.com/whats-new-in-css-2026/ — What's New in CSS 2026 (11 features)

### 2025 features

- Customizable Select (appearance: base-select)
- Invoker Commands (commandfor + command attributes)
- Dialog Light Dismiss (closedby attribute)
- popover=hint & Interest Invokers (interestfor attribute)
- Scroll-State Container Queries (scroll-state())
- Tree Counting Functions (sibling-index(), sibling-count())
- CSS Scroll Markers & Buttons (::scroll-button(), ::scroll-marker)
- text-box trim & edge (text-box: trim-both cap alphabetic)
- CSS if() Function (inline conditional values)
- CSS Custom Functions (@function rule)
- Advanced attr() Function (typed attribute values)
- shape() Function (responsive clip paths)
- stretch Sizing Keyword (fill available space)
- corner-shape Property (bevel, notch, scoop, squircle)
- Anchored Container Queries
- Nested View Transition Groups

### 2026 features

- CSS Mixins (@mixin and @apply) — https://drafts.csswg.org/css-mixins/
- Cross-Document View Transitions (MPA view transitions) — https://drafts.csswg.org/css-view-transitions-2/
- CSS Gap Decorations (column-rule/row-rule for grid) — https://drafts.csswg.org/css-gap-decorations/
- Reading Flow (keyboard/AT navigation for flex/grid) — https://drafts.csswg.org/css-display-4/#reading-flow
- Scroll-Driven Animations Interop (cross-browser baseline) — https://drafts.csswg.org/scroll-animations-1/
- Masonry Layout (grid-template-rows: masonry) — https://drafts.csswg.org/css-grid-3/
- Relative Color Syntax Interop (oklch from, color-mix baseline) — https://drafts.csswg.org/css-color-5/#relative-colors
- @starting-style Interop (entry animations baseline) — https://drafts.csswg.org/css-transitions-2/#defining-before-change-style
- CSS Custom Highlight API Improvements — https://drafts.csswg.org/css-highlight-api-1/
- contrast-color() Function (automatic readable text color) — https://drafts.csswg.org/css-color-6/#contrast-color
- Scoped Styles Interop (@scope) — https://drafts.csswg.org/css-cascade-6/#scoped-styles

## Pages

- https://modern-css.com/
- https://modern-css.com/resources/ — Curated CSS resources
- https://modern-css.com/ai/ — AI tools for modern CSS (rules generator and prompt library)
- https://modern-css.com/ai/css-rules/ — Generate an AGENTS.md or CLAUDE.md rules file for AI coding agents
- https://modern-css.com/ai/prompts/ — Copy-ready prompts that get AI agents to write modern CSS
- https://modern-css.com/whats-new/ — What's New in CSS archive
- https://modern-css.com/whats-new-in-css-2025/ — What's New in CSS 2025
- https://modern-css.com/whats-new-in-css-2026/ — What's New in CSS 2026
- https://modern-css.com/articles/ — Articles and tutorials
- https://modern-css.com/centering-elements-without-the-transform-hack/
- https://modern-css.com/centering-elements-with-flexbox/
- https://modern-css.com/centering-elements-with-auto-margins/
- https://modern-css.com/selecting-parent-elements-without-javascript/
- https://modern-css.com/mixing-colors-without-a-preprocessor/
- https://modern-css.com/responsive-components-without-media-queries/
- https://modern-css.com/nesting-selectors-without-sass-or-less/
- https://modern-css.com/scroll-linked-animations-without-a-library/
- https://modern-css.com/sticky-headers-without-javascript-scroll-listeners/
- https://modern-css.com/aspect-ratios-without-the-padding-hack/
- https://modern-css.com/spacing-elements-without-margin-hacks/
- https://modern-css.com/fluid-typography-without-media-queries/
- https://modern-css.com/theme-variables-without-a-preprocessor/
- https://modern-css.com/controlling-specificity-without-important/
- https://modern-css.com/focus-styles-without-annoying-mouse-users/
- https://modern-css.com/grouping-selectors-without-repetition/
- https://modern-css.com/styling-form-controls-without-rebuilding-them/
- https://modern-css.com/aligning-nested-grids-without-duplicating-tracks/
- https://modern-css.com/naming-grid-areas-without-line-numbers/
- https://modern-css.com/direction-aware-layouts-without-left-and-right/
- https://modern-css.com/low-specificity-resets-without-complicated-selectors/
- https://modern-css.com/dark-mode-colors-without-duplicating-values/
- https://modern-css.com/dark-mode-defaults-without-extra-css/
- https://modern-css.com/multiple-font-weights-without-multiple-files/
- https://modern-css.com/font-loading-without-invisible-text/
- https://modern-css.com/balanced-headlines-without-manual-line-breaks/
- https://modern-css.com/scroll-snapping-without-a-carousel-library/
- https://modern-css.com/page-transitions-without-a-framework/
- https://modern-css.com/entry-animations-without-javascript-timing/
- https://modern-css.com/animating-display-none-without-workarounds/
- https://modern-css.com/independent-transforms-without-the-shorthand/
- https://modern-css.com/typed-custom-properties-without-javascript/
- https://modern-css.com/scoped-styles-without-bem-naming/
- https://modern-css.com/tooltip-positioning-without-javascript/
- https://modern-css.com/dropdown-menus-without-javascript-toggles/
- https://modern-css.com/lazy-rendering-without-intersection-observer/
- https://modern-css.com/positioning-shorthand-without-four-properties/
- https://modern-css.com/drop-caps-without-float-hacks/
- https://modern-css.com/multiline-text-truncation-without-javascript/
- https://modern-css.com/color-variants-without-sass-functions/
- https://modern-css.com/vivid-colors-beyond-srgb/
- https://modern-css.com/customizable-selects-without-a-javascript-library/
- https://modern-css.com/hover-tooltips-without-javascript-events/
- https://modern-css.com/vertical-text-centering-without-padding-hacks/
- https://modern-css.com/carousel-navigation-without-a-javascript-library/
- https://modern-css.com/staggered-animations-without-nth-child-hacks/
- https://modern-css.com/filling-available-space-without-calc-workarounds/
- https://modern-css.com/scroll-spy-without-intersection-observer/
- https://modern-css.com/responsive-clip-paths-without-svg/
- https://modern-css.com/corner-shapes-beyond-rounded-borders/
- https://modern-css.com/reusable-css-logic-without-sass-mixins/
- https://modern-css.com/inline-conditional-styles-without-javascript/
- https://modern-css.com/typed-attribute-values-without-javascript/
- https://modern-css.com/sticky-snapped-styling-without-javascript/
- https://modern-css.com/auto-hiding-header-without-scroll-listeners/
- https://modern-css.com/scroll-triggered-animations-without-intersection-observer/
- https://modern-css.com/grid-dividers-without-borders-or-pseudo-elements/
- https://modern-css.com/full-width-without-horizontal-scrollbar-overflow/
- https://modern-css.com/sticky-rows-and-columns-without-javascript/
- https://modern-css.com/morphing-list-items-without-page-rerenders/
- https://modern-css.com/cjk-and-quote-spacing-without-manual-kerning/
- https://modern-css.com/range-style-queries-without-multiple-blocks/
- https://modern-css.com/smooth-height-auto-animations-without-javascript/
- https://modern-css.com/auto-growing-textarea-without-javascript/
- https://modern-css.com/form-validation-styles-without-javascript/
- https://modern-css.com/responsive-images-without-background-image-hack/
- https://modern-css.com/preventing-scroll-chaining-without-javascript/
- https://modern-css.com/preventing-layout-shift-from-scrollbar/
- https://modern-css.com/frosted-glass-effect-without-opacity-hacks/
- https://modern-css.com/perceptually-uniform-colors-with-oklch/
- https://modern-css.com/readable-text-without-manual-contrast-checks/
- https://modern-css.com/scaling-elements-without-transform-hacks/
- https://modern-css.com/path-shapes-without-svg-clip-paths/
- https://modern-css.com/text-highlighting-without-dom-manipulation/
- https://modern-css.com/z-index-isolation/

- https://modern-css.com/modal-dialogs-without-a-javascript-library/
- https://modern-css.com/dialog-light-dismiss-without-click-outside-listeners/
- https://modern-css.com/mobile-viewport-height-without-100vh-hack/
- https://modern-css.com/exclusive-accordions-without-javascript/
- https://modern-css.com/modal-controls-without-onclick-handlers/
- https://modern-css.com/custom-easing-without-cubic-bezier-guessing/
- https://modern-css.com/media-query-ranges-without-min-max-syntax/
- https://modern-css.com/reduced-motion-without-javascript-detection/
- https://modern-css.com/scrollbar-styling-without-webkit-pseudo-elements/
- https://modern-css.com/css-feature-detection-without-javascript/
- https://modern-css.com/accordion-without-javascript/
- https://modern-css.com/attr-driven-layouts-without-js-charts/
- https://modern-css.com/automatic-type-scale-without-manual-sizes/
- https://modern-css.com/lazy-load-images-without-javascript/
- https://modern-css.com/live-form-output-without-javascript-dom-writes/
- https://modern-css.com/mobile-keyboard-hints-without-javascript/
- https://modern-css.com/motion-path-animation-without-javascript/
- https://modern-css.com/native-autocomplete-without-javascript/
- https://modern-css.com/random-values-without-javascript/
- https://modern-css.com/video-player-states-without-javascript-events/
- https://modern-css.com/larger-touch-targets-without-changing-element-size/
- https://modern-css.com/grid-layout-without-extra-wrappers/
- https://modern-css.com/nth-child-without-counting-siblings/

## CSS Reference

Individual reference pages for CSS properties, functions, selectors, and types.

- https://modern-css.com/reference/color-mix/ — color-mix(): blend two colors in a given color space at runtime

## Contact

A project by Naeem Noor — https://naeemnur.com
Email: naeem@modern-css.com