Syntax - Tasty Web Development Treats 900: 13 New CSS Features You Can Start Using Today
141 snips
May 7, 2025 Dive into the latest CSS innovations that can transform web design. Discover the shape function and advanced CSS properties like 'zoom' and 'scale' for better layouts. Learn about custom media queries and how the content visibility property can enhance performance. Hear tips on managing HDMI cables and optimizing device setups, plus amusing anecdotes on input validation frustrations. With fresh features like relative color syntax and advanced text functions, this discussion showcases how modern CSS can simplify development and enhance user experience.
AI Snips
Chapters
Transcript
Clear Media Query Range Syntax
- The new media query range syntax makes breakpoints much more readable, e.g., width <= 400px.
- This enhances clarity over traditional and verbose media queries.
Content-Visibility Boosts Performance
- The content-visibility property defers rendering of offscreen elements to improve performance.
- Using content-visibility:auto can dramatically reduce initial render times but may cause layout shifts.
Content-Visibility Lag Example
- Wes Bos used content-visibility:auto for 826 user boxes on Uses.tech, improving rendering without virtual scrolling.
- However, heavy use during fast scrolling caused lag due to frequent rendering and unerendering.