Seriously, Sass, where have you been all my life?
Or, more truthfully, why did I not appreciate you before now?
In this world where web developers might like to say “we only support the latest browsers,” the truth of the matter is we’re constantly making tweaks and fixes to support browsers that, well, haven’t quite kept up with the times. And a great tool in this thankless task is Modernizr.js, a library of browser feature tests that can tell you “yes, this browser can support CSS3 gradients” or “sorry, but no support for RGBa here.” Modernizr does this by putting the browser the visitor is using through its paces, and then including the capabilities and deficiencies as CSS classes added to the <html> tag.
<html class=”js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths”>
Yes, this <html> tag is ridiculously long. But in practical situations, you would run a package of Modernizr that only performed the tests you really needed.
But actually making use of this information can sometimes be a chore. If we have deeply nested selectors, then going back to the beginning to compensate for our deficient browser can create spaghetti CSS which is difficult to read and maintain.
Enter Sass, whose praises I’ve been singing rather loudly recently. Nested selectors and mixins can combine to create some pretty powerful tools. And if you need to access Modernizr conditions, you’re in luck, because I’ve got a handy little mixin that does just that.
@mixin modernizr($deficiency) {
html.#{$deficiency} & {
@content;
}
}
What this little snippet will do will allow you to test for a Modernizr condition right inside your main selector, allowing you to group all your special cases along with the primary code. Gone are specificity problems. Gone is having to put all your Modernizr compensation at the end of your CSS code. Gone is having to use the dreaded !important flag (we hates the !important flag).
Usage
Take the following example SCSS code:
.our-class {
background-color: rgba(255, 255, 255, 0.5);
@include modernizr(no-rgba) { background-color: #808080; }
}
This will compile into:
.our-class { background-color: rgba(255, 255, 255, 0.5); }
html.no-rgba .our-class { background-color: #808080; }
Gist
I’ve thrown this up as a Gist on GitHub. Use and enjoy!
KISS: Don’t use the rgba property
Any particular reason you say that?
Often, designers give me comps that can only be achieved using RGBa colors.
That said, that was just an example. Insert whatever Modernizr-detected feature applies to your project. But I definitely don’t think that we should shy away from all of the great CSS3 properties out there just because they don’t work in IE<9. After all, that's what Modernizr is for.
Thanks for the comment.