npmpackage.info

Gathering detailed insights and metrics for @11tyrocks/eleventy-plugin-css-browser-support

@11tyrocks/eleventy-plugin-css-browser-support

Eleventy filters for decorating inline-code with CSS broswer support data or rendering support tables. Data combined from caniuse and MDN, including version support started and global support percentages.

0.12.0

JavaScript

317.61 kB

3,328

Installations

npm install @11tyrocks/eleventy-plugin-css-browser-support

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

22.8.0

NPM Version

10.8.2 Score

69.8

Supply Chain

97.1

Quality

79.2

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

1

Closed

0

Merged

1

Issues

Open

0

Total

2

Closed

2

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 2 contributors

Languages

JavaScript

CSS

Nunjucks

JavaScript (64.92%)

CSS (30.42%)

Nunjucks (4.67%)

Developer

5t3ph

Download Statistics

Total Downloads

3,328

Last Day

Last Week

Last Month

Last Year

1,044

GitHub Statistics

9 Stars

21 Commits

3 Forks

2 Watching

1 Branches

2 Contributors

Maintainers

Package Meta Information

Latest Version

0.12.0

Package Id

@11tyrocks/eleventy-plugin-css-browser-support@0.12.0

Unpacked Size

317.61 kB

Size

289.11 kB

File Count

NPM Version

10.8.2

Node Version

22.8.0

Publised On

03 Oct 2024

Total Downloads

Cumulative downloads

Total Downloads

3,328

Last day

433.3%

Compared to previous day

Last week

-42.9%

Compared to previous week

Last month

10.7%

Compared to previous month

Last year

-38%

1,044

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

css-browser-support

Dev Dependencies

@11ty/eleventy terser

Versions

Eleventy Plugin: CSS Browser Support

Eleventy filters for decorating inline-code with CSS broswer support data or rendering support tables. Data combined from caniuse and MDN, including version support started and global support percentages.

Plugin provides three filters, giving the option for rendering full support tables or turning inline code into buttons to trigger a popover panel.

Panel JavaScript is optionally included with the following features:

toggling panels open and close
closing upon Escape and Tab or click outside the panel
closing open panels when another is toggled
preventing overflow collision with the viewport (requires coordination with panel styles)

Note - due to inlining of this JS, it can appear to not work with Eleventy v1.0.1+ hot-reloading. A manual refresh may be required.

Styles are not provided, see the styling section for example structure and stylesheet.

Usage

Install the plugin:

1npm install @11tyrocks/eleventy-plugin-css-browser-support

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

1const cssBrowserSupport = require("@11tyrocks/eleventy-plugin-css-browser-support");
2
3module.exports = (eleventyConfig) => {
4  eleventyConfig.addPlugin(cssBrowserSupport);
5};

Filter Setup

If you plan to use the inline code filter to produce collapsible panels, be sure to add the cssSupportPanels filter in your main template that outputs the final content, example:

1{{ content | cssSupportPanels | safe }}

Then, each time you want to render a support panel, replace inline code blocks with the cssSupport filter:

1{{ 'aspect-ratio' | cssSupport }}

You can also include a value, in which case only the property will be queried for support, such as the following will show margin-inline support:

1{{ 'margin-inline: auto' | cssSupport }}

Note a panel will only be generated and attached for the first instance of a duplicate property used within the same template.

Alternatively, render a full table showing support for one or more things, example:

1{% cssSupportTable "aspect-ratio, :focus-visible, @layer, repeat()" %}

To include a caption for the table, add it via the plugin option tableCaption, or include it as a second string value when including the cssSupportTable shortcode.

1{% cssSupportTable "aspect-ratio, :focus-visible, @layer, repeat()", "Demo browser support" %}

Supported CSS features

The API is intended to work for passing features as you would write them in CSS. As such, a few things will not be available if they exist on MDN under an expanded name. For example, > would be available as child.

Additionally, some features are nested and may be missed by the API. Exceptions are grid features (ex. repeat()), and color types (ex. color-contrast()) which have been explicitly included.

Review the data from MDN:

Styling the panels and tables

This plugin is BYOS (bring your own style) but you can check out the stylesheet included in the repo to produce the styles shown in the intro.

pointer-events: none is added inline to the code and SVG icon
it's recommended to use a pseudo-element to extend the "hit area" of the button to cover the code element

Provided cell classes

browser header cells receive a class in the format css-support-header--[BROWSER-NAME]
cells for non-supported browsers receive the class css-support-cell--na
cells for browsers that require a flag for support receive the class css-support-cell--flagged

Panel HTML

View panel HTML

1<span class="css-support-panel-container">
2  <code style="pointer-events: none;">aspect-ratio</code>
3  <button
4    type="button"
5    class="css-support-button"
6    aria-label="Browser support for aspect-ratio"
7    aria-expanded="false"
8    aria-controls="css-support-aspect-ratio"
9  >
10    <svg
11      xmlns="http://www.w3.org/2000/svg"
12      aria-hidden="true"
13      class="css-support-icon"
14      viewBox="0 0 24 24"
15      width="24"
16      height="24"
17      style="pointer-events: none"
18    >
19      <path
20        fill="currentColor"
21        d="M7 17h2v-7H7Zm4 0h2V7h-2Zm4 0h2v-4h-2ZM5 21q-.8 0-1.4-.6Q3 19.8 3 19V5q0-.8.6-1.4Q4.2 3 5 3h14q.8 0 1.4.6.6.6.6 1.4v14q0 .8-.6 1.4-.6.6-1.4.6Z"
22      ></path>
23    </svg>
24  </button>
25  <div hidden id="css-support-aspect-ratio" class="css-support-panel">
26    <div class="css-support-panel-table-container">
27      <table class="css-support-table">
28        <caption>
29          Browser support for
30          <code>aspect-ratio</code>
31        </caption>
32        <thead>
33          <tr>
34            <th>Chrome</th>
35          </tr>
36        </thead>
37        <tbody>
38          <tr>
39            <td>v88+</td>
40          </tr>
41        </tbody>
42      </table>
43    </div>
44    <small>
45      <em>Global <code>aspect-ratio</code> support:</em> 86.49%<br />
46      <a href="https://caniuse.com/?search=aspect-ratio">
47        caniuse data for aspect-ratio
48      </a>
49    </small>
50  </div>
51</span>

Table HTML

View table HTML

1<div class="css-support-table-container">
2  <table class="css-support-table">
3    <thead>
4      <tr>
5        <td></td>
6        <th class="css-support-header--chrome">Chrome</th>
7        <th class="css-support-header--edge">Edge</th>
8        <th class="css-support-header--firefox">Firefox</th>
9        <th class="css-support-header--safari">Safari</th>
10        <th>Global Support</th>
11      </tr>
12    </thead>
13    <tbody>
14      <tr>
15        <th><code>:has()</code></th>
16        <td>v105+</td>
17        <td>v105+</td>
18        <td class="css-support-cell--flagged">v103+</td>
19        <td>v15.4+</td>
20        <td><a href="https://caniuse.com/?search=:has()">66.61%</a></td>
21      </tr>
22      <tr>
23        <th><code>@container</code></th>
24        <td>v105+</td>
25        <td>v105+</td>
26        <td class="css-support-cell--na">N/A</td>
27        <td>v16+</td>
28        <td><a href="https://caniuse.com/?search=@container">63.75%</a></td>
29      </tr>
30    </tbody>
31  </table>
32  <p>Global support data from <a href="https://caniuse.com/">caniuse.com</a></p>
33</div>

Special case: Panel alignment

The JS will add extra classes depending on the size of the viewport and it the panel is at risk of overflow. You may need to adjust the panel position styles accordingly.

Alignment classes:

.css-support-panel--left - added when the panel should align to the left side of the trigger button
.css-support-panel--right - added when the panel should align to the right side of the trigger button

Config Options

Option	Type	Default
browserList	array	["chrome", "edge", "firefox", "safari"]
showPanelTable	bool	true
includePanelJS	bool	true
tableCaption	str	null

Config Examples

Change list of browsers displayed

Note All available browsers are queried to get an accurate global support percentage.

The following array shows the complete list of valid browserList options.

1[
2  "chrome",
3  "chrome_android",
4  "edge",
5  "firefox",
6  "firefox_android",
7  "ie",
8  "opera",
9  "safari",
10  "safari_ios",
11  "samsunginternet_android",
12];

Example: Add Safari on iOS

1eleventyConfig.addPlugin(cssBrowserSupport, {
2  browserList: ["chrome", "edge", "firefox", "safari", "safari_ios"],
3});

Remove support table from panels

To only show global percentage and caniuse link in the popover panel, use showPanelTable: false

1eleventyConfig.addPlugin(cssBrowserSupport, {
2  showPanelTable: false,
3});

Prevent output of panel javascript

If you'd like to write your own JS or include it in another way, you can disable the automatic inclusion with includePanelJS: false

1eleventyConfig.addPlugin(cssBrowserSupport, {
2  includePanelJS: false,
3});

Credits

This plugin relies on my package css-browser-support which returns the support data from MDN and global percentage from caniuse.

No vulnerabilities found.

No security vulnerabilities found.