关于html5中progress标签的CSS样式总结和浏览器内核以及私有前缀

HTML5中新增了progress标签，用来表示进度条

<!-- 进度条 -->
<progress class="progress" value="20" max="100"></progress>

显示效果如下：

其中CSS样式代码如下：

.progress{
    width: 300px;
    height: 20px;
    border: none;
    background-color:#d7d7d7;
}
.progress::-webkit-progress-bar{
     background-color:#d7d7d7;
}
progress::-webkit-progress-value{
     background-color:rgb(86,199,99);
}

解释下，在Chrome浏览器中

progress是以如下结构渲染的

progress

↓

::-webkit-progress-bar 全部进度

↓

::-webkit-progress-value 已完成进度

通过这两个伪元素为其添加样式。

但在别的浏览器中又有所不同，如IE10，这两个伪元素不起作用，直接用color样式可以修改已完成进度的颜色，而全部进度为background

FireFox中progress-bar为已完成进度，background为全部进度,而Opera中对这个样式只能为浏览器默认样式。

因此兼容性写法可以考虑如下:

        .progress{
            width: 300px;
            height: 20px;
            border: none;
            background-color:#d7d7d7;
            color:rgb(86,199,99);
        }
        .progress::-webkit-progress-bar{
            background-color:#d7d7d7;
        }
        progress::-webkit-progress-value{
          background-color:rgb(86,199,99);
        }
        .progress::-moz-progress-bar{
            background-color:rgb(86,199,99);
        }

浏览器内核以及私有前缀：

根据不同的内核，一些私有属性的css前缀不一样

Gecko内核　　 css前缀为"-moz-"　　火狐浏览器

WebKit内核　　css前缀为"-webkit-" Comodo Drangon(科摩多龙)，苹果，搜狗高速浏览器3，快快浏览器，枫树浏览器，云游浏览器，360极速浏览器，世界之窗极速版，SRWare Iron，猎豹浏览器，RockMelt，QQ浏览器

Presto内核 　　 css前缀为"-o-" Opera(欧朋),NDSBrowser

Trident内核　　css前缀为"-ms-" IE，360极速浏览器，猎豹安全浏览器，傲游浏览器，百度浏览器，世界之窗浏览器，2345浏览器，腾讯TT，淘宝浏览器，采编读浏览器，搜狗高速浏览器，阿云浏览器，瑞星安全浏览器，Slim Browser，GreenBrowser、爱帆浏览器，115浏览器，155浏览器，114浏览器，N氧化碳浏览器，糖果浏览器，彩虹浏览器，瑞影浏览器，勇者无疆浏览器，闪游浏览器，蚂蚁浏览器，飞腾浏览器，速达浏览器，佐罗浏览器，海豚浏览器（iPhone/iPad/Android），UC浏览器

Trident内核 css前缀为"-khtml-"：苹果浏览器之前的版本，后改为WebKit内核

*因不同浏览器，版本原因，内核数量不一样，所以以上内核说明浏览器会出现多次，详见百度百科中浏览器内核一文。

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg); /*为nothing*/

若有不足请多多指教！希望给您带来帮助！参考文献：https://www.cnblogs.com/bloom-in-dream/p/6885285.html

关于html5中progress标签的CSS样式总结和浏览器内核以及私有前缀

浏览器内核以及私有前缀：

猜你喜欢