Modern CSS Features
CSS is evolving rapidly. Modern features like accent-color, inset shorthand, gap for flexbox, scroll-snap, and the :has() selector have transformed how we write CSS. This topic covers the most useful modern additions you should start using today.
Modern CSS Features
- accent-color - Style native form controls: accent-color: #667eea changes checkbox/radio/range colors instantly
- inset: 0 - Shorthand for top: 0; right: 0; bottom: 0; left: 0. Perfect for position: absolute overlays
- gap in Flexbox - gap: 16px works in Flex (not just Grid). Replaces margin hacks for spacing
- scroll-snap - scroll-snap-type: x mandatory creates smooth carousel-like snapping behavior
- aspect-ratio - aspect-ratio: 16/9 on any element. No more padding-top percentage hacks for responsive videos
- color-scheme - color-scheme: light dark tells browser to support both themes natively (scrollbars, inputs)
- text-wrap: balance - Balances line lengths in headings for better visual appearance. No more orphaned words
Modern Features Code
/* accent-color: style native controls instantly */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
accent-color: #667eea;
}
/* inset shorthand */
.overlay {
position: fixed;
inset: 0; /* = top:0 right:0 bottom:0 left:0 */
background: rgba(0,0,0,0.5);
}
/* scroll-snap carousel */
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 16px;
}
.carousel-item {
scroll-snap-align: start;
flex: 0 0 300px;
}
/* Balanced headings */
h1, h2, h3 {
text-wrap: balance;
}
/* Color scheme for browser UI */
:root { color-scheme: light dark; }Tip
accent-color is a one-property revolution: accent-color: #667eea instantly themes all native checkboxes, radios, ranges, and progress bars. No more hiding defaults and building custom controls for simple color matching.
CSS variables enable theming and dark mode without preprocessors
Common Mistake
Using the padding-top percentage hack for responsive videos when aspect-ratio exists. aspect-ratio: 16/9 replaces the old 'padding-top: 56.25%' trick with a single, readable property. The hack was necessary before 2021 - not anymore.
Practice Task
Apply modern CSS features: (1) accent-color on checkboxes and range inputs, (2) inset: 0 on a modal overlay instead of top/right/bottom/left, (3) scroll-snap-type: x mandatory on a horizontal carousel, (4) text-wrap: balance on headings.
Quick Quiz
Key Takeaways
- CSS is evolving rapidly.
- accent-color - Style native form controls: accent-color: #667eea changes checkbox/radio/range colors instantly
- inset: 0 - Shorthand for top: 0; right: 0; bottom: 0; left: 0. Perfect for position: absolute overlays
- gap in Flexbox - gap: 16px works in Flex (not just Grid). Replaces margin hacks for spacing