The simplest, recommended way to install the polyfill is to copy it into your project.
Download css-toggles.min.js from
unpkg.com and add it to
the appropriate directory in your project. Then, include it where necessary with
a <script> tag:
<script src="/path/to/css-toggles.min.js" type="module"></script>You can also use an IIFE version if your target browsers require it:
<script src="/path/to/css-toggles.iife.min.js"></script>For more advanced configuration, you can install with npm:
npm install @oddbird/css-togglesAfter installing, you’ll need to use appropriate tooling to use node_modules/@oddbird/css-toggles/dist/css-toggles.js (or .min.js).
For prototyping or testing, you can use the npm package via a Content Delivery Network. Avoid using JavaScript CDN’s in production, for many good reasons such as performance and robustness.
<script
src="https://cdn.jsdelivr.net/npm/@oddbird/css-toggles@latest"
crossorigin="anonymous"
defer
></script>After installation the polyfill will automatically parse all stylesheets present in the HTML document (both inline and linked) for the proposed CSS Toggles syntax. Once the styles are parsed the toggling behavior will be polyfilled with JavaScript.
Visit our contribution guidelines.
At OddBird, we love contributing to the languages & tools developers rely on. We're currently working on polyfills for new Popover & Anchor Positioning functionality, as well as CSS specifications for functions, mixins, and responsive typography. Help us keep this work sustainable and centered on your needs as a developer! We display sponsor logos and avatars on our website.