@supports @规则嵌套测试实例页面

展示

代码

• HTML：

  <span class="supports-match">如果背景色有动画，则是匹配</span>

• CSS：

  .supports-match {
      padding: 5px;
      border: 1px solid;
  }
  @supports (display: flex) {
      /* 支持内嵌媒体查询语法 */
      @media screen and (max-width: 9999px) {
          .supports-match {
              color: #fff;            
          }
      }
      /* 支持内嵌@supports语法 */
      @supports (animation: none) {
          .supports-match {
              animation: colorful 1s linear alternate infinite;
          }
      }
      /* 支持内嵌@keyframes语法 */
      @keyframes colorful {
          from { background-color: deepskyblue; }
          to   { background-color: deeppink; }
      }
  }