This is the 28th day of my participation in Gwen Challenge

No foreword, we cut straight to the chase!

Compatibility issues

Taking CSS3 as an example, let’s talk about compatibility issues as I understand them

CSS, also known as cascading style sheets, is used to style HTML documents. CSS3 is an upgraded version of CSS2. The CSS authority has added many new functions and standards on the basis of CSS2, which are implemented by major browser vendors.

However, due to various reasons of various browsers, the implementation time of each function is uneven. The result is that some browsers implement it first, some browsers implement it later, and some browsers don’t; The browser that implemented it first marks it as a private property that no other browser can use. After a while, the second browser implemented this feature, so it added its own special markup, and so on, until all browser vendors implemented this feature. A browser vendors at this time they might think of, the function of everyone realized that this also is my private property, then I can support without special tag written by yourself, and then the second vendors see, oh oh oh everyone realized, that I also support without their written special markers, and so on. By the end of the day everyone was in favor of writing it without their own special notation. This is a process from the beginning of a property definition to compatibility with some browsers to compatibility with all browsers. This process, and even now many of the attributes and functions developed above.

Therefore, it is the browser vendors’ varying time to implement new features in CSS3 that has led to various incompatibilities in CSS3 properties

So how do you solve the compatibility mess?

The solution

Method 1: Check the documents and manuals

Check caniuse and CSS manuals for example

When we want to use an attribute, we go to the Internet to look up the compatibility of the attribute, corresponding to the browser version you want to be compatible with, the corresponding prefix operations such as the columns attribute

.test{
	-moz-columns:200px 3;
	-webkit-columns:200px 3;
	columns:200px 3;
}
Copy the code

Note that different browsers use different prefixes, such as

  1. Safari/Chrome – its –

  2. Add – ms – IE

  3. Add – moz – Firefox

  4. Add – o – Opera

Like this one by one, and then one by one prefix, is to solve the problem! But it’s not usually done for one reason: it’s hard

Method two: Use preprocessors and postprocessors

Let’s have a quick chat

The preprocessorpre-processor

In simple terms, a preprocessor writes code to someone else’s rules and format, and then compiles it. The CSS.

Typical examples: LASS, Sass, cssNext (cssNext is used to implement some future standards)

The post-processorpost-processor

In the post-processing area, CSS styles are written in normal format regardless of compatibility. After writing, CSS files are processed by the post-processor and incompatible attributes are automatically prefixed

Typical example: Autoprefixer, used to automatically add prefixes

Therefore, we can use pre-processing and post-processing to solve the compatibility problem more conveniently

Later build tools such as WebPack have plug-ins to address this compatibility issue

Those are my thoughts on compatibility! If there is something wrong, please leave a message