It’s awfully nice that HTML provides a native color picker. Activating the input opens up a color picker (either the OS-provided one or something the browser provides), allows you to pick a color, and changes the input’s value to that color1. Here’s what that’s like in macOS Chrome: The UI varies, but in all cases it doesn’t actually show you the color value you’ve picked when the picker is closed. I think that’s… weird? What if the input is part of a form in which you actually have a valid color you want to put in yourself? Or copy the…
Author: drweb
One of the HTML elements that frequently comes into collision with CSS is the img element. As we learned in Request Metrics’ Fixing Cumulative Layout Shift Problems on DavidWalshBlog article, providing image dimensions within the image tag will help to improve your website’s score. But in a world where responsive design is king, we need CSS and HTML to work together. Most responsive design style adjustments are done via max-width values, but when you provide a height value to your image, you can get a distorted image. The goal should always be a display images in relative dimensions. So how…
February 19, 2025 Pretty interesting trickery here, encoding a secret message in an emoji that you automatically get when you copy/paste it from Paul Butler. Most unicode characters do not have variations associated with them. Since unicode is an evolving standard and aims to be future-compatible, variation selectors are supposed to be preserved during transformations, even if their meaning is not known by the code handling them. So the codepoint U+0067 (“g”) followed by U+FE01 (VS-2) renders as a lowercase “g”, exactly the same as U+0067 alone. But if you copy and paste it, the variation selector will tag along with it. So you slap on…
I’ll be honest and say that the View Transition API intimidates me more than a smidge. There are plenty of tutorials with the most impressive demos showing how we can animate the transition between two pages, and they usually start with the simplest of all examples. @view-transition { navigation: auto; } That’s usually where the simplicity ends and the tutorials venture deep into JavaScript territory. There’s nothing wrong with that, of course, except that it’s a mental leap for someone like me who learns by building up rather than leaping through. So, I was darned inspired when I saw Uncle…
Modals have been an important part of websites for two decades. Stacking contents and using fetch to accomplish tasks are a great way to improve UX on both desktop and mobile. Unfortunately most developers don’t know that the HTML and JavaScript specs have implemented a native modal system via the popover attribute — let’s check it out! The HTML Creating a native HTML modal consists of using the popovertarget attribute as the trigger and the popover attribute, paired with an id, to identify the content element: Open popover This is the contents of the popover Upon clicking the button, the…
Creativity thrives on experimentation, and Suz Sirunyan put this to the test with a bold 100-day challenge—creating daily web experiments purely for the joy of exploration. What started as a personal project quickly grew into a community-driven journey, inspiring designers and developers alike. In this article, she shares the lessons learned from stepping outside her comfort zone, embracing imperfection, and rediscovering the fun in digital design. When Comfort Zones Get Too Comfortable When I started my 100-day challenge in August 2024, I was a digital designer who had found her rhythm—a stable client base, a solid portfolio, and a decent…
February 20, 2025 A nice tool for generating mesh gradients from Erik D. Kennedy. You might call it a bit of a trend, but as Erik pointed out in a recent newsletter, they can be quite versatile because it’s just a nice background look that doesn’t demand anything in particular from the brand. Mesh gradients can work across a huge variety of brands. Dark? Yes. Light? Yes. Grainy? Sure. Pensive? Absolutely. Delicate? Yup. Weatherworn and rugged? Totally.
Editor’s note: This article is outside the typical range of topics we normally cover around here and touches on sensitive topics including recollections from an abusive marriage. It doesn’t delve into much detail about the abuse and ends on a positive note. Thanks to Lee for sharing his take on the intersection between life and web development and for allowing us to gain professional insights from his personal life. When my dad was alive, he used to say that work and home life should exist in separate “watertight compartments.” I shouldn’t bring work home or my home life to work. There’s the quote misattributed to Mark…
CSS selectors never cease to amaze me in how powerful they can be in matching complex patterns. Most of that flexibility is in parent/child/sibling relationships, very seldomly in value matching. Consider my surprise when I learned that CSS allows matching attribute values regardless off case! Adding a {space}i to the attribute selector brackets will make the attribute value search case insensitive: /* case sensitive, only matches “example” */ [class=example] { background: pink; } /* case insensitive, matches “example”, “eXampLe”, etc. */ [class=example i] { background: lightblue; } The use cases for this i flag are likely very limited, especially if…
Welcome to WordPress. This is your first post. Edit or delete it, then start writing!