CSS Custom Property Polyfill Checker

A CSS Custom Property polyfill is a tool or script that enables Internet Explorer 11 (which does not natively support CSS variables like --primary-color and var()) to render pages that use them. The most common approach—used by postcss-custom-properties—is to insert a duplicate declaration with the resolved fallback value before each var() usage. IE11 uses the first declaration it understands, ignoring the var() line, while modern browsers use the var() version. This checker automates that process visually.

CSS Custom Properties (CSS Variables) were introduced in the CSS Custom Properties for Cascading Variables Module Level 1 specification, which was finalized after IE11's development cycle ended. IE11 was released in 2013, while CSS variables gained broad browser support around 2016-2017. Microsoft ended active development of IE11 before implementing this feature, focusing instead on Edge. As a result, IE11 never received support for --custom-property declarations or the var() function.

The var() function accepts an optional fallback value: var(--name, fallback). When a CSS variable is not defined, the browser uses the fallback. For IE11 polyfills: (1) If var() has a fallback parameter (e.g., var(--color, red)), the polyfill uses that fallback value. (2) If no fallback is provided but the variable is defined elsewhere (e.g., :root { --color: blue; }), the polyfill looks up the defined value. (3) If neither exists, the property may be left unresolved, and a warning is generated. This tool follows the same logic.

Yes, but you need a build-step polyfill. The most popular solution is postcss-custom-properties (part of the PostCSS ecosystem), which statically analyzes your CSS at build time and generates IE11-safe fallback declarations. This approach is production-ready and used by many large projects. Alternatively, you can use a runtime polyfill like ie11CustomProperties.js, but build-time solutions are generally more reliable and performant. This online checker gives you a preview of what the build tool would generate.

1. Dynamic changes: Polyfills that work at build time cannot handle variables changed via JavaScript at runtime. 2. Nested var(): var(--a, var(--b)) is extremely difficult to polyfill statically and usually requires manual intervention. 3. calc() with var(): calc(var(--w) * 2) requires the variable value to be known at build time. 4. Scoped variables: Variables defined in specific selectors (not :root) may resolve differently depending on the DOM context, which static polyfills cannot fully replicate. 5. Increased file size: Each fallback adds extra bytes to your CSS bundle.

For most projects, postcss-custom-properties is the recommended choice. It's mature, well-maintained, and integrates seamlessly into PostCSS-based build pipelines (Webpack, Gulp, etc.). It supports the preserve: true option, which keeps the original var() declarations for modern browsers while adding fallbacks for IE11—exactly the strategy this online tool demonstrates. Alternative tools include css-vars-ponyfill (runtime) and postcss-ie11-custom-properties. This checker helps you understand and preview the transformation before integrating it into your build process.