Compatibilité des contrôles de style et exemples d'éléments de progression en HTML5

1. Compréhension de base de l'élément de progression

Interface utilisateur de base
L'élément de progression appartient à la famille HTML5, qui fait référence à la barre de progression. Pris en charge par IE10+ et d'autres navigateurs fiables. Ce qui suit est un code simple :

<progress>o(︶︿︶)o</progress>

Effet :

est une barre de progression très impressionnante. Certaines personnes se demandent : "Oh~ pourquoi est-ce que je vois une émoticône de personnage ?" Eh bien... Je ne peux que vous dire : "Je te méprise, es-tu si réticent à utiliser un navigateur plus fiable ?!" 🎜 >Cet effet par défaut a des effets différents selon les navigateurs, comme le montrent les captures d'écran ci-dessous (sous Windows 7) :

Collecte et dispersion faciles des particules IE10. l'effet est assez impressionnant.

Attributs de base

max, valeur,

position
et étiquettes.max fait référence à la valeur maximale. Si elle est définie par défaut, la plage de valeurs de progression est de 0,0 à 1,0. Si elle est définie sur max=100, la plage de valeurs de progression est de 0 à 100.

value est la valeur si max=100, value=50, les progrès sont juste à moitié. La présence ou l'absence de l'attribut value détermine si la barre de progression est déterministe. Quelle est la signification ? Par exemple, n'a aucune valeur et est incertain, donc sous le navigateur IE10, il ressemble à une boucle infinie d'animation de points, une fois qu'il y a un attribut de valeur (même s'il n'a aucune valeur) ; , tel que , est également considéré comme confirmé, et l'animation du point virtuel passe en mode fée——>La barre change, comme le montre la capture d'écran ci-dessous :

La position est un attribut en lecture seule. Comme son nom l'indique, la position de progression actuelle est la valeur / valeur maximale. Si la barre de progression est incertaine, la valeur est -1.

labels est également un attribut en lecture seule, et ce qui est obtenu, ce sont les éléments d'étiquette pointant vers l'élément de progression. Par exemple, document.querySelector("progress").labels renvoie une HTMLCollection. Ce qui suit est une capture d'écran d'un de mes tests (prise à partir du navigateur Opera, actuellement FireFox18.0.2 et IE10 ne semblent pas le prendre en charge) :

2. Contrôle du style de l'élément de progression

Tout d'abord, il est très intéressant que quel que soit le navigateur moderne, tant que la bordure est longue. ou le style de couleur d'arrière-plan est défini, la barre de progression L'élément deviendra un style plat.

L'énorme différence dans le contrôle du style

Vous pouvez dire d'après le titre que cette section est l'endroit le plus formidable. Naturellement, le visage public n'a rien à dire. C'est précisément à cause de l'énorme différence dans le contrôle CSS du style des éléments de progression qu'il est devenu un sujet de discussion.

J'ai fait le tri dans mon esprit, et c'est si difficile de l'exprimer clairement en quelques mots~ Demander de l'aide à l'aide étrangère, Dangdangdang—— M. Table.

De manière générale, un élément de barre de progression est divisé en deux parties, la barre d'arrière-plan et la barre de progression complétée.

2. Contrôle du style de l'élément de progression

Tout d'abord, il est très intéressant que quel que soit le navigateur moderne, tant que le style de bordure ou de couleur d'arrière-plan est défini, la progression L'élément de barre deviendra un style plat.

L'énorme différence dans le contrôle du style

Vous pouvez dire d'après le titre que cette section est l'endroit le plus formidable. Naturellement, le visage public n'a rien à dire. C'est précisément à cause de l'énorme différence dans le contrôle CSS du style des éléments de progression qu'il est devenu un sujet de discussion.

J'ai fait le tri dans mon esprit, et c'est si difficile de l'exprimer clairement en quelques mots~ Demander de l'aide à l'aide étrangère, Dangdangdang—— M. Table.

De manière générale, un élément de barre de progression est divisé en deux parties, la barre d'arrière-plan et la barre de progression complétée.

Conclusion :

Utilisez progress{border:*; background:*;} pour contrôler la bordure et la couleur d'arrière-plan de l'élément de progression dans tous les navigateurs. Parmi eux, le navigateur Chrome est un cas particulier. Les paramètres directs ne peuvent pas voir l'effet (il est en fait pris en charge). La raison sera expliquée ci-dessous.

Navigateur FireFox

La barre de progression terminée est représentée par progress::-moz-progress-bar { }, qui est l'opposé du navigateur Chrome.

Navigateur Chrome

Les performances de Chrome sont évidemment différentes de celles de FireFox. La structure de son élément de progression semble être la suivante :

progress┓
    progress-value
    progress-bar

其中，progress-bar指全部的进度，progress-value指已经完成的进度。因此，Chrome浏览器下，已经完成的进度条，使用progress::-webkit-progress-value { }表示， FireFox浏览器下是*-bar. 而progress-bar默认含有背景色，因此，我们需要如下设置，以自定义背景色：

progress::-webkit-progress-bar { background: *; }

这也很好地解释了上面的一个疑问？progress{background:*；}为什么不能让progress元素背景色改变呢？不是不能改变，而是被progress-bar这个内部元素给覆盖了，当我们设置：progress::-webkit-progress-bar { background: transparent; }的时候，progress{background:*；}设置的背景色就会显露出来。

4.Opera浏览器
Opera似乎没有什么::-o-progress-*{}的用法，因此，Opera浏览器，其已完成进度的背景色是无解的，只能使用默认的颜色——我的浏览器是和谐绿色。

IE10浏览器
IE10浏览器很奇葩的，它也可以设置已完成进度的背景色，使用的是color属性，progress{color:*;} .

因此，综上全部，我们可以使用类似下面的CSS实现最大兼容的自定义进度条样式：

progress {
    width: 160px;
    border: 1px solid #0064B4;  
    background-color:#e6e6e6;
    color: #0064B4; /*IE10*/}
progress::-moz-progress-bar { background: #0064B4; }
progress::-webkit-progress-bar { background: #e6e6e6; }
progress::-webkit-progress-value  { background: #0064B4; }

您可以狠狠地点击这里：progress元素样式自定义最大兼容demo

三、实例效果展示

进度条可以用在页面loading中（如gmail），或者文件上传进度，或者视频播放进度等。

为演示上面的自定义样式，现在整合我之前折腾的HTML5文件上传，做了个demo。

您可以狠狠地点击这里：文件上传进度与progress元素的样式控制demo

选择一个图片（可以大一点的），然后点击按钮上传（最好可以限速），就可以清楚看到进度变化，如下截图：

关键部分的代码：

onProgress: function(file, loaded, total) {
    var percent = Math.round(loaded / total * 100);    $("progress").val(percent);}

直接value赋值就有了进度动画效果。传统实现需要div嵌套，以及width控制等。优劣伯仲，一目了然。

四、淡淡的结束语

吃了个晚饭，不记得原本想要讲的结束语了。想想~~恩……IE6~IE9浏览器不支持progress元素，我们可以通过嵌套其他元素的方法进行兼容，例如：

<progress><div>这里写兼容IE的东东</div></progress>

支持progress的浏览器会忽略innerHTML，因此，内部的div可以放心大胆进行样式处理，兼容低版本IE浏览器。

好的兼容做法
对于IE6~IE9浏览器，模拟进度条效果，如果不使用背景图片的话，一般而言，至少需要2层标签。我们需要再额外的徒增2层标签？？No, no, no! 外部的progress标签已经替我们做了一半的工作，因为，progress所对应的CSS样式，也是IE6~9浏览器需要的（高宽，边框色背景色什么的），因此，我们只需要再额外塞1层标签就可以了，这个标签对应的就是已经完成的进度条的样式。

例如，如下的HTML设置：

我们需要怎样的CSS代码呢？如下，标红的部分与兼容处理所增加的，都是无伤大雅，不需要hack补丁的。

progress {    display: inline-block;
    width: 160px;
    height: 20px;
    border: 1px solid #0064B4;  
    background-color:#e6e6e6;
    color: #0064B4; /*IE10*/}/*ie6-ie9*/progress ie {
    display:block;
    height: 100%;
    background: #0064B4;
}progress::-moz-progress-bar { background: #0064B4; }
progress::-webkit-progress-bar { background: #e6e6e6; }
progress::-webkit-progress-value  { background: #0064B4; }

当然，progress以及自定义的ie元素，ie6~8都是不认识的，我们需要打个动态补丁，如下：

if (typeof window.screenX !== "number") {
    document.createElement("progress");
    document.createElement("ie");
}

于是，progress{}, ie{}的样式就能被低版本IE识别，同时，单纯作为普通元素处理（现代浏览器则会把ie标签直接抹杀）。

耳听为虚眼见为实，您可以狠狠地点击这里：progress元素兼容IE6~IE9 demo

例如，IE6浏览器下，就是下面这个样子：

如现代浏览器们长得一个模样。因此，目前，在实际项目中使用progress元素是完全可行的，你还不赶快试试！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!