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

Day 68: cascade layers and browser support

Cascade layers are one of the most interesting and useful additions to CSS recently. It will change the way we write CSS, how we use selectors, naming conventions, and probably also more things that I can’t think of right now.

Day 67: counting children

There are a lot of interesting things you can do with the :has() pseudo-class. I’ve already covered some of them on day 26.

Day 66: individual transform properties

From now on you can transform elements with the translate, rotate, and scale properties.

Day 65: using the em unit in container queries

Relative units used in container queries work differently than relative units in media queries.

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.