PWA的HTML/CSS特征检测

Question

MDN将渐进式网络应用中的" 渐进式 " 定义为 -

可以开发现代网络应用程序,为功能完备的浏览器提供超酷的体验,并为功能较弱的浏览器提供可接受的(虽然不那么闪亮)体验.我们多年来一直在通过逐步增强等最佳实践来做这件事,所以让我们保持良好的工作.

据我所知,在javascript功能方面,我们可以使用if-else条件来检查功能的存在并适当地处理它.

但是什么是HTML/CSS的最佳方法呢？

google/MDN文档非常强调检查JS功能,但没有html/css的文档.

我的用例是构建一个具有现代功能的Web应用程序,但仍适用于各种浏览器(包括Opera Mini和UC Browser等代理浏览器).

Answer 1

通过使用名为Modernizr的脚本库,您可以使用最少量的代码将不同HTML5/CSS3功能的检查添加到页面中,

为了生成生产脚本,该站点提供了一个自定义脚本生成工具,而不是提供具有HTML5/CSS3功能检测所有内容的单个脚本.使用脚本生成工具,您可以选择所需的特定测试功能,并忽略您不需要的所有内容.

这是关于如何使用Modernizr的精彩文章

如果您想超越modernizr,可以开始使用新的CSS规则@supports进行特征检测.此规则是CSS3条件规则模块的一部分.由于此规则,您只能在浏览器支持时才有选择地应用CSS样式.否则,浏览器将忽略这些样式.它的语法与CSS媒体查询非常相似.