我得到了一个网站,如果浏览器不支持使用 CSS 3 和 HTML 5 构建的任何功能,我需要显示一个弹出窗口。唯一的问题是我不知道是否有一个包罗万象的方法检查浏览器是否无法解析某些内容,或者我是否需要使用 Modernizr 之类的东西并单独检查每个元素和功能?
3 回答
如果有一个 catch all 方法来检查浏览器是否无法解析某些东西
解析运行在非常通用的规则上。未知元素被添加到 DOM。未知属性被添加到 DOM。无法识别的 CSS 属性或属性值将被忽略。与具有未知组件的 CSS 选择器关联的规则集将被忽略。对 JavaScript 属性的赋值是在没有特殊处理的情况下赋值的。
您可以捕获(使用)的唯一事情try / catch
是尝试调用不存在的函数,并尝试访问不存在的对象的属性。
所以,不,没有通用的解决方案。您需要单独测试可能导致严重故障的所有内容。
我不确定我是否正确理解了您的问题,但我认为您是在问是否有一个测试可以识别不支持任何HTML5/CSS3 功能的浏览器(这样您就知道没有必要测试支持单个功能)。
简而言之:没有。
“HTML5”和“CSS3”分别指的是不特别相关的松散特性组,除了它们不在 HTML 4 或 CSS 2.1 规范中的事实。没有任何根属性或特性或东西可以检查来告诉您是否有任何HTML5/CSS3 支持。它只是一系列单独存在或不存在的附加功能。
浏览器检测可能是您最好的选择。查看您网站的浏览器统计信息,看看哪些最常见的浏览器不支持任何 HTML5/CSS3 功能(我会大胆猜测它会是 IE8/ 7/6)。然后为这些浏览器编写/获取(例如,从jQuery 已弃用的browser
方法)检测。
如果用户正在使用其中之一,则显示弹出窗口。如果没有,请在使用之前测试各个功能。
最终,不支持任何东西的旧浏览器将不再重要。
你的问题没有多大意义。不,没有任何测试可以神奇地查看您站点中的每一段代码,并告诉您哪些代码在某些浏览器中无法正常工作,而无需您付出一些努力。
这就是 Modernizr 这样的工具的全部意义——能够测试各种 CSS3/HTML5 特性以及使用的浏览器是否支持它们。Modernizr 只是针对特定功能的一次性测试的集合,您可以根据需要测试尽可能多的或尽可能少的测试,并使用 polyfill 等相应地调整代码,以解决您使用的任何内容缺乏兼容性的问题。除此之外,没有任何神奇的解决方案。
您需要在您的站点代码中识别旧浏览器可能不支持的所有 CSS3、HTML5 等功能,并使用 Modernizr 等工具测试它们是否在客户端浏览器中工作,并使用这些测试的结果来确定是否显示一个模态以及要在其上放置的内容。