Syntax - Tasty Web Development Treats 900: 13 New CSS Features You Can Start Using Today
105 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
CSS Shape() Simplifies Complex Paths
- The new CSS shape() function offers a CSS-native way to create shapes instead of complicated SVG path strings.
- It supports all CSS units and variables, making shapes more readable, dynamic, and responsive.
Zoom Property Scales With Layout
- The zoom CSS property scales an element and also allows the layout to reflow around the resized element.
- This contrasts with scale(), which only visually scales without affecting layout.
Consistent Scrollbar Styling Advice
- Use scrollbar-width and scrollbar-color CSS properties to style scrollbars consistently across browsers.
- Apply scrollbar-gutter to prevent layout shifts when scrollbars appear or disappear.