The down side is obviously that you can not have a perfeclty scaled image. E.g.:
height: auto;
max-width: 100%;
So this would only work if you have a fixed grid, in which you can place the image.

The thing I struggle is that the DOM-node should not be created, otherwhise the image is already requested (500KB in my case, not really something you want to load with a smart phone).

This also means that I can not load all JS after the HTML content, b/c the script has to be executed on load. Which means I have to write REAL JavaScript not JQuery! :-o

I’m not sure what the policy is for modules at such an early stage, but you could give it a shot, what’s the worst that could happen? ;)

Also, I think their tests need a special format in their markup, you can read about it here (along with more details): http://wiki.csswg.org/test Or maybe you could just submit it and have someone else adapt it?

(I’ve personally haven’t contributed any tests yet, so take any advice from me with a grain of salt)

That’s true representing a “success”-state with yellow isn’t what you call common. I’ve changed both examples according to your suggestion. Here’s the one for the CSS Hierarchies Module.

Where is the right place to submit such a test? On the mailing-list? I’ve no experience with this. :)

Nice article.

Regarding your dabblet, please make it like a regular test: Green on success, red if failure. You could probably craft it in such a way that the entire screen is green or red, no text or anything.
Then you could even submit it to the W3C for that module’s testsuite. It’s trivial, but it’s something, so it may help, dunno.

However: Not showing the images on a specific screen-size can be done via “media-queries” in JS. Run a script on the HTML code while it’s loading and remove the images. Or what might work better: Load in the images only after you’ve checked the screen-size. As a non-JS-fallback you could just load the images even if they are not really needed.

If have a question on that topic. What would you do if you have different image sizes for different screens and don’t want to load the image at all if the device has <480px (smart phone)