In front-end development, in order to enable the page to be displayed on mainstream browsers, some css attributes need to be added with different compatible prefixes, for example:
-moz-Firefox, GEcko engine
-webkit-: Safari and Chrome, Webkit engine
-o- : Opera (early), Presto engine, Later changed to Webkit engine
-ms-: Internet Explorer, Trident engine
In order to avoid omissions and reduce workload, you can install Autoprefixera plug-in to automatically complete the prefix of css. Works with css, less, scss.
1. Installation steps
1. Search in the extension Autoprefixer, click install
2. Configuration
Settings - search for Autoprefixer and choose to edit in settings.json
Add the following code inside autoprefixer.options:
"autoprefixer.options": {
"browsers": [
"ie >= 6",
"firefox >= 8",
"chrome >= 24",
"Opera >= 10",
"last 2 versions",
"> 5%"
]
}
Configuration parameters:
"ie >= 6": IE browser version greater than or equal to 6
" >5%": Browsers used by more than 5% of people in the world
“last 2 versions”: All browsers are compatible to the last two versions
Note: When dealing with compatible IE browsers, attention should be paid to attributes that are not supported by lower versions of IE browsers, and cannot be applied even if compatible processing is performed.
3. How to use: Press ctrl+shift+p in the css file to be processed, select Autoprefixer: Run option
The effect is as follows:
//使用前
.container {
display: block;
flex-direction: row;
justify-content: center;
}
//使用后
.container {
display: block;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
If it is helpful to you, please remember to click triple link