Using the Postcss cross-browser compatibility tutorial

Here we will use POSTCSS to create a cross-browser compatibility stylesheet. What we are going to do:

Prefix with an automatic prefix
Add a series of IE versions and retreat back to IE8, IE9, and IE10
To add a Will-change property to a property that is not supported

Set up the project

The first thing you need to do is to use Gulp or grunt to set up your project. If you don't have a perfect project template, I recommend that you use Gulp, and you can use less code to achieve the same goal.

You can read the previous tutorials on gulp or grunt creating POSTCSS projects:

POSTCSS further study: Gulp settings
POSTCSS further study: Grunt configuration

If you do not want to manually set up your project from scratch, you can download the source attachment provided in this tutorial, extract Gulp or grunt items into an empty folder.

Then run at the command terminal: NPM install.

Installing Plug-ins

Now that you have prepared an empty gulp (or grunt) +postcss project, we need to install the plugins that need to be used in this tutorial.

We're going to install some plug-ins, so it's not going to be an installation like this in "Postcss Deep Learning: Gulp Settings" and "Postcss Deep Learning: Grunt configuration." Instead, use a command to install the plug-ins you need in this tutorial at once.

Whether you are using Gulp or grunt, run the following command in the directory of your project:

NPM Install autoprefixer postcss-color-rgba-fallback postcss-opacity postcss-pseudoelements postcss-vmin Postcss-will-change--save-dev

Now that the plugin is installed, let's continue to load the Plug-ins into your project.

Loading Plug-ins via Gulp

If you are using gulp, load these variables in your gulpfile.js:

var autoprefixer = require (' autoprefixer ');
var color_rgba_fallback = require (' Postcss-color-rgba-fallback ');
var opacity = require (' postcss-opacity ');
var pseudoelements = require (' postcss-pseudoelements ');
var vmin = require (' postcss-vmin ');
var Pixrem = require (' Pixrem ');
var will_change = require (' Postcss-will-change ');

and add the names of these variables to your processors array:

var processors = [
Will_change,
Autoprefixer,
Color_rgba_fallback,
Opacity
Pseudoelements,
Vmin,
Pixrem
];

Do a quick test, run Gulp CSS at the command terminal, and check that the Style.css file is not placed in the Dest folder.

Loading Plug-ins via Grunt

If you use grunt, update your processors object and nest options to the object as follows:

Processors: [
Require (' Postcss-will-change ') (),
Require (' Autoprefixer ') (),
Require (' Postcss-color-rgba-fallback ') (),
Require (' postcss-opacity ') (),
Require (' postcss-pseudoelements ') (),
Require (' Postcss-vmin ') (),
Require (' Pixrem ') ()
]

Run the Grunt postcss command at the command terminal, do a quick test, and check the Dest folder in your project for a new style.css file.

By the way, you have installed the POSTCSS plugin required in this tutorial. Take you to continue to see how to use these plug-ins to address your stylesheet to achieve cross-browser compatibility.

automatically add browser prefix

To introduce some of the measures of cross-browser compatibility, it is necessary for us to specify some special use cases for this purpose. Automation required attributes add the browser vendor's private prefix, which I recommend should be handled after each completed project through the @andrey Sitnik autoprefixer plugin.

It is difficult to monitor which properties need to add the private prefix of the browser vendor. Using Autoprefixer as part of your project, it will look at the caniuse.com data to detect your code, and then add a prefix to the browser as needed. So you don't have to think about those things, you can concentrate on writing your own code.

Let's do a autoprefixer test example. Add the following animation and Flexbox code to your project's Src/style.css file:

@keyframes Animationexample {
from {
width:0;
}
to {
width:100%;
}
}

. animatethis {
Animation:animationexample 2s;
Display:flex;
}

Run Gulp CSS or grunt postcss compile your files, and then you will notice that DEST/STYLE.CSS files have been added to the browser prefix in your project:

@-webkit-keyframes Animationexample {
from {
width:0;
}
to {
width:100%;
}
}

@keyframes Animationexample {
from {
width:0;
}
to {
width:100%;
}
}

. animatethis {
-webkit-animation:animationexample 2s;
Animation:animationexample 2s;
Display:-webkit-box;
Display:-webkit-flex;
Display:-ms-flexbox;
Display:flex;
}

As you can see, prefixes are automatically added according to the data provided by animation and Flexbox in caniuse.com.

Specify a supported browser version

Autoprefixer uses browserlist to determine which browser versions will be supported. By default, prefix support is provided on demand:

**> 1%**: More than 1% people worldwide use browsers
Last 2 versions: all browsers tracked by Caniuse.com for the final two versions
Firefox ESR: The latest version of Firefox
Opera 12.1:opera Version 12.1

In the example above, we compile with the default settings of Autoprefixer, which means support for IE10 and Safari8, so animation need to add the-webkit-prefix, and Flexbox needs-ms-and-webkit-prefixes.

If you set the Browserlist configuration to support only ie11+ and Safari9, then IE11 and Safari9 do not need these prefixes.

Try setting Autoprefixer browserlsit in your gulpfile.js or gruntfile.js file by browsers:

In the Gulpfile ' processors ' array:
Autoprefixer ({browsers: ' Safari >= 9, ie >= 11 '}),

In the Gruntfile ' processors ' array:
Require (' Autoprefixer ') ({browsers: [' Safari >= 9, ie >= 11 ']}),

If you see the compiled CSS and the pre-compiled CSS is no different. This is because there is no support for SAFARI8 or IE10 browsing requests, so there is no prefix.

to add a fallback for the Will-change property

The Will-change property is used to make the browser aware of the animation of some element design in advance. This allows the browser to optimize rendering the animation rendering process to prevent delay and flicker. However, the current Ie/edge,safari and Opera Mini do not support this attribute.

@Andrey Sitnik developed Postcss-will-change plug-ins, add a fallback, which will help these browser rendering better, even if the browser does not support Will-change properties, does not affect efficiency. It triggers the GPU processor by adding the Backface-visibility property.

For example, add the following code to your project's Src/style.css file:

. thiswillchange {
Will-change:transform;
}

After compiling, you can see the following code in the Dest/style.css file of your project:

. thiswillchange {
Backface-visibility:hidden;
Will-change:transform;
}

Note: This plugin should be loaded before autoprefixer in the Gulpfile.js (or grunfile.js) file. This allows the Autoprefixer plugin to add a browser prefix to backface-visibility. As shown below:

/* Fallback with vendor prefixes * *
. thiswillchange {
-webkit-backface-visibility:hidden;
Backface-visibility:hidden;
Will-change:transform;
}

to add a degraded attribute to the old IE version

We should thank Microsoft for improving the browser version, and, more important, the company's leadership to support the abandonment of the old IE version, we can also gradually do not have to consider the old IE version, as well as the downgrade of the solution. Microsoft itself no longer supports IE8 in 2016. BOOTSTRAP4 recently also did not support IE8. Google halted support for IE8 in 2012, and its support for IE9 in 2013 declined slowly.

In other words, the end of the old version of the support of IE must be based on the project evaluation, if your target users use IE older version of the higher ratio, you may have no choice but to support them. If this is the case, the following plugins can help you reduce the pain of compatibility with older versions of IE.

Create a downgrade scheme for RGBA () color

IE8 does not support the RGBA () color, so the Postcss-color-rgba-fallback plug-in for @guillaume Demesy adds a hexadecimal color as a degraded processing.

For example, add the following code to your project's Src/style.css file:

. rgbafallback {
Background:rgba (0,0,0,0.5);
}

After compiling, you can see the following code in the Dest/style.css file of your project:

. rgbafallback {
Background: #000000;
Background:rgba (0,0,0,0.5);
}

provide a downgrade scheme to opacity

IE8 also does not support opacity properties, so @vincent De Oliveira provides a postcss-opacity plug-in that adds filter properties to IE as a degraded processing.

Add in your style source code:

. opacityfallback {
opacity:0.5;
}

The edited style file adds a-ms-filter property as a opacity indent:

. opacityfallback {
opacity:0.5;
-ms-filter: "Progid:DXImageTransform.Microsoft.Alpha (opacity=50)";
}

Convert the pseudo element:: To:

For example. Element::before uses two colons:: is represented as pseudo element, and. Element:hover uses a colon: represents a pseudo class. In practice, it is shown that:: Mainly used to distinguish pseudo class.

However, only one colon is supported in IE8: pseudo elements that do not support::. Through the @sven Tschui postcss-pseudoelements plug-in, you can get the best practice, Plug-ins can be:: Conversion to:.

Add code in your code that contains::

. pseudo-element::before {
Content: ';
}

The only thing you see in the compiled code is:

. pseudo-element:before {
Content: ';
}

Through practice, using this plugin is the best coding practice, and of course you can also use CSS without the use of plug-ins, with proper syntax for degrading processing IE8.

use VM for Vmin to do degraded processing

Viewport relative unit Vmin is not supported in IE9, but the VM can be used as the equivalent unit. If you want to allow IE9 to support vmin, you can use the @vincent De Oliveira postcss-vmin plug-ins to demote IE9.

Add the following code to the Src/style.css file in your project:

. vmfallback {
Width:50vmin;
}

Compiled code that adds a VM unit as a demotion process:

. vmfallback {
WIDTH:50VM;
Width:50vmin;
}

add px to REM as a degraded processing

IE8 has not supported REM units, and they do not support pseudo elements and font abbreviations in IE9 and IE10. Using the Node-pixrem plug-ins of the @vincent De Oliveira and @rob Wierzbowski, you can automatically add PX units to REM as a demotion.

Add the following code to your style sheet:

. remfallback {
Height:10rem;
Font:2rem Arial;
}

. remfallback::before {
Content: ';
Line-height:1rem;
}

Recompile your style and you'll see adding px as a demotion in the style file:

. remfallback {
height:160px;
Height:10rem;
FONT:32PX Arial;
Font:2rem Arial;
}

. remfallback:before {
Content: ';
line-height:16px;
Line-height:1rem;
}

Summary

Make a simple summary of the content above:

Autoprefixer is a tool that every project must use
Autoprefixer can add a private prefix to the browser you need based on your configuration
If you are using animations in your project, consider using the Postcss-will-change
If you need to support IE8, consider using plug-ins such as Postcss-color-rgba-fallback, Postcss-opacity, postcss-pseudoelements, and Postcss-vmin
If you need to support IE8, IE9, and IE10, consider using the Node-pixrem plug-in