Return to Firewoiks

Extensions, resources & tutorials for Fireworks, Dreamweaver & HTML5 / CSS3 by UI developer, .

Layout Engine v0.7.0 - Browser Detection Done Right

Posted: July 24 2013

Feature detection using libraries such as Modernizr has (rightly) usurped browser sniffing as the method of choice for conditional styling and scripting. However, as Elijah Manor recently asked, Does Browser Sniffing Still Have a Place?, I firmly believe the answer is “yes”.

So, I've created Layout Engine, which is the best of both worlds by using feature detection to work out what “type” of browser is being used — including IE10 and IE11!, which no longer support conditional comments, and thus are not easily targeted without hacks.

Previously, I'd almost exclusively used the excellent CssUserAgent, to help with targeting things that feature detection alone cannot. However, since Opera has announced that it's changing it's rendering engine to WebKit, it's even clearer now that regular browser sniffing is not future proof.

Layout Engine also identifies the standard Android Browser (and its WebView variants), which unfortunately render <select>s as regular text inputs if either a border or background is applied in CSS. Also, AOSP Browser's radio buttons and checkboxes are very badly positioned compared to other browsers.

How it works

  1. Layout Engine tests the support of various style features on the <html> element that are specific to a particular browser engine. If nothing matches, then it will return false.

    The following layout engines are detected: ie, khtml, mozilla, opera & webkit.

    The following versions are detected: ie- 11, 10, 9, 8, 7 & opera- mini

    The following WebKit browsers are detected: android (see above), chrome (includes Opera Blink) & wiiu

  2. Up to 3 classes are applied to <html> with the syntax: .vendor-vendor_name, .vendor-vendor_name-version (optional) and .browser-browser_name (optional)

  3. A JavaScript object with up to 3 properties is exposed: layoutEngine.vendor, layoutEngine.version (optional) and layoutEngine.browser (optional)

Usage

  1. Reference layout.engine.min.js in the <head> of your document
  2. In your CSS, use a vendor class to style elements appropriately, e.g.: 
    .vendor-ie-10 {
	line-height: 20px; /* 1px more than IE 8 */
}
  3. If appropriate, in your JavaScript, use layoutEngine.vendor, layoutEngine.version and layoutEngine.browser to run conditional functions where relevant, e.g.: 
    if (layoutEngine.vendor === 'ie' && layoutEngine.version === 10) {
    // Conditional script
}

Caveats

IE 8, 9 and 10's Browser and Document Modes incorrectly detect IE 7 as IE 8. Real IE 7 works as intended, however.

IE 6 cannot be detected with Layout Engine. I recommend using IE Conditional Comments to target IE 6 and 7 instead.

What now?