7

<meter>HTML5仕様で呼ばれる新しいタグがあります。明確に理解できる 3 つの属性がありますが、それらの機能と視覚効果はそれほど明確ではありません。それらは高く、低く、最適です。

赤や黄色のメーター要素をいくつか見ましたが、これらの色はそれらの属性に関連していると思います。しかし、方法がわかりません。

誰かが私のためにそれを説明できますか?

4

2 に答える 2

10

仕様は実際には色を指定していません。デフォルトのスタイルについては、Firefox 22 および Safari 6 では、

  • 場合low < optimum < high:

    • 値が <lowまたは >の場合high、黄色で表示されます。
    • それ以外の場合は緑 (最適は効果なし)。

  • 場合low < high < optimum:

    • 値が の場合、< low赤色で表示されます。
    • 値が の場合、< high黄色で表示されます。
    • そうでなければ緑。

  • 場合optimum < low < high:

    • 値が の場合、> high赤色で表示されます。
    • 値が の場合、> low黄色で表示されます。
    • そうでなければ緑。

これは実際に仕様が言ったことです：

ゲージの領域の UA 要件: 最適点が低境界または高境界、またはそれらの間の任意の場所に等しい場合、ゲージの低境界と高境界の間の領域を最適領域として扱う必要があります。すべて、次善として扱われなければなりません。それ以外の場合、最適点が下限よりも小さい場合、最小値と下限の間の領域を最適領域として処理する必要があり、下限から上限までの領域を準最適領域として処理する必要があります。 、残りの領域はさらに劣る領域として扱われなければなりません。最後に、最適点が高い境界よりも高い場合、状況は逆になります。高い境界と最大値の間の領域は、最適な領域として扱われる必要があります。

最適な領域には緑、次善の領域には黄色、さらに悪い領域には赤を使用します。

<meter>ところで、要素のスタイルを設定できます( HTML5 <meter> タグのスタイルを設定する方法を参照)。

于 2013-07-17T18:40:36.090 に答える
1

これら 3 つのセグメント (低、最適、高) の機能と視覚効果を理解することは、メーター要素で指定された属性とその値に依存します。セグメントのタイプに応じて、同じ値を異なる色 (緑/黄/赤) で表示できます。

メーターの色、値、セグメントを明確に理解するには、このビデオをご覧ください

于 2014-01-30T10:37:27.380 に答える