Manuel Matuzović - Blog

There's a difference between listing selectors in :where(), :is(), and :has() and listing them in a regular selector list.

Thoughts on when it’s better to use :is() over :where() and vice versa.

You can use full math expressions in the comparison functions min(), max(), and clamp().

The clamp() function defines a minimum value, a preferred value, and a maximum value.

I’ve teamed up with my friends at Smashing Magazine 😻 to share with you everything I know about web accessibility testing!

Just like for margin or padding, there are also logical property variations for border properties.

Like the lab() color function, hwb() is one of the more recent methods for defining colors in CSS.

Using !

We already know that we can encapsulate styles within a web component and we know that web components inherit styles.

Adjustable features of a variable font are called axes.

On October 23rd I got shadowbanned on Twitter, followed by a permanent suspension on October 25th.

You already know that the :has() pseudo-class allows you to check whether a parent element contains certain children, but you can also make this selector more specific, or check other relations the element might have.

When I wrote about the scrollbar-gutter property, my first thought was “omg!

The backdrop-filter property allows you to apply CSS filters to the area behind an element.

The lab() color function allows you to pick colors from the CIELAB color space, which is device-independant and covers the entire gamut (range) of human color perception.

You can use the ::backdrop pseudo-element to style the backdrop of modal dialogs and elements which have been placed in fullscreen mode using the Fullscreen API.

When I opened Twitter on Monday morning, I saw this: After careful review, they determined that my account broke the Twitter Rules.

You can create gradients with color transitions rotated around a center point, rather than radiating from the center, by using the conic-gradient() function.

The scrollbar-gutter property allows you decide whether content within an element fills the total available space or if it stops at the scrollbar gutter.

You can use the :placeholder-shown pseudo-class to select input fields with a placeholder that haven't been filled out yet. input:placeholder-shown { outline: 5px solid blue; } <p> <label for="name">Name</label> <input type="text" id="name" placehol…

We already know that we can encapsulate styles within a web component by adding elements along with the styles to the shadow DOM.

You can use the :picture-in-picture pseudo-class to style an element, usually a <video>, which is currently in picture-in-picture mode (PIP).

Just like with :is() and :not(), the specificity of :has() is replaced by the specificity of the most specific selector in its selector list argument.

There are two methods you can use to open a <dialog> element, show() and showModal(). show() opens a dialog on top of the rest of the content, but you can still interact with content beneath. showModal() opens a modal dialog with a backdrop on top of the…

There's an important difference between :is() and :where().

The :where() and :is() pseudo-classes allow you to write large lists of selectors in a more compact form.

I saw this interesting one-liner in a demo by Temani Afif. .wrapper { margin-inline: max(0px, ((100% - 64rem) / 2)); } It’s basically a shorter way of writing this: .wrapper { max-width: 64rem; margin: 0 auto; width: 100%; } It’s not up to me to…

Functional color notations that existed before CSS Color Module Level 4 (rgb(), rgba(), hsl(), hsla()) used to only except comma-separated lists of arguments.

I was wondering what happens with HTML elements in web components when I add styles to the document.

The inset property is a shorthand for the top, right, bottom, and/or left properties.

The :has() pseudo-class cannot be nested; :has() is not valid within :has().

Subgrid allows a grid-item with its own grid to align with its parent grid (currently only in Firefox 71+ and Safari 16+).

:has() allows you to check whether a parent element contains specific children.

The max() function takes a comma separated list of expressions.

The min() function takes a comma separated list of expressions.

If you use a shorthand property like margin with all 4 values, the properties will always be applied in the direction top - right - bottom - left, no matter the reading direction.

Logical properties are a new way of working with directions and dimensions, one that allows you to control layout through logical, rather than physical mappings.

It’s time to get me up to speed with modern CSS.

You can pass a second value to the var() CSS function which acts as a fallback for when the property has not been set.

Shortly after we got our new car, a Volkswagen T5, I noticed many people seemed to have the same car.

The other day I was driving home when suddenly it hit me: We can use :has() to determine how many children a parent element has.

If you open a plain HTML document with no CSS and you focus an interactive element like a button, link, or textarea, you’ll see that by default browsers use the outline property to highlight these elements.

Historically, Lighthouse has analyzed the cold pageload of a page only.

Yes, clickbait, I’m so sorry!

I know that you’re not supposed to tell people what to do, but in this particular case I’m really tempted because recently I’ve noticed that a lot of websites are preventing users on mobile to zoom.

This week I’ll be speaking at the Bonn Code Meetup about accessibility testing.

I decided to learn more about areas of web development I don’t know a lot about.

Earlier this week I learned about CSS Cascade Layers and now I’m all hyped up because I really like the concept.

I built an interactive demo to illustrate how specificity in CSS works.

This is part 4 of my series Here’s what I didn’t know about… in which I try to learn new things about CSS.