Today we brought you how to check the front-end code in each browser support

I’m sure some people will ask why we should check the compatibility of the new properties before we use them, because we want to make sure that the browser works and the interface and the interaction works when we finally launch. For example, if you are using a CSS3 elastic box, display: flex. The page layout is light-hearted, but the customer’s request is compatible with IE8. You’re out of luck, because if you run your code in a version prior to IE9, the interface will be messed up, because display: Flex was not supported prior to IE9, so it won’t work. The customer or product manager is sure to ask you to solve it, which can be quite troublesome, and if it interferes with the progress of the project, you may have already gone home. So it’s especially important to check compatibility before using a new property, especially if the customer specifically mentions what version is compatible with it, and then go straight to the dry goods!

  1. The author’s common method: www.caniuse.com/

Presentation:

For example, if I want to query the Flex property of display, how is it supported by major browsers

You can clearly see that Internet explorer 6-9, Opera10-11.5, and Opera Mobile12 do not support this property.

  1. If you want to look bigger and more like a programmer, you can install caniuse-cmd on the command line

    1. $npm install -g canise-cmd
    2. $caniuse + <elementname>

      Presentation:

      For example, I want to check the compatibility of video now

      $caniuse video

      The results show:

      As you can see from the figure above, IE9 and above is supported, Edge is fully supported, Firefox20 and above is supported, Chrome is fully supported, Safari4 and above, Opera10.5 and above is supported.

  2. SAO operation: using THE advantages of THE JS feature detection method: can be put in the JS code to solve the cross-platform compatibility problem for example! I want to see if I’m on a mobile or a PC, if I’m on a mobile or if I’m on a PC. The code and examples are as follows:

let hasTouch; // Define a variable to store whether the "onTouchEnd" event exists
hasTouch = "ontouchend" in document ? true : false;// True if it exists on mobile, false if it does not exist on PC;
if(hasTouch){
	// Mobile code logic
}else{
	//PC side code logic
}
Copy the code

Tests at the console

Pay attention toThe onTouchEnd will still be false, but it will work on real phones.

Of course, this method can also be used to do more elegant operations! Directly on the code and examples!

"autoplay" in document.createElement('video')  // Check whether the video element has an autoplay attribute. The answer is yes
"autoplay" in document.createElement('div')  // Check if the div element has an autoplay attribute. The answer is no
"flex" in document.createElement('div').style // Check for flex in the div style
Copy the code

Console demo:



3. You can use window.navigator.vendor to check which browser is used to solve the compatibility problem of different browsers

Presentation:



This gives you information about the current browser.

About browsersnavigatorFor details, see:www.w3school.com.cn/jsref/dom_o…

That’s all for today’s sharing with friends, thank you for watching, thank you!