dijit’s CSS sniff

If you’ve done any CSS at all, you’ve run into the need to selectively target rules at different browsers - usually by employing hacks which take advantage of CSS parser quirks and different levels of CSS spec support. Its getting better - gone are the days of IE4, Mac IE5 (for most of us anyhow), but its still a fact of life. Enter dijit._base.sniff

As a part of the bootstrap process, via hostenv_browser.js, dojo has already figured out what browser is being used, so dijit/_base/sniff.js simply inserts classes onto the <html> element to make that information available to your stylesheets.

So, for example the common star-html hack:

* html .someClass { ... }

can be replaced with:

.dj_ie .someClass { ... }

It gets better:

.dj_ie6 { /* fix some ie-6-only quirk */ }

This makes for a very common-sense approach to cross-browser CSS. As always, code to the standard first: write your CSS rules the way they should be and with luck most browsers will be happy. When they are not, write a specific, targetted rule to override the properties necessary. With the browser-signifier prefix on the selector, the rule is more specific (by 1) and will override the previous one for matching browsers. And, its self-documenting code - the intent is clear from the selector itself.

sniff.js is a part of dijit base. That means that if you’ve dojo.require-ed any dijit-based widget, dijit._Widget or dijit.dijit, it’s already loaded for you. But even if you’re not using dijit, you can still pull it in with dojo.require("dijit._base.sniff")

What kind of support does it give you? These are the hooks that can be defined for you - depending on the browser and rendering-mode: