CSS

It's not just a shorthand for anchor()

An interactive guide to learn CSS Relative Colors.

CSS functions like :is(), :not() and :has() are powerful tools that make it much easier to select elements specifically. We've written before about how ::where…

The & is a powerful addition to CSS, allowing us to craft selectors without repetition and helping organization and understanding.

We've been able to get the length of the viewport in CSS since... checks notes... 2013! Surprisingly, that was more than a decade ago. Getting the

Learn how overflow: clip works in CSS.

How’d you like to use CSS to easily create a border from an image or gradient?

It's now possible to animate to or from height: auto and other intrinsic sizes.

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