JSPM

@kevingimbel/eleventy-plugin-caniuse

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q23214F
  • License MIT

Display caniuse.com tables in 11ty

Package Exports

  • @kevingimbel/eleventy-plugin-caniuse

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@kevingimbel/eleventy-plugin-caniuse) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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