Explore anchor link tricks, animation techniques, and the “Basics First” approach to web development. Dive into container queries and HTML control updates. Tutorials cover mobile-first CSS, scrollbar control, and framework-free layouts. Get tips on pixel rounding and smooth scrolling issues. Watch videos showcasing card hover effects, text manipulation, and more. Stay ahead of the curve!
News
Release Notes for Safari Technology Preview 195
Safari Technology Preview Release 195 brings fixes and improvements across various areas including accessibility, CSS, media, rendering, scrolling, web extensions, and web inspector.
Chrome 126 Beta
Chrome 126 beta introduces new features and improvements focused on enhancing web capabilities, user experience, and developer tools, including CSS view transitions, Web APIs enhancements, and new origin trials.
Articles
Anchor Links and How to Make Them Awesome
Enhance anchor links with CSS for smooth scrolling, scroll margins, targeted styling, and more to improve in-page navigation user experience.
Using @starting-style and transition-behavior for Enter and Exit Stage Effects
Create seamless enter and exit stage effects for elements toggling display: none using @starting-style and transition-behavior in CSS.
We’ve Got Container Queries Now, But Are We Actually Using Them?
Explore the potential of container queries in CSS development, despite slow adoption due to challenges with browser support and familiarity.
Not Always Mobile First
Advocate for a “Basics First” approach in web development, prioritizing fundamental styles before complex designs through media queries.
Animating the Dialog Element
Animate the
(Danger!) Preventing Zoom from Changing Text Size
Promote fluid typography over preventing browser zoom for text size adjustments to respect user accessibility needs.
What’s New in View Transitions? (Google I/O 2024 update)
Chrome introduces cross-document view transitions for multi-page applications (MPAs) and enhancements to view transitions at Google I/O 2024.
Switching It Up With HTML’s Latest Control
Explore the enhancements and new features of HTML’s latest controls for improved web development usability and functionality.
Tutorials
How to Implement The Mobile First CSS Approach
Implement a mobile-first CSS approach for optimized website design and functionality on mobile devices using container queries and media queries.
How to Hide Scrollbar Using CSS?
Hide scrollbars on web pages using CSS while maintaining scrolling functionality for usability and accessibility.
Modern CSS Layouts: You Might Not Need A Framework For That
Create modern layouts without frameworks using CSS features like Cascade Layers, Grid, Flexbox, and Subgrid for reusable CSS utility classes.
Getting Creative with CSS Grid
Create visually engaging and responsive layouts using CSS Grid with manipulation of grid areas, column, row spans, and responsive design techniques.
Wheel of Fortune with CSS
Create a “Wheel of Fortune” component using CSS and JavaScript with a focus on responsive design and interactive elements.
Tips & Tricks
scroll-behavior: Scroll can Lead to Dizziness or Headache
Discuss potential negative effects of smooth scrolling and suggest using prefers-reduced-motion media feature to respect user preferences for reduced motion.
No More Pixel Rounding Issues!
Eliminate pixel rounding issues using CSS techniques with calc-size and round functions for integer-based element dimensions.
Videos
Thank you for reading the CSS Landscape!
