Skip to content

Instantly share code, notes, and snippets.

@MattWilcox

MattWilcox/gist:89e04beb7843b21c204a

Created July 18, 2014 15:18
Show Gist options
  • Save MattWilcox/89e04beb7843b21c204a to your computer and use it in GitHub Desktop.
Save MattWilcox/89e04beb7843b21c204a to your computer and use it in GitHub Desktop.
Download ZIP
How easy it would be to do Responsive Images in HTML and CSS if https://developer.mozilla.org/en-US/docs/Web/CSS/attr worked.
Raw
gistfile1.html
<!doctype html>
<html>
<head>
<style>
img:after { content: attr(data-small url); }
@media screen and (min-width:400px) {
img:after { content: attr(data-medium url); }
}
@media screen and (min-width:600px) {
img:after { content: attr(data-large url); }
}
</style>
</head>
<body>
<img data-small="small.jpg" data-medium="medium.jpg" data-large="large.jpg" />
</body>
</html>
@MattWilcox
Copy link
Author

Alas, the url type is not supported and browsers still haven't decided how :after should work on an img.

@brucelawson
Copy link

"Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML)." http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html

Also, waiting until the CSS defeats the purpose of pre-loading - which Steve Souders calls "the single biggest performance improvement browsers have ever made" - which happens as soon as the browser sees an img, even before DOM is constructed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment