Get started with prefixfree CDN

MIT licensed

PrefixFree is a lightweight library that automatically adds vendor prefixes to CSS3 properties for wider browser compatibility.

Tags:
  • css

Stable version

Copied!

How to start using prefixfree CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with prefixfree CDN - cdnhub.io</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.cdnhub.io/prefixfree/1.0.7/prefixfree.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const elements = document.querySelectorAll('[class^="icon-"]');
      prefixes = ['webkit', 'moz', 'ms', 'o'];

      for (let i = 0; i < elements.length; i++) {
        let element = elements[i];
        let prefix = '';

        for (let j = 0; j < prefixes.length; j++) {
          prefix += prefixes[j] + '-';
          if (prefixedElement = document.createElement('div')) {
            prefixedElement.style.cssText = element.style.cssText;
            document.body.appendChild(prefixedElement);
            if (prefixedElement.style[prefix + element.className]) {
              element.className = prefix + element.className;
              break;
            }
            document.body.removeChild(prefixedElement);
          }
        }
      }
    });
  </script>
</head>
<body>
  <button class="icon-close">Close</button>
  <button class="icon-check">Check</button>
</body>
</html>
Copied!

All versions