Chrome/Edge在progress::-moz-progress-bar{}后停止渲染所有CSS，求解决办法

问题原因 #

Chrome、Edge这类WebKit/Blink内核浏览器无法识别Firefox专属的::-moz-progress-bar伪元素选择器，在CSS嵌套语法中，引擎遇到无法解析的选择器时，会将该选择器之后的整个嵌套块内容判定为无效，直接跳过渲染，导致后续的input样式及其他规则全部失效。而Firefox能正常识别所有前缀选择器，所以不受影响。

修复方案 #

方案1：将Firefox专属规则移出嵌套块

把针对Firefox的进度条样式单独提取到全局作用域，不放在form的嵌套规则内。这样WebKit/Blink浏览器只会忽略这一条无效规则，不会波及后续的嵌套样式。

body {
  font-family: sans-serif;
  font-size: 16px;
}

/* 单独提取Firefox专属规则 */
form progress::-moz-progress-bar { 
  background-color: orange; 
}

form {
    progress::-webkit-progress-value { background-color: orange; }

    input {
      border: 1px solid gray;
      min-height: 35px;
    }

    ... more css rules ...
} /* form */

方案2：用@supports做特性检测包裹Firefox规则

通过@supports检测Firefox专属的CSS特性，仅在Firefox中加载该规则。WebKit/Blink浏览器会直接忽略整个@supports块，不会影响后续嵌套规则的解析。

body {
  font-family: sans-serif;
  font-size: 16px;
}

form {
    progress::-webkit-progress-value { background-color: orange; }
    
    /* 仅Firefox会识别并加载此块内的规则 */
    @supports (-moz-appearance: none) {
        progress::-moz-progress-bar { background-color: orange; }
    }

    input {
      border: 1px solid gray;
      min-height: 35px;
    }

    ... more css rules ...
} /* form */

方案3：配合CSS变量优化代码（可选）

将进度条颜色定义为全局变量，减少重复代码，同时结合上述方案使用，方便后续统一修改样式：

:root {
  --progress-fill-color: orange;
}

body {
  font-family: sans-serif;
  font-size: 16px;
}

form {
    progress::-webkit-progress-value { background-color: var(--progress-fill-color); }
    
    @supports (-moz-appearance: none) {
        progress::-moz-progress-bar { background-color: var(--progress-fill-color); }
    }

    input {
      border: 1px solid gray;
      min-height: 35px;
    }

    ... more css rules ...
} /* form */

内容的提问来源于stack exchange，提问作者HomeSlice