CSS属性兼容写法

标签：blend   code   doc   +=   linear   classname   end   name   class   

1. 一种是用js判断兼容性

   // JS
   if ("CSS" in window && "supports" in window.CSS) {
    var support = window.CSS.supports("mix-blend-mode","difference");
    support = support?"mix-blend-mode":"no-mix-blend-mode";
    document.documentElement.className += support;
   }
   
   // CSS
   h1 { color: #000; }
   .mix-blend-mode body {
    background-image: linear-gradient(90deg,#fff 49.9%,#000 50%);
   }
   
   .mix-blend-mode h1 {
      color: #fff;
      mix-blend-mode: difference;
   }

2. 用CSS中的@supports

   @supports (mix-blend-mode: difference) {
       body {
           background-image: linear-gradient(90deg,#fff 49.9%,#000 50%)
       }
       h1 {
           color: #fff;
           mix-blend-mode: difference;
       }
   }

CSS属性兼容写法

标签：blend   code   doc   +=   linear   classname   end   name   class   

原文地址：https://www.cnblogs.com/Mrxiedh/p/10267382.html