Manuel Matuzović - Blog

Recently, I started a new project. I react to the accessibility of more or less randomly picked websites.Before you get too excited, It's in German. I feel more comfortable recording live reactions to websites I have never seen in my native language. However, I may try it in English if there's demand. So far, I've recorded four videos: Wie...

Friends of mine organise the seventh international TYPO3Camp, which takes place in Vienna on October 11th - 13th, 2024. I'm there to give a keynote talk and a workshop. Date October 11th - 13th, 2024 Website typo3camp.at Price for the event Starting at 94.87 Euro Price for the workshop 690.00 Euro As you've...

Once again, I’ve teamed up with my friends at Smashing Magazine 😻 to share with you everything I know about web accessibility testing! In this smashing workshop we’ll talk about automatic and manual testing, screen reader basics, Single Page Applications, Dev Tools, and more. Sounds interesting? Great! Here are some more details about the...

CSS animations can be composited in three ways: replace, add, and accumulate. The animation-composition property allows you to switch between them.div { animation: changeColor 1s forwards; animation-composition: add; } Let's say you have two color HEX values, #112233 and #224466. Here's what happens with each composition type when you animate...

You can use the of S syntax in the :nth-child() pseudo-class to filter elements before the arguments in :nth-child() apply.The S in of S stands for a forgiving selector list. /* :nth-child(An+B [of S]?) */ tr:nth-child(even of .visible, .active) { } Let's say you have six list items and want to highlight every second item, but two of them are...

The light-dark() color function allows you to define two values for a color property. The property uses the first value when the color scheme is light or unknown and the second when it's dark.For the function to work, you must define the available color schemes for the element. Apply it to the html element if you want it to work on the entire...

People often ask me for recommendations for front-end development conferences. Picking my Top 3 would be challenging, but I know that beyond tellerrand in Germany is one of them. Location in Düsseldorf Web developers love the beyond tellerrand conference (BTConf), although the event isn't a typical web dev conf. The organizer, Marc Thiele, a...

Following last year, I created a CSS wishlist for 2024.Before I get into the details, I have to say that creating a wishlist almost feels wrong because there are more features in CSS today than I could have ever wished for. So, I'd like to take this opportunity to thank everyone who contributed to CSS being where it is today: spec writers,...

Once again, I’ve teamed up with my friends at Smashing Magazine 😻 to share with you everything I know about web accessibility testing! In this smashing workshop we’ll talk about automatic and manual testing, screen reader basics, Single Page Applications, Dev Tools, and more. Sounds interesting? Great! Here are some more details about the...

There isn't much more to say; it's all in the title. Many automated testing tools are a collection of JavaScript functions you run on a page. Most of those rely on querying the DOM. If a tool doesn't consider shadow trees, it only catches accessibility errors in the Light DOM, which may give you a wrong sense of safety and potentially affect your...

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.If you disable Javascript in Firefox 117+, Chrome 120+, or Safari 17+ on this page, the disclosure widget below hides the button and displays the...

As already explained on day 84, using the syntax descriptor, you can define the type of a custom property in an @property at-rule.@property --lh { syntax: ''; inherits: false; initial-value: 1; } button { --lh: 1; line-height: var(--lh); transition: --lh 1s; width: min-content; } button:is(:focus-visible,:hover) { --lh: 2; }...

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). Scott O’Hara provided a fix in “Fixing” Lists, where he suggests setting role="list" explicitly on the list to re-add list semantics. … That works, but I found a way of...

Last week, I lied to my students. After I explained how the rem unit worked, I told them that they could compare px and rem by increasing the font size in their mobile browsers and see how it affects text zoom.Before I said that, we created a simple test page with two paragraphs and two rules. HTML Hello World! Hello World! CSS .px { ...

All major browsers except Firefox (coming soon!) support the @property at-rule. It enables you to do things you previously couldn't, like animating custom properties.Let's say you have two animations. One fades an element; the other moves it. Based on their motion preference, users see one or the other. .banner { background: #000; ...

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. That may be visually appealing, but it can distract some people and impair legibility.Operating systems like macOS and Windows offer...

I am always pleasantly surprised when I find useful skip links. That's why I decided to collect examples here on my blog.I'll start with ikea.com. The first focusable element on every page is a skip link that allows you to skip the entire header, which makes sense because there are 15 interactive elements in it. Sidenote: I'm not sure why they...

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 got most of the work done on the train and made some final changes on Monday.There's a lot you should consider when migrating from one tech stack to another. I didn't. I yoloed it, uploaded the site, and...

I specialize in HTML and CSS, but I also write JS. Especially in the last year or so, I wrote quite a lot of JavaScript because we decided to port the front end of one of my clients to web components. When I first learned about web components, I had a lot of questions, especially regarding accessibility. While I found answers to many of them, I...

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.About the workshop clamp(), :is(), :where(), min(), max(), lab(), lch(), oklab(), oklch(), cascade layers, container queries, logical properties,...

There are different ways of selecting the scoping root inside a @scope rule.When you use the :scope pseudo-class in a stylesheet, it matches the :root element. :root { border: 10px solid red; } :scope { border-color: blue; } /* -> 10px blue border on the element */ When you use it inside a scope rule, it matches the rule's scoping...

When I started to work with web components, I compared different options and decided to go with lit. I knew the extra performance cost would pay off quickly, and it fit into my performance budget. I’m still happy with my decision. .pro { color: green; } .con { color: red; } I was new to web components and lit, so I had to consult...

I read Steve Faulkners “hasPopup hasPoop” where he mentions differences in what screen readers announce when dealing with the aria-haspopup attribute. I wanted to know how that manifests used on a button. table { table-layout: fixed; white-space: nowrap; } tbody td { background: green; color: #fff; } tbody th { ...

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. I’ve always wondered why. Even in James Edwards’ “The anatomy of visually-hidden” I didn’t find the answer because he wasn’t sure either. While testing a client’s site a few minutes ago, I found at least one good reason....

Here’s a job interview question for you: When you click a button and call the showModal() method to open a modal , where does the focus go by default, and how can you move it elsewhere?Don't know the answer? Neither did I, so I tested it. OS/Browsers macOs 13.4.1 Ventura Chrome 114 Firefox 115 Safari 16.5.1 Here’s a Codepen with all demos so you...

I wanted to know how and if common screen readers expose the element. Here are my results:Summary tl;dr: shit's complicated. Some screen readers don't announce articles and have no default quick nav shortcuts. Some don't announce them but treat them as landmarks. Others announce them as articles and treat them as landmarks. There's no difference...

An important factor in terms of UX and accessibility for deciding whether the element is the right solution for a problem is the find-in-page behaviour.In Chromium-based browsers, the details element automatically opens when it contains a string the user searches for. If Safari and Firefox, it has to be opened for the find-in-page feature to...

I wanted to know how well common screen readers and browsers support search and form landmarks. Here are my results: table { table-layout: fixed; white-space: nowrap; } tbody td { background: green; color: #fff; } tbody th { font-weight: normal; /* position: sticky; left: 0;*/ } td.no { background:...

*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 in CSS, and if you ignore the fact that they can help you organise and manage your own and...

Similar to container queries or cascade layers, we have another new impactful feature in CSS: scoping.Let's start nice and easy by reading the spec. A scope is a subtree or fragment of a document, which can be used by selectors for more targeted matching. More targeted matching sounds great. We can use the @scope rule to scope styles of a child...

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. The episode is called “Nothing in CSS - 0 vs 0px, no, none, hidden, initial and unset”, and they’re talking about all the things that can be 0, none, or hidden in CSS and HTML. Super interesting stuff, but...

I just came home after three beautiful days in Amsterdam, where I gave a talk at the CSS Day conference. I’ve watched many inspirational and engaging presentations and had many interesting conversations. My biggest takeaway: The CSS community needs you!First things first: CSS Day is a wonderful event, and the community is lovely. If you can,...

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 trash. li { margin: 0 !important; } I couldn't reproduce the issue on my Mac, but I...

Once again I’ve teamed up with my friends at Smashing Magazine 😻 to share with you everything I know about web accessibility testing! In this smashing workshop we’ll talk about automatic and manual testing, screen reader basics, Single Page Applications, Dev Tools, and more. Sounds interesting? Great! Here are some more details about the...

Scott O'Hara wrote a fantastic blog post about the details and summary elements last year. He explains that there are a lot of oddities and inconsistencies, and he backs his statements with detailed testing.To better understand the extent of these oddities and inconsistencies, I did my own testing (not as detailed as Scott's), and here's what I...

I rewatched Lea Verous’s talk about custom properties recently and learned something I missed the first time I watched it.A declaration of a custom property can be invalid at computed-value time, if its value is invalid. Depending on the property’s type, this results in the property being set to unset, so either the property’s inherited value or...

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. In this evergreen post, I collect them.…if you're using javascript:void(0) as the value of the href attribute, the element you're actually looking for is . Open modal More accessible...

The new WebAim 1 Million report was recently published, and the results are sobering. Compared to the previous year, 0.5% fewer websites contained automatically detectable accessibility issues, but the total number of erroneous websites is still 96.3%.The number of empty links increased by 0.4% from 49.7% to 50.1%. More than half of the websites...

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.Visually hidden content I'd love to see a native implementation of visually hidden text. I’m not the biggest fan of hiding stuff only for some, but it’s inevitable sometimes. Instead of this: .visually-hidden { ...

OMG, I did it, day 100! 4 months and 16 days ago I published the first post and then I wrote another post every workday for 138 days straight without missing a single day. In this final post, I want to do a quick recap and give an outlook for what's coming next.Recap Starting this project was one of the best and worst ideas I ever had. It was a...

Sometimes it seems like accessibility experts and other web professionals hate JavaScript. This might be true for some, but most understand that JavaScript can be useful for improving UX and even accessibility. JavaScript solutions are often more accessible than their pure HTML or CSS counterparts.We know JavaScript is not an enemy, but,...

Nesting in CSS is coming soon! For me personally not the killer feature, at least compared to cascade layers or container queries, but still exciting. Let’s see how it works.The most important thing to know about native nesting in CSS is that the nested selector always must start with a symbol (. # : [ * + > ~) because of limitations in browser...

oklab() and oklch() are okay versions of lab() and lch() because lab() and lch() are not okay.I will not pretend that I really understand this whole color on the web thing, how it works or why one color function offers many more options to developers than the other, but I did learn several things during this experiment. I understand why a color...

It’s possible to animate gap, grid-template-columns, and grid-template-rows.Almost 6 years ago I wrote a blog post on CodePen titled “Animating CSS Grid Layout properties”. A lot has changed since then, especially recently, and I wanted to update the post, but the blogging feature on CodePen has been sunset and I can’t edit the post anymore....

The margin-trim property allows a container element to trim the margins of its children where they adjoin the container’s edges.Let’s say we have a parent element and 4 children, and we use margin-block-end to add some spacing between these elements. A B C D li { margin-block-end: 1rem; } [data-sample] ul { list-style: none; ...

The color-mix() function takes two colors and returns the result of mixing them, in a given color space, by a specified amount.To mix colors, pass the in keyword, followed by the color space, and 2 colors. body { background-color: color-mix(in srgb, blue, white); } The syntax is pretty straightforward, but the result is not so much. At least...

The accent-color CSS property allows us to specify the accent color for user-interface controls generated by an element.Yeah, I know, yet another property that isn’t new at all, but Safari added support only recently (in 15.4) and I’ve never used it. Reason enough for me to include it in the series. We can use the property to change the accent...

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.Currently, the CSS colors we can define are in the sRGB color space. For the longest time, professional monitors weren’t able to display all possible colors in this range. So,...

With the relative color syntax we can modify existing colors using color functions. If an origin color is specified, each color channel can either be directly specified, or taken from the origin color and modified.For example, we can take a HEX color and add opacity using the rgb() color function and the from keyword. [data-sample] div { ...

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.Since this is not an official selector, but more something like a hack, it can be hard to read and interpret. So, let’s start nice and easy. We have three buttons. If we hover/focus one button and...

Rules within a container query only apply to descendants of that container.If you write a media query and you put rules in the media block, the rules apply to the entire document. Apply rules @media (min-width: 1024px) { * { outline: 4px solid } } @media (min-width: 1024px) { .demo1, .demo1 * { outline: 4px solid } } .demo4...

Style queries may change the way we write CSS significantly. Caution: If you’re a fan of Tailwind or similar utility frameworks, you might find this post offensive because it suggests using fewer classes instead of more. On day 80 I’ve introduced you to container style queries. I’ve showed you a practical example from a project I was working on...

CSS Motion path allows you to position any graphical object and animate it along a specified path. .square { background: hsl(93deg 75% 49%); height: 2em; width: 2em; position: absolute; inset-inline-start: 0; inset-block-start: 0; } .sample2 .square { offset-path: path("m4,139c0,-1.31731 7.78207,-137...

You can use mask properties to apply a mask to an element. .post img { border: none; } .mask { -webkit-mask-image: url(/blog/2023/100daysof-day87/htmhell_logo.svg); mask-image: url(/blog/2023/100daysof-day87/htmhell_logo.svg); } .mask-size { -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat:...

The initial-letter property specifies size and sink for initial letters.@supports (-webkit-initial-letter: 1) or (initial-letter: 1) { p::first-letter { -webkit-initial-letter: 3; initial-letter: 3; } } The property takes two arguments. The first one defines the size of the initial letter in terms of how many lines it occupies. The...

Registering typed custom properties can be useful in container style queries.The following container style query matches because the computed value of both --bg and --color is “red”. html { --color: red; } .card { --bg: red; } /* Condition is true, styles applied */ @container style(--bg: var(--keyword)) { h1 { border: 10px dotted...

The @property rule allows you to register custom properties.You can already define custom properties, but the difference between defining and registering is that the at-rule allows you to specify the type and other attributes. @property --hue { /* The type. */ syntax: ''; /* Is it an inhertiable property? */ inherits: false; /* The...

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. On day 82, I’ve explained that the value of a property can come from different sources, undergo adjustments before it becomes the actual value, and take on different forms along the way....

This post differs from most of the other posts because it’s not about modern CSS, but about CSS fundamentals. When I was writing about custom properties and especially about container style queries, I realized that I had to understand some of the basics of the language first before I could comprehend how certain properties and rules worked.The...

On day 66, I’ve introduced you to individual transform properties. An interesting detail about these properties is the order in which transforms are applied compared to the transform property.If you use the transform property, transformation functions are applied in the order of appearance, from left to right. .button1 { transform:...

Container style queries allow querying the computed values of a query container.No browser supports it yet, but we should be able to do something like this: .card { aspect-ratio: 1 / 1; } .card--wide { aspect-ratio: 16 / 9 } @container style(aspect-ratio: 16 / 9) { img { object-fit: cover; } } We can check whether a container has a...

You can use the @supports rule to check whether a browser supports a specified font technology or font format.font-tech() @supports font-tech(palettes) { .palette { display: block; } } @supports not font-tech(incremental) { .incremental { display: block; } } @supports font-format(woff2) { .woff { ...

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.There are many reasons, but one of them is that in combination with custom properties, working with color functions is so much easier, cleaner, and understandable compared to working with hex colors or rbg()....

Container queries come with their own units. [data-sample] div { outline: 10px solid; overflow: auto; margin: 1rem; } .sample2 div { container-type: inline-size; } [data-sample] h2 { background-color: yellow; border: 5px solid; padding: 1rem; margin: 1rem; inline-size: 80cqi; } Container query 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. Here’s an example of how using inline-size over width makes a difference. [data-sample] h1 { border: 1rem solid; padding: 1rem; } [data-sample] h1:not(:last-child)...

You can use the override-colors property to override colors in a font palette.Color fonts come with one or more predefined color palettes. You can select them by using the font-palette property. You can also define your own color palettes or change specific colors in a palette using the override-colors property. @font-face { font-family:...

Apparently, multicolored typefaces on the web are a thing. You can use and modify them in CSS. @font-face { font-family: 'Rocher'; src: url('/blog/2023/100daysof-day76/RocherColorGX.woff2'); } @font-palette-values --pink { font-family: 'Rocher'; base-palette: 1; } @font-palette-values --green { font-family: 'Rocher'; base-palette: 2;...

In order to understand how !important works in cascade layers, you have to understand how !important works generally. The conclusion of this post might not be what you expect. .sample1 h1 { color: green; } .sample1 h1 { color: red; } .sample2 h1 { color: green !important; } .sample2 h1 { color: red; } @layer base...

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. There is no block-size option because it wasn’t possible for browsers to implement, but there is a size option, which establishes size...

If you’re creating a masonry layout, the packing algorithm puts items into the column with the most space by default. This can cause accessibility issues. The masonry-auto-flow property gives us control over the automatic placement of items in a masonry layout.In the following layout, you can see how the tile for “Day 63” is placed in the middle...

I started my last year in review post with the words “2021 was wild!”. If 2021 was wild, then I don’t know what 2022 was because so much stuff was going on last year.Personal Our daughter was born in 2021, and suddenly she’s 19 months old. It’s killing me how fast time flies. It’s still amazing to watch her grow and learn new things. Looking at...

The masonry keyword allows you to create masonry grid layouts.If you want to create a masonry layout, all you have to do is turn one of the grid axes into a masonry axis using the masonry keyword. Day 70: the defined pseudo-class Day 69: width in container queries Day 68: cascade layers...

:defined represents any element that has been defined. This includes standard elements and custom elements that have been successfully defined. [data-sample] :defined { background-color: #000; color: #fff; } class BasicComponent extends HTMLElement { constructor() { super(); } } customElements.define('de-fined', BasicComponent);...

In a media query, it’s obvious what width means. It always refers to the width of the viewport. With size container queries it’s not that obvious./* Kicks in when the viewport has a minimum width of 500px */ @media (min-width: 500px) { body { background-color: hotpink; } } width in a size container query queries the width of the...

Cascade layers are one of the most interesting and useful additions to CSS recently. It will change the way we write CSS, how we use selectors, naming conventions, and probably also more things that I can’t think of right now.If you’re as excited about using cascade layers as I am, you have to consider browser support before you get started....

There are a lot of interesting things you can do with the :has() pseudo-class. I’ve already covered some of them on day 26.If you want to style an element based on the number of direct children it has, you can do that with just CSS. Let's say you want to style a list in a certain way when it contains at least three items. You use the :has()...

From now on you can transform elements with the translate, rotate, and scale properties.Let’s say you apply several transforms to an element, and on :hover and :focus you only want to change one of them, for example, scale. Transform button { transform: translateX(20px) rotate(15deg) scale(1); } button:is(:hover, :focus) { transform:...

Relative units used in container queries work differently than relative units in media queries.If you use em in a media query, the font-size of the , , or any other element on the page doesn't matter. That's because relative length units in media queries are based on the initial value, which means that units are never based on results of...

With cascade layers comes a new CSS-wide property value, revert-layer.You can use the revert-layer keyword to roll back the cascade to a value defined in a previous layer. In the following example, the base layer defines a black color for the border. The theme layer sets the border color to fuchsia. In a print media query within the theme layer...

There are several CSS-wide property values you can use to specify a particular defaulting behavior for a property explicitly.Okay, okay, I know, these keywords aren't new at all, except for revert maybe which is newish, but if I want to write about revert-layer, which is brand new, I need a basic understanding of all keywords. Also, I had the...

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 container shorthand allows you to define both properties in a single property, [name] / [type]. section { container: wrapper / inline-size; /* ...

The color-scheme property allows you to indicate which color schemes an element can be rendered in.This post is inspired by Sara Wallén’s article “Do you know color-scheme?” in the HTMHell advent calendar 2022. Read it to learn more about the feature and other ways of using it. If you create an HTML document, it comes with default styles that are...

You can use the ::part CSS pseudo-element to style an element within a shadow tree.Let's have a look at the following web component. There's a heading and a paragraph in the shadow DOM and we can pass content via light DOM. class NewsTeasers extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); ...

When you add a container query, it will look for the nearest ancestor container, by default. If you have multiple nested containers or if you just want to make sure that your query uses the right container, you can name containers and query them specifically.Let's say, we have 2 size containers, .wrapper and . Latest news Hey,...

On day 43, we've learned how to group layers and on day 46, how to order them. In this post, we’ll look into ordering grouped layers.If we take the following layer, the background color of the will be red because the last defined layer has precedence over previously defined layers. @layer base { @layer reset { p { background-color:...

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.The other day I logged into Twitter with my HTMHell account and I looked at the feed. It was full of opinions by “tech personalities” (men), funny tweets, and random videos. It felt like being on Reddit or...

With CSS Media Queries Level 4, it's possible to use mathematical comparison operators in media queries.Instead of (min-width: 768px) you can now write (width >= 768px). Before @media(min-width: 768px) { body { background-color: aqua; } } After @media(width >= 768px) { body { background-color: aqua; } } Before @media(min-width:...

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.You can query all kinds of things,...

In all previous posts about cascade layers I’ve used named layers in the demos, but it’s actually not required to name them.Using @layer without a name works just as well. The downsides are that you can’t append styles elsewhere in the document to the same layer and you can’t define a custom order since you don’t have a name to reference them....

Support for a CSS property isn’t the only thing you can check with @supports(), you can also check support for a selector.I knew you can check whether a property is supported by the current browser and apply styles accordingly. @supports (display: grid) { .grid { display: block } } @supports selector(:has(a)) { .has { display: block }...

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.In some mobile browsers, you can refresh the page by swiping down when the page is scrolled to the very top. That's called pull-to-refresh. This is a great feature,...

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.@layer base, components, theme, framework; You can create as many lists as so you want, but the important thing to remember is that layers are stacked based on the...

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 , , , or , 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. ...

Something I was tripping over when I began learning about :has() was the combination with :not().Let me show you what I got wrong by using an example. Let's say we have two cards, each with a heading and some text. One of them also contains an image. Card with image text Card without image text .democard.card { border: 4px solid; ...

You can use @import to load entire style sheets into a cascade layer.@import url("path/to/the/styles.css") layer(layername); For example, you could load something like Bootstrap into a dedicated third-party layer. @layer third-party, base, components, utility; @import...

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.If you have an outer element and an inner element and you want the inner element to fill its parent, you can use...

You can use the overscroll-behavior property to disable scroll-chaining.If you scroll the inner box in the following example to the end and you keep scrolling, the outer box starts scrolling, too, and finally the whole page. .demo.outer, .demo .inner { padding: 1rem; border: 10px solid; overflow: auto; font-size: 1rem; } .demo.outer...

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.In the following example, the border color of the paragraph is first red, then blue, then rebeccapurple, and finally green. @layer base { p { border: 10px solid red; } } @layer framework { p...

When you pass an element to a web component through a , you can select that element using the ::slotted() pseudo-element and apply additional styles.Let's take the following component. There's a paragraph in the shadow DOM and another paragraph coming from the light DOM, passed through a , and there's a global style turning the background color...

Thanks to Flexbox and CSS Grid no one seems to talk about float and clear anymore,…except for me now because there's news.Floating and clearing has lost its importance for layout, but they are still useful properties. Just like for margin or border, you can now use logical properties for floating and clearing. img { float: inline-start; /* or...

Cascade layers can be grouped by nesting layer rules.If you work on a large style sheet, you might want to create cascade layers to group different types of declarations. In order to give your layers even more structure and control, you can also group declarations within layers. Consider the following example. We have a layer for reset styles,...

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. That’s reason enough for me to write about it. :)Defining ratios You can use the aspect-ratio property to define the preferred aspect ratio for a box by defining a preferred width and height....

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-pressed="true"] { --background-image: "/pressed.svg"; } This looks fine, but it doesn't work...

On day 37 we learned that we can get more control over specificity by creating layers. That first, simple example is pretty straightforward, but what happens if we mix layered and unlayered styles?Let's start nice and simple with a single layer. The border of this quote is red. There's only one Return, okay, and it ain't of the king... @layer...

On day 11 I've introduced you to space-separated functional color notations. Early color functions like rgb() and hsl() support both the old comma-separated and the new space-separated syntax./* ✅ works */ div { background-color: rgb(255, 210, 210); color: hsl(150, 76%, 20%); } /* ✅ works */ div { background-color: rgb(255 210 210); ...

Using the viewport unit vh in desktop browsers is usually straight-forward, 100vh matches the height of the viewport. On mobile that's different because the viewport height changes depending on whether or not certain user interface elements are visible, 100vh doesn't always match the height of the viewport.On mobile we have the small viewport and...

Cascade layers introduce a new way of managing specificity in CSS.Let’s say we’re using a combination of a tag and an attribute selector for styling e-mail input fields. This declaration is part of our base stylesheet and comes early in the stylesheet. Later in the document, we want to use a class to overwrite parts of the base styling:...

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. World! p:has(strong) { background-color: aqua; } .p:has(strong) { background-color: aqua; } .p2::before, .p3::before{ content: "Hello"; } .p3:has(:hover) { ...

There's a difference between listing selectors in :where(), :is(), and :has() and listing them in a regular selector list.Let's say you have a button with the class .button and you apply the following styles. .button:hover { background-color: hwb(100 0% 20%); } I'm a button .button1:hover { background-color: hwb(100 0% 20%); } ...

Thoughts on when it’s better to use :is() over :where() and vice versa.The other day, I posted this code snippet on social media, asking people whether it was readable. summary:where(:hover, :focus-visible)::after { transform: rotate(180deg); } Some people responded they prefer :is() over :where() because it’s shorter or less typing. Others...

You can use full math expressions in the comparison functions min(), max(), and clamp(). There’s no need to nest a calc() function inside.Writing… div { border: max(20px, calc(1vw + 10px)) solid; } …is the same as writing… div { border: max(20px, 1vw + 10px) solid; } You can also use custom properties. .var { --extra: 10px; border-width:...

The clamp() function defines a minimum value, a preferred value, and a maximum value. .div { border: 1em solid hwb(200 0% 0%); padding: 1rem; } .minmax { width: max(300px, min(90%, 700px)); } .clamp { width: clamp(300px, 90%, 700px); } .max { width: max(300px, 90%); } .min { width: min(90%, 700px); } A quick recap of min() and max()...

I’ve teamed up with my friends at Smashing Magazine 😻 to share with you everything I know about web accessibility testing! In this smashing workshop we’ll talk about automatic and manual testing, screen reader basics, Single Page Applications, Dev Tools, and more. Sounds interesting? Great! Here are some more details about the...

Just like for margin or padding, there are also logical property variations for border properties.Originally there were 4 shorthand properties we could use for defining borders. border - 1, 2, or 3 values (size, style, color) border-width - 1, 2, 3, or 4 size values for the different sides border-style - 1, 2, 3, or 4 style values for the...

Like the lab() color function, hwb() is one of the more recent methods for defining colors in CSS. Just like rgb() and hsl() it uses colors from the sRGB color space. HWB, which stands for hue-whiteness-blackness, describes colors with a starting hue, then a degree of whiteness and blackness to mix into that base hue.The function takes 3...

Using !important with custom properties might not work as you expect.If you look at the following example, which color does the text have? .example1 { --color: red; color: var(--color) !important; color: blue; } .example2 { --color: red !important; color: var(--color); color: blue; } .example3 { --color:...

We already know that we can encapsulate styles within a web component and we know that web components inherit styles. Another interesting feature of web components in terms of CSS is that custom properties used in a web component can be modified from the outside.Let's take this basic alert component. class Alert extends HTMLElement { ...

Adjustable features of a variable font are called axes. You can use the font-variations-settings property to change these features by specifying the four letter axis name along with a value. @font-face { font-family: 'Saira'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src:...

On October 23rd I got shadowbanned on Twitter, followed by a permanent suspension on October 25th. As someone who was very active on Twitter, I was surprised, shocked, and sad that this happened. Especially because I didn’t know why it happened. Some of you might think, “Who cares, it’s just social media?!”, and yeah, you’re right, it is just...

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.Child combinators You can check whether an element contains a specific direct child element. For example, if you have a fieldset...

When I wrote about the scrollbar-gutter property, my first thought was “omg! I'll put this in my reset stylesheet and use it on the by default”. I wanted to do that in order to prevent the page from “jumping” when switching from a long to a short page, a page with overflow to one without.Here's a quick demo to illustrate the issue. When...

The backdrop-filter property allows you to apply CSS filters to the area behind an element. This could be the background of an element or the backdrop of a dialog.In the following example, the parent element has a background image, nothing special about it, but the inner elements all have a backdrop-filter applied which changes how the image...

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.Currently, the CSS colors we can define are in the sRGB color space. For the longest time, professional monitors weren’t able to display all possible colors in this range. So,...

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. ::backdrop { background-color: rgb(0 0 155 / 0.5); } .dialog2::backdrop { background: conic-gradient(red, orange, yellow, green, red); outline: 20px solid white; ...

When I opened Twitter on Monday morning, I saw this: After careful review, they determined that my account broke the Twitter Rules. Okay, let's have a look at the rules to get an idea of what could've caused this ban. You break the rules if your tweets contain content related to anything in this list: Violence Terrorism/violent extremism Child...

You can create gradients with color transitions rotated around a center point, rather than radiating from the center, by using the conic-gradient() function.There are many options to customize conic gradients. .uno { background-image: conic-gradient(aqua, fuchsia, salmon, aqua); } .due { background-image: conic-gradient(aqua,...

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. The scrollbar gutter is the space between the inner border edge and the outer padding edge of an element used by the scrollbar.By default, if the content in an element is not overflowing,...

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; } Name E-Mail input:placeholder-shown { outline: 5px solid blue; } Name E-Mail PS: Yeah, I know, that one has been around for quite a while...

We already know that we can encapsulate styles within a web component by adding elements along with the styles to the shadow DOM. Global style declarations from outside don’t overwrite styles inside the web component. Shadow DOM doesn't provide total encapsulation, though.If you look at the following component, you’ll notice that it uses the same...

You can use the :picture-in-picture pseudo-class to style an element, usually a , which is currently in picture-in-picture mode (PIP).Clicking the following button puts the video in picture-in-picture mode in supporting browsers (Chrome, Edge, Safari, Opera). Firefox doesn't support the API, but you can right-click the video and select “Watch in...

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. Unlike :nth-child() or :link, :has() itself doesn't add to the specificity. yo! /* A tag and a class */ div:has(.child) { background: red; } /* A tag: specificty too low */ div { background:...

There are two methods you can use to open a 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 rest of the content, and you can’t interact with the rest of the page.You can use the :modal...

There's an important difference between :is() and :where().Let's take the following example. We have two buttons and we use :where() on the first button to apply a background color and :is() on the second button. button { border: none; color: #fff; font: inherit; font-size: 1.2rem; padding: 0.5rem 1rem; } ...

The :where() and :is() pseudo-classes allow you to write large lists of selectors in a more compact form. You can combine selectors instead of writing repetitive lists.Combining input types /* Before */ input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="search"] { border: 2px...

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 decide whether it’s smart to use this in production or not, but I want to break it down 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. That changes with Module Level 4, now you can also provide space-separated arguments. .div { width: 100px; height: 100px; } .div1 { background-color: rgb(255 0 0);} .div2 {...

I was wondering what happens with HTML elements in web components when I add styles to the document. Under which circumstances do global styles defined in a style element or external stylesheet apply to these elements?As it turns out, it depends on how you create and use the components. In my test setup I have an HTML document, a stylesheet and...

The inset property is a shorthand for the top, right, bottom, and/or left properties. It implements the same multi-value syntax like margin. At bottom right with 20px offset .parent { width: 12rem; height: 12rem; position: relative; } .child { position: absolute; /* top: auto; right: 20px; bottom: 20px; left: auto */ inset:...

The :has() pseudo-class cannot be nested; :has() is not valid within :has(). I have a red and blue border in supporting browsers. /* valid */ div:has(p) { border: 4px solid red; } /* valid */ p:has(strong) { border: 4px solid blue; } /* invalid */ div:has(p:has(strong)) { border: 4px solid green; } .div:has(p) { border: 4px...

Subgrid allows a grid-item with its own grid to align with its parent grid (currently only in Firefox 71+ and Safari 16+).In the following example, the div elements use the grid defined in the dl element. The result is that all the dt and dd elements are aligned in the same “columns” respectively, even though they’re not on the same level in the...

:has() allows you to check whether a parent element contains specific children.In the following example, each .form-item that contains/has a child with the aria-invalid attribute set to “true” displays text in red color. (currently only in Chrome/Edge 105+ and Safari 15.4+) .form-item { --color: #000; color: var(--color); } input { border:...

The max() function takes a comma separated list of expressions. The largest value in the list will be selected.div { width: max(400px, 200px, 300px); /* width = 400px */ } This example doesn’t make much sense because the value will always be 400px. max() shows its true power when you use relative units. div { width: max(300px, 50vw); } If...

The min() function takes a comma separated list of expressions. The smallest value in the list will be selected.div { width: min(400px, 200px, 300px); /* width = 200px */ } This example doesn’t make much sense because the value will always be 200px. min() shows its true power when you use relative units. div { width: min(100%, 800px); } If...

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.Physical margin Physical margin rtl button { margin: 20px 40px 10px 100px; } /* LTR: 20px 40px 10px 100px RTL: 20px 40px 10px 100px */ .physical { margin: 20px 40px...

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. This is especially useful, if you’re dealing with websites that are presented in different languages and writing modes, like right-to-left.Physical properties We're used to working with...

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no...

You can pass a second value to the var() CSS function which acts as a fallback for when the property has not been set.Fallbacks .demo { width: 5rem; height: 5rem; border: 5px solid; } .one { background-color: var(--not-set, #000); } .two { background-color: var(--not-set, var(--also-not-set, #00F)); } .three { background-color:...

Shortly after we got our new car, a Volkswagen T5, I noticed many people seemed to have the same car. Actually, it was everywhere.It felt like everyone had the same car. While sales of camping vans and cars that can be used for camping in fact have increased during the pandemic, there’s another reason I saw so many of them, the Frequency illusion...

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.You might be thinking that Heydon Pickering already solved that 7 years ago in Quantity Queries for CSS, but that's not what I'm talking about. /* Quantity Queries for CSS by Heydon Pickering */ /* Three or more items...

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. A blue outline around a focused button in Firefox outline is great The outline property is the perfect candidate for this job for several...

Historically, Lighthouse has analyzed the cold pageload of a page only. Clicking the “Generate report” button reloads the page before Lighthouse runs its tests. This can be problematic when you want to run tests on parts of the UI that are only visible when the user interacts with it. For example, a fly-out navigation, a modal window, or the...

Yes, clickbait, I’m so sorry! Of course, divs are not bad. For example, they can be really useful,… …when you need additional elements for styling. …for structuring content, when there’s no other suitable element. …when you need custom landmarks. Even though there’s nothing wrong with the div per se, some people, including me, still like to...

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.I don’t know whether this is a trend, or just a coincidence, but I see a lot of these meta tags on sites: This prevents users from being able to...

This week I’ll be speaking at the Bonn Code Meetup about accessibility testing. I’m joining Konstantin Tieber who’ll talk about the What, Why, Who and How of building accessible web applications. I’ll show you how I built “The Most Inaccessible Site Possible With A Perfect Lighthouse Score”.Join us Online at 7pm CEST on Wednesday, February 23rd...

I decided to learn more about areas of web development I don’t know a lot about. You know,…stuff like SEO and web security. I’ll share my findings here on my blog and I’ll try to do as much research as possible, but please keep in mind that I’m a noob concerning these topics.I began watching Feross Aboukhadijeh’s fantastic Web Security lecture,...

Earlier this week I learned about CSS Cascade Layers and now I’m all hyped up because I really like the concept. I’m eager to find out how we can use them to improve and rethink the architecture of our styles.I will not explain how CSS Cascade Layers work because Bramus and Stephanie have already done that and they did it much better than I ever...

I built an interactive demo to illustrate how specificity in CSS works. main { background: rgb(250 250 250 /0.6) !important; } Press the “Add selector” and “Remove selector” buttons to add or remove a selector in the list of declarations and see how the background color changes accordingly. Each selector will be added to the top of the list to...

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. This time I'm trying to find out what I didn’t know about the :where() pseudo-class. Okay, I’ll be honest. When I heard about the :where() pseudo-class for the first time, I wasn’t impressed because reading a rule like the following hurt my...

2021 was wild! That’s why I’ve decided to write an “A year in review” post for the first time.Personal Let me start with the most important thing that happened in 2021: Our daughter Johanna was born on May 19th. I can’t describe how beautiful the entire experience was and still is. For the first two days, I wasn’t able to look at her for longer...

I’ve teamed up with my friends at Smashing Magazine 😻 to share with you everything I know about web accessibility testing! In this smashing workshop we’ll talk about automatic and manual testing, screen reader basics, Single Page Applications, Dev Tools, and more. Sounds interesting? Great! Here are some more details about the...

Did you know that there are 112 elements in HTML?! Heading The markup above is something I see a lot on websites I audit professionally or when I just look under...

I don’t know who needs to hear this, but that’s the current browser support for :focus-visible and :focus-within, and I love it!:focus-visible browser support :focus-within browser support My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

Every element I use for the basic structure of a HTML document, with explanations why.Traducción a Español by www.ibidemgroup.com. Usually when I start a new project, I either copy the HTML structure of the last site I built or I head over to HTML5 Boilerplate and copy their boilerplate. Recently I didn’t start a new project, but I had to...

The col element allows us to style columns in tables.In the past, I’ve used the colgroup and col elements to define max-widths for columns in tables when I didn’t want to rely on the default algorithm for distribution of widths, usually when building templates for e-mail newsletters. A simple table with dummy content First...

“Break on Subtree Modification” allows you to debug dynamically added and removed DOM nodes.The other day I was debugging a Drag’n’Drop component, and I noticed that it added a DOM node every time I dragged an element. I wanted to inspect the node and see what’s going on in the CSS panel, but as soon as I dropped the element I was dragging, the...

For your and my inspiration: A collection of websites that don’t hide the navigation on mobile behind a burger/menu button. Show some, hide the rest Single row, centered Single row, space-between Single row, scrollable Multiple rows Vertical navigation Single row, additional icons Multiple rows,...

I haven’t thought about ordering CSS properties in a while, but I began to work on the redesign of HTMHell recently and I decided to challenge my current approach.How I’m ordering CSS properties now Honestly, I don’t know. It’s a mix of logical grouping, alphabetical order and just no order at all. It kinda has some structure, but I guess you...

My answer to the question “What is one thing you learned about building websites this year?”My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

The lang attribute is an essential component in the basic structure of an HTML document. It’s important that we define it correctly because it affects many aspects of user experience. Unfortunately, the negative effects a missing or wrong attribute can have aren’t always evident. Austrian news site orf.at learned that the hard way...

In the first article of this series, I explained how important progressive enhancement is for web accessibility. Building websites layer by layer allows for a cleaner separation of concerns and more resilient experiences. This second article is about user preferences and how to respect them when writing CSS.In this series This series of articles...

About 4 years ago, I began to focus on web accessibility professionally. I read many articles and books, watched talks, followed experts, and I also shared my knowledge at meet-ups and online. The first 3 articles I wrote were Writing HTML with Accessibility in Mind, Writing JavaScript with Accessibility in Mind, and Writing CSS with...

According to WebAims annual accessibility analysis, 98.1% of home pages of the top 1,000,000 websites have detectable WCAG 2.0 failures. Some of these sites may only have minor contrast issues or maybe just a single missing id, while others are highly inaccessible. However, this number is pretty damn high, considering the fact that automatic...

I’m working on a project where I have a list of items in reverse order. The list starts with the latest item and ends with the oldest. I wanted to express that both semantically and visually. I did some research and found interesting solutions, some of them good, others not so much.The result should look a little like this. 3. C 2. B 1. A Let’s...

This is part 3 of my series Here’s what I didn’t know about… in which I try to learn new things about CSS. This time I'm trying to find out what I didn’t know about the content property.A few weeks ago Stefan published a post on his website called “The CSS "content" property accepts alternative text”, which blew my mind. He showed that the...

Nokia released an updated version of its iconic Nokia 3310 about 3 years ago. It was affordable for me (€60/$65), so I had to get one. It came with a 2 MP camera, a battery that lasts 30 days (up to 22 hours talk time), 2G, 16 MB storage, the original Snake game, and a browser. Screenshot: Nokia. Opera Mini You can access the worldwide web on the...

I can’t stress enough how important it is to blog if you want to become better at web development. You learn so much more by explaining something in your own words than by just reading and copying & pasting.I overcame my fear of writing and speaking, because I realized that… It doesn’t matter if someone else has written about the same topic....

This is part 2 of my series Here’s what I didn’t know about… in which I try to learn new things about CSS. This time I'm trying to find out what I didn’t know about the color property.When setting the CSS color property, 2 things happen. The foreground color value of an element's text changes. The currentcolor value changes. a { color: #237680;...

While testing a new feature recently, I realised that I don’t know too many browsers. I can list some, but I don‘t really know them like I know Firefox or Chrome. I want to change that, and I invite you to do the same.Firefox Developer Tools have improved so much in the last few years that I naturally switched from Chrome as my main development...

The question how good good enough is and at which point a website is ready to go online is keeping me busy lately. The web is in bad shape and it’s because we’re making it too easy on ourselves. “It’s online and works in most browsers” is not enough - we have to be much more considerate of what we’re putting online.Some background: About three...

Ich bin seit etwa einem Jahr angestellt und viele Dinge sind anders als bei meiner freiberuflichen Tätigkeit zuvor. Eine interessante Neuerung ist, dass ich regelmäßig die Zugänglichkeit von Tools Dritter bewerten muss. Dabei bleibt normalerweise keine Zeit für eine vollständige Prüfung, ich muss mir so schnell wie möglich einen guten Überblick...

I’ve been employed for about a year now and many things are different compared to being a freelancer. One interesting thing in my specific situation is that I have to evaluate the accessibility of third-party tools regularly. Usually there’s no time for a full audit, I have to gain a good overview of the quality of a product as quickly as...

It’s 7:25 a.m. and I’ve already learned so much. Actually, I just wanted to write a few paragraphs for an article about accessibility in CSS before I go to work, but I got caught up reading about animation on the web and vestibular disorders.The articles I read written by Eric W. Bailey and Shell Little, Val Head, and Facundo Corradini are so...

Recently, it feels like I see a property, a property value or a selector I haven’t heard about pop up every day. Often these things I learn aren’t even that new, which makes me wonder how much I don’t know about CSS.In this series of articles I’m (re)visiting CSS properties and selectors, trying to find out what I didn’t know about them. Here’s...

At the CSS-in-Vienna meet-up last week Ulrich told me that starting with Chrome 79 it's possible to define a string value for the list-style-type property. I was surprised because I thought ::marker was supposed to solve that. That's why I did some research, here’s what I learned.list-style-type accepts a string value In Chrome 79+, Firefox 39+,...

I built a quite complicated component in HTML and CSS last week and I was happy with the result. After testing in different browsers and operating systems, I realised that I had to rewrite the whole thing because I didn’t consider that by default scroll bars don’t take up space on macOS, but on Windows they do. I tweeted about a similar issue...

The this video I explain how I approach design and how I find inspiration, both online and offline. Subscribe to the YouTube channel. In this page Video Transcript Intro Required skills you'll need How I approach design Finding inspiration Outro Video Transcript...

When I talk about web accessibility at meet-ups and conferences, it’s safe to assume that at least one person will ask me something like “Yeah, accessibility sounds nice, but how many people are actually disabled? How many of my users are blind? And why would a blind person visit my website?”1. Who gives a fuck?! We’re not building websites for...

I'm redesigning and building my website from scratch. In this first video I introduce myself and I describe what my plans are for the following weeks and months. Watch it to see if this series of videos is for you or not. In this page Video Transcript Video Transcript [Introduction] Hello and welcome to this first video in a...

I just finished an accessibility audit for a client and I decided to share some quick checks I perform in every site I audit and build. It’s something that you can apply to your project right away, you don’t have to learn a tool or a software.Step 0: Automatic tests The first thing I do is run accessibility checks in Lighthouse to figure out if...

I saw a lot of JavaScript today considering that I was at a CSS conference.It absolutely makes sense because for many people writing CSS means writing JS but I've seen enough pro/con talks about CSS-in-JS. I do enjoy talks that are more advanced and show how to optimize the CSS people write in JS but I'd really love to see a CSS only talk or read...

I don’t consider myself a web accessibility expert but I’ve learned enough in a relatively short time to feel comfortable enough to share my knowledge in blog posts, workshops and talks. Here’s some advice, if you want to share stuff but are wary about doing it.1. Find something that interests you and stick to it. Fullstack is bullshit and so is...

It’s always nice to see when people post their Lighthouse scores on social media to highlight how well they’ve optimised their own or their client's website. It shows that they care about the quality of what they build. .lighthouse-test { position: relative; } .lighthouse-test button { position: absolute; z-index: 111; left: 0; right:...

CSS Grid layout is powerful and flexible. It's great for our development experience, but it may come at the cost of user experience and accessibility if we don’t use it responsibly. This article series gives you an overview of potential implementation pitfalls; or, in other words, the dark side of the...

If you want to improve the accessibility of your React apps but you don't know how or where to start, this talk is just what you need. Manuel shares 12 tips that will help you build web sites and applications that can be used by anyone. Each tip fits on one slide and you'll be able to put them into practice right away without having to learn...

I'm a huge fan of CodePen (No, they didn’t pay me to write this). I'm using it for prototyping, experimenting, sharing code, and in my latest blog post, The Dark Side of the Grid, I'm also making use of their Embedded Pens. CodePen allows you to customize syntax highlighting, and background and text colors of UI elements in Embedded Pens. As a...

CSS Grid Layout is one of the most exciting recent CSS specifications because of its flexibility, extent, and power. It makes our lives so much easier but it also creates new dangers regarding user experience and accessibility. Preface It has already been two years since the first browsers, Chromium 57 and Firefox 52, shipped CSS Grid Layout...

It happened. I finally have a website. Of course, it's not my first website but the first one in a long time. My very first personal site went online about 17 years ago. It was a table-based layout with no CSS at all. All styling happened by adding HTML attributes. ... It was online for about 2 years. After that, the only thing I did...

Last year I attended JS Conf Budapest and I watched many great talks but “YES! Your site can (and should) be accessible” by Laura Carvajal was the most thought-provoking talk for me. Laura explained how the Financial Times made accessibility a core part of their development process and she shared several lessons she and her team had learned. In...

Last year, I assembled A Collection of Interesting Facts about CSS Grid Layout after giving a workshop. This year, I worked on another workshop and I've learned some more exciting facts about the layout spec we all so love. Of course, I'm not going to keep my knowledge to myself. I'm happy to share my findings once again with you, the CSS-Tricks...

Last year I gave a talk about CSS and accessibility at the stahlstadt.js meetup in Linz, Austria. Afterward, an attendee asked why I was interested in accessibility: Did I or someone in my life have a disability? I’m used to answering this question—to which the answer is no—because I get it all the time. A lot of people seem to assume that a...

About a year ago I started to focus more on web accessibility. The most effective method of learning for me is teaching others. That’s one of the reasons why I’m talking at meetups and conferences and why I’m writing articles about the topic. I wrote about Progressive Enhancement for Smashing Magazine and about accessibility basics here on...

Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don't have to specify each track and we don't have to place every item manually makes the new module even better. Grids are flexible enough to adapt to their items. This is all handled by the so called...

When can I start using CSS grid layout?” “Too bad that it’ll take some more years before we can use grid in production.” “Do I need Modernizr in order to make websites with CSS grid layout?” “If I wanted to use grid today, I’d have to build two to three versions of my website.” The CSS grid layout module is one of the most exciting developments...

A few weeks ago I held a CSS Grid Layout workshop. Since I'm, like most of us, also pretty new to the topic, I learned a lot while preparing the slides and demos. I decided to share some of the stuff that was particularly interesting to me, with you.My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

Tips on how to improve the accessibility of your JavaScript components and provide users with more and better ways to interact with your website or web app.My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

An introduction to web accessibility. Tips on how to improve your markup and provide users with more and betters ways to navigate and interact with your site.My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

A small collection of useful CSS techniques and a quick reminder that print style sheets are still a thing. another old post (who cares?) that was originally on medium and now is on the author's domain blah blah -Random reply guy on Hacker News Aaron Gustafson recently sent a tweet to Indiegogo in which he pointed out that their order details...

I was in the mood to learn something new and so I decided to take a look at the CSS Font Loading API.My blog doesn't support comments yet, but you can reply via blog@matuzo.at.