HTML5 の progress 要素の簡単な理解と互換性の問題の分析

この記事では、HTML5 の progress 要素と互換性の問題の分析について簡単に紹介します。必要な方は参考にしていただければ幸いです。

1. progress 要素の基本的な理解

1. 基礎知識

progress 要素は、 HTML5 ファミリであり、プログレス バーを指します。 IE10 およびその他の信頼できるブラウザーでサポートされています。

注: Internet Explorer 9 以前では、 タグがサポートされていません。

ラベルはタスク

2 の進行状況 (プロセス) を示します。 ##max 、値、位置、およびラベル。

(1) max は最大値を指します。デフォルトの場合、進行状況の値の範囲は 0.0 ～ 1.0 です。max=100 に設定されている場合、進行状況の値の範囲は 0 ～ 100 です。max=100 の場合、value= がその値です。 50、進捗はちょうど半分です。 value 属性の有無によって、進行状況バーが決定的であるかどうかが決まります。

たとえば、 には値がなく、不確実であるため、IE10 ブラウザではドット アニメーションの無限ループのように見えます。 などの value 属性 (値がない場合でも) も確実であるとみなされます (3) Position は読み取り専用属性です。現在の進行状況の位置は値 /最大値です。プログレスバーが不確実な場合、値は -1 です。

(4) ラベルも読み取り専用属性であり、取得されるのはプログレス要素を指すラベル要素です。たとえば、document.querySelector("progress").labels は HTMLCollection を返します。

#2. Progress 要素の互換性処理の例

<progress max="100" value="20"><ie style="width:20%;"></ie></progress>

css 互換コード

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; }

関連の推奨事項: HTML5 の progress 要素の詳細な導入と互換性処理

以上がHTML5 の progress 要素の簡単な理解と互換性の問題の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。