Sass and Compass for Designers

Easy fallbacks for non-SVG capable devices

Thanks to the Sass parent selector we've already learned about in Chapter 3, Understanding Nesting, Extend, Placeholders, and Mixins, remember that it's easy to create fallbacks in tandem with Modernizr for different device capabilities. For example, although opting for SVGs as default, we could provide a fallback to equivalent PNG graphics, like this:

.buy-amazon-us {
  background-image: inline-image("svg/amazon-us.svg");
  .no-svg & {
    background-image: image-url("png/amazon-us.png");
  }
}

Note

Bet on SVG!

SVG is currently an underused technology on the Web, but there are is a host of exciting features hopefully coming to it in the near future, fragment identifiers (http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/ ...