CSS Landscape | 2024 #10

New in Chrome 124

Chrome 124 introduces new features like declarative shadow DOM in JavaScript, WebSocket Stream API, and view transitions improvements.

Origin Trial for Foldable APIs

Chrome is running an origin trial for Device Posture API and Viewport Segments API to enhance web development for foldable devices from Chrome 125 to Chrome 128.

Chrome 125 Beta

Chrome 125 beta brings new features for developers like CSS anchor positioning, CSS stepped value functions, scrollbar color scheme updates, HTML and Web API enhancements, and new origin trials for upcoming APIs.

Help us invent CSS Grid Level 3, aka “Masonry” layout

The proposal for CSS Grid Level 3 introduces masonry layout capabilities, inviting the web development community to discuss integrating masonry into CSS Grid or keeping it as a separate display type.

Use CSS to Boost the Font Size of Emoji with no Extra Markup

Learn a method to increase emoji font size using CSS without additional HTML markup.

Self-Modifying Variables: the inherit() Workaround

Discover a technique using container style queries to emulate the inherit() function in CSS, allowing custom properties to inherit values from parent elements despite CSS variables’ lack of native support for cyclic dependencies.

What’s Going On in Dark Theme / Light Theme Landscape?

Explore recent advancements in implementing dark and light themes on websites, utilizing new CSS features like light-dark() function and color-scheme property, while addressing browser support, user preferences, and potential standardized methods.

CSS Margins: All You Need to Know

Get an extensive guide on CSS margins covering their role in web design, measurement units, margin shorthand, negative margins, collapsing margins, inheritance, differences with padding, responsive margins, best practices, and debugging tips for optimal margin usage in web layouts.

Cool Queries

Learn advanced CSS query techniques including nested media queries, range usage, complex conditions, orientation detection, JavaScript support detection, overflow detection, container queries, and style queries.

The Slow Death of CSS Vendor Prefixes

Explore the diminishing relevance of CSS vendor prefixes with evolving web development practices, tools like Autoprefixer, and browsers standardizing more CSS properties.

Invoking Elements by Using Only HTML: A First Look at Invokers

Discover the concept of invokers in HTML enabling interactive elements like dialogs, popovers, and form controls to be invoked using HTML attributes without JavaScript.

The Ultimate Guide to CSS Keyframes Animation

Get an extensive guide on CSS keyframes animation detailing fundamental components, practical applications, and advanced techniques for enhancing web design and user experience.

2 Ways to Make Half-Colored Background Page Sections

Explore two methods for creating half-colored backgrounds for web page sections using CSS.

Your Page Can’t Change Media Features

Understand the difference between CSS media features and properties, emphasizing that media features describe the medium’s capabilities and cannot be altered by the page itself.

Creating Fluid Typography with the CSS clamp() Function

Learn about fluid typography using the CSS clamp() function to create responsive font sizes across various devices without multiple media queries.

5 Hidden CSS Properties You Didn’t Know Existed

Discover five lesser-known CSS properties like text-decoration, text-underline-offset, text-emphasis, text-size-adjust, and text-spacing that can enhance web design and functionality.

Understanding the CSS revert-layer Keyword

Learn about the revert-layer keyword in CSS cascade layers for reverting styles to previous layers or user-agent defaults to manage complex style conflicts in web development.

Detect JavaScript Support in CSS

Discover how CSS media feature scripting can detect JavaScript support in browsers to enhance or alter styles based on JavaScript availability, with practical applications and limitations.