Level 102
You can change the options for the auto-prefixer using postcss
Nov 4, 2019
6
Level 1
Laravel Mix
May I know the right way to enable the autoprefixer work on every css which needed to add? My laravel mix autoprefixer only work on some element. For example,
.sample {
display: flex;
transition: all .5s;
user-select: none;
background: linear-gradient(to bottom, white, black);
height: 300px;
}
.sample {
display: flex;
transition: all 0.5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: linear-gradient(to bottom, white, black);
height: 300px;
}
How can I solve this?
Level 1
mix.options({
postCss: [
require('autoprefixer')({
browsers: ['last 10 versions'],
})
]
});
So I need to add the above code?
Level 102
Well that depends. Do you need to support the last 10 versions of all browsers?
If you need to be more specific you can pass multiple keys to that array
mix.options({
postCss: [
require('autoprefixer')({
browsers:[
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"last 1 ie version"
]
})
]
});
Level 1
Isn't like support the more version the better since we don't know what is the version of browser the user is using?
Level 102
Well some features will never work in older browsers so if you need them in your design (and dont want to make fallback code) you might want to exclude these from your "supported browsers"
For instance I can see that you are using flex in the above code, but flex isnt supported by IE 9 and older. That means you will either have to exclude IE 9 users or write fallback css to handle these users (no auto prefixer can help you here). https://caniuse.com/#feat=flexbox
Level 39
It's an agree/disagree situation on whether supporting older browsers is better. I don't support older browsers like IE.
There's only been a handful of applications that i've built, that have required support for older browsers. For all others, we just displayed a notice saying the browser isn't supported.
Please or to participate in this conversation.