What does autoprefixer do and why?
cross-browser CSS tooling.
autoprefixer is a PostCSS plugin that adds vendor prefixes to CSS based on a browserslist target using compatibility data, so you write standard CSS and it handles support.
WHAT THIS TESTS This checks whether you understand how modern builds handle cross-browser CSS automatically, the data that drives it, and the limits of what prefixing can and cannot do. It separates people who still hand-write prefixes from those who automate.
A GOOD ANSWER COVERS Autoprefixer is a PostCSS plugin that automatically manages vendor prefixes in your CSS. You write standard, unprefixed CSS, and it parses the stylesheet and adds the vendor-prefixed variants that your target browsers require, and it can also strip prefixes that are no longer needed. It decides what to add using two inputs: a browserslist configuration that declares which browsers and versions you support, and the Can I Use compatibility data that records which properties need which prefixes in which browser versions. Because the data is current and the browserslist target is explicit, you get exactly the prefixes you need and no more. It is critical because manual prefixing is tedious, quickly goes stale as browser support changes, clutters source code, and is easy to get wrong. A key limitation: autoprefixer only handles prefixes; it does not polyfill or backport features that a browser does not support at all.
COMMON WRONG ANSWERS Writing vendor prefixes by hand in source. Claiming autoprefixer polyfills new CSS features for old browsers. Forgetting that its behavior depends on the browserslist target. Confusing it with postcss-preset-env, which does handle some future-syntax transforms.
LIKELY FOLLOW-UPS Where does browserslist configuration live and how does it affect output? What is the difference between adding a prefix and polyfilling a feature? How does it stay current via Can I Use data? Why run it after Sass compilation?
ONE CONCRETE EXAMPLE You author a rule using a standard property without prefixes. Given a browserslist target that includes older Safari, autoprefixer outputs the -webkit-prefixed variant alongside the standard one; if you later drop support for that browser, it stops emitting the prefix. You never edit prefixes by hand, and the output matches exactly the browsers you declared.
Read the original → evilmartians.com
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.