caniuse-component

Up-to-date caniuse.com data for your slides


Keywords
reveal.js, presentation, caniuse, plugin
License
MIT
Install
npm install caniuse-component@0.1.2

Documentation

Caniuse Component

Instant, up-to-date, and theme-able browser statistics for your presentations (so you don't have to update your slides the night before!)

Here is a Demo 😄

  • customizable style based on a variable system
  • adaptive text color based on background source
  • automatic browser logos & caniuse data
  • not compatible with IE 6/7

Usage

Node Implementation

Install via NPM: npm install caniuse-component -- include the js and css source.

Reveal.js Implementation

To use this with Reveal.js, npm install, then apply this source as a plugin:

Reveal.initialize({
  // setup things here:
  // ...

  // plugins here:
  dependencies: [
    { src: '../node_modules/caniuse-component/scripts.js', async: true },
    { src: '../node_modules/caniuse-component/styles.css' }
  ]
});

Then, include this element on your page:

<ul id="caniuse--result-list"
    data-propName="css-filters"
    data-browsers="opera safari firefox chrome edge">
</ul>
name function usage options
id Applies styles to list id="caniuse--result-list" You only get one option unless you make your own
propName CSS Property Name data-propName="css-filters" See Caniuse API and options
browsers Browsers to check support from data-browsers="firefox chrome safari" edge, chrome, safari, ie, firefox, opera

Development & Contribution

NPM scripts are used as the build system, so to develop, run: npm run dev. Consumable files are distributed in the root, and source files live within /src.

To contribute: Please clone this down and submit a PR, or open an issue. 😘

Credits