Multipage View Transitions
When initially introduced, view transitions would only work with single-page applications. This is awesome but it doesn't work with regular web pages like what I normally work with. During I/O 2024,...
Exclusive Accordions
Accordions present an interesting way to display content using one or more details elements. There is a specific type of accordion that, until recently, was impossible to do without scripting, the...
Playing with Relative Color Syntax
Now that relative colors are supported across browsers it's time to revisit the syntax and see what we can do with it and how it changes what we can natively do with colors. Basic Syntax # The most...
The Anchor Positioning API
A complementary API to Popovers is the anchor positioning API Where the popover attribute controls the popover behavior, the anchor positioning allows us to control where will the popover...
Responsive Videos ftw
Ever since we've had responsive images we've been able to add media queries to control the conditions that will trigger a match for a specific child element. But we haven't been able to do the same...
What Are Duotones And How They Work
Duotone is a graphic design technique that makes for contrasting graphics that can be combined with text and other CSS effects. This post will look at what are duotone colors and how to create duotone...
What Is Baseline?
If you use web.dev or MDN, you may have seen blocks indicating baseline availability like those in Figures 1 and 2. Baseline message as shown on web.dev Baseline message as it appears on MDN So what...
The difference between auto-fill and auto-fit in grid layouts
Even after all these years, I've struggled to understand the difference between auto-fill and auto-fit values when used in creating grid layouts. The easiest way to create a grid of equal columns is...
Using 'clamp' to control CSS Values
Rather than using media queries to control the dimensions of an element, we can use the clamp to accomplish the same task with less code. According to MDN: The clamp() CSS function clamps a middle...
Different views of masonry layout
There is an interesting discussion going on about masonry layouts and how they should be added to the web platform. This post will analyze the different proposals and then express an opinion as to...