Skip to content

Requirements

Jump to bottom
Filipe Fortes edited this page Oct 8, 2010 · 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

Treesaver-specific

  • treesaver: Whether the browser supports treesaver
  • flash: Whether the browser has Flash support (either native or via plugin)
  • legacy
  • mobile
  • 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, android, or unknown

Clone this wiki locally