Autoprefixer

Autoprefixer is a PostCSS plugin that automatically adds vendor prefixes to your CSS. It uses data from Can I Use to determine which properties need prefixes.

Usage

Autoprefixer is a CSS processor that can be enabled from the style editor menu, or configured via the processors property of the configuration object.

When enabled, all CSS output is processed to add necessary vendor prefixes based on browser support data. No additional configuration is required - Autoprefixer automatically determines which prefixes to add.

Autoprefixer can be used alongside other processors. Multiple processors are applied in the order they appear in the style editor menu.

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Autoprefixer Demo</h1>\n  <p>The CSS below uses properties that require vendor prefixes. Check the <strong>Compiled</strong> tab to see the prefixed output.</p>\n  <div class=\"box\">\n    <p>Hover over this box</p>\n  </div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".box {\n  width: 200px;\n  padding: 1em;\n  background: #4a90d9;\n  color: white;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.box:hover {\n  transform: scale(1.1);\n}\n"
    },
    "processors": [
      "autoprefixer"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Autoprefixer Demo</h1>\n  <p>The CSS below uses properties that require vendor prefixes. Check the <strong>Compiled</strong> tab to see the prefixed output.</p>\n  <div class=\"box\">\n    <p>Hover over this box</p>\n  </div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".box {\n  width: 200px;\n  padding: 1em;\n  background: #4a90d9;\n  color: white;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.box:hover {\n  transform: scale(1.1);\n}\n"
    },
    "processors": [
      "autoprefixer"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Autoprefixer Demo</h1>\n  <p>The CSS below uses properties that require vendor prefixes. Check the <strong>Compiled</strong> tab to see the prefixed output.</p>\n  <div class=\"box\">\n    <p>Hover over this box</p>\n  </div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".box {\n  width: 200px;\n  padding: 1em;\n  background: #4a90d9;\n  color: white;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.box:hover {\n  transform: scale(1.1);\n}\n"
    },
    "processors": [
      "autoprefixer"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Autoprefixer Demo</h1>\n  <p>The CSS below uses properties that require vendor prefixes. Check the <strong>Compiled</strong> tab to see the prefixed output.</p>\n  <div class=\"box\">\n    <p>Hover over this box</p>\n  </div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".box {\n  width: 200px;\n  padding: 1em;\n  background: #4a90d9;\n  color: white;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.box:hover {\n  transform: scale(1.1);\n}\n"
    },
    "processors": [
      "autoprefixer"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Autoprefixer Demo</h1>\n  <p>The CSS below uses properties that require vendor prefixes. Check the <strong>Compiled</strong> tab to see the prefixed output.</p>\n  <div class=\"box\">\n    <p>Hover over this box</p>\n  </div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".box {\n  width: 200px;\n  padding: 1em;\n  background: #4a90d9;\n  color: white;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.box:hover {\n  transform: scale(1.1);\n}\n"
    },
    "processors": [
      "autoprefixer"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Autoprefixer Demo</h1>\n  <p>The CSS below uses properties that require vendor prefixes. Check the <strong>Compiled</strong> tab to see the prefixed output.</p>\n  <div class=\"box\">\n    <p>Hover over this box</p>\n  </div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".box {\n  width: 200px;\n  padding: 1em;\n  background: #4a90d9;\n  color: white;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.box:hover {\n  transform: scale(1.1);\n}\n"
    },
    "processors": [
      "autoprefixer"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Autoprefixer Demo</h1>\n  <p>The CSS below uses properties that require vendor prefixes. Check the <strong>Compiled</strong> tab to see the prefixed output.</p>\n  <div class=\"box\">\n    <p>Hover over this box</p>\n  </div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".box {\n  width: 200px;\n  padding: 1em;\n  background: #4a90d9;\n  color: white;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.box:hover {\n  transform: scale(1.1);\n}\n"
    },
    "processors": [
      "autoprefixer"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.config = {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Autoprefixer Demo</h1>\n  <p>The CSS below uses properties that require vendor prefixes. Check the <strong>Compiled</strong> tab to see the prefixed output.</p>\n  <div class=\"box\">\n    <p>Hover over this box</p>\n  </div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".box {\n  width: 200px;\n  padding: 1em;\n  background: #4a90d9;\n  color: white;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.box:hover {\n  transform: scale(1.1);\n}\n"
    },
    "processors": [
      "autoprefixer"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  };
</script>

Processor Info

Name

autoprefixer

Editor

style

Processor

Autoprefixer

Version

autoprefixer: v10.4.21

Custom Settings

Custom settings added to the property autoprefixer are passed as options to the Autoprefixer plugin. Please check the documentation for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings

{
  "autoprefixer": {
    "cascade": true
  }
}

Links

• Autoprefixer
• Can I Use
• PostCSS in LiveCodes
• CSS Processors in LiveCodes