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

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.

Day 55: anonymous layers

In all previous posts about cascade layers I’ve used named layers in the demos, but it’s actually not required to name them.

Day 54: testing for the support of a selector

Support for a CSS property isn’t the only thing you can check with @supports(), you can also check support for a selector.