Articles in "html"

A little while ago, in Chrome 133, a feature called popover=”hint” landed in the browser. This feature paved the way to something bigger, more specifically, popovers being triggered on hover/focus. This comes with a new attribute “interestfor” and some CSS properties to change the delay speed when showing popovers using that method. There still isn’t much definitive on how this should behave on devices without hover capabilities, and that’s what this article is all about. I want to make sure the content of these popovers is accessible on touch devices.

Read moreabout HTML popovers shown on interest should be accessible on mobile devices

In this part of my customizable select series, I want to highlight option groups! Option groups are part of our select interactions to provide clarity, and now, they can be styled. This will certainly not be the last demo I did on the select, and more updates are coming to this element. With a wink to the past, we will be creating a restaurant dish picker, a true “Select Menu”.

Read moreabout The customizable select - Part five: Optgroup, creating a true select menu

In this (long) part of the customizable select series, it’s all about gamification. In this article, I’d like to highlight one of my demos, where I aimed to recreate a piece of UI found in the Monster Hunter games. To re-create this behavior, I had to think in terms of keyboard navigation first. This demo requires quite a lot of CSS, as well as some scripting, and in the end, I do want to highlight some accessibility concerns. This is an experiment on how far we can take it when styling select elements.

Read moreabout The customizable select - Part four: Scroll snapping, state queries, monster hunter, and gamification

In this third episode of my exploration of the customizable select, I thought it was time to show how we can have a little bit of fun with an old friend: sticky positioning. In this article, we’ll be following up on earlier techniques while exploring how we can use the :checked pseudo-class to create a fun open and close effect. We’ll be messing with top-layer functionality, interpolate-size and other trickery to create an emoji picker.

Read moreabout The customizable select - Part three: Sticky Options

In this second part of my customizable select series, I’d like to highlight one feature from Interop 2025 that works beautifully with this feature: anchor positioning. This article contains one of my first demos ever created when styling the select and has evolved with every new syntax and iteration across the months / years. We'll also be taking a glimpse at a few experimental features, but the basis of this can be used today. Let’s take a look at my potion selector with CSS.

Read moreabout The customizable select - Part two: Potions, anchoring, and radial shenanigans in CSS

The customizable select has entered Chrome 134, allowing us to style this form element to our hearts' content. I decided to write a series about this feature because there are so many cool things we can do with CSS these days to create some really unique and fun experiences. In this first article of the series, I want to talk a bit about the history, while also giving an in-depth guide on how you can start creating your first customizable select as a progressive enhancement, today.

Read moreabout The customizable select - Part one: history, trickery, and styling the select with CSS

The year was 2018, and we were still trying to cope with IE11 and had to find some ways for certain effects. Things that we take for granted with CSS nowadays were not possible and one of the solutions to create awesome effects on the web was using SVG Filters. Fast forward to 2025, SVG filters are still awesome, but I use them less. In this article, I wanted to revisit them, with some easy-to-use effects we can use today.

Read moreabout Revisiting SVG filters - my forgotten powerhouse for duotones, noise, and other effects

Every year, I create a little demo right before the holidays as a CSS greeting card. This year is no different. To celebrate the end of the year and all those new amazing features that came into CSS, I decided to let myself go a little with new CSS techniques. A sort of recap of things I learned and put them in one little CodePen. This time, I’m combining scroll-driven animations, anchoring, and @property in CSS.

Read moreabout Stylish holidays! Creating a scroll-driven Christmas tree in CSS

One thing I’ve learned over the last year is to deal with changes in explainers and specs and that naming things is hard. In this update on Invokers, I will cover the new syntax and the new name: Invoker Commands. Once again giving you some control over interaction with HTML from opening dialog elements to creating custom counter buttons and video controls.

Read moreabout An update on invokers: Invoker commands in HTML

Wouldn’t it be cool if we could click on a button to open a modal with just HTML? How about those file input elements? Imagine that creating a custom play button for video controls would be an easy thing to do. How about custom counter buttons for a number input? This is where the idea of invokers comes in. It’s currently available behind a flag to play around with and it’s definitely one of the most exciting advances in HTML to look out for.

Read moreabout Invoking elements by using only HTML: A first look at invokers

While learning about web components a few months ago, I wanted to create my first (useless) little component as a package on NPM. In this article a little tutorial on how I created my first basic web component with LIT, Typescript, using an easy setup with Vite. I will be sharing how to do the setup, some of the ideas behind it, and some of the gotchas.

Read moreabout A Valentine's Day special: A web component to show hearts on your website

The year 2024 might be a big one for web components and I for one am excited about this. Truth be told - a few months ago - I barely knew anything about them as I thought they were just this niche thing floating around on the web. But a lot of buzz is being created. So I wanted to learn more about them. I can now proudly say I published my first (useless) web component on npm - a Valentines special - for-love element.

Read moreabout Getting into web components - an intro

Have you run into a situation where you need the padding of one element to align with the padding of another element? It’s a common debacle, especially when a page layout is set with global padding? In this article I demonstrate that issue with a full-width slider component that breaks out of the main page container using a couple of techniques to keep it visually aligned with other elements on the page.

Read more about CSS Scroll Snapping Aligned With Global Page Layout: A Full-Width Slider Case Study (Smashing Magazine)

One of the frustrating things when animating elements was not being able to transition to and from display none. Related to that, it also wasn’t an easy feat to use transitions for elements entering the DOM. In Chrome 117 we have the release of @starting-style, which will make animating or transitioning those cases a lot more convenient.

Read moreabout Animations and transitions from and to display none with @starting-style

Thanks to the Open UI working community group, there's a new element on the horizon, the selectlist, that will make styling this type of form control a whole lot better. Let's use this element to creating a pattern that you would never have thought possible with CSS alone - a radial selection menu.

Read more about Advanced Form Control Styling With Selectmenu And Anchoring API (Smashing Magazine)

If it pops, it belongs in HTML and CSS! Lately, I had a lot of fun playing around with this upcoming feature. The first version is being developed and it's starting to look pretty good. It's time to handle our basic popovers without the explicit need of JavaScript.

Read moreabout Open UI and the Popover API

The :has() relational pseudo class has landed in Chrome and Safari and even though it gets less hype than for instance container queries, I believe this little pseudo class contains a lot of improvements to the way we write CSS today.

Read moreabout Practical uses of the :has() relational pseudo class

My first article for CSS-tricks on how to create a watch face with a conic gradient Using custom-properties and a little bit of Javascript.

Read more about Making a Real-Time Clock With a Conic Gradient Face (CSS-Tricks)

Some HTML5 elements seem to have the tendency of not being picked up by developers. Although widely supported, we still seem to use collapses with the use of a JS library instead of using a native element. In this little post, I want to highlight the details element a bit.

Read moreabout The details element, collapsing content without the hassle

With Safari (15.4) being one of the last to implement the dialog element, a lot of browsers have great support for this element.. Goodbye to huge JavaScript libraries and welcome to the native HTML5 dialog element. This is beauty and simplicity on the web in its purest form. It's accessible, customisable and most of all: easy to use.

Read moreabout A lot of power with little JavaScript, the HTML dialog element is here