Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Feature detection for host objects

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 lib
Octocat-spinner-32 node_modules
Octocat-spinner-32 test
Octocat-spinner-32 LICENCE
Octocat-spinner-32 Makefile
Octocat-spinner-32 README.md
Octocat-spinner-32 build.js
Octocat-spinner-32 feature.js
Octocat-spinner-32 package.json
README.md

Feature

Detecting those host environment features for you. See what your browser supports

Example

<script src="cdn/../feature.js"></script>
<script>
    if ([
        "DOM.EventTarget.addEventListener",
        "DOM.Element.classList",
        "DOM.Element.append",
        "DOM.Element.before",
        "DOM.Node.textContent"
    ].every(function (v) { return window.features[v] })) {
        console.log("your browser has modern DOM features!");
    }
</script>

Motivation

  • Dynamic APIs
  • Only polyfilling the missing features
  • Quickly check what host features your browser has

Documentation

features

window.features is a global object containing all the features that are present in this browser. If the feature is present its value is true and false if the feature test failed.

if (features["DOM.EventTarget.addEventListener"]) {
    window.addEventListener("click", handler);
} else {
    window.attachEvent("onclick", handler);
}

The tests file shows the list of features currently being detected. It's encouraged that rather then use the entire file, you build your own file using only the features you want.

Currently the easiest way to make a custom build is to

  • clone this project
  • delete any files from lib/features you don't want
  • run node build.js
  • take your fresh feature.js file and use it

Dynamic APIS

Dynamic APIs require you to feature detect any part of the host environment you want to use. This is an extension of the progressive enhancement technique.

The basic idea is that you have a HTML/CSS page that works. Then include a javascript enhancement file which checks whether the host environment has the features it needs. If it has them (either natively or by polyfill) it will safely enhance the page without throwing an error. If the browser doesn't have the features then rather then throwing a run-time error it will just do nothing.

Installation

Just include <script src="feature.js"></script>

Test

See test/test.html

Contributors

  • Raynos

MIT Licenced

Something went wrong with that request. Please try again.