{"id":15423190,"url":"https://github.com/5t3ph/eleventy-plugin-css-browser-support","last_synced_at":"2025-06-25T04:32:39.739Z","repository":{"id":41560752,"uuid":"509188714","full_name":"5t3ph/eleventy-plugin-css-browser-support","owner":"5t3ph","description":"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.","archived":false,"fork":false,"pushed_at":"2024-10-03T23:51:14.000Z","size":1296,"stargazers_count":9,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T09:22:51.162Z","etag":null,"topics":["11ty","11ty-plugin","browser-support","css","eleventy","eleventy-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@11tyrocks/eleventy-plugin-css-browser-support","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/5t3ph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-30T18:18:29.000Z","updated_at":"2024-10-03T23:51:17.000Z","dependencies_parsed_at":"2024-10-01T17:40:53.281Z","dependency_job_id":"6756fdcb-e04d-4e8f-84cc-d2a8ff9d7051","html_url":"https://github.com/5t3ph/eleventy-plugin-css-browser-support","commit_stats":{"total_commits":20,"total_committers":3,"mean_commits":6.666666666666667,"dds":0.09999999999999998,"last_synced_commit":"0268a474886881bb28c1e866a800aff338753550"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":"5t3ph/eleventy-plugin-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Feleventy-plugin-css-browser-support","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Feleventy-plugin-css-browser-support/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Feleventy-plugin-css-browser-support/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Feleventy-plugin-css-browser-support/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/5t3ph","download_url":"https://codeload.github.com/5t3ph/eleventy-plugin-css-browser-support/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249220839,"owners_count":21232421,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty","11ty-plugin","browser-support","css","eleventy","eleventy-plugin"],"created_at":"2024-10-01T17:40:45.097Z","updated_at":"2025-04-16T08:32:48.659Z","avatar_url":"https://github.com/5t3ph.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Eleventy Plugin: CSS Browser Support\n\n\u003e 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.\n\nPlugin provides three filters, giving the option for rendering full support tables or turning inline code into buttons to trigger a popover panel.\n\n![](example-panel.png)\n![](example-table.png)\n\n**Panel JavaScript** is optionally included with the following features:\n\n- toggling panels open and close\n- closing upon `Escape` and `Tab` or click outside the panel\n- closing open panels when another is toggled\n- preventing overflow collision with the viewport (requires coordination with panel styles)\n\n\u003e **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.\n\n**Styles** are not provided, see the [styling section](#styling-the-panels-and-tables) for example structure and stylesheet.\n\n## Usage\n\nInstall the plugin:\n\n```bash\nnpm install @11tyrocks/eleventy-plugin-css-browser-support\n```\n\nThen, include it in your `.eleventy.js` config file:\n\n```js\nconst cssBrowserSupport = require(\"@11tyrocks/eleventy-plugin-css-browser-support\");\n\nmodule.exports = (eleventyConfig) =\u003e {\n  eleventyConfig.addPlugin(cssBrowserSupport);\n};\n```\n\n## Filter Setup\n\nIf 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:\n\n```twig\n{{ content | cssSupportPanels | safe }}\n```\n\nThen, each time you want to render a support panel, replace inline code blocks with the `cssSupport` filter:\n\n```twig\n{{ 'aspect-ratio' | cssSupport }}\n```\n\nYou 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:\n\n```twig\n{{ 'margin-inline: auto' | cssSupport }}\n```\n\n\u003e **Note** a panel will only be generated and attached for the first instance of a duplicate property used within the same template.\n\nAlternatively, render a full table showing support for one or more things, example:\n\n```twig\n{% cssSupportTable \"aspect-ratio, :focus-visible, @layer, repeat()\" %}\n```\n\nTo 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.\n\n```twig\n{% cssSupportTable \"aspect-ratio, :focus-visible, @layer, repeat()\", \"Demo browser support\" %}\n```\n\n## Supported CSS features\n\nThe 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, `\u003e` would be available as `child`.\n\nAdditionally, 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.\n\nReview the data from MDN:\n\n- [at-rules](https://github.com/mdn/browser-compat-data/tree/main/css/at-rules)\n- [properties](https://github.com/mdn/browser-compat-data/tree/main/css/properties)\n- [selectors](https://github.com/mdn/browser-compat-data/tree/main/css/selectors)\n- [types](https://github.com/mdn/browser-compat-data/tree/main/css/types)\n\n## Styling the panels and tables\n\nThis plugin is BYOS (bring your own style) but you can check out [the stylesheet included in the repo](_includes/assets/style.css) to produce the styles shown in the intro.\n\n- `pointer-events: none` is added inline to the code and SVG icon\n- it's recommended to use a pseudo-element to extend the \"hit area\" of the button to cover the code element\n\n### Provided cell classes\n\n- browser header cells receive a class in the format `css-support-header--[BROWSER-NAME]`\n- cells for non-supported browsers receive the class `css-support-cell--na`\n- cells for browsers that require a flag for support receive the class `css-support-cell--flagged`\n\n### Panel HTML\n\n\u003cdetails\u003e\n\u003csummary\u003eView panel HTML\u003c/summary\u003e\n\n```html\n\u003cspan class=\"css-support-panel-container\"\u003e\n  \u003ccode style=\"pointer-events: none;\"\u003easpect-ratio\u003c/code\u003e\n  \u003cbutton\n    type=\"button\"\n    class=\"css-support-button\"\n    aria-label=\"Browser support for aspect-ratio\"\n    aria-expanded=\"false\"\n    aria-controls=\"css-support-aspect-ratio\"\n  \u003e\n    \u003csvg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      class=\"css-support-icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      height=\"24\"\n      style=\"pointer-events: none\"\n    \u003e\n      \u003cpath\n        fill=\"currentColor\"\n        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\"\n      \u003e\u003c/path\u003e\n    \u003c/svg\u003e\n  \u003c/button\u003e\n  \u003cdiv hidden id=\"css-support-aspect-ratio\" class=\"css-support-panel\"\u003e\n    \u003cdiv class=\"css-support-panel-table-container\"\u003e\n      \u003ctable class=\"css-support-table\"\u003e\n        \u003ccaption\u003e\n          Browser support for\n          \u003ccode\u003easpect-ratio\u003c/code\u003e\n        \u003c/caption\u003e\n        \u003cthead\u003e\n          \u003ctr\u003e\n            \u003cth\u003eChrome\u003c/th\u003e\n          \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n          \u003ctr\u003e\n            \u003ctd\u003ev88+\u003c/td\u003e\n          \u003c/tr\u003e\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n    \u003c/div\u003e\n    \u003csmall\u003e\n      \u003cem\u003eGlobal \u003ccode\u003easpect-ratio\u003c/code\u003e support:\u003c/em\u003e 86.49%\u003cbr /\u003e\n      \u003ca href=\"https://caniuse.com/?search=aspect-ratio\"\u003e\n        caniuse data for aspect-ratio\n      \u003c/a\u003e\n    \u003c/small\u003e\n  \u003c/div\u003e\n\u003c/span\u003e\n```\n\n\u003c/details\u003e\n\n### Table HTML\n\n\u003cdetails\u003e\n\u003csummary\u003eView table HTML\u003c/summary\u003e\n\n```html\n\u003cdiv class=\"css-support-table-container\"\u003e\n  \u003ctable class=\"css-support-table\"\u003e\n    \u003cthead\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003c/td\u003e\n        \u003cth class=\"css-support-header--chrome\"\u003eChrome\u003c/th\u003e\n        \u003cth class=\"css-support-header--edge\"\u003eEdge\u003c/th\u003e\n        \u003cth class=\"css-support-header--firefox\"\u003eFirefox\u003c/th\u003e\n        \u003cth class=\"css-support-header--safari\"\u003eSafari\u003c/th\u003e\n        \u003cth\u003eGlobal Support\u003c/th\u003e\n      \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n      \u003ctr\u003e\n        \u003cth\u003e\u003ccode\u003e:has()\u003c/code\u003e\u003c/th\u003e\n        \u003ctd\u003ev105+\u003c/td\u003e\n        \u003ctd\u003ev105+\u003c/td\u003e\n        \u003ctd class=\"css-support-cell--flagged\"\u003ev103+\u003c/td\u003e\n        \u003ctd\u003ev15.4+\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://caniuse.com/?search=:has()\"\u003e66.61%\u003c/a\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003cth\u003e\u003ccode\u003e@container\u003c/code\u003e\u003c/th\u003e\n        \u003ctd\u003ev105+\u003c/td\u003e\n        \u003ctd\u003ev105+\u003c/td\u003e\n        \u003ctd class=\"css-support-cell--na\"\u003eN/A\u003c/td\u003e\n        \u003ctd\u003ev16+\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://caniuse.com/?search=@container\"\u003e63.75%\u003c/a\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n  \u003cp\u003eGlobal support data from \u003ca href=\"https://caniuse.com/\"\u003ecaniuse.com\u003c/a\u003e\u003c/p\u003e\n\u003c/div\u003e\n```\n\n\u003c/details\u003e\n\n### Special case: Panel alignment\n\nThe 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.\n\nAlignment classes:\n\n- `.css-support-panel--left` - added when the panel should align to the left side of the trigger button\n- `.css-support-panel--right` - added when the panel should align to the right side of the trigger button\n\n## Config Options\n\n| Option         | Type  | Default                                 |\n| -------------- | ----- | --------------------------------------- |\n| browserList    | array | [\"chrome\", \"edge\", \"firefox\", \"safari\"] |\n| showPanelTable | bool  | true                                    |\n| includePanelJS | bool  | true                                    |\n| tableCaption   | str   | null                                    |\n\n## Config Examples\n\n### Change list of browsers displayed\n\n\u003e **Note** All available browsers are queried to get an accurate global support percentage.\n\nThe following array shows the complete list of valid `browserList` options.\n\n```js\n[\n  \"chrome\",\n  \"chrome_android\",\n  \"edge\",\n  \"firefox\",\n  \"firefox_android\",\n  \"ie\",\n  \"opera\",\n  \"safari\",\n  \"safari_ios\",\n  \"samsunginternet_android\",\n];\n```\n\n**Example: Add Safari on iOS**\n\n```js\neleventyConfig.addPlugin(cssBrowserSupport, {\n  browserList: [\"chrome\", \"edge\", \"firefox\", \"safari\", \"safari_ios\"],\n});\n```\n\n### Remove support table from panels\n\nTo only show global percentage and caniuse link in the popover panel, use `showPanelTable: false`\n\n```js\neleventyConfig.addPlugin(cssBrowserSupport, {\n  showPanelTable: false,\n});\n```\n\n### Prevent output of panel javascript\n\nIf you'd like to write your own JS or include it in another way, you can disable the automatic inclusion with `includePanelJS: false`\n\n```js\neleventyConfig.addPlugin(cssBrowserSupport, {\n  includePanelJS: false,\n});\n```\n\n## Credits\n\nThis plugin relies on my package [css-browser-support](https://www.npmjs.com/package/css-browser-support) which returns the support data from MDN and global percentage from caniuse.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5t3ph%2Feleventy-plugin-css-browser-support","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F5t3ph%2Feleventy-plugin-css-browser-support","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5t3ph%2Feleventy-plugin-css-browser-support/lists"}