CSS

A new CSS function that returns one of two color values based on the current color scheme.

One of my favorite not-so-new aspects of CSS is the :empty pseudo-class. You can use this to target elements that have no children—either child elements or whitespace and text nodes—and style them differently than they would be otherwise. For example, imagine you have some CSS to layout items in a row using flexbox… .grid-flex { display: flex; gap: 1rem; } .grid-flex div { background-color: #ffdc00; border: 1px solid #665800; color: #665800; padding: 1rem 2rem; text-align: center; } And a row of items generated from an API or database or something.

Join the Chrome DevRel team and a skateboarding Chrome Dino on a journey through the latest CSS launched for Chrome and the web platform in 2024.

Using container queries and CSS :has() to build a feature image.

A halftone is a pattern of dots that vary in size and spacing. It's a printing technique that you normally don't see, but blown up in size, is a cool aesthetic. This is a deep dive on how it can be done in CSS alone, starting quite simply!

An exploration of the newly supported at-rule for explicitly defining and animating custom properties in CSS.

A blog about CSS, front-end development, the web, and beyond.

Now that responsive HTML video delivery works across all browsers, let's look at how to use it

Victor Ayomipo experiments with the CSS `min()` function, exploring its flexibility with different units to determine if it is the be-all, end-all for responsiveness. Discover the cautions he highlights against dogmatic approaches to web design based on his findings.

Style queries allow developers to query a parent element's style values using the @container rule. In Chrome 111, style queries for CSS custom properties are landing stable. Learn how to get started with them.

One line of code for auto sizing elements with editable content.

How this new attribute value can ensure that content within accordion sections can be found and linked to.

A

Learn about CSS Anchor Positioning, including its syntax, properties, how it is used to position one element next to another, and even how it's used to resize elements relative to other elements.

CSS nesting is getting a whole lot better!

The golden ratio, also called the golden number, golden proportion, or even the divine proportion, is...

Learn how the CSS backdrop-filter property with functions like blur, grayscale, contrast, and brightness can add more depth to visual effects.

We've all been there: you're working on a website and need to display a row of logos—clients, partners, sponsors—you name it. However, logos come in all shapes and sizes, and making them look good together can be quite challenging. How do you get...

The `clip-path` property with the `inset()` shape makes for some cool design opportunities. Here we'll expand on some existing ideas, improving them by not requiring any content duplication.

Excited to finally explore CSS state queries and Scroll Snap events. This article will showcase initial impressions and demos using these features.

Stacking grid items so that an odd number of items appears horizontally centered in the first row instead of the last.

Modern CSS keeps giving us a lot of new, easier ways to solve old problems, but often the new features we’re getting don’t only solve old problems, they open

Improve the legibility of text when using fallback fonts.

Semantic custom properties with @property just reached Baseline newly available.

The three types of browser (and CSS!) magnification

CSS developers got the ultimate dream: container queries. But now that they are here, are we actually reaching for them as much as we thought we would?

A step-by-step guide showing how to use container queries with cross-browser fallbacks.

A fresh look at the CSS grid template areas and how to take advantage of its full potential today.

Have you ever wondered what happened after CSS3? It’s common knowledge that we never saw CSS4 come after it, yet we have a plethora of new features that have no similar way of defining when they were introduced. The W3C CSS-Next community group is actively searching for better approaches for how we describe the evolution of CSS over time and identify feature sets as effectively as we did with CSS3 way back in 2009 — and you can help.