Skip to content

Requirements

Jump to bottom
Filipe Fortes edited this page Jan 11, 2011 · 2 revisions

Requirements

Capability testing flags that can be used for better targeting content and UI to the browser.

CSS Classes

Like Modernizr, Treesaver adds CSS classes onto the <html> element. For example, if the browser supports @font-face syntax, but does not support the canvas element, the document root will have the following class attribute:

  <html class="fontface no-canvas">

You can use this in order to target CSS based on browser capabilities:

  .fontface h1 {
    font-family: "My Custom Font";
  }

  .no-fontface h1 {
    font-family: Arial;
  }

Available Capabilities

Same as Modernizr

  • js
  • canvas
  • localstorage
  • video
  • applicationcache
  • fontface
  • csstransforms
  • csstransforms3d
  • csstransitions

Treesaver-specific

  • treesaver: Whether the browser supports treesaver
  • microdata: Whether the browser has native HTML5 microdata support
  • flash: Whether the browser has Flash support (either native or via plugin)
  • legacy: Indicates an older generation of browsers such as IE7 and Firefox 3.5
  • mobile: Whether the user agent indicates a mobile browser
  • smallscreen: Screen size (not window size) less than 600px wide
  • cached: Was the page loaded from the applicationCache?
  • offline: Is the browser currently offline?
  • orientation: Whether device orientation can be detected
  • orientation-vertical: Current orientation
  • orientation-horizontal: Current orientation
  • browser-xxx: Where xxx is one of msie, chrome, safari, webkit, mozilla, opera, or unknown
  • os-xxx: Where xxx is one of: win, mac, linux, iphone, ipad, ipod, android, or unknown

Mutable Capabilities

Some capabilities may change after the page has loaded:

  • orientation-vertical/orientation-horizontal: Changes when the user rotates the device
  • offline: Changes with browser status

Clone this wiki locally