Am 13.11.2013 14:52 schrieb John Mellor:
<style>
@media (max-width: 19.99em) {
     .artdirected { content: replaced image-set(128px; attr(srcs-smallicon));
}
}
@media (min-width: 20em) {
     .artdirected { content: replaced image-set(100% (30em) 50% (50em) 33%;
attr(srcs-flexwidth)); }
}
</style>
...
<img class="artdirected" src="fallback.jpg"
      srcs-smallicon="i64.jpg 64, i128.jpg 128, i256.jpg 256"
      srcs-flexwidth="160.jpg 160, 320.jpg 320, 640.jpg 640, 1280.jpg 1280,
2560.jpg 2560">

(note that the above is a maximally complex example, incorporating art
direction, viewport-switching and dpr-switching; most normal cases would be
simpler than this)

Looks great to me. Just verbose enough to be understood by average authors (as I am one), perfectly maintainable, and as powerful as src-N.

Reply via email to