autoprefixer / autoprefixer.github.io Goto Github PK
View Code? Open in Web Editor NEWAutoprefixer online — add the desired vendor prefixes and remove unnecessary in your CSS
Home Page: http://autoprefixer.github.io
Autoprefixer online — add the desired vendor prefixes and remove unnecessary in your CSS
Home Page: http://autoprefixer.github.io
.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?
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!
Firefox 53.0b8 (64-bit)
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
Invalid/unsupported queries should show up instead of only displaying on console.
/cc @ymatuhin
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
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...
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.
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 9.2.0 has been released and introduces some major new features. You can learn more about the new features here:
@keyframes introjs-hint-pulse-anim-inner {
0% {
transform: scale(0);
opacity: 0.0;
}
}
But it works fine on https://autoprefixer.github.io/
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
.
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?
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;
}
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;
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 !!!
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;
Users ask to set browsers: []
https://twitter.com/simevidas/status/745849989440626688
It would be good to update this project to the latest autoprefixer and postcss versions to get the latest improvements in autoprefixer.
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 !
Let's put code in query. It will be useful for sharing examples.
Also let's write autoprefixer version for better debug.
/cc ymatuhin
Всем будет полезно визуализировать данные
http://browserl.ist/
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
Autoprefixer doesn't work
See screenshot with console errors https://prnt.sc/gtwkti
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.
autoprefixer(opts).process(css)
was disabled since 5.0 release and removed in 6.0.
Use autoprefixer.process(css, opts)
shortcut.
/cc @ymatuhin
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
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?
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.
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?
Error: Cannot find module 'caniuse-lite/data/regions/RU.js'
with filter like that: >1% in RU, last 10 version
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.
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.