Conditional Loading of Resources with mediaqueries

Did you know that, regardless of the device screen size, all of these CSS files will be loaded?
<link href="all.css" rel="stylesheet">
<link href="small.css" rel="stylesheet" media="screen and (min-width: 600px)">
<link href="big.css" rel="stylesheet" media="screen and (min-width: 4000px)">

To help avoid this, Chris offers an elegant, albeit JavaScript-reliant, solution:


Efficient HTML5 data-attributes

We all know and love HTML5 now, right? We’re using it every day, right? And data-attributes are just one of the new, really cool features that we all love and use, right?

But it appears they may not be the best thing to use, if you’re worried about performance (and I know we are all worried about performance…).

Thankfully, Stoyan has a work-around:

Mobile Browsers and position: fixed;

I’ve often said that mobile development reminds me a lot of The First Browsers War, except that now there are seemingly thousands of IE6s out there…

position:fixed is just one of the “issues” we all deal with every day that are supported by some devices, not by others, and partially-but-poorly by others.

Here is a nice work-around for position:fixed:
While this article is in Russian, Chrome does a fair job of translating it, but you can also get the gist from just the code.

CSS Animations with Only One Keyframe

Lea Verou presents a really simple solution to something that has always bugged me about CSS animations, having to duplicate the start/end states:

Normally you would do something like this:

@keyframes pound {
	from { transform: none; }
	50% { transform: scale(1.4); }
	to { transform: none; }

But it turns out you can also just do this:

@keyframes pound {
	50% { transform: scale(1.4); }

Which is just awesome! Less code, less repetition, and better performance! We all win! :-)