Bite-sized CSS & HTML nuggets

Easily checking in JavaScript if a CSS media query has been executed

For quite a while I have been looking for a way to “mirror” my CSS media queries in JavaScript, but without duplicating the actual queries. Of course, you can use matchMedia to evaluate a media query in JavaScript, but then you have to maintain your breakpoints in two places – not ideal.

Paul Hayes devised a clever method in his fork of the match­Me­dia poly­fill, using transitions on dummy elements and watching for the tran­si­tio­nEnd event in JavaScript. But a truly simple solution – one that doesn’t really need watching for resize events – was still lacking.

Fortunately Jeremy Keith turned to his readers for help, and together they came up with a delightfully straightforward technique:

@media (min-width: 45em) {
    body:after {
        content: 'widescreen';
        display: none;
        }
    }

Which basically doesn’t do anything, except that you can check for it in Javascript:

var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'widescreen') {
    // go nuts
}

Nice!

Complete Compass API in iOS 5

One new feature of iOS 5’s Mobile Safari that was not known back when I wrote this post, is an extension to the DeviceOrientation Event API. There was already an implementation of the official yet limited spec in iOS, but the Apple team didn’t have the time to wait for a resolution and implemented two new properties that allow developers to get full access to the real world orientation in Mobile Safari now!

James Pearce from Sencha took the new API for a spin and created a complete web-based compass. If you’re running iOS 5 and you’re on an iPhone 4 or 4S, iPad or latest generation iPod Touch, just tap the image below. Now go ahead and make your web app orientation-aware!

Benchmarks for web technologies like CSS and SVG

After reading up on Lea Verou’s provocatively titled piece CSS gradients are faster than SVG backgrounds and its comments, it struck me that there are little to no benchmarks for web technologies like CSS and SVG. At least no standardized, commonly accepted ones.

For JavaScript there’s plenty of benchmarks, each with its own focus or purpose, but for matters like the one Lea posts about you need to make a demo and see which one looks best. Not very scientific if you ask me.

Perhaps it’s way harder or even downright impossible to make a proper performance benchmark for something like CSS, but has anyone tried? (Let me know at @bricssnet)