HTML5におけるprogress要素の詳細な導入と互換処理

この記事では、progress要素の基本的な属性と互換処理を中心に紹介します。進行要素を紹介した後、次のケースも理解するのに役立ちます。 ,

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

1. 基本 UI

progress 要素は HTML5 ファミリーに属し、プログレス バーを参照します。 IE10+ およびその他の信頼できるブラウザーでサポートされています。以下は簡単なコードです:

XML/HTML コードはコンテンツをクリップボードにコピーします

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

これは非常に興味深い進行状況バーです。 「ああ、なぜキャラクターの絵文字が表示されるの?」と疑問に思う人もいるかもしれませんが、「あなたを軽蔑します。なぜ、より信頼性の高いブラウザを使用することにそれほど消極的ですか?!」としか言えません。はデフォルトです。以下のスクリーンショット (Windows 7 の場合) に示すように、効果はブラウザーによって異なります。

互換性

IE10 パーティクルのゆっくりとした収束効果は非常に目を引きます。

2. 基本属性

max、value、

、ラベル (1) max は最大値を指します。デフォルトの場合、進行状況の値の範囲は 0.0 ～ 1.0 です。max=100 に設定されている場合、進行状況の値の範囲は 0 ～ 100 です。

(2) の値は、max=100、value=50 の場合の値です。進捗はちょうど半分です。 value 属性の有無によって、進行状況バーが決定的であるかどうかが決まります。どのような意味です？たとえば、 には値がなく、不確実であるため、IE10 ブラウザではドット アニメーションの無限ループのように見えますが、値属性が存在すると (値がなくても)、 < Progress value> なども確実とみなされます。ドットアニメーションはフェアリーモードに入ります—>バーが変化します

(3) 名前のとおり、読み取り専用の属性です。つまり、現在の進行位置は value/max の値です。プログレスバーが不確実な場合、値は -1 です。

(4) ラベルも読み取り専用属性であり、取得されるのはプログレス要素を指すラベル要素です。たとえば、

.querySelector("progress").labels は HTMLCollection を返します。以下は私のテストの 1 つのスクリーンショットです (Opera ブラウザーから取得したものですが、現在 FireFox18.0.2 と IE10 はサポートしていないようです)。 。 progress要素の互換性処理の例

htmlコード

XML/HTMLコード コンテンツをクリップボードにコピー

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

css互換コード

CSSコード コンテンツをクリップボードにコピー

1.progress {
2. display: inline-block;
3. width: 160px;
4. height: 20px;
5. border: 1px solid #0064B4;
6. background-color:#e6e6e6;
7. color: #0064B4; /*IE10*/
8.}
9./*ie6-ie9*/
10.progress ie {
11. display:block;
12. height: 100%;
13. background: #0064B4;
14.}
15.progress::-moz-progress-bar { background: #0064B4; }
16.progress::-webkit-progress-bar { background: #e6e6e6; }
17.progress::-webkit-progress-value { background: #0064B4; }

これらのケースを読んだ後、私は信じていますさらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

以上がHTML5におけるprogress要素の詳細な導入と互換処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。