@kevingimbel/eleventy-plugin-caniuse

1.0.0 • Public • Published

eleventy-plugin-caniuse

Plugin to include caniuse.com embeds into 11ty websites

Usage

Install plugin

Install the plugin using npm:

npm install @kevingimbel/eleventy-plugin-caniuse

Load the plugin in .eleventy.js

Then, include it in your .eleventy.js config file:

const canIuse = require("@kevingimbel/eleventy-plugin-caniuse");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(canIuse);
};

Load the caniuse-embed library

The plugin requires the caniuse-embed library from Ire Aderinokun which can be found at https://github.com/ireade/caniuse-embed.

The plugin provides a convenient shortcode to load the library from jsdelivr.com

<body>
...
{% caniuse_js %}
</body>

This will render a script element that loads the library from the jsdelivr.com CDN.

Alternatively you can download the JavaScript code from https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/public/caniuse-embed.min.js and include it in any other way, e.g. by adding it to a JavaScript bundle.

Config Options

Option Type Default Available options
accessible_colors Boolean true true, false
periods string future_1,current,past_1,past_2 future_3, future_2, future_1, current, past_1, past_2, past_3, past_4, past_5

See https://caniuse.bitsofco.de/ for more details.

Config Examples

In the following example accessible_colors are disabled and only current and two future browser versions are shown.

const canIuse = require("@kevingimbel/eleventy-plugin-caniuse");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(canIuse, {
      accessible_colors: false,
      periods: "future_2,future_1,current"
  });
}

Use the shortcode

Syntax

{% caniuse "feature" "periods" "accessible_colors" %}
{% caniuse "css-grid" "future_1,current" "false" %}

Examples

Some examples:

Use default config and embed info about css-grid support

{% caniuse "css-grid" %}

Custom periods

{% caniuse "css-grid" "future_2,future_1,current,past_1" %}

Disable accessible colors

{% caniuse "css-grid" "past_1" "false" %}

FAQ

How can I find the "feature" name?

The name of the feature can be found in the URL of caniuse.com, for example:

https://caniuse.com/async-clipboard -> async-clipboard https://caniuse.com/css-grid -> css-grid

Credits

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.0
    3
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.0.0
    3

Package Sidebar

Install

npm i @kevingimbel/eleventy-plugin-caniuse

Weekly Downloads

3

Version

1.0.0

License

MIT

Unpacked Size

5.06 kB

Total Files

3

Last publish

Collaborators

  • kevingimbel