autoprefixer / autoprefixer.github.io

Autoprefixer online — add the desired vendor prefixes and remove unnecessary in your CSS

autoprefixer.github.io

Online interactive demo of Autoprefixer

autoprefixer.github.io's Issues

Error: Cannot find module 'caniuse-lite/data/regions/RU.js'

Error: Cannot find module 'caniuse-lite/data/regions/RU.js'
with filter like that: >1% in RU, last 10 version

Browsers list error

I cant filter prefixes on specific browser (like 'Safari'). Console output error:

Uncaught BrowserslistError: Unknown browser query 'Safari'
autoprefixer.js:5322

may be something went wrong with browser list in database or smth...

Online home page syntax error

This page isn't working: https://autoprefixer.github.io/

It reports a syntax error in chrome (version 57, linux mint)
Uncaught SyntaxError: Unexpected token )
code.js:34

Possibly because of the trailing commas?

Doesn't work in Firefox

Firefox 53.0b8 (64-bit)

Freeze on wrong CSS

The service doesn't work when there is a wrong syntax in CSS.
It just freezes without any notification to a user.
And there is an "Uncaught object" error in autoprefixer.js file in line 19774.

Cheers for a useful tool!

Why does the grid prefixer get confused by same named grid areas?

.grid-1 {
  display: grid;
  grid-template-rows: repeat(2, 50%);
  grid-template-areas: "a b";

  .a {
    grid-area: a;
  }

  .b {
    grid-area: b;
  }
}

.grid-2 {
  display: grid;
  grid-template-rows: repeat(2, 50%);
  grid-template-areas: "b a";

  .a {
    grid-area: a;
  }

  .b {
    grid-area: b;
  }
}

Seems to yield

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */

.grid-1 {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (50%)[2];
  grid-template-rows: repeat(2, 50%);
      grid-template-areas: "a b";

  .a {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: a;
  }

  .grid-2 > .a {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }

  .b {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: b;
  }

  .grid-2 > .b {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
}

.grid-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (50%)[2];
  grid-template-rows: repeat(2, 50%);
      grid-template-areas: "b a";

  .a {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: a;
  }

  .grid-2 > .a {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }

  .b {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: b;
  }

  .grid-2 > .b {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
}

Why does it generate malformed css?

Add a comment to generated CSS

What a fabulous project! Thanks for making this so easy (and attractive)!

A request: Add a comment to the top of the generated CSS indicating its source. For example:

/* CSS prefixed by autoprefixer.github.io */

or even include version numbers:

/* CSS prefixed by autoprefixer.github.io - Postcss: v7.0.17, autoprefixer: v9.6.1 */

This would help weak-brained people (like me) remember where to get a refresh if I have to update the underlying CSS. Thanks again!

Setting browsers doesn't work any more

Setting browsers list in the input below first works no more.
Anything I set there doesn't change result in any way.
No errors in console (Chrome or Firefox).
Please fix it. Thanks.

Flexbox prefixing

The 'flex' prefixing applied by autoprefixer is incorrect. If you choose the 'last 2 versions' or 'last 4 versions' it should account for UCBrowser's lack of support and include -webkit-box (or for that matter -moz-box as well for UCMini's current version, although not as important).

While the Android UCBrowser is not used much if at all in the Western or Northern hemisphere, it reaches past 40% usage in India and China for a global usage of over 8%.

It appears misguided for a dev especially in Asia to be using autoprefixer without including -webkit-box for the last version of the UCBrowser, as well as current versions of odd balls browsers like the current Tesla QtCarBrowser not yet supporting -webkit-flex or flex.

Could this be addressed?

Escape tags in output

/cc @ymatuhin

Browserslist: caniuse-lite is outdated. Please run next command `npm update`

Hi there,

I'm having this error in my console when I create my build with autoprefixer :

"Browserslist: caniuse-lite is outdated. Please run next command npm update"

I tried :
sudo npm i -g browserslist caniuse-lite
and
sudo npm i -g autoprefixer caniuse-lite

but nothing worked, I still have the warning.

Thanks for your help

Suggestion: Show errors in browserlist query

Invalid/unsupported queries should show up instead of only displaying on console.

transition: transform … bug

transition: transform bug

If:

transition: transform 1s;

Autoprefixer generates:

-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
-o-transition: -o-transform 1s;
-moz-transition: transform 1s, -moz-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s;

Filter is set to > 0%.

The problem here is that browsers will interpret this like transition: all 1s; … and this will, of course, cause unexpected behaviour.

It should be:
-webkit-transition: -webkit-transform 1s;
-o-transition: -o-transform 1s;
-moz-transition: -moz-transform 1s;
transition: transform 1s;

Would be nice if you can fix this.
Thanks a lot!

Some prefix is missing

before format:
.hello{
order: 1;
}

after format:
.hello{
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}

missing -webkit-order: 1 which require for some browser to work, eg: Mobile safari 8

layout is foobared

you have some really bad styling here, but one that is really causing issues with layout is that you are trying to specify widths with flex-layout which is not necessary and is halfing a half

please remove this block of code

https://github.com/autoprefixer/autoprefixer.github.io/blob/master/_sass/style.scss#L70

justify-content

What's the "pack" on justify-content?

justify-content: center;
translates to

-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;

however it should translate to

-webkit-justify-content: center;
justify-content: center;

Autoprefixer 7.1.0 gives no output for this CLI

@keyframes introjs-hint-pulse-anim-inner {
  0% {
    transform: scale(0);
    opacity: 0.0;
  }
}

But it works fine on https://autoprefixer.github.io/

Можно ссылку или ifram'ик

Всем будет полезно визуализировать данные
http://browserl.ist/

Adding prefix `-ms` twice

Pseudo class placeholder-shown not handled

When submitting this pseudo class, there is no autoprefixing proposition:

input:placeholder-shown {
  color: #909;
}

This pseudo class isn't cross browser: http://caniuse.com/#search=placeholder-shown

The result should be something like this:

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color:    #909;
}

Use Autoprefixer 6.0 API

autoprefixer(opts).process(css) was disabled since 5.0 release and removed in 6.0.

Use autoprefixer.process(css, opts) shortcut.

/cc @ymatuhin

Please update to Autoprefixer 9.3.1

I have an article coming out soon about Autoprefixer 9.3.1 and I link to autoprefixer.github.io in it as the tool I recommend for viewing real time CSS Grid translations. It would be good if the site was using the latest version.

Also, a heads up, Autoprefixer 9.4.0 will be released at the start of December and introduce CSS Grid auto-placement support.

Bump autoprefixer from v9 to v10

It would be good to update this project to the latest autoprefixer and postcss versions to get the latest improvements in autoprefixer.

text-stroke does not get prefixed accordingly

Hello, it seems that autoprefixer "forgets" to prefix text-stroke with -webkit- as mentionned in caniuse, whereas litteraly 0% of web-browsers support this property without this prefix.
For instance, with the online prefixer,

.test {
    text-fill: 4px #33FF00;
}

gets transformed to...

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

.test {
    text-fill: 4px #33FF00;
}

I also made sure to target last 99 version just to be sure.
If I did something wrong, please let me know !
Have a nice day !

website API?

Would you be interested in creating an API where a site/service could post css code to the autoprefixer site to then have it return the autoprefixed code?

Use case scenario - I run a chrome extension for developers on the HubSpot platform. HubSpot has an online code editor, it does not prefix for you. I would be interested in integrating into the extension the ability to select text, right click and then click "autoprefix" if you were to have an api for this.

The project I'd be using it in is open source as well https://github.com/williamspiro/HubSpot-Developer-Extension

let me know if this is of interest to you, if not that's okay. Just thought it would be useful.

Enable grid

Let's add an option to support grid. I think it should be true by default. Or it is easy just set it true, that's all.
https://github.com/postcss/autoprefixer#options

`font-smooth: never` with webkit

Isn't -webkit-font-smoothing: none the equivalent of font-smooth: never? It doesn't get added my autoprefixer.

Excuse me if I'm wrong, just giving heads up.

flex-wrap: nowrap does not works with chrome < 29

I tested my site with the old chromium portable version 21 and I found that the property:
flex-wrap: nowrap;
who was prefixed with:
-webkit-flex-wrap: nowrap;
does not work with this browser, nowrap is not a valid value, however, it works fine if I add property:
-webkit-flex-wrap: none;

Please update to Autoprefixer 9.2.0

Autoprefixer 9.2.0 has been released and introduces some major new features. You can learn more about the new features here:

https://github.com/postcss/autoprefixer/releases/tag/9.2.0

handle :is :matches :any

https://developer.mozilla.org/en-US/docs/Web/CSS/:is

Empty browsers option

Users ask to set browsers: [] https://twitter.com/simevidas/status/745849989440626688

Enhancement: put code in query

Let's put code in query. It will be useful for sharing examples.
Also let's write autoprefixer version for better debug.

BrowserslistError: Unknown browser query 'last 2 versions'

Autoprefixer doesn't work
See screenshot with console errors https://prnt.sc/gtwkti

Update Autoprefixer and Browserslist

/cc ymatuhin

Autoprefixer generically adds prefixes to browser-specific pseudo-classes

Hi, how to block autoprefixer from adding -webkit prefixes to a Mozilla specific extension ?

Here are some examples to make my point :

.custom-range::-moz-range-thumb {
    -webkit-transition: none;
    transition: none
}

-webkit-transition has nothing to do here as it is a Mozilla specific selector (::-moz-range-thumb).

Another crazy output happens with keyframes and transitions, as Autoprefixer creates useless variants

  -webkit-transition: -webkit-box-shadow 0.1s ease-out;
  transition: -webkit-box-shadow 0.1s ease-out;
  transition: box-shadow 0.1s ease-out;
  transition: box-shadow 0.1s ease-out, -webkit-box-shadow 0.1s ease-out;

Instead of just

-webkit-transition: -webkit-box-shadow 0.1s ease-out;
      transition: box-shadow 0.1s ease-out;

How to fix this ? Thanks for your help. And thanks a lot for Autoprefixer !!!

Suggestion: show that a change has been made

Hello,

I came across the prefixer while searching for an online generator that would "make sure" my CSS code would work on almost all browsers.

First of all, let me say VERY NICE, Kudos!

I'm not sure this is the place to do that, I sure hope it is.
I had an idea, for a newbie like me, who barely knows anything about CSS's history, the various browsers, and all the available syntaxes. It isn't immediately obvious that my code has been altered. Since I would also like to learn rather than just paste and copy the "new" corrected version, I would like to be able to paste different chunks of code and see what did I miss.
So I think some kind of boolean indicator would be nice, an icon that would "light up" to indicate that the pasted code has been "prefixed" somewhere so to speak.

For an extra challenge or a slightly more complicated enhancement maybe highlight the changes or the lines that were changed?

In case this is too much, maybe it would be possible to let the user enable that kind of option, especially considering many would paste huge chunks of code and that would be a waste of resources to highlight every line.

If that's something you might be interested in, I could, if possible, take responsibility for that and try to implement it? I haven't made any contributions yet and looking for my first one.

Looking forward to hearing from you.

Autoprefixer autoupdates

You do not update Autoprefixer 4 months. It is very very bad.

What about getting autoprefixer.js from autoprefixer-rails as other tool do it?

Autoprefixer 9.4.0 released

Hi, can you please update to 9.4.0?

https://github.com/postcss/autoprefixer/releases/tag/9.4.0

In order to enable CSS Grid autoplacement translations, the grid setting will need to be set to "autoplace", not true.

CSS Grid causes: 'TypeError: string is undefined'