dijit’s CSS sniff
by Sam Foster

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:

This entry was posted on Monday, May 5th, 2008 at 2:57 pm and is filed under Dojo Cookies. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “dijit’s CSS sniff”

  1. dante Says:

    For completeness, it’s worth mentioning the JavaScript side does this too, in the form of boolean like integers:

    dojo.isIE, dojo.isFF, isKhtml, isMozilla, isOpera …

    so you can do something like if(dojo.isIE && dojo.isIE < 7){ /* ie7 branch */ }

    or something like:

    var handler = dojo.isIE ? function(args){ } : function(args){ };

  2. SitePen Blog » The Devil’s in the Details: Fixing Dojo’s Toolbar Buttons Says:

    [...] Our fix is targeted only at gecko-based browsers with the .dj_gecko prefix on the selector. See Dijit’s CSS Sniff for more [...]

Leave a Reply

You must be logged in to post a comment.