Articles in "html"

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

Scroll snapping is hip and while we all have styled numerous sorts of tab panes and scroll boxes, I had an idea of combining them. What started out as a simple “scroll snapping experiment” turned out to be an accessibility study. How should scroll snapping tabs behave when using keys? By reading some best practices, I believe I found an elegant solution.

Read moreabout Using best practices to create CSS scroll snapping tabs

CSS grid is a lot of fun and I find myself using it far more often than I used to. Goodbye to the Flexbox grid and hello to all things grid. Here are some of the fun things you can do with the CSS grid module.

Read moreabout Fun things you can do with CSS Grid besides your basic layout

As we're entering the last stages of 2021, I think it's time to add a little wishlist for the future of the web. Since accessibility is getting more (deserved) notice. I thought that this year might be a good time for an HTML wishlist.

Read moreabout 5 future HTML tags on my wishlist that could benefit accessibility

There was a time when I was absolutely against every type of CSS library. The thought of using pre-defined class names gave me the shivers. Now, after working with them for some time, here are some of the thoughts on the matter.

Read moreabout Bootstrap & Tailwind: the current state of popular CSS libraries

You might remember the days when Masonry grids were all the rage. Every website wanted to have the Pinterest-inspired layout. Well overdue, but there is something in the works at the W3C.

Read moreabout Masonry with CSS Grid, finally a solution without JavaScript