Enhance your CSS skills with FreeFrontend’s latest digest on May 18th. Stay updated on the newest advancements and best practices in the industry. Dive into debates on CSS Grid vs. Flexbox, explore Chrome DevTools updates, and learn practical skills through tutorials on tooltips and color manipulation. Advanced techniques like 3D animations are showcased in videos. Don’t miss out on these valuable insights for all developers!
News
What’s New in DevTools, Chrome 125
The article highlights the new features and improvements in Chrome DevTools, including AI-generated explanations for errors and warnings in the Console, support for @position-try CSS rules in the Elements > Styles tab, and enhancements to the Sources, Network, and Performance panels.
What’s New in WebGPU (Chrome 125)
The Chrome team introduces new features in WebGPU, such as subgroups and rendering to slices of 3D textures.
Release Notes for Safari Technology Preview 194
Safari Technology Preview Release 194 brings updates and bug fixes across various web technologies, including accessibility, canvas, CSS, JavaScript, networking, rendering, SVG, Web Animations, Web API, Web Extensions, and WebGL.
Announcing the Web Platform Dashboard
The Web Platform Dashboard unveiled at Google I/O offers developers a comprehensive overview of web platform features and their browser support, complementing resources like Can I Use and MDN.
Articles
A Brief Note on Highlighted Text
The article discusses the importance of sufficient contrast in highlighted text and outlines CSS and WCAG guidelines for styling highlighted text.
The Cluster Composition
Chris Burnell shares his custom CSS snippet, the Cluster Composition, a flexible layout system for list items inspired by the CUBE CSS methodology and Andy Bell’s teachings.
CSS Grid vs Flexbox: Which to Choose and When
This article compares CSS Grid and Flexbox, offering insights on when to use each for web layout design and highlighting their strengths in creating complex and responsive designs.
Transparent Borders
The benefits of using border-color: transparent over border: none in CSS are discussed, particularly for accessibility and theming purposes.
Using CSS Scroll-Driven Animations for Section-Based Scroll Progress Indicators
This article demonstrates how to create section-based scroll progress indicators using CSS scroll-driven animations.
The Modern Guide for Making CSS Shapes
A comprehensive guide to creating CSS shapes using modern techniques, including the clip-path property and the mask property, is provided in this article.
Target=_blank Implies rel=noopener
This article addresses the security issue of target=”_blank” allowing target sites to access the original site through window.opener, potentially leading to malicious actions.
Introducing the CSS Anchor Positioning API
The CSS Anchor Positioning API offers a new way to position elements relative to other elements, enhancing complex layout creation without the need for third-party libraries.
How to Use CSS Grid repeat() Function
This article explores the CSS Grid repeat() function and its role in creating efficient, responsive, and maintainable grid layouts for web development.
The Times You Need a Custom @property Instead of a CSS Variable
Custom properties and CSS variables are compared, highlighting the flexibility of custom properties in creating complex animations.
I’m Worried About the Tabbing Behaviour, Rather Than the Syntax and Name of CSS Masonry
Andy Bell expresses concerns about accessibility issues related to tabbing behavior in CSS masonry layouts, emphasizing the importance of a functional user experience over syntax debates.
Tutorials
Using the Popover API for HTML Tooltips
This tutorial covers using the Popover API to create HTML tooltips, including HTML, CSS, JavaScript, and accessibility considerations.
Tips & Tricks
Videos
Thank you for reading the CSS Landscape!
