Discover the latest trends in CSS with FreeFrontend’s digest “CSS Landscape”! This edition delves into the innovative Popover API and discusses topics like CSS inheritance and container queries.
Enhance your skills with tutorials on email media and creating pure-CSS avatars. Also, find inspiration in video tutorials showcasing cutting-edge animation and responsive design.
Stay Ahead in CSS!
News
Release Notes for Safari Technology Preview 193
Safari Technology Preview 193 introduces updates in WebKit, accessibility enhancements, CSS fixes, form improvements, JavaScript consistency, rendering adjustments, new Web API features, and enhancements in Web Inspector usability.
New to the Web Platform in April
In April 2024, significant updates were made to the web platform, including new features in stable browser releases like Firefox 125 and Chrome 124, as well as upcoming features in beta releases such as Firefox 126, Safari 17.5, and Chrome 125.
Articles
Feedback on Masonry Layout
Chris Coyier discusses the proposed CSS Grid Level 3 “Masonry” layout, its importance, potential implementation methods, and the impact on web design and accessibility.
Popover API Lands in Baseline
The Popover API has been rolled out across major browsers and is part of Baseline 2024, offering a new approach to creating accessible and interactive layered interfaces with features like light-dismiss functionality and default focus management.
If View Transitions and Scroll-Driven Animations had a Baby …
Bramus presented a talk at CSS Café on April 25, 2024, showcasing the combination of View Transitions with Scroll-Driven Animations to create a new web experience called “Scroll-Driven View Transition”.
CSS Inheritance
CSS inheritance simplifies styling by allowing elements to inherit styles from their parent elements, unless overridden by more specific styles.
Recursion! In the Stylesheet
Noah Liebman’s article demonstrates how to dynamically select colors from a CSS gradient using nested color-mix() functions and custom properties, eliminating the need for JavaScript.
CSS Container Queries: Revolutionising Responsive Web Design
CSS Container Queries offer a significant advancement in responsive web design, enabling developers to create components that adapt based on their parent container’s size, enhancing modularity and performance.
Do You Still Need Sass?
The article explores the necessity of Sass in 2024 given the advancements in native CSS capabilities and the availability of tools like PostCSS.
The New !important
The article discusses a CSS technique using :not() and !important to override specificity and its implications.
How to Add Media to Your HTML Email Template
Fanny Nyayic’s article provides a comprehensive guide on adding images, videos, and audio to HTML email templates, emphasizing best practices for compatibility and user engagement.
Popover API
The Popover API is now fully supported across modern browsers, offering a standardized way to create non-modal layered interfaces like tooltips, menus, and teaching UIs without the hassle of managing z-index and focus.
Popover API is Here
The Popover API has been released, providing a new method to create non-modal pop-up elements on web pages that are easier to manage and style, with future enhancements expected through the Anchor Positioning API.
Tips & Tricks
We Don’t Need to use 0 Anymore to Define Margins and Paddings
The article discusses the evolution of CSS that now allows developers to define margins and paddings without using 0, thanks to new properties like margin-block, margin-inline, padding-block, and padding-inline.
Avatar with Status Indicator
The webpage provides a method to create a status indicator on an avatar image using only CSS and a single tag, without additional elements or pseudo-elements, and includes subtle hover animations.
Video
Thank you for reading the CSS Landscape!
