FreeFrontend’s May 20th CSS Landscape (#14) explores the latest features in Safari, Chrome, and Firefox. Discover CSS Anchor Positioning, AI in web development, and the future of responsive design. Get workflow tips and learn about innovative CSS features. Watch videos on animations and more!
News
WebKit Features in Safari 17.5
Safari 17.5 introduces new CSS features, WebCodecs support for AV1, WebGL enhancements, and various bug fixes to enhance the web experience for users.
New in Chrome 125
Chrome 125 introduces CSS Anchor Positioning, the Compute Pressure API, an extension to the Storage Access API, and other features to improve web development and user experience.
Firefox 126.0, See All New Features, Updates and Fixes
Firefox 126.0 introduces enhanced privacy features, support for new compression and video technologies, developer tools improvements, and addresses various security issues.
Firefox 126 for Developers
Firefox 126 introduces various developer-focused updates, including new features, improvements, and removals, with a release date of May 14, 2024.
The CSS Stepped Value Math Functions are Now in Baseline 2024
The round(), rem(), and mod() CSS functions have been added to the Baseline 2024, marking their support across all major browser engines.
Articles
Display flow-root
The article discusses the display: flow-root property in CSS, which was introduced to replace the clearfix hack for containing floated elements and has implications for layout and styling but is not a universal replacement for the block display value due to differences like non-collapsing margins.
Introducing the CSS Anchor Positioning API
The CSS Anchor Positioning API introduces a new way to position elements relative to specific anchors, enhancing layout control and reducing dependency on third-party libraries.
10 Updates From Google I/O 2024: Unlocking the Power of AI for Every Web Developer
Google I/O 2024 introduces 10 significant updates aimed at empowering web developers with AI-driven tools and features for enhanced development efficiency and performance.
Understanding the Latest Webkit Features in Safari 17.4
The article provides an overview of the new features and improvements introduced in Safari 17.4, focusing on CSS, HTML, JavaScript, Accessibility, and Performance enhancements.
Beyond CSS Media Queries
The article discusses the evolution of CSS responsive design techniques, emphasizing that while media queries are still relevant, modern CSS features like Flexbox, Grid, responsive units, math functions, and container queries offer more context-aware and maintainable alternatives for creating responsive layouts.
On Compliance vs Readability: Generating Text Colors with CSS
Lea Verou discusses the use of CSS Relative Color Syntax (RCS) and the upcoming contrast-color() function to automatically generate text colors with sufficient contrast against variable background colors, ensuring readability and compliance with accessibility standards.
What’s New in the Web
Rachel Andrew’s recent Google I/O presentation has introduced significant updates to the web platform’s Baseline, including new features like container queries, the :has() selector, and the <search> element, alongside the launch of the Web Platform Dashboard and integrations with RUM Archive and RUMvision, aiming to streamline web development and browser compatibility.
Fluid Design with CSS Round
The post discusses the use of CSS round() and clamp() functions to create fluid typography and spacing that adhere to a baseline grid, enhancing responsive design while maintaining vertical rhythm and consistency.
Weighing in on CSS Masonry
Keith J. Grant advocates for CSS Masonry to be a distinct display method separate from grid, citing educational clarity and the incompatibility of grid-template-areas with masonry layouts.
Tips & Tricks
Put Media Queries on a Diet
Stas Melnikov discusses the use of CSS custom properties to reduce the number of media query rules, thus keeping the codebase lean.
Ignore and Acknowledge Class Attribute on Elements in CSS
Amit Merchant’s blog post discusses how to apply CSS styles to <ul> elements either by acknowledging or ignoring the presence of a class attribute.
@starting-style Everything
The @starting-style CSS feature allows for transitions without the need for @keyframes, applying to elements on page load, when inserted into the DOM, or when changing from display: none to a visible state.
The Classic Border Radius Advice, Plus an Unusual Trick
The article discusses the aesthetic challenge of nested elements with the same border-radius, proposes a practical tweaking approach, and introduces a new CSS technique using overflow: clip and overflow-clip-margin: content-box to automatically handle the issue.
Videos
Thank you for reading the CSS Landscape!
