Created
May 15, 2012 22:32
-
-
Save gabrielso/2705638 to your computer and use it in GitHub Desktop.
Responsive is in the CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- The actual proposed solutions are, in my opinion, an abstraction of the abstract form (since the img tag is basically an object tag) with all its limitations and fragilities --> | |
<object data="file-name.jpg" id="image-as-object" type="image/jpg" width="180" height="120"></object> | |
<!-- Let's imagine responsive images as a step back, then a step further: (pseudo-code) --> | |
<object id="responsive-image-as-object" type="image/jpg;responsive"> | |
<param media="max-width:240px" data="really-small.jpg" width="24" height="16"> | |
<param media="(mix-width:241px) and (max-width:360px)" data="small.jpg" width="60" height="46"> | |
</object> | |
<!-- Quite familiar, super standard BUT... --> | |
<!-- I think the responsiveness should reside in the CSS, since it's a visual issue --> | |
<!-- using url() should gain from the cache / multiple requests handling capabilities --> | |
<style> | |
@media screen and (max-width: 240px) { | |
#responsive:src { | |
content: url('bem-pequeno.jpg'); | |
width: 40px; | |
height: 60px; | |
} | |
} | |
@media screen and (min-width: 241px) or (max-width: 359px) { | |
#responsive:src { | |
content: url('mais-ou-menos.jpg'); | |
width: 100%; | |
} | |
} | |
</style> | |
<!-- The markup should remain the same and the "original" attributes may be used as fallback or default values --> | |
<img src="full-file.jpg" id="responsive" alt="x" width="180" height="120"> | |
<!-- See? We use familiar standards (don't mess with my markup, pseudo-classes in CSS are made for this - an element should be different in different situations), everybody wins --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment