CSS

Exploring the modern attr() in CSS

Learn about CSS carousel features by changing options and seeing code change.

Last week, I finally had a reason to use the newish :is() CSS pseudo-class, and wow is it glorious! Today, I want to show you how it can dramatically reduce selector complexity. Let’s dig in! What :is() does The :is() pseudo-class accepts a comma-separated list of selectors, and can be used to group them together. For example, these two selector strings do the same thing… h1, h2, h3, h4, h5, h6 { font-weight: bold; } :is(h1, h2, h3, h4, h5, h6) { font-weight: bold; } You’re probably look at this and thinking…

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...