Feature Support

About

Supports.js is made for programmers. Whenever you need to know if a CSS property or value is supported and what it's DOM name is! Also Events, Canvas, Audio, Video and most HTML5 features can be detected.


Examples:

var ele = DOMobject.style;
var style = supports.style( 'boxShadow' );
if(style===false) {
  ele.borderRight="2px solid gray";
  ele.borderBottom="2px solid gray";
} else {
  ele[style]="2px 2px 4px gray";
}

var value = supports.value( 'cursor', 'zoom-out' );
if(value===false) {
  ele.cursor="pointer";
} else {
  ele.cursor=value;
}

if(supports.window( 'Worker' )) {
  ...
} else {
  ...
}

if(supports.navig( 'onLine' )) {
  ...
} else {
  ...
}

if(supports.vml()) {
  ...
}

if(supports.svg()) {
  ...
}

if(supports.canvas()) {
  if(supports.canvas( 'toDataURL' )) {
     ...
  }
}

if(supports.event( 'click' )) {
  ...
} else {
  ...
}

if(supports.audio()) {
  if(supports.audio( 'ogg', 'flac' )) {
     ...
  }
}

if(supports.video()) {
  if(supports.video( 'ogg', 'theora, vorbis' )) {
     ...
  }
}

Functions #1 argument must be written in DOM syntax!

Supports

Supports.js can detect nearly any style sheet and support for events, canvas, video, audio, and other html5 features (the list shows my personal selection):
    CSS style
  • zoom¹
  • opacity
  • transform
  • transition
  • animation
  • maskImage
  • textShadow
  • textStroke
  • textSecurity
  • boxShadow
  • boxReflect
  • boxSizing
  • borderRadius
  • borderImage
  • backgroundClip
  • backgroundSize
  • columnWidth
  • userSelect
  • appearance
    CSS value
  • background: linear-gradient
  • background: gradient
  • cursor: zoom-in
  • cursor: zoom-out
  • color: rgb
  • color: rgba
  • color: hsla
    HTML-5
  • @font-face
  • web Worker
  • DataBase Storage
  • local Storage
  • session Storage
  • application Cache
    Special
  • geo Location
  • Orientation
  • Standalone App
  • On/Offline
    Vector
  • vml
  • svg
    Canvas
  • canvas
  • toDataURL
  • getImageData
  • fillText
    Event
  • ondrag
  • ondragstart
  • ondragenter
  • ondragover
  • ondragleave
  • ondragend
  • ondrop
    Audio
  • audio
  • mpeg/mpeg
  • mpeg/m4a
  • mpeg/aac
  • aiff/aiff
  • wav/wav
  • ogg/vorbis
  • ogg/flac
    Video
  • video
  • mpeg/mpeg
  • avi/xvid
  • quicktime/xvid
  • mp4/mp4
  • mp4/avc
  • ogg/mp4
  • ogg/theora
¹ is actually supported by IE and Safari 4!

Browser check

Safari 4 is able to detect nearly all listed features and values (this static list is only seen if javascript is off):
    CSS style
  • zoom
  • opacity
  • WebkitTransform
  • WebkitTransition
  • WebkitAnimation
  • WebkitMaskImage
  • textShadow
  • WebkitTextStroke
  • WebkitTextSecurity
  • WebkitBoxShadow
  • WebkitBoxReflect
  • WebkitBoxSizing
  • WebkitBorderRadius
  • WebkitBorderImage
  • WebkitBackgroundClip
  • WebkitBackgroundSize
  • WebkitColumnWidth
  • WebkitUserSelect
  • WebkitAppearance
    CSS value
  • false
  • -webkit-gradient
  • -webkit-zoom-in
  • -webkit-zoom-out
  • rgb
  • rgba
  • hsla
    HTML-5
  • true
  • true
  • true
  • true
  • true
  • true
    Special
  • false
  • false
  • false
  • true
    Vector
  • false
  • true
    Canvas
  • true
  • true
  • true
  • true
    Event
  • true
  • true
  • true
  • true
  • true
  • true
  • true
    Audio
  • true
  • probably
  • probably
  • probably
  • probably
  • probably
  • probably
  • probably
    Video
  • true
  • probably
  • probably
  • probably
  • probably
  • probably
  • probably
  • probably

Syntax

STR=supports.style( css-feature );
STR|BOL == "O"|"Ms"|"Khtml"|"Webkit"|"Moz"|"" + css-feature || false
STR=supports.value( css-feature , css-value );
STR|BOL == ("-" + "o"|"ms"|"khtml"|"webkit"|"moz" + "-" || "") + css-value || false
BOL=supports.vml();
BOL=supports.svg();
BOL=supports.canvas();
BOL=supports.canvas( canvas-feature );
BOL=supports.window( html5-feature );
BOL=supports.navig( special-feature );
BOL=supports.event( event-name );
BOL=supports.event( event-name, html-element );
BOL=supports.audio();
STR=supports.audio( mime-type, codec );
STR|BOL == ("probably"|"maybe") || false
BOL=supports.video();
STR=supports.video( mime-type, codec );
STR|BOL == ("probably"|"maybe") || false
STR=supports.engine;
STR == "O"|"Ms"|"Khtml"|"Webkit"|"Moz"|""
FLT=supports.version;
STR=supports.released;
 "css-feature" must be written in DOM syntax! The DOM syntax of CSS properties: Remove the hyphen and write the first letter of the word behind the hyphen in upper case. Example: background-color becomes backgroundColor

Download

Supports.js 4.0 is only about 5514 bytes and without the heading comments only 3982 bytes.

Download Supports.js


If you've found a bug or if you have ideas for further development, don't hesitate to contact me.

Copyright

supports.js 4.0 (29-Mar-2010) (c) by Christian Effenberger.
This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License or GNU Lesser General Public License or GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the Licenses, or (at your option) any later versions.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GPL, LGPL and AGPL for more details.