PWA的HTML / CSS功能检测

Question

MDN定义＆＃39; 进步＆＃39;在渐进式网络应用程序中 -

  

现代网络应用程序可以开发，以提供超酷的体验   完全能够使用的浏览器，并且可以接受（尽管不是很好）   有光泽的浏览器体验。我们一直在这样做   有了渐进增强等最佳实践的年份，所以让我们来看看   保持良好的工作。

据我所知，在javascript功能方面，我们可以使用 if-else 条件检查功能是否存在并进行相应处理。

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

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

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

Answer 1

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

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

Here是关于如何使用Modernizr

的精彩文章

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