Posted in Dojo Cookies
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:
.dj_ie,
.dj_ie6,
.dj_ie7,
.dj_iequirks,
.dj_opera,
.dj_opera8,
.dj_opera9,
.dj_khtml,
.dj_safar,
.dj_gecko,
.dj_ff2,
.dj_ff3
Tags: css dijit