Wondering what’s next for npm?Check out our public roadmap! »

    @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

    Install

    npm i @kevingimbel/eleventy-plugin-caniuse

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    5.06 kB

    Total Files

    3

    Last publish

    Collaborators

    • avatar