Manuel Matuzović - Blog

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

There isn't much more to say; it's all in the title.

The scripting media feature is an excellent addition to CSS for those who believe in progressive enhancement: It enables you to detect whether scripting languages, such as JavaScript, are supported.

As already explained on day 84, using the syntax descriptor, you can define the type of a custom property in an @property at-rule.

Some people, I guess primarily developers and not actual users, don’t like the fact that Safari removes list semantics of lists that don’t look like lists (list-style: none).

Last week, I lied to my students.

All major browsers except Firefox (coming soon!)

Design trends like Glassmorphism use translucent backgrounds to create a specific visual effect, resulting in underlying background colors or elements shimmering through the background of the overlaying element.

I am always pleasantly surprised when I find useful skip links.

I was on the train home from Hamburg when I decided to finally migrate my website from Netlify and 11ty to Kirby on my friend's server.

I specialize in HTML and CSS, but I also write JS.

In my newest workshop I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.

There are different ways of selecting the scoping root inside a @scope rule.

When I started to work with web components, I compared different options and decided to go with lit.

I read Steve Faulkners “hasPopup hasPoop” where he mentions differences in what screen readers announce when dealing with the aria-haspopup attribute.

If you have used a visually-hidden class in the past, you might have noticed that the width and height is set to 1px and not 0.

Here’s a job interview question for you: When you click a button and call the showModal() method to open a modal <dialog>, where does the focus go by default, and how can you move it elsewhere?

I wanted to know how and if common screen readers expose the <article> element.

An important factor in terms of UX and accessibility for deciding whether the <details> element is the right solution for a problem is the find-in-page behaviour.

I wanted to know how well common screen readers and browsers support search and form landmarks.

*if you don‘t understand the problems they solve and use them in combination with other solutions that tackle the same challenges albeit less elegantly and with the downside of limiting you in taking full advantage of selectors, one of the coolest features

Similar to container queries or cascade layers, we have another new impactful feature in CSS: scoping.

I just listened to the Syntax podcast for the first time because they were discussing topics near and dear to my heart, HTML and CSS.

I just came home after three beautiful days in Amsterdam, where I gave a talk at the CSS Day conference.

The other day someone emailed me and told me that they tried to clone the HTMHell repo, but they only got an empty folder (except for the hidden .git folder), and all files were deleted as if they cloned the repo and immediately moved all files into the t…

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

Scott O'Hara wrote a fantastic blog post about the details and summary elements last year.

I rewatched Lea Verous’s talk about custom properties recently and learned something I missed the first time I watched it.

I repeatedly see certain bad practices in HTML that ironically contain clues for implementing them properly in their class names or in the way they're built.

The new WebAim 1 Million report was recently published, and the results are sobering.

I know I’m late to the party, but there are a few things on my CSS wish list I haven’t seen on others, so I thought I’d share.

OMG, I did it, day 100!

Sometimes it seems like accessibility experts and other web professionals hate JavaScript.

Nesting in CSS is coming soon!

oklab() and oklch() are okay versions of lab() and lch() because lab() and lch() are not okay.

It’s possible to animate gap, grid-template-columns, and grid-template-rows.

The margin-trim property allows a container element to trim the margins of its children where they adjoin the container’s edges.

The color-mix() function takes two colors and returns the result of mixing them, in a given color space, by a specified amount.

The accent-color CSS property allows us to specify the accent color for user-interface controls generated by an element.

The lch() 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.

With the relative color syntax we can modify existing colors using color functions.

I’ve already shown much appreciation for the :has() pseudo-class in this series, but that we can use it as a previous sibling selector tops it all of.

Rules within a container query only apply to descendants of that container.

Style queries may change the way we write CSS significantly.

CSS Motion path allows you to position any graphical object and animate it along a specified path.

You can use mask properties to apply a mask to an element.

The initial-letter property specifies size and sink for initial letters.

Registering typed custom properties can be useful in container style queries.

The @property rule allows you to register custom properties.

On day 80, I’ve explained that we can check whether a container has a specific property and value assigned and apply additional styles based on this condition.