Search

Basic Dialog Usage and Gotchas To Watch For

By Chris Coyier on

The <dialog> element in HTML is tremendous. We’ve got support across the board now, so using it is a smart plan. Just with basic usage, you get a centered modal dialog experience that comes up when you call it, a dimmed background, focus trapped within it, closes with the ESC key, and focus returning where […]

How to Favicon in 2024

By Chris Coyier on

Andrey Sitnik does a good job each year investigating what websites actually need in terms of doing the best we can for site favicons. The 2024 edition is out, and it looks like this: It’s worth knowing what you actually need, as there are quite a few “favicon generator” websites out there that spit out […]

Progressively Enhanced Form Validation

By Chris Coyier on

Here’s a thing you’re sure to do in your web developer career: add form validation to a form. You can’t leave that name field blank! That doesn’t look like an email address! That quantity is too high! Forms are a part of the beating heart of the web, and especially important to business. You can’t […]

The Color Input & The Color Picker

By Chris Coyier on

HTML has a color input that is pretty decent: That’s it. Support across the board. However, browsers can and do have different approaches to what happens when the input is used. Ultimately: the user activates the input, may choose a color using the provided UI, and the color becomes the inputs value. It’s not my […]

Auto-Sizing Textarea

By Chris Coyier on

Credit to Stephen Shaw for the original idea, there is a decently easy way to make an auto-sizing <textarea> element. It is here. But it’s not perfect. There is a frustrating hard-to-replicate iOS bug. Plus it’s just a trick. It requires JavaScript and some pretty specific CSS to pull off. It’s awesome to see the […]

šŸš« Multiple Selects

By Chris Coyier on

A good point by Mayank: TheĀ multipleĀ attribute onĀ <select>Ā should pretty much never be used. It’s like the polar opposite of singleĀ <select>, where instead of universal familiarity, it has universal unfamiliarity. Perhaps its only saving grace is that I have yet to encounter this attribute in any codebase. HTML: The Bad Parts

Invokers

By Chris Coyier on

Keith Cirkel demonstrates a brand new concept (requires Chrome Canary and the Experimental Web Platform Features flag right now) called Invokers, a proposal from the Open UI group that is polyfillable. You “invoke” events directly on a specific element in the DOM: Then you can listen for the invoke event on that element. Adding interactive […]

indeterminate

By Chris Coyier on

Josh W. Comeau: A cool thing I always forget: The <progress> tag can be put in an ā€œindeterminateā€ state by omitting the value attribute. The idea is that we want to signal to the user that something is in progress, but we don’t know how far along it is. With a value: Indeterminate: