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 lovely and special person, has a strong web dev background and affiliation. That's why many talks at his events are about HTML, CSS, and JavaScript. Still, there are always just as many or even more talks about typography, calligraphy, graphic design, crea ..read more

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 users. That's one more reason not to rely on automated testing only. That doesn't mean you shouldn't use automated testing if your site contains web components. You just have to ensure that the tool you're using supports them. A good way of doing that ..read more

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 content instead. Show details Detailed content goes here… CSS @media (scripting: enabled) { .disclosure-content { display: none; } } @media (scripting: none) { button[aria-expanded] { display: none; } } HTML <div > <butto ..read more

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: '<number>'; 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; } Hello World That works well, but some properties, like line-height, support different types of values. If you use a length instead of a number, the transition doesn't work anymore because the provided value of the custom property must be ..read more

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. <ul role="list"> <li>…</li> </ul> That works, but I found a way of removing list styles without affecting semantics. I learned in my post (lol) “Here’s what I didn’t know about list-style-type” that you can use a string as the value of the list-style-type proper ..read more

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 <p >Hello World!</p> <p >Hello World!</p> CSS .px { font-size: 16px; } .rem { font-size: 1rem; } Then, we opened the settings in Chrome, found the Appearance page, and changed the font size from medium to very large. The font size of the second paragraph, which use ..read more

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 { --animation: fade; animation: var(--animation) 3s cubic-bezier(0.18, 0.89, 0.32, 1.28); } @media(prefers-reduced-motion: no-preference) { .banner { --animation: move; } } @keyframes move { from { translate: 100vw; } to { translate: 0 ..read more

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 options to reduce transparency in the operating system. macOS: System settings - Accessibility - Display - Reduce transparency. iOS: Settings - Accessibility - Display - Reduce transparency Window: Settings - Ease of Access - Display - Show transparency ..read more

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 set role="button" on the skip link because it's just an anchor link, and there doesn't seem to be any JavaScript involved. <a href="#hnf-content" role="button" > <span > <span >Skip to main content</span> </span> ..read more

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. 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 changed the DNS records, knowing there wo ..read more