Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.
<!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

This comment has been minimized.

Copy link
Owner Author

commented Jul 18, 2014

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

@brucelawson

This comment has been minimized.

Copy link

commented Jul 18, 2014

"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
You can’t perform that action at this time.