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

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.

Day 46: ordering layers

By default, cascade layers are stacked in the order they are defined, but you don’t have to rely on it. You can determine the order in one place.

Day 45: the specificity of ::slotted() content

When you pass an element to a web component through a <slot>, you can select that element using the ::slotted() pseudo-element and apply additional styles.

Day 44: logical floating and clearing

Thanks to Flexbox and CSS Grid no one seems to talk about float and clear anymore,…except for me now because there's news.