By Aaron Gustafson CHAPTER 7Finally, we can move our display CSS rule set into a media query to en-
sure any images that were lazy-loaded when a device was in a wider (e.g.
landscape) orientation aren’t displayed when the screen is too narrow (e.g.
portrait):
@media only screen and (min-width:400px) {
[data-img-src][data-image-loaded] {
display: block;
}
}
As you can see, by
being empathetic to
our users and cog-
nizant of the price
they pay to access
our content, we
can create amazing
adaptive experienc-
es for them without
much extra effort.
no JavaSCRiPT, no PRobleM
JavaScript can do some nifty stuff, but planning for its absence is equal-
ly important. After all, JavaScript availability is not guaranteed in every
browser. Even if JavaScript is supported by the browser, there are many
circumstances in which our carefully crafted JavaScript may be unable to
run and they are completely beyond our control. For example:
- JavaScript code delivery could be being blocked by an overzealous
firewall. - JavaScript may be disabled by the user — either manually or via
plugin — in an effort to stop annoying ads, pop-overs, and the like.
Comparing potential orientation-appropriate experiences of a
news teaser.