To keep this widget meaningful also for those browsers that do not support background gradients, we have to handle a different representation for the arrow. To detect where this feature is missing, we can use Modernizr by creating a custom build (http://modernizr.com/download/), as we saw in the previous chapters that check only for gradient support:
<script src="js/modernizr.js"></script>
Then we can go for a solid background color; the arrow will, of course, become a rectangle but we'll save the meaning of the widget; let's add this rule at the bottom of application.scss
:
.no-cssgradients div[data-gauge]{ div[data-arrow]:before{ background-color: orange; @include transform2d( rotate(0deg)); box-shadow: none; border-radius: 0; } }
And following is the result:
We can go a step forward by using Compass' ability to translate gradients into Base64
-encoded SVG and use them as fallback background images where native gradients are not supported...