CSS Landscape | 2024 #9 - News PouroverAI

Welcome to the ninth edition of FreeFrontend’s CSS Landscape for 2024!

This digest delivers the latest news, articles, tutorials, tips, and tricks to keep you up-to-date in the ever-evolving world of CSS. This issue is packed with valuable resources for developers of all skill levels.

Discover the exciting new features and updates in Firefox 125, including AV1 codec support and the align-content property for block layouts.

Learn about the popover attribute for creating user-friendly modals, delve into the fundamentals of Flexbox, and explore practical applications of this powerful layout model. Uncover the secrets of centering elements effectively, understand what can disrupt the aspect-ratio property, and get introduced to Remy Sharp’s proposal for a text fragment selector.

Master the art of smooth scrolling with CSS and learn how to create responsive web designs with media queries specifically for portrait orientation.

Discover innovative ways to create star shapes, manage CSS rule order dependencies efficiently, and add a fancy zig-zag border to your images.

Enhance your skills further with video tutorials covering responsive web design with HTML, CSS, and JavaScript, effective CSS debugging techniques, and captivating card animation creation.

Stay tuned for the next edition of CSS Landscape, and happy coding!

News

Firefox 125 for Developers – Mozilla

Firefox 125 for developers was released on April 16, 2024, introducing changes in HTML, CSS, JavaScript, APIs, WebAssembly, and experimental features.

Firefox 125.0.1, See All New Features, Updates and Fixes

Firefox 125.0.1 introduces new features such as AV1 codec support for Encrypted Media Extensions (EME), text highlighting in the PDF viewer, Firefox View enhancements, and proactive blocking of potentially untrustworthy downloads, along with various fixes and changes.

The align-content Property for Block Layouts is Now Part of Baseline

The align-content property from CSS Box Alignment is now available for block and table layouts, allowing vertical alignment without needing to create a flex or grid layout.

Articles

HTML popover Attribute

The web page discusses the use of the popover attribute in HTML and JavaScript to create native modals, improving user experience on both desktop and mobile.

An intro to Flexbox

This context provides an introduction to Flexbox, a CSS layout model for creating flexible and responsive web designs.

Alternating Style Queries

The article discusses the use of alternating style queries, a technique that allows for the alternation of styles between elements, similar to the proposed but unimplemented toggle() function in CSS.

Practical uses for Flexbox

This article discusses practical uses for Flexbox, focusing on inline lists and navigation menus.

Hardest Problem in Computer Science: Centering Things

The blog post discusses the challenge of centering elements in web design, highlighting issues with fonts, line height, and icons, and offers solutions for designers and developers to improve their centering techniques.

Things That Can Break aspect-ratio in CSS

This article discusses the potential issues that can arise when using the aspect-ratio property in CSS.

CSS Text Fragment Selector (Please)

Remy Sharp proposes a CSS text fragment selector to enable developers and authors to style specific text fragments without requiring unique identifiers or class names.

A Primer on the Cascade and Specificity

This article provides a primer on the cascade and specificity in CSS, explaining how conflicts are resolved and how specificity scores are calculated.