Is there a single HTML5/CSS3 compatibility test, as an alternative to testing individual features?

Question

我有一个网站，如果浏览器不支持使用CSS 3和HTML 5构建的任何功能，则需要显示一个弹出窗口。唯一的问题是我不知道是否有全部捕获方法检查浏览器是否无法解析某些内容，还是需要使用Modernizr之类的内容并分别检查每个元素和功能？

Answer 1

if there is a catch all method to check if a browser cannot parse something

Parsing runs on pretty generic rules. Unknown elements get added to the DOM. Unknown attributes get added to the DOM. CSS properties or values of properties that are not recognised are ignored. Rulesets associated with CSS selectors with unknown components are ignored. Assignments to JavaScript properties are assigned with no special handling of them.

About the only things you could catch (using try / catch ) would be attempts to call functions that don't exist, and attempts to access properties of non-existent objects.

So, no, there isn't a generic solution. You need to test for everything that might cause a critical failure separately.

Answer 2

I'm not sure I understand your question correctly, but I think you're asking whether there's a single test to identify browsers that don't support any HTML5/CSS3 features (so that you know there's no point testing for support of individual features).

In short: there isn't.

"HTML5" and "CSS3" each refer to loose groups of features that aren't particularly related, aside from the fact that they weren't in the HTML 4 or CSS 2.1 specs. There isn't any root property or feature or thing you can check to tell you whether there's any HTML5/CSS3 support. It's just a series of additional features that are individually there or not.

Browser detection might be your best bet. Have a look at your site's browser stats, and see what the most common browsers are that don't support any HTML5/CSS3 features (I'll take a wild, shot-in-the-dark guess that it'll be IE8/7/6). Then write/get (eg from jQuery's deprecated browser method ) a detect for those browsers.

If the user is using one of them, show the popup. If not, test for individual features before using them.

Eventually, the old browsers that don't support anything won't be used enough to matter.

Answer 3

Your question doesn't make a whole lot of sense. No, there is no test that will magically look at every bit of code in your site and tell you which ones will not work in certain browsers without some effort on your end.

That's the entire point of tools like Modernizr - to be able to test for various CSS3/HTML5 features and whether the browser in use supports them. Modernizr is just a collection of one-off tests for specific features, you can test for as many or as few as you like and adjust your code with polyfills, etc accordingly to account for lack of compatibility for whatever you're using. There is no magic solution to this beyond that.

You need to identify all of the CSS3, HTML5 etc features that might not be supported in older browsers in your site code and use a tool like Modernizr to test whether they work in the client browser and use the results of those tests to determine whether to display a modal and what to put on it.