Manuel Matuzović - Blog

This post differs from most of the other posts because it’s not about modern CSS, but about CSS fundamentals.

On day 66, I’ve introduced you to individual transform properties.

Container style queries allow querying the computed values of a query container.

You can use the @supports rule to check whether a browser supports a specified font technology or font format. font-tech() The font-tech() function checks whether a browser supports the specified font technology.

I know I’m really late to the party, but I finally understood why people find color functions like hsl(), hwb(), or lab() so appealing.

Container queries come with their own units.

There are logical properties for width and height values. width and height The logical alternative for width is inline-size and the alternative for height is block-size.

You can use the override-colors property to override colors in a font palette.

Apparently, multicolored typefaces on the web are a thing.

In order to understand how !

In my previous posts about size container features I’ve only used the min-width feature, but there’s actually more you can query. container-type: inline-size establishes size containment only on the inline axis.

If you’re creating a masonry layout, the packing algorithm puts items into the column with the most space by default.

I started my last year in review post with the words “2021 was wild!”.

The masonry keyword allows you to create masonry grid layouts.

:defined represents any element that has been defined.

In a media query, it’s obvious what width means.

Cascade layers are one of the most interesting and useful additions to CSS recently.

There are a lot of interesting things you can do with the :has() pseudo-class.

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

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

With cascade layers comes a new CSS-wide property value, revert-layer.

There are several CSS-wide property values you can use to specify a particular defaulting behavior for a property explicitly.

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.

The color-scheme property allows you to indicate which color schemes an element can be rendered in.

You can use the ::part CSS pseudo-element to style an element within a shadow tree.

When you add a container query, it will look for the nearest ancestor container, by default.

On day 43, we've learned how to group layers and on day 46, how to order them.

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.

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.

On day 46, I’ve explained how you can order layers by defining them in a comma-separated list first.

Most elements have no preferred aspect ratio.

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

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

On day 9 I’ve talked about the inset shorthand properties inset, inset-inline, and inset-block.

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

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

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.

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

Cascade layers can be grouped by nesting layer rules.

Yes, I know, aspect-ratio is not the hottest shit, but Safari only starting supporting it in version 15 and there’s a lot I didn’t know about the property.

Let’s say you want to swap the background image of an element based on a certain condition, like whether it’s pressed, using custom properties. button { --background-image: "/not-pressed.svg"; background: url(var(--background-image)); } button[aria-p…

On day 37 we learned that we can get more control over specificity by creating layers.

On day 11 I've introduced you to space-separated functional color notations.

Using the viewport unit vh in desktop browsers is usually straight-forward, 100vh matches the height of the viewport.

Cascade layers introduce a new way of managing specificity in CSS.

We already know that we can select an element based on the presence of a certain child element (in Chrome/Edge 105+ and Safari 15.4+), but there are limitations.