Web development Blog

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.

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.

With CSS Media Queries Level 4, it's possible to use mathematical comparison operators in media 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.

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

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

On day 47, I introduced you to the overscroll-behavior property, and I showed you how to use it to disable scroll-chaining. There’s another feature we can disable using this property.

On day 46, I’ve explained how you can order layers by defining them in a comma-separated list first. The first layer in the list has the lowest priority and the last layer the highest.

Most elements have no preferred aspect ratio. On day 42 I’ve explained how you can use the aspect-ratio property to define a ratio for these elements. Replaced elements like <iframe>, <video>, <embed>, or <img>, on the other hand, have an intrinsic aspect ratio. This means that you don’t have to define one using the aspect-ratio property and they will scale naturally.

Something I was tripping over when I began learning about :has() was the combination with :not().