Top 10 New CSS Features in 2024 and Their Practical Use Cases

CSS continues to evolve with new features that speed up development, simplify code, and add powerful capabilities. Thanks to the latest 2024 browser updates, these features are supported across all major rendering engines.

1. Scrollbar‑Gutter and Scrollbar‑Color

When a scrollbar appears, layout can shift. scrollbar-gutter reserves space for the scrollbar before scrolling starts, preventing layout jumps. scrollbar-color allows custom coloring of the scrollbar track and thumb.

.scrollable {\n  scrollbar-gutter: stable both-edges;\n}\n\n.scrollable {\n  scrollbar-color: #444 #ccc;\n}

scrollbar-gutter ensures stable layout by reserving scrollbar space.

scrollbar-color lets you style scrollbars for design consistency, especially in dark or themed UIs.

2. ::target-text

The pseudo‑element highlights text reached via internal links (e.g., anchor clicks).

::target-text {\n  background: yellow;\n  color: black;\n}

Highlights anchored text so users can instantly see the target location in long documents.

3. Ruby Layout (ruby‑align and ruby‑position)

Important for East Asian typography, these properties control the placement of ruby annotations relative to the main text.

ruby {\n  ruby-align: center;\n  ruby-position: over;\n}

Precise control of ruby text placement for East Asian scripts.

Useful for inline annotations in educational or reference material.

4. Relative Color Syntax and light‑dark()

Modern color handling lets you adjust brightness or saturation relative to a base color. light-dark() simplifies switching between light and dark values.

.element {\n  background: light-dark(#ffffff, #000000);\n}

You can also use <color-interpolation-method> for smoother gradients.

Dynamic color adjustments based on a reference color.

light-dark() eases theme or dark‑mode switching.

5. Exclusive Accordion with <details>

The native <details> element can create an accordion without JavaScript.

<details name="exclusive">\n  <summary>Details</summary>\n  Something small enough to escape casual notice.\n</details>

details {\n  border: 1px solid #aaa;\n  border-radius: 4px;\n  padding: 0.5em 0.5em 0;\n}\n\nsummary {\n  font-weight: bold;\n  margin: -0.5em -0.5em 0;\n  padding: 0.5em;\n}\n\ndetails[open] {\n  padding: 0.5em;\n}\n\ndetails[open] summary {\n  border-bottom: 1px solid #aaa;\n  margin-bottom: 0.5em;\n}

No complex JavaScript needed; only one panel opens at a time.

Ideal for FAQs, menus, or any UI where a single open detail is required.

6. content‑visibility

Defers rendering of off‑screen elements until they scroll into view, reducing initial paint cost.

.lazy-load-section {\n  content-visibility: auto;\n}

Delays rendering of off‑screen content, improving performance on long pages.

Speeds up load time and lowers memory usage, especially on mobile devices.

7. font‑size‑adjust

Maintains consistent x‑height and readability when a custom font falls back to a system font.

.text {\n  font-family: "CustomFont", Arial, sans-serif;\n  font-size-adjust: 0.5;\n}

Ensures text remains legible when the primary font is unavailable or slow to load.

Matches the x‑height of fallback fonts for design consistency.

8. transition‑behavior

Extends the control offered by transition‑timing‑function , allowing reversible or paused transitions without JavaScript.

.card {\n  transition-property: opacity, display;\n  transition-duration: 0.25s;\n  transition-behavior: allow-discrete;\n}\n\n.card.fade-out {\n  opacity: 0;\n  display: none;\n}

Enables more complex or reversible UI transitions without extra scripting.

Suitable for refined UI effects, interactive components, and unique animation scenarios.

9. CSS @property and Step‑Value Functions

@property lets you declare custom properties with type, inheritance, and initial value. New step‑value functions like round() , mod() , and rem() allow calculations directly in CSS.

@property --animation-progress {\n  syntax: "
";\n  inherits: false;\n  initial-value: 0;\n}

@property turns custom properties into fully declared variables.

Functions round() , mod() , and rem() simplify arithmetic in CSS, reducing reliance on preprocessors or JavaScript.

10. offset‑position and offset‑path

These properties enable complex motion designs without JavaScript, allowing elements to follow custom SVG paths.

.move {\n  offset-path: path("M10,80 Q95,10 180,80");\n  offset-position: 0%;\n  transition: offset-position 2s ease;\n}

Pure‑CSS path animations and motion.

Great for interactive elements, motion graphics, or guiding user attention along curved trajectories.

All of these new features are supported in major browsers, reducing the need for JavaScript workarounds and enabling cleaner, more efficient, and maintainable layouts and interactions.