JS检测和报告支持的CSS属性

当我们想用某个css新特性时，总是会在意它的兼容性情况，或许我们会去搜索它的兼容性，哪些浏览器合适哪些不合适，在这些已知的情况下再选择是不是使用或如何使用，这是一个已知我们即将用于什么浏览器下作出的选择。

但我们往往不知道自己开发的页面用户会在哪个浏览器上进行打开，这时我们就需要前端来帮我们做到检测当前用户浏览器支持的CSS属性，并以方便的方式显示给用户，以便用户知道自己在使用什么浏览器，使双方都能获得更好的体验。

利用JS可行的方案是：

1. 使用CSS.supports()检测

   if (CSS.supports('(display: grid)')) {
     // 浏览器支持网格布局
   } else {
     // 浏览器不支持网格布局
   }
   

2. 使用document.documentElement.style检测

   if ('grid' in document.documentElement.style) {
     // 浏览器支持网格布局
   } else {
     // 浏览器不支持网格布局
   }
   

3. 使用第三方库检测

   const Modernizr = require('modernizr');
   
   if (Modernizr.cssgrid) {
     // 浏览器支持网格布局
   } else {
     // 浏览器不支持网格布局
   }
   

检测到浏览器支持的CSS属性后，我们可以使用以下方法将结果显示给用户：

1. 使用alert()或console.log()弹出消息

   alert('浏览器支持网格布局');
   

   console.log('浏览器支持网格布局');
   

2. 使用document.write()将结果写入HTML文档

   document.write('<p>浏览器支持网格布局</p>');
   

3. 使用第三方库显示结果

   const Toast = require('toast');
   
   Toast.show('浏览器支持网格布局');
   

我们可以根据自己的需要选择合适的方法将结果显示给用户。

除了上述方法外，我们还可以使用一些在线工具来检测浏览器的CSS属性支持情况，例如：

• Can I use
• CSS Compatibility
• BrowserStack

这些工具可以帮助我们快速了解不同浏览器的CSS属性支持情况，并做出相应的开发决策。