A blog about web development, HTML, CSS, JavaScript, and web accessibility.

Day 64: the revert-layer keyword

With cascade layers comes a new CSS-wide property value, revert-layer.

Day 63: explicit defaulting with inherit, initial, unset, and revert

There are several CSS-wide property values you can use to specify a particular defaulting behavior for a property explicitly.

Day 62: the container shorthand

On day 56 you've learned that you have to define a container-type when working with size containers and on day 59 you've learned that you can name containers using the container-name property.

Day 61: color-scheme

The color-scheme property allows you to indicate which color schemes an element can be rendered in.

Day 60: the ::part() pseudo-element

You can use the ::part CSS pseudo-element to style an element within a shadow tree.

Day 59: naming containers

When you add a container query, it will look for the nearest ancestor container, by default. If you have multiple nested containers or if you just want to make sure that your query uses the right container, you can name containers and query them specifically.

Day 58: ordering nested layers

On day 43, we've learned how to group layers and on day 46, how to order them. In this post, we’ll look into ordering grouped layers.

Restart

Like many others, I’ve been thinking a lot about Twitter, social media in general, and what being on a social media platform means for me.

Day 57: media queries: range syntax

With CSS Media Queries Level 4, it's possible to use mathematical comparison operators in media queries.

Day 56: container queries

You can use media queries to style elements based on features of the browser viewport, for example, min-width, max-height, or orientation. With container queries, you can now do the same but with any parent element. Instead of the viewport, you can now listen to properties and features of a containing element.