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.
Tutorials
Tips & Tricks
Video
Thank you for reading the CSS Landscape!
