Learning

A select input is one of those buttons you press that bring up a menu, and then you select an option from the menu. Historically, they've been notoriously difficult to style, and it's often been necessary to use JavaScript to create custom select inputs. Recently, however, some updates to CSS have made it possible to style select inputs using CSS only, which is easier and more performant. In this experiment, I made the select menu cover the whole screen, with each option styled to match the rest of the page.

Browser compatibility

CSS Property: appearance: base-select (Experimental)

Chrome (135)

Edge (135)

Firefox

Safari

Have you ever used a website where animations trigger as you scroll downwards? Until recently, this was only possible with JavaScript, but with the introduction of the animation-timeline property, it's now possible to create scroll-triggered animations using CSS only. In this experiment, I gradually introduce the reader to Degrowth. As they scroll down, they're treated to bite-size definitions of Degrowth, so as not to overwhelm them with a wall of text. Citations are paired with each definition and displayed at the bottom, along with a progress bar so the user always knows how much further they've got to go.

Browser compatibility

CSS Property: animation-timeline: scroll: scroll() (Limited availability)

Chrome (115)

Edge (115)

Firefox

Safari (26)

Traditionally, Javascript was used to show and hide popovers. Recently, however, the Popover API was introduced, enabling developers to create complex popovers with just HTML and CSS. In this experiment, I wondered what it would be like to use the Popover API to create an interactive decision tree. It's probably not a user interface that I would use in the real world, but it was a good way to get familiar with the Popover API. NOTE: I have not made the effort to get this working nicely on small screens.

Browser compatibility

CSS Selector: popover-open (Baseline 2024Newly available)

Chrome (114)

Edge (114)

Firefox (125)

Safari (17)

In this experiment, I used CSS transform to position 100 circles in an Archimedes spiral layout. sibling-index() is a new CSS type that allows you to select elements based on their position among siblings. In this experiment, I used it to know the order of the circles in the spiral, which let me change the styling of each circle (size, color) based on its position in the spiral. sibling-index() also enabled me to add a delayed fade-in animation for each circle.

Browser compatibility

types: sibling-index() (Limited availability)

Chrome (138)

Edge (138)

Firefox

Safari (26.2)