A Deep Dive on Z-Index Usage

How do you make sure your annoying popup is shown on top of every other element in the page, when you don’t know how many there are, who wrote them, and how bad they wanted their elements to be on top? That’s when you set your z-index to 100, or maybe 999, or maybe, just maybe 99999 to be really sure yours will win.

That, at least, is how I write my CSS. In the rest of this post, we will look at millions of z indices to see what everyone else does.

Of course, if you make websites for a living you’ll find this interesting. Like most things available here.

CSS Sans

A font constructed entirely by CSS. It is, essentially, a programmatic realtime typeface. I love how it degrades for older versions of IE:

It’s not what I’d consider practical for production use. Still, CSS Sans is a hell of a demonstration of how far CSS has come since Microsoft shipped Internet Explorer 3 in 1996, which was first browser to implement some of the CSS1 spec (CSS v1 was not yet a W3C recommendation).

No CSS

I’m turning off my stylesheets for the rest of 2014. And probably some of 2015. It’s an experiment. Plus it will force me to do a full redesign when the time comes.

We used to do this kind of stuff all the time before the internet got all serious and everyone started pretending to know what they were doing.

CSS Shaders

Adobe’s John Nack:

So, yeah: Adobe’s using Flash-derived technology to make HTML5 more competitive with Flash.

Crazy, right? Not at all: this increases your ability to present visually rich experiences, and that increases Adobe’s ability to sell you tools for creating those experiences.  The different playback technologies are just means to those ends.

Working with Opera, they’ve put together a spec and submitting it to the W3C. Latest nightly of WebKit has it implemented. Really good to see Adobe looking forward like this.