Comment: Nowadays, a web page displays more and more rich content, including some HTML5 and CSS3 functional effects. Then if the client's browser supports HTML5. The page access works very well without any problems. What if HTML5 is not supported, or IE6, 7, 8 and other browsers? At this time, it is often a headache for a front-end staff member.
Nowadays, a web page displays more and more rich content, including some HTML5 and CSS3 functional effects. Then if the client's browser supports HTML5. The page access works very well without any problems. What if HTML5 is not supported, or IE6, 7, 8 and other browsers? At this time, it is often a headache for a front-end staff member and it is compatible.
Compatibility at this time. It is nothing more than allowing users to look and use in all browsers as much as possible. However, the page uses HTML5 tags and CSS3 style. What should we do if the client browser does not support HTML5? For such a problem, we can only do it, and support as much as we can. If you cannot support it, you must give a friendly tip and advice. Let users upgrade to a higher version of the browser. So during the coding process, we need to perform some functional detection. Suppose we want to make a rounded corner effect. Using CSS3, HTML5 is very convenient.
My title
This place is content
The effect we expected was the same
What if the client browser does not support HTML5? Let's use IE's F12 tool to test it
Note: Both browser mode and document mode must be selected
Page effects are very cruel in browsers that do not support HTML5
We have to fix such problems. So there is no way, so you need to do more work for browsers that do not support HTML5. How to solve the compatibility of such a rounded corner effect? It is definitely a judgment on browsers that do not support HTML5. If HTML5 rounded corners are not supported, we use third-party rounded corners js to do it. Is the problem arriving again? How to make a judgment on such a rounded corner function? Hesitated again at this time. Is there a relatively efficient, comprehensive and concise function judgment for HTML5?
Modernizr An HTML5 feature detection plug-in.
Or the special effect of the round corner above, slightly modified
Note: Pie.js is a third-party rounded plugin
My title
My content
Look at the effect: browsers that support HTML5
Next, IE7, a browser that does not support HTML5, will be tested
Therefore, it is very convenient to use Modernizr to perform function detection of HTML5 pages. But there is still a problem? If you have made a rich canvas special effects, how can you achieve compatibility? Now I will return to the beginning of the sentence, the function is downgraded, and the support can be supported as much as possible, and if it cannot be supported, you will give friendly prompts. I still hope that domestic users will soon upgrade to the browser that supports HTML5, so that developers will not suffer so much.