Chris Coyier on

How to Favicon in 2024

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 […]

Chris Coyier on

Progressively Enhanced Form Validation

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 […]

Chris Coyier on

The Color Input & The Color Picker

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 […]

Chris Coyier on

Auto-Sizing Textarea

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 […]

Chris Coyier on

šŸš« Multiple Selects

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

Chris Coyier on

Invokers

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 […]

Chris Coyier on

indeterminate

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: