Skip to main content

Chris Coyier

Founder, writer, designer, spam-deleter, email personality

Article

A Snippet to See all SVGs in a Sprite

I think of an SVG sprite as this:

<svg display="none">
  <symbol id="icon-one"> ... </symbol><symbol>
  </symbol><symbol id="icon-two"> ... </symbol><symbol>
  </symbol><symbol id="icon-three"> ... </symbol><symbol>
</symbol></svg>

I was long a fan of that approach for icon systems (<use></use>-ing them as needed), but I favor including the SVGs directly as needed these days. Still, sprites are fine, and fairly popular.

What if you have a sprite, and you wanna see what's in it?… Read article

Article

Some Hands-On with the HTML Dialog Element

This is me looking at the HTML <dialog></dialog> element for the first time. I've been aware of it for a while, but haven't taken it for a spin yet. It has some pretty cool and compelling features. I can't decide for you if you should use it in production on your sites, but I'd think it's starting to be possible. … Read article

Article

Breakout Buttons

Andy covers a technique where a semantic <button></button> is used within a card component, but really, the whole card is clickable. The trick is to put a pseudo-element that goes beyond the button, covering the entire card. The tradeoff is that the pseudo-element sits on top of the text, so text selection is hampered a bit. I believe this is better than making the whole dang area a <button></button> because that would sacrifice semantics and likely cause extreme weirdness for … Read article

Link

Awards That Look Beyond the Flashy

Link

Mina Markham Should Make Beyoncé’s Site Accessible

Article

Zero hands up.

It's worth making this clear then. On iOS, the only browser engine is WebKit. There are other browsers, but they can't bring their own engine (Blink/Gecko). So, if you're using Chrome or Firefox on iOS, it's really the same engine Safari is using, only slightly less … Read article

Article

Multi-Million Dollar HTML

Two stories:

  • Jason Grigsby finds Chipotle's online ordering form makes use of an input-masking technique that chops up a credit card expiration year making it invalid and thus denying the order. If pattern="\d\d" maxlength="2" was used instead (native browser feature), the browser is smart enough to do the right thing and not deny the order. Scratchpad math, based on published data, makes that worth $4.4 million dollars.
  • Adrian Roselli recalls an all-too-common form accessibility fail of missing a for/
Read article
Article

Preloading Pages Just Before They are Needed

The typical journey for a person browsing a website: view a page, click a link, browser loads new page. That's assuming no funny business like a Single Page App, which still follows that journey, but the browser doesn't load a new page — the client fakes it for the sake of a snappier transition.

What if you could load that new page before the person clicks the link so that, when they do, the loading of that next page is … Read article

Article

What happens when you open a new install of browsers for the 1st time?

Interesting research from Jonathan Sampson, where he watches the network requests a browser makes the very first time you launch it on a fresh install, and otherwise do nothing. This gives you a little insight into what kind of information that browser wants to collect and disseminate.

This was all shared as tweets, but I'm linking to an unrolled thread if there's one available:

Read article
Article

Filtering Data Client-Side: Comparing CSS, jQuery, and React

Say you have a list of 100 names:

<ul>
  <li>Randy Hilpert</li>
  <li>Peggie Jacobi</li>
  <li>Ethelyn Nolan Sr.</li> 
  <!-- and then some -->
</ul>

...or file names, or phone numbers, or whatever. And you want to filter them client-side, meaning you aren't making a server-side request to search through data and return results. You just want to type "rand" and have it filter the list to include "Randy Hilpert" and "Danika Randall" because they both have that string of characters in them. … Read article

icon-link icon-logo-star icon-search icon-star