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

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.

Day 53: disabling pull-to-refresh

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.

Day 52: declaring multiple layer lists

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.

Day 51: aspect-ratio and replaced elements

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.

Day 50: :has(:not()) vs. :not(:has())

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

Day 49: layering entire style sheets

You can use @import to load entire style sheets into a cascade layer.

Day 48: inset 0

On day 9 I’ve talked about the inset shorthand properties inset, inset-inline, and inset-block. I don’t believe that I will need those often, but inset can come in handy when you want one element to fill another element entirely.

Day 47: the overscroll-behavior property

You can use the overscroll-behavior property to disable scroll-chaining.