

\href{https://github.com/postcss/postcss}{\texttt{ Post\+CSS}} plugin to parse CSS and add vendor prefixes to CSS rules using~values from~\href{https://caniuse.com/}{\texttt{ Can I Use}}. It~is~\href{https://developers.google.com/web/tools/setup/setup-buildtools\#dont_trip_up_with_vendor_prefixes}{\texttt{ recommended}} by Google and used in Twitter and Alibaba.

Write your CSS rules without vendor prefixes (in~fact, forget about them entirely)\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{::placeholder \{}
\DoxyCodeLine{  color: gray;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.image \{}
\DoxyCodeLine{  background-\/image: url(image@1x.png);}
\DoxyCodeLine{\}}
\DoxyCodeLine{@media (min-\/resolution: 2dppx) \{}
\DoxyCodeLine{  .image \{}
\DoxyCodeLine{    background-\/image: url(image@2x.png);}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


Autoprefixer will use the data based on current browser popularity and property support to~apply prefixes for~you. You~can~try~the \href{https://autoprefixer.github.io/}{\texttt{ interactive demo}} of Autoprefixer.


\begin{DoxyCode}{0}
\DoxyCodeLine{::-\/moz-\/placeholder \{}
\DoxyCodeLine{  color: gray;}
\DoxyCodeLine{\}}
\DoxyCodeLine{:-\/ms-\/input-\/placeholder \{}
\DoxyCodeLine{  color: gray;}
\DoxyCodeLine{\}}
\DoxyCodeLine{::-\/ms-\/input-\/placeholder \{}
\DoxyCodeLine{  color: gray;}
\DoxyCodeLine{\}}
\DoxyCodeLine{::placeholder \{}
\DoxyCodeLine{  color: gray;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.image \{}
\DoxyCodeLine{  background-\/image: url(image@1x.png);}
\DoxyCodeLine{\}}
\DoxyCodeLine{@media (-\/webkit-\/min-\/device-\/pixel-\/ratio: 2),}
\DoxyCodeLine{       (min-\/resolution: 2dppx) \{}
\DoxyCodeLine{  .image \{}
\DoxyCodeLine{    background-\/image: url(image@2x.png);}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


Twitter account for news and releases\+: \href{https://twitter.com/autoprefixer}{\texttt{ @autoprefixer}}.

\href{https://evilmartians.com/?utm_source=autoprefixer}{\texttt{  }}\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3584}{}\doxysection{Contents}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3584}

\begin{DoxyItemize}
\item \href{\#contents}{\texttt{ Contents}}
\item \href{\#browsers}{\texttt{ Browsers}}
\item \href{\#faq}{\texttt{ FAQ}}
\begin{DoxyItemize}
\item \href{\#does-autoprefixer-polyfill-grid-layout-for-ie}{\texttt{ Does Autoprefixer polyfill Grid Layout for IE?}}
\item \href{\#does-it-add-polyfills}{\texttt{ Does it add polyfills?}}
\item \href{\#why-doesnt-autoprefixer-add-prefixes-to-border-radius}{\texttt{ Why doesn’t Autoprefixer add prefixes to {\ttfamily border-\/radius}?}}
\item \href{\#why-does-autoprefixer-use-unprefixed-properties-in--webkit-keyframes}{\texttt{ Why does Autoprefixer use unprefixed properties in {\ttfamily @-\/webkit-\/keyframes}?}}
\item \href{\#how-to-work-with-legacy--webkit--only-code}{\texttt{ How to work with legacy {\ttfamily -\/webkit-\/} only code?}}
\item \href{\#does-autoprefixer-add--epub--prefix}{\texttt{ Does Autoprefixer add {\ttfamily -\/epub-\/} prefix?}}
\item \href{\#why-doesnt-autoprefixer-transform-generic-font-family-system-ui}{\texttt{ Why doesn’t Autoprefixer transform generic font-\/family {\ttfamily system-\/ui}?}}
\end{DoxyItemize}
\item \href{\#usage}{\texttt{ Usage}}
\begin{DoxyItemize}
\item \href{\#gulp}{\texttt{ Gulp}}
\item \href{\#webpack}{\texttt{ Webpack}}
\item \href{\#css-in-js}{\texttt{ CSS-\/in-\/\+JS}}
\item \href{\#cli}{\texttt{ CLI}}
\item \href{\#other-build-tools}{\texttt{ Other Build Tools}}
\begin{DoxyItemize}
\item \href{\#preprocessors}{\texttt{ Preprocessors}}
\item \href{\#gui-tools}{\texttt{ GUI Tools}}
\end{DoxyItemize}
\item \href{\#javascript}{\texttt{ Java\+Script}}
\item \href{\#text-editors-and-ide}{\texttt{ Text Editors and IDE}}
\end{DoxyItemize}
\item \href{\#warnings}{\texttt{ Warnings}}
\item \href{\#disabling}{\texttt{ Disabling}}
\begin{DoxyItemize}
\item \href{\#prefixes}{\texttt{ Prefixes}}
\item \href{\#features}{\texttt{ Features}}
\item \href{\#control-comments}{\texttt{ Control Comments}}
\end{DoxyItemize}
\item \href{\#options}{\texttt{ Options}}
\item \href{\#environment-variables}{\texttt{ Environment Variables}}
\begin{DoxyItemize}
\item \href{\#using-environment-variables-to-support-css-grid-prefixes-in-create-react-app}{\texttt{ Using environment variables to support CSS Grid prefixes in Create React App}}
\end{DoxyItemize}
\item \href{\#grid-autoplacement-support-in-ie}{\texttt{ Grid Autoplacement support in IE}}
\begin{DoxyItemize}
\item \href{\#beware-of-enabling-autoplacement-in-old-projects}{\texttt{ Beware of enabling autoplacement in old projects}}
\item \href{\#autoplacement-limitations}{\texttt{ Autoplacement limitations}}
\begin{DoxyItemize}
\item \href{\#both-columns-and-rows-must-be-defined}{\texttt{ Both columns and rows must be defined}}
\item \href{\#repeat-auto-fit-and-auto-fill-are-not-supported}{\texttt{ Repeat auto-\/fit and auto-\/fill are not supported}}
\item \href{\#no-manual-cell-placement-or-columnrow-spans-allowed-inside-an-autoplacement-grid}{\texttt{ No manual cell placement or column/row spans allowed inside an autoplacement grid}}
\item \href{\#do-not-create-before-and-after-pseudo-elements}{\texttt{ Do not create {\ttfamily \+::before} and {\ttfamily \+::after} pseudo elements}}
\item \href{\#when-changing-the-grid-gap-value-columns-and-rows-must-be-re-declared}{\texttt{ When changing the {\ttfamily grid gap} value, columns and rows must be re-\/declared}}
\end{DoxyItemize}
\end{DoxyItemize}
\item \href{\#debug}{\texttt{ Debug}}
\item \href{\#security-contact}{\texttt{ Security Contact}}
\item \href{\#for-enterprise}{\texttt{ For Enterprise}}
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3585}{}\doxysection{Browsers}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3585}
Autoprefixer uses \href{https://github.com/browserslist/browserslist}{\texttt{ Browserslist}}, so you can specify the browsers you want to target in your project with queries like {\ttfamily $>$ 5\%} (see \href{https://github.com/browserslist/browserslist\#best-practices}{\texttt{ Best Practices}}).

The best way to provide browsers is a {\ttfamily .browserslistrc} file in your project root, or by adding a {\ttfamily browserslist} key to your {\ttfamily package.\+json}.

We recommend the use of these options over passing options to Autoprefixer so that the config can be shared with other tools such as \href{https://github.com/babel/babel/tree/master/packages/babel-preset-env}{\texttt{ babel-\/preset-\/env}} and \href{https://stylelint.io/}{\texttt{ Stylelint}}.

See \href{https://github.com/browserslist/browserslist\#queries}{\texttt{ Browserslist docs}} for queries, browser names, config format, and defaults.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3586}{}\doxysection{FAQ}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3586}
\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3587}{}\doxysubsection{Does Autoprefixer polyfill Grid Layout for IE?}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3587}
Autoprefixer can be used to translate modern CSS Grid syntax into IE 10 and IE 11 syntax, but this polyfill will not work in 100\% of cases. This~is~why~it~is~disabled~by~default.

First, you need to enable Grid prefixes by using either the {\ttfamily grid\+: \char`\"{}autoplace\char`\"{}} option or the {\ttfamily /$\ast$ autoprefixer grid\+: autoplace $\ast$/} control comment. Also you can use environment variable to enable Grid\+: {\ttfamily AUTOPREFIXER\+\_\+\+GRID=autoplace npm build}.

Second, you need to test every fix with Grid in IE. It is not an enable and forget feature, but it is still very useful. Financial~Times~and~Yandex~use it in production.

Third, there is only very limited auto placement support. Read the \href{\#grid-autoplacement-support-in-ie}{\texttt{ Grid Autoplacement support in IE}} section for more details.

Fourth, if you are not using the autoplacement feature, the best way to use Autoprefixer is by using {\ttfamily grid-\/template} or {\ttfamily grid-\/template-\/areas}.


\begin{DoxyCode}{0}
\DoxyCodeLine{.page \{}
\DoxyCodeLine{  display: grid;}
\DoxyCodeLine{  grid-\/gap: 33px;}
\DoxyCodeLine{  grid-\/template:}
\DoxyCodeLine{    "{}head head  head"{} 1fr}
\DoxyCodeLine{    "{}nav  main  main"{} minmax(100px, 1fr)}
\DoxyCodeLine{    "{}nav  foot  foot"{} 2fr /}
\DoxyCodeLine{    1fr   100px 1fr;}
\DoxyCodeLine{\}}
\DoxyCodeLine{.page\_\_head \{}
\DoxyCodeLine{  grid-\/area: head;}
\DoxyCodeLine{\}}
\DoxyCodeLine{.page\_\_nav \{}
\DoxyCodeLine{  grid-\/area: nav;}
\DoxyCodeLine{\}}
\DoxyCodeLine{.page\_\_main \{}
\DoxyCodeLine{  grid-\/area: main;}
\DoxyCodeLine{\}}
\DoxyCodeLine{.page\_\_footer \{}
\DoxyCodeLine{  grid-\/area: foot;}
\DoxyCodeLine{\} }

\end{DoxyCode}


See also\+:


\begin{DoxyItemize}
\item \href{https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/}{\texttt{ The guide about Grids in IE and Autoprefixer}}.
\item \href{https://github.com/jonathantneal/postcss-gap-properties}{\texttt{ {\ttfamily postcss-\/gap-\/properties}}} to use new {\ttfamily gap} property instead of old {\ttfamily grid-\/gap}.
\item \href{https://github.com/sylvainpolletvillard/postcss-grid-kiss}{\texttt{ {\ttfamily postcss-\/grid-\/kiss}}} has alternate “everything in one property” syntax, which makes using Autoprefixer’s Grid translations safer.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3588}{}\doxysubsection{Does it add polyfills?}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3588}
No. Autoprefixer only adds prefixes.

Most new CSS features will require client side Java\+Script to handle a new behavior correctly.

Depending on what you consider to be a “polyfill”, you can take a look at some other tools and libraries. If you are just looking for syntax sugar, you might take a look at\+:


\begin{DoxyItemize}
\item \href{https://github.com/jonathantneal/postcss-preset-env}{\texttt{ postcss-\/preset-\/env}} is a plugins preset with polyfills and Autoprefixer to write future CSS today.
\item \href{https://github.com/jonathantneal/oldie}{\texttt{ Oldie}}, a Post\+CSS plugin that handles some IE hacks (opacity, rgba, etc).
\item \href{https://github.com/luisrudge/postcss-flexbugs-fixes}{\texttt{ postcss-\/flexbugs-\/fixes}}, a Post\+CSS plugin to fix flexbox issues.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3589}{}\doxysubsection{Why doesn’t Autoprefixer add prefixes to $<$tt$>$border-\/radius$<$/tt$>$?}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3589}
Developers are often surprised by how few prefixes are required today. If Autoprefixer doesn’t add prefixes to~your CSS, check if they’re still required on \href{https://caniuse.com/}{\texttt{ Can I Use}}.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3590}{}\doxysubsection{Why does Autoprefixer use unprefixed properties in $<$tt$>$@-\/webkit-\/keyframes$<$/tt$>$?}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3590}
Browser teams can remove some prefixes before others, so we try to use all combinations of prefixed/unprefixed values.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3591}{}\doxysubsection{How to work with legacy $<$tt$>$-\/webkit-\/$<$/tt$>$ only code?}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3591}
Autoprefixer needs unprefixed property to add prefixes. So if you only wrote {\ttfamily -\/webkit-\/gradient} without W3\+C’s {\ttfamily gradient}, Autoprefixer will not add other prefixes.

But \href{https://github.com/postcss/postcss}{\texttt{ Post\+CSS}} has plugins to convert CSS to unprefixed state. Use \href{https://github.com/gucong3000/postcss-unprefix}{\texttt{ postcss-\/unprefix}} before Autoprefixer.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3592}{}\doxysubsection{Does Autoprefixer add $<$tt$>$-\/epub-\/$<$/tt$>$ prefix?}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3592}
No, Autoprefixer works only with browsers prefixes from Can I Use. But you can use \href{https://github.com/Rycochet/postcss-epub}{\texttt{ postcss-\/epub}} for~prefixing e\+Pub3 properties.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3593}{}\doxysubsection{Why doesn’t Autoprefixer transform generic font-\/family $<$tt$>$system-\/ui$<$/tt$>$?}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3593}
{\ttfamily system-\/ui} is technically not a prefix and the transformation is not future-\/proof. You can use \href{https://github.com/JLHwung/postcss-font-family-system-ui}{\texttt{ postcss-\/font-\/family-\/system-\/ui}} to transform {\ttfamily system-\/ui} to a practical font-\/family list.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3594}{}\doxysection{Usage}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3594}
\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3595}{}\doxysubsection{Gulp}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3595}
In Gulp you can use \href{https://github.com/postcss/gulp-postcss}{\texttt{ gulp-\/postcss}} with {\ttfamily autoprefixer} npm package.


\begin{DoxyCode}{0}
\DoxyCodeLine{gulp.task('autoprefixer', () => \{}
\DoxyCodeLine{  const autoprefixer = require('autoprefixer')}
\DoxyCodeLine{  const sourcemaps = require('gulp-\/sourcemaps')}
\DoxyCodeLine{  const postcss = require('gulp-\/postcss')}
\DoxyCodeLine{}
\DoxyCodeLine{  return gulp.src('./src/*.css')}
\DoxyCodeLine{    .pipe(sourcemaps.init())}
\DoxyCodeLine{    .pipe(postcss([ autoprefixer() ]))}
\DoxyCodeLine{    .pipe(sourcemaps.write('.'))}
\DoxyCodeLine{    .pipe(gulp.dest('./dest'))}
\DoxyCodeLine{\}) }

\end{DoxyCode}


With {\ttfamily gulp-\/postcss} you also can combine Autoprefixer with \href{https://github.com/postcss/postcss\#plugins}{\texttt{ other Post\+CSS plugins}}.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3596}{}\doxysubsection{Webpack}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3596}
In \href{https://webpack.js.org/}{\texttt{ webpack}} you can use \href{https://github.com/postcss/postcss-loader}{\texttt{ postcss-\/loader}} with {\ttfamily autoprefixer} and \href{https://github.com/postcss/postcss\#plugins}{\texttt{ other Post\+CSS plugins}}.


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/,}
\DoxyCodeLine{        use: ["{}style-\/loader"{}, "{}css-\/loader"{}, "{}postcss-\/loader"{}]}
\DoxyCodeLine{      \}}
\DoxyCodeLine{    ]}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


And create a {\ttfamily postcss.\+config.\+js} with\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  plugins: [}
\DoxyCodeLine{    require('autoprefixer')}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3597}{}\doxysubsection{CSS-\/in-\/\+JS}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3597}
The best way to use Post\+CSS with CSS-\/in-\/\+JS is \href{https://github.com/4Catalyzer/astroturf}{\texttt{ {\ttfamily astroturf}}}. Add its loader to your {\ttfamily webpack.\+config.\+js}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/,}
\DoxyCodeLine{        use: ['style-\/loader', 'postcss-\/loader'],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).jsx?\$/,}
\DoxyCodeLine{        use: ['babel-\/loader', 'astroturf/loader'],}
\DoxyCodeLine{      \}}
\DoxyCodeLine{    ]}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


Then create {\ttfamily postcss.\+config.\+js}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  plugins: [}
\DoxyCodeLine{    require('autoprefixer')}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3598}{}\doxysubsection{CLI}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3598}
You can use the \href{https://github.com/postcss/postcss-cli}{\texttt{ postcss-\/cli}} to run Autoprefixer from CLI\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{npm install postcss-\/cli autoprefixer}
\DoxyCodeLine{npx postcss *.css -\/-\/use autoprefixer -\/d build/ }

\end{DoxyCode}


See {\ttfamily postcss -\/h} for help.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3599}{}\doxysubsection{Other Build Tools}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3599}

\begin{DoxyItemize}
\item {\bfseries{Grunt\+:}} \href{https://github.com/C-Lodder/grunt-postcss}{\texttt{ grunt-\/postcss}}
\item {\bfseries{Ruby on Rails}}\+: \href{https://github.com/ai/autoprefixer-rails}{\texttt{ autoprefixer-\/rails}}
\item {\bfseries{Neutrino}}\+: \href{https://www.npmjs.com/package/neutrino-middleware-postcss}{\texttt{ neutrino-\/middleware-\/postcss}}
\item {\bfseries{Jekyll}}\+: add {\ttfamily autoprefixer-\/rails} and {\ttfamily jekyll-\/assets} to {\ttfamily Gemfile}
\item {\bfseries{Brunch}}\+: \href{https://github.com/iamvdo/postcss-brunch}{\texttt{ postcss-\/brunch}}
\item {\bfseries{Broccoli}}\+: \href{https://github.com/jeffjewiss/broccoli-postcss}{\texttt{ broccoli-\/postcss}}
\item {\bfseries{Middleman}}\+: \href{https://github.com/middleman/middleman-autoprefixer}{\texttt{ middleman-\/autoprefixer}}
\item {\bfseries{Mincer}}\+: add {\ttfamily autoprefixer} npm package and enable it\+: `environment.\+enable(\textquotesingle{}autoprefixer')\`{}
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3600}{}\doxysubsubsection{Preprocessors}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3600}

\begin{DoxyItemize}
\item {\bfseries{Less}}\+: \href{https://github.com/less/less-plugin-autoprefix}{\texttt{ less-\/plugin-\/autoprefix}}
\item {\bfseries{Stylus}}\+: \href{https://github.com/jenius/autoprefixer-stylus}{\texttt{ autoprefixer-\/stylus}}
\item {\bfseries{Compass}}\+: \href{https://github.com/ai/autoprefixer-rails\#compass}{\texttt{ autoprefixer-\/rails\#compass}}
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3601}{}\doxysubsubsection{GUI Tools}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3601}

\begin{DoxyItemize}
\item \href{https://codekitapp.com/help/autoprefixer/}{\texttt{ Code\+Kit}}
\item \href{https://prepros.io}{\texttt{ Prepros}}
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3602}{}\doxysubsection{Java\+Script}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3602}
You can use Autoprefixer with \href{https://github.com/postcss/postcss}{\texttt{ Post\+CSS}} in your Node.\+js application or if you want to develop an Autoprefixer plugin for a new environment.


\begin{DoxyCode}{0}
\DoxyCodeLine{const autoprefixer = require('autoprefixer')}
\DoxyCodeLine{const postcss = require('postcss')}
\DoxyCodeLine{}
\DoxyCodeLine{postcss([ autoprefixer ]).process(css).then(result => \{}
\DoxyCodeLine{  result.warnings().forEach(warn => \{}
\DoxyCodeLine{    console.warn(warn.toString())}
\DoxyCodeLine{  \})}
\DoxyCodeLine{  console.log(result.css)}
\DoxyCodeLine{\}) }

\end{DoxyCode}


There is also a \href{https://raw.github.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js}{\texttt{ standalone build}} for the browser or for a non-\/\+Node.\+js runtime.

You can use \href{https://github.com/RebelMail/html-autoprefixer}{\texttt{ html-\/autoprefixer}} to process HTML with inlined CSS.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3603}{}\doxysubsection{Text Editors and IDE}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3603}
Autoprefixer should be used in assets build tools. Text editor plugins are not a good solution, because prefixes decrease code readability and you will need to change values in all prefixed properties.

I recommend you to learn how to use build tools like \href{https://parceljs.org/}{\texttt{ Parcel}}. They work much better and will open you a whole new world of useful plugins and automation.

If you can’t move to a build tool, you can use text editor plugins\+:


\begin{DoxyItemize}
\item \href{https://github.com/mrmlnc/vscode-autoprefixer}{\texttt{ Visual Studio Code}}
\item \href{https://github.com/sindresorhus/atom-autoprefixer}{\texttt{ Atom Editor}}
\item \href{https://github.com/sindresorhus/sublime-autoprefixer}{\texttt{ Sublime Text}}
\item \href{https://github.com/mikaeljorhult/brackets-autoprefixer}{\texttt{ Brackets}}
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3604}{}\doxysection{Warnings}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3604}
Autoprefixer uses the \href{http://api.postcss.org/Warning.html}{\texttt{ Post\+CSS warning API}} to warn about really important problems in your CSS\+:


\begin{DoxyItemize}
\item Old direction syntax in gradients.
\item Old unprefixed {\ttfamily display\+: box} instead of {\ttfamily display\+: flex} by latest specification version.
\end{DoxyItemize}

You can get warnings from {\ttfamily result.\+warnings()}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{result.warnings().forEach(warn => \{}
\DoxyCodeLine{  console.warn(warn.toString())}
\DoxyCodeLine{\}) }

\end{DoxyCode}


Every Autoprefixer runner should display these warnings.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3605}{}\doxysection{Disabling}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3605}
\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3606}{}\doxysubsection{Prefixes}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3606}
Autoprefixer was designed to have no interface – it just works. If you need some browser specific hack just write a prefixed property after the unprefixed one.


\begin{DoxyCode}{0}
\DoxyCodeLine{a \{}
\DoxyCodeLine{  transform: scale(0.5);}
\DoxyCodeLine{  -\/moz-\/transform: scale(0.6);}
\DoxyCodeLine{\} }

\end{DoxyCode}


If some prefixes were generated incorrectly, please create an \href{https://github.com/postcss/autoprefixer/issues}{\texttt{ issue on Git\+Hub}}.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3607}{}\doxysubsection{Features}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3607}
You can use these plugin options to control some of Autoprefixer’s features.


\begin{DoxyItemize}
\item {\ttfamily grid\+: \char`\"{}autoplace\char`\"{}} will enable {\ttfamily -\/ms-\/} prefixes for Grid Layout including some \href{\#grid-autoplacement-support-in-ie}{\texttt{ limited autoplacement support}}.
\item {\ttfamily supports\+: false} will disable {\ttfamily @supports} parameters prefixing.
\item {\ttfamily flexbox\+: false} will disable flexbox properties prefixing. Or {\ttfamily flexbox\+: \char`\"{}no-\/2009\char`\"{}} will add prefixes only for final and IE versions of specification.
\item {\ttfamily remove\+: false} will disable cleaning outdated prefixes.
\end{DoxyItemize}

You should set them inside the plugin like so\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{autoprefixer(\{ grid: 'autoplace' \}) }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3608}{}\doxysubsection{Control Comments}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3608}
If you do not need Autoprefixer in some part of your CSS, you can use control comments to~disable~Autoprefixer.


\begin{DoxyCode}{0}
\DoxyCodeLine{.a \{}
\DoxyCodeLine{  transition: 1s; /* will be prefixed */}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.b \{}
\DoxyCodeLine{  /* autoprefixer: off */}
\DoxyCodeLine{  transition: 1s; /* will not be prefixed */}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.c \{}
\DoxyCodeLine{  /* autoprefixer: ignore next */}
\DoxyCodeLine{  transition: 1s; /* will not be prefixed */}
\DoxyCodeLine{  mask: url(image.png); /* will be prefixed */}
\DoxyCodeLine{\} }

\end{DoxyCode}


There are three types of control comments\+:


\begin{DoxyItemize}
\item {\ttfamily /$\ast$ autoprefixer\+: (on$\vert$off) $\ast$/}\+: enable/disable all Autoprefixer translations for the whole block both {\itshape before} and {\itshape after} the comment.
\item {\ttfamily /$\ast$ autoprefixer\+: ignore next $\ast$/}\+: disable Autoprefixer only for the next property or next rule selector or at-\/rule parameters (but~not~rule/at‑rule body).
\item {\ttfamily /$\ast$ autoprefixer grid\+: (autoplace$\vert$no-\/autoplace$\vert$off) $\ast$/}\+: control how Autoprefixer handles grid translations for the whole block\+:
\begin{DoxyItemize}
\item {\ttfamily autoplace}\+: enable grid translations with autoplacement support.
\item {\ttfamily no-\/autoplace}\+: enable grid translations with autoplacement support {\itshape disabled} (alias for deprecated value {\ttfamily on}).
\item {\ttfamily off}\+: disable all grid translations.
\end{DoxyItemize}
\end{DoxyItemize}

You can also use comments recursively\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{/* autoprefixer: off */}
\DoxyCodeLine{@supports (transition: all) \{}
\DoxyCodeLine{  /* autoprefixer: on */}
\DoxyCodeLine{  a \{}
\DoxyCodeLine{    /* autoprefixer: off */}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


Note that comments that disable the whole block should not be featured in the same block twice\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{/* How not to use block level control comments */}
\DoxyCodeLine{}
\DoxyCodeLine{.do-\/not-\/do-\/this \{}
\DoxyCodeLine{  /* autoprefixer: off */}
\DoxyCodeLine{  transition: 1s;}
\DoxyCodeLine{  /* autoprefixer: on */}
\DoxyCodeLine{  transform: rotate(20deg);}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3609}{}\doxysection{Options}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3609}
Function {\ttfamily autoprefixer(options)} returns a new Post\+CSS plugin. See \href{http://api.postcss.org}{\texttt{ Post\+CSS API}} for plugin usage documentation.


\begin{DoxyCode}{0}
\DoxyCodeLine{autoprefixer(\{ cascade: false \}) }

\end{DoxyCode}


Available options are\+:


\begin{DoxyItemize}
\item {\ttfamily env} (string)\+: environment for Browserslist.
\item {\ttfamily cascade} (boolean)\+: should Autoprefixer use Visual Cascade, if CSS is uncompressed. Default\+: {\ttfamily true}
\item {\ttfamily add} (boolean)\+: should Autoprefixer add prefixes. Default is {\ttfamily true}.
\item {\ttfamily remove} (boolean)\+: should Autoprefixer \mbox{[}remove outdated\mbox{]} prefixes. Default is {\ttfamily true}.
\item {\ttfamily supports} (boolean)\+: should Autoprefixer add prefixes for {\ttfamily @supports} parameters. Default is {\ttfamily true}.
\item {\ttfamily flexbox} (boolean$\vert$string)\+: should Autoprefixer add prefixes for flexbox properties. With {\ttfamily \char`\"{}no-\/2009\char`\"{}} value Autoprefixer will add prefixes only for final and IE 10 versions of specification. Default is {\ttfamily true}.
\item {\ttfamily grid} (false$\vert${\ttfamily \char`\"{}autoplace\char`\"{}}$\vert${\ttfamily \char`\"{}no-\/autoplace\char`\"{}})\+: should Autoprefixer add IE 10-\/11 prefixes for Grid Layout properties?
\begin{DoxyItemize}
\item {\ttfamily false} (default)\+: prevent Autoprefixer from outputting CSS Grid translations.
\item {\ttfamily \char`\"{}autoplace\char`\"{}}\+: enable Autoprefixer grid translations and {\itshape include} autoplacement support. You can also use {\ttfamily /$\ast$ autoprefixer grid\+: autoplace $\ast$/} in your CSS.
\item {\ttfamily \char`\"{}no-\/autoplace\char`\"{}}\+: enable Autoprefixer grid translations but {\itshape exclude} autoplacement support. You can also use {\ttfamily /$\ast$ autoprefixer grid\+: no-\/autoplace $\ast$/} in your CSS. (alias for the deprecated {\ttfamily true} value)
\end{DoxyItemize}
\item {\ttfamily stats} (object)\+: custom \href{https://github.com/browserslist/browserslist\#custom-usage-data}{\texttt{ usage statistics}} for {\ttfamily $>$ 10\% in my stats} browsers query.
\item {\ttfamily override\+Browserslist} (array)\+: list of queries for target browsers. Try to not use it. The best practice is to use {\ttfamily .browserslistrc} config or {\ttfamily browserslist} key in {\ttfamily package.\+json} to share target browsers with Babel, ESLint and Stylelint. See~\href{https://github.com/browserslist/browserslist\#queries}{\texttt{ Browserslist docs}} for available queries and default value.
\item {\ttfamily ignore\+Unknown\+Versions} (boolean)\+: do not raise error on unknown browser version in Browserslist config. Default is {\ttfamily false}.
\end{DoxyItemize}

Plugin object has {\ttfamily info()} method for debugging purpose.

You can use Post\+CSS processor to process several CSS files to increase performance.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3610}{}\doxysection{Environment Variables}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3610}

\begin{DoxyItemize}
\item {\ttfamily AUTOPREFIXER\+\_\+\+GRID}\+: ({\ttfamily autoplace}$\vert${\ttfamily no-\/autoplace}) should Autoprefixer add IE 10-\/11 prefixes for Grid Layout properties?
\begin{DoxyItemize}
\item {\ttfamily autoplace}\+: enable Autoprefixer grid translations and {\itshape include} autoplacement support.
\item {\ttfamily no-\/autoplace}\+: enable Autoprefixer grid translations but {\itshape exclude} autoplacement support.
\end{DoxyItemize}
\end{DoxyItemize}

Environment variables are useful, when you want to change Autoprefixer options but don\textquotesingle{}t have access to config files. \href{(https://reactjs.org/docs/create-a-new-react-app.html\#create-react-app)}{\texttt{ Create React App}} is a good example of this.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3611}{}\doxysubsection{Using environment variables to support CSS Grid prefixes in Create React App}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3611}

\begin{DoxyEnumerate}
\item Install the latest version of Autoprefixer and \href{https://www.npmjs.com/package/cross-env}{\texttt{ cross-\/env}}\+:
\end{DoxyEnumerate}


\begin{DoxyCode}{0}
\DoxyCodeLine{npm install autoprefixer@latest cross-\/env -\/-\/save-\/dev }

\end{DoxyCode}



\begin{DoxyEnumerate}
\item Under {\ttfamily \char`\"{}browserslist\char`\"{}} $>$ {\ttfamily \char`\"{}development\char`\"{}} in the package.\+json file, add {\ttfamily \char`\"{}last 1 ie version\char`\"{}}
\end{DoxyEnumerate}


\begin{DoxyCode}{0}
\DoxyCodeLine{"{}browserslist"{}: \{}
\DoxyCodeLine{  "{}production"{}: [}
\DoxyCodeLine{    "{}>0.2\%"{},}
\DoxyCodeLine{    "{}not dead"{},}
\DoxyCodeLine{    "{}not op\_mini all"{}}
\DoxyCodeLine{  ],}
\DoxyCodeLine{  "{}development"{}: [}
\DoxyCodeLine{    "{}last 1 chrome version"{},}
\DoxyCodeLine{    "{}last 1 firefox version"{},}
\DoxyCodeLine{    "{}last 1 safari version"{},}
\DoxyCodeLine{    "{}last 1 ie version"{}}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}



\begin{DoxyEnumerate}
\item Update {\ttfamily \char`\"{}scripts\char`\"{}} in the package.\+json file to the following\+:
\end{DoxyEnumerate}


\begin{DoxyCode}{0}
\DoxyCodeLine{"{}scripts"{}: \{}
\DoxyCodeLine{  "{}start"{}: "{}cross-\/env AUTOPREFIXER\_GRID=autoplace react-\/scripts start"{},}
\DoxyCodeLine{  "{}build"{}: "{}cross-\/env AUTOPREFIXER\_GRID=autoplace react-\/scripts build"{},}
\DoxyCodeLine{  "{}test"{}: "{}cross-\/env AUTOPREFIXER\_GRID=autoplace react-\/scripts test"{},}
\DoxyCodeLine{  "{}eject"{}: "{}react-\/scripts eject"{}}
\DoxyCodeLine{\}, }

\end{DoxyCode}


Replace {\ttfamily autoplace} with {\ttfamily no-\/autoplace} in the above example if you prefer to disable Autoprefixer Grid autoplacement support.

Now when you run {\ttfamily npm start} you will see CSS Grid prefixes automatically being applied to your output CSS.

See also \href{https://github.com/browserslist/browserslist\#environment-variables}{\texttt{ Browserslist environment variables}} for more examples on how to use environment variables in your project.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3612}{}\doxysection{Grid Autoplacement support in IE}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3612}
If the {\ttfamily grid} option is set to {\ttfamily \char`\"{}autoplace\char`\"{}}, limited autoplacement support is added to Autoprefixers grid translations. You can also use the {\ttfamily /$\ast$ autoprefixer grid\+: autoplace $\ast$/} control comment or {\ttfamily AUTOPREFIXER\+\_\+\+GRID=autoplace npm build} environment variable.

Autoprefixer will only autoplace grid cells if both {\ttfamily grid-\/template-\/rows} and {\ttfamily grid-\/template-\/columns} has been set. If {\ttfamily grid-\/template} or {\ttfamily grid-\/template-\/areas} has been set, Autoprefixer will use area based cell placement instead.

Autoprefixer supports autoplacement by using {\ttfamily nth-\/child} CSS selectors. It creates \mbox{[}number of columns\mbox{]} x \mbox{[}number of rows\mbox{]} {\ttfamily nth-\/child} selectors. For this reason Autoplacement is only supported within the explicit grid.


\begin{DoxyCode}{0}
\DoxyCodeLine{/* Input CSS */}
\DoxyCodeLine{}
\DoxyCodeLine{/* autoprefixer grid: autoplace */}
\DoxyCodeLine{}
\DoxyCodeLine{.autoplacement-\/example \{}
\DoxyCodeLine{  display: grid;}
\DoxyCodeLine{  grid-\/template-\/columns: 1fr 1fr;}
\DoxyCodeLine{  grid-\/template-\/rows: auto auto;}
\DoxyCodeLine{  grid-\/gap: 20px;}
\DoxyCodeLine{\} }

\end{DoxyCode}



\begin{DoxyCode}{0}
\DoxyCodeLine{/* Output CSS */}
\DoxyCodeLine{}
\DoxyCodeLine{/* autoprefixer grid: autoplace */}
\DoxyCodeLine{}
\DoxyCodeLine{.autoplacement-\/example \{}
\DoxyCodeLine{  display: -\/ms-\/grid;}
\DoxyCodeLine{  display: grid;}
\DoxyCodeLine{  -\/ms-\/grid-\/columns: 1fr 20px 1fr;}
\DoxyCodeLine{  grid-\/template-\/columns: 1fr 1fr;}
\DoxyCodeLine{  -\/ms-\/grid-\/rows: auto 20px auto;}
\DoxyCodeLine{  grid-\/template-\/rows: auto auto;}
\DoxyCodeLine{  grid-\/gap: 20px;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.autoplacement-\/example > *:nth-\/child(1) \{}
\DoxyCodeLine{  -\/ms-\/grid-\/row: 1;}
\DoxyCodeLine{  -\/ms-\/grid-\/column: 1;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.autoplacement-\/example > *:nth-\/child(2) \{}
\DoxyCodeLine{  -\/ms-\/grid-\/row: 1;}
\DoxyCodeLine{  -\/ms-\/grid-\/column: 3;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.autoplacement-\/example > *:nth-\/child(3) \{}
\DoxyCodeLine{  -\/ms-\/grid-\/row: 3;}
\DoxyCodeLine{  -\/ms-\/grid-\/column: 1;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.autoplacement-\/example > *:nth-\/child(4) \{}
\DoxyCodeLine{  -\/ms-\/grid-\/row: 3;}
\DoxyCodeLine{  -\/ms-\/grid-\/column: 3;}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3613}{}\doxysubsection{Beware of enabling autoplacement in old projects}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3613}
Be careful about enabling autoplacement in any already established projects that have previously not used Autoprefixer\textquotesingle{}s grid autoplacement feature before.

If this was your html\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{<div class="{}grid"{}>}
\DoxyCodeLine{  <div class="{}grid-\/cell"{}></div>}
\DoxyCodeLine{</div> }

\end{DoxyCode}


The following CSS will not work as expected with the autoplacement feature enabled\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{/* Unsafe CSS when Autoplacement is enabled */}
\DoxyCodeLine{}
\DoxyCodeLine{.grid-\/cell \{}
\DoxyCodeLine{  grid-\/column: 2;}
\DoxyCodeLine{  grid-\/row: 2;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.grid \{}
\DoxyCodeLine{  display: grid;}
\DoxyCodeLine{  grid-\/template-\/columns: repeat(3, 1fr);}
\DoxyCodeLine{  grid-\/template-\/rows: repeat(3, 1fr);}
\DoxyCodeLine{\} }

\end{DoxyCode}


Swapping the rules around will not fix the issue either\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{/* Also unsafe to use this CSS */}
\DoxyCodeLine{}
\DoxyCodeLine{.grid \{}
\DoxyCodeLine{  display: grid;}
\DoxyCodeLine{  grid-\/template-\/columns: repeat(3, 1fr);}
\DoxyCodeLine{  grid-\/template-\/rows: repeat(3, 1fr);}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.grid-\/cell \{}
\DoxyCodeLine{  grid-\/column: 2;}
\DoxyCodeLine{  grid-\/row: 2;}
\DoxyCodeLine{\} }

\end{DoxyCode}


One way to deal with this issue is to disable autoplacement in the grid-\/declaration rule\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{/* Disable autoplacement to fix the issue */}
\DoxyCodeLine{}
\DoxyCodeLine{.grid \{}
\DoxyCodeLine{  /* autoprefixer grid: no-\/autoplace */}
\DoxyCodeLine{  display: grid;}
\DoxyCodeLine{  grid-\/template-\/columns: repeat(3, 1fr);}
\DoxyCodeLine{  grid-\/template-\/rows: repeat(3, 1fr);}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.grid-\/cell \{}
\DoxyCodeLine{  grid-\/column: 2;}
\DoxyCodeLine{  grid-\/row: 2;}
\DoxyCodeLine{\} }

\end{DoxyCode}


The absolute best way to integrate autoplacement into already existing projects though is to leave autoplacement turned off by default and then use a control comment to enable it when needed. This method is far less likely to cause something on the site to break.


\begin{DoxyCode}{0}
\DoxyCodeLine{/* Disable autoplacement by default in old projects */}
\DoxyCodeLine{/* autoprefixer grid: no-\/autoplace */}
\DoxyCodeLine{}
\DoxyCodeLine{/* Old code will function the same way it always has */}
\DoxyCodeLine{.old-\/grid \{}
\DoxyCodeLine{  display: grid;}
\DoxyCodeLine{  grid-\/template-\/columns: repeat(3, 1fr);}
\DoxyCodeLine{  grid-\/template-\/rows: repeat(3, 1fr);}
\DoxyCodeLine{\}}
\DoxyCodeLine{.old-\/grid-\/cell \{}
\DoxyCodeLine{  grid-\/column: 2;}
\DoxyCodeLine{  grid-\/row: 2;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{/* Enable autoplacement when you want to use it in new code */}
\DoxyCodeLine{.new-\/autoplace-\/friendly-\/grid \{}
\DoxyCodeLine{  /* autoprefixer grid: autoplace */}
\DoxyCodeLine{  display: grid;}
\DoxyCodeLine{  grid-\/template-\/columns: repeat(3, 1fr);}
\DoxyCodeLine{  grid-\/template-\/rows: repeat(3, auto);}
\DoxyCodeLine{\} }

\end{DoxyCode}


Note that the {\ttfamily grid\+: \char`\"{}no-\/autoplace\char`\"{}} setting and the {\ttfamily /$\ast$ autoprefixer grid\+: no-\/autoplace $\ast$/} control comment share identical functionality to the {\ttfamily grid\+: true} setting and the {\ttfamily /$\ast$ autoprefixer grid\+: on $\ast$/} control comment. There is no need to refactor old code to use {\ttfamily no-\/autoplace} in place of the old {\ttfamily true} and {\ttfamily on} statements.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3614}{}\doxysubsection{Autoplacement limitations}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3614}
\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3615}{}\doxysubsubsection{Both columns and rows must be defined}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3615}
Autoplacement only works inside the explicit grid. The columns and rows need to be defined so that Autoprefixer knows how many {\ttfamily nth-\/child} selectors to generate.


\begin{DoxyCode}{0}
\DoxyCodeLine{.not-\/allowed \{}
\DoxyCodeLine{  display: grid;}
\DoxyCodeLine{  grid-\/template-\/columns: repeat(3, 1fr);}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.is-\/allowed \{}
\DoxyCodeLine{  display: grid;}
\DoxyCodeLine{  grid-\/template-\/columns: repeat(3, 1fr);}
\DoxyCodeLine{  grid-\/template-\/rows: repeat(10, auto);}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3616}{}\doxysubsubsection{Repeat auto-\/fit and auto-\/fill are not supported}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3616}
The {\ttfamily repeat(auto-\/fit, ...)} and {\ttfamily repeat(auto-\/fill, ...)} grid functionality relies on knowledge from the browser about screen dimensions and the number of available grid items for it to work properly. Autoprefixer does not have access to this information so unfortunately this little snippet will {\itshape never} be IE friendly.


\begin{DoxyCode}{0}
\DoxyCodeLine{.grid \{}
\DoxyCodeLine{  /* This will never be IE friendly */}
\DoxyCodeLine{  grid-\/template-\/columns: repeat(auto-\/fit, min-\/max(200px, 1fr))}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3617}{}\doxysubsubsection{No manual cell placement or column/row spans allowed inside an autoplacement grid}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3617}
Elements must not be manually placed or given column/row spans inside an autoplacement grid. Only the most basic of autoplacement grids are supported. Grid cells can still be placed manually outside the the explicit grid though. Support for manually placing individual grid cells inside an explicit autoplacement grid is planned for a future release.


\begin{DoxyCode}{0}
\DoxyCodeLine{.autoplacement-\/grid \{}
\DoxyCodeLine{  display: grid;}
\DoxyCodeLine{  grid-\/template-\/columns: repeat(3, 1fr);}
\DoxyCodeLine{  grid-\/template-\/rows: repeat(3, auto);}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{/* Grid cells placed inside the explicit grid}
\DoxyCodeLine{   will break the layout in IE */}
\DoxyCodeLine{.not-\/permitted-\/grid-\/cell \{}
\DoxyCodeLine{  grid-\/column: 1;}
\DoxyCodeLine{  grid-\/row: 1;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{/* Grid cells placed outside the}
\DoxyCodeLine{   explicit grid will work in IE */}
\DoxyCodeLine{.permitted-\/grid-\/cell \{}
\DoxyCodeLine{  grid-\/column: 1 / span 2;}
\DoxyCodeLine{  grid-\/row: 4;}
\DoxyCodeLine{\} }

\end{DoxyCode}


If manual cell placement is required, we recommend using {\ttfamily grid-\/template} or {\ttfamily grid-\/template-\/areas} instead\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{.page \{}
\DoxyCodeLine{  display: grid;}
\DoxyCodeLine{  grid-\/gap: 30px;}
\DoxyCodeLine{  grid-\/template:}
\DoxyCodeLine{      "{}head head"{}}
\DoxyCodeLine{      "{}nav  main"{} minmax(100px, 1fr)}
\DoxyCodeLine{      "{}foot foot"{} /}
\DoxyCodeLine{      200px 1fr;}
\DoxyCodeLine{\}}
\DoxyCodeLine{.page\_\_head \{}
\DoxyCodeLine{  grid-\/area: head;}
\DoxyCodeLine{\}}
\DoxyCodeLine{.page\_\_nav \{}
\DoxyCodeLine{  grid-\/area: nav;}
\DoxyCodeLine{\}}
\DoxyCodeLine{.page\_\_main \{}
\DoxyCodeLine{  grid-\/area: main;}
\DoxyCodeLine{\}}
\DoxyCodeLine{.page\_\_footer \{}
\DoxyCodeLine{  grid-\/area: foot;}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3618}{}\doxysubsubsection{Do not create $<$tt$>$\+::before$<$/tt$>$ and $<$tt$>$\+::after$<$/tt$>$ pseudo elements}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3618}
Let\textquotesingle{}s say you have this HTML\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{<div class="{}grid"{}>}
\DoxyCodeLine{  <div class="{}grid-\/cell"{}></div>}
\DoxyCodeLine{</div> }

\end{DoxyCode}


And you write this CSS\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{.grid \{}
\DoxyCodeLine{  display: grid;}
\DoxyCodeLine{  grid-\/template-\/columns: 1fr 1fr;}
\DoxyCodeLine{  grid-\/template-\/rows: auto;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.grid::before \{}
\DoxyCodeLine{  content: 'before';}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.grid::after \{}
\DoxyCodeLine{  content: 'after';}
\DoxyCodeLine{\} }

\end{DoxyCode}


This will be the output\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{.grid \{}
\DoxyCodeLine{  display: -\/ms-\/grid;}
\DoxyCodeLine{  display: grid;}
\DoxyCodeLine{  -\/ms-\/grid-\/columns: 1fr 1fr;}
\DoxyCodeLine{  grid-\/template-\/columns: 1fr 1fr;}
\DoxyCodeLine{  -\/ms-\/grid-\/rows: auto;}
\DoxyCodeLine{  grid-\/template-\/rows: auto;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.grid > *:nth-\/child(1) \{}
\DoxyCodeLine{  -\/ms-\/grid-\/row: 1;}
\DoxyCodeLine{  -\/ms-\/grid-\/column: 1;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{}
\DoxyCodeLine{.grid > *:nth-\/child(2) \{}
\DoxyCodeLine{  -\/ms-\/grid-\/row: 1;}
\DoxyCodeLine{  -\/ms-\/grid-\/column: 2;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.grid::before \{}
\DoxyCodeLine{  content: 'before';}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{.grid::after \{}
\DoxyCodeLine{  content: 'after';}
\DoxyCodeLine{\} }

\end{DoxyCode}


IE will place {\ttfamily .grid-\/cell}, {\ttfamily \+::before} and {\ttfamily \+::after} in row 1 column 1. Modern browsers on the other hand will place {\ttfamily \+::before} in row 1 column 1, {\ttfamily .grid-\/cell} in row 1 column 2, and {\ttfamily \+::after} in row 2 column 1.

See this \href{https://codepen.io/daniel-tonon/pen/gBymVw}{\texttt{ Code Pen}} to see a visualization of the issue. View the Code Pen in both a modern browser and IE to see the difference.

Note that you can still create {\ttfamily \+::before} and {\ttfamily \+::after} elements as long as you manually place them outside the explicit grid.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3619}{}\doxysubsubsection{When changing the $<$tt$>$grid gap$<$/tt$>$ value, columns and rows must be re-\/declared}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3619}
If you wish to change the size of a {\ttfamily grid-\/gap}, you will need to redeclare the grid columns and rows.


\begin{DoxyCode}{0}
\DoxyCodeLine{.grid \{}
\DoxyCodeLine{  display: grid;}
\DoxyCodeLine{  grid-\/template-\/columns: 1fr 1fr;}
\DoxyCodeLine{  grid-\/template-\/rows: auto;}
\DoxyCodeLine{  grid-\/gap: 50px;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{/* This will *NOT* work in IE */}
\DoxyCodeLine{@media (max-\/width: 600px) \{}
\DoxyCodeLine{  .grid \{}
\DoxyCodeLine{    grid-\/gap: 20px;}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{/* This will *NOT* work in IE */}
\DoxyCodeLine{.grid.small-\/gap \{}
\DoxyCodeLine{  grid-\/gap: 20px;}
\DoxyCodeLine{\} }

\end{DoxyCode}



\begin{DoxyCode}{0}
\DoxyCodeLine{.grid \{}
\DoxyCodeLine{  display: grid;}
\DoxyCodeLine{  grid-\/template-\/columns: 1fr 1fr;}
\DoxyCodeLine{  grid-\/template-\/rows: auto;}
\DoxyCodeLine{  grid-\/gap: 50px;}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{/* This *WILL* work in IE */}
\DoxyCodeLine{@media (max-\/width: 600px) \{}
\DoxyCodeLine{  .grid \{}
\DoxyCodeLine{    grid-\/template-\/columns: 1fr 1fr;}
\DoxyCodeLine{    grid-\/template-\/rows: auto;}
\DoxyCodeLine{    grid-\/gap: 20px;}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{/* This *WILL* work in IE */}
\DoxyCodeLine{.grid.small-\/gap \{}
\DoxyCodeLine{  grid-\/template-\/columns: 1fr 1fr;}
\DoxyCodeLine{  grid-\/template-\/rows: auto;}
\DoxyCodeLine{  grid-\/gap: 20px;}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3620}{}\doxysection{Debug}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3620}
Run {\ttfamily npx autoprefixer -\/-\/info} in your project directory to check which browsers are selected and~which properties will be prefixed\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\$ npx autoprefixer -\/-\/info}
\DoxyCodeLine{Browsers:}
\DoxyCodeLine{  Edge: 16}
\DoxyCodeLine{}
\DoxyCodeLine{These browsers account for 0.26\% of all users globally}
\DoxyCodeLine{}
\DoxyCodeLine{At-\/Rules:}
\DoxyCodeLine{  @viewport: ms}
\DoxyCodeLine{}
\DoxyCodeLine{Selectors:}
\DoxyCodeLine{  ::placeholder: ms}
\DoxyCodeLine{}
\DoxyCodeLine{Properties:}
\DoxyCodeLine{  appearance: webkit}
\DoxyCodeLine{  flow-\/from: ms}
\DoxyCodeLine{  flow-\/into: ms}
\DoxyCodeLine{  hyphens: ms}
\DoxyCodeLine{  overscroll-\/behavior: ms}
\DoxyCodeLine{  region-\/fragment: ms}
\DoxyCodeLine{  scroll-\/snap-\/coordinate: ms}
\DoxyCodeLine{  scroll-\/snap-\/destination: ms}
\DoxyCodeLine{  scroll-\/snap-\/points-\/x: ms}
\DoxyCodeLine{  scroll-\/snap-\/points-\/y: ms}
\DoxyCodeLine{  scroll-\/snap-\/type: ms}
\DoxyCodeLine{  text-\/size-\/adjust: ms}
\DoxyCodeLine{  text-\/spacing: ms}
\DoxyCodeLine{  user-\/select: ms }

\end{DoxyCode}


JS API is also available\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{console.log(autoprefixer().info()) }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3621}{}\doxysection{Security Contact}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3621}
To report a security vulnerability, please use the \href{https://tidelift.com/security}{\texttt{ Tidelift security contact}}. Tidelift will coordinate the fix and disclosure.\hypertarget{md_sfcode_node_modules_autoprefixer_README_autotoc_md3622}{}\doxysection{For Enterprise}\label{md_sfcode_node_modules_autoprefixer_README_autotoc_md3622}
Available as part of the Tidelift Subscription.

The maintainers of {\ttfamily autoprefixer} and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. \href{https://tidelift.com/subscription/pkg/npm-autoprefixer?utm_source=npm-autoprefixer&utm_medium=referral&utm_campaign=enterprise&utm_term=repo}{\texttt{ Learn more.}} 