web-dev-qa-db-ja.com

style = "color：#FFF;" ＃F0F0F0または#FFFFFFとしてレンダリングしますか？

「短縮16進数」を使用して色を定義する場合（style="color: #FFF;"）、速記を拡張するための定義された方法はありますか？ （style="color: #F0F0F0;"またはstyle="color: #FFFFFF;"）

すべてのブラウザで同じ展開方法が使用されていますか？この動作は仕様によるものですか（もしそうなら、どこで定義されていますか）？展開方法はおそらくCSS 1/2/3で異なりますか？

「ほとんどのブラウザ」が#FFFFFF。

この短縮表記は許可されているが、展開方法が異なる他の場所（HTML/CSS以外）はありますか？

私はこれらの質問に対する答えを知らなかったので、略記法のヘックスの使用を常に避けてきました...

htmlcsscolorshex
60
Dolph

CSS 2.1（ http://www.w3.org/TR/CSS2/syndata.html#value-def-color ）：

3桁のRGB表記（#rgb）は、ゼロを追加するのではなく、数字を複製することで6桁の形式（#rrggbb）に変換されます。たとえば、＃fb0は＃ffbb00に展開されます。これにより、白（#ffffff）を短い表記（#fff）で指定できるようになり、ディスプレイの色深度への依存関係がなくなります。

CSS 1 、 CSS の文言は同じです。 CSS 4 draft は同様のことを言っています。

Internet Explorer および Firefox のドキュメントでは、同じメソッドが指定されています。

実際の例として、このスニペットをご覧ください。3<div>sのスタイル

div { width: 100px; height: 100px;  }
<div style="background-color:#f0f0f0;">#f0f0f0</div>
<div style="background-color:#fff;">#fff</div>
<div style="background-color:#ffffff;">#ffffff</div>

Mac OS X 10.6、すべてのFirefox 3.6では、Opera 10.10、Safari 4は#fff as #ffffff。

Behavior in different browsers

ブラウザまたは標準が将来この拡張から逸脱したいと考える理由はわかりません。なぜなら色#ffffffは、#f0f0f0。

75
kennytm

CSS2仕様 セクション4.3.6色：

RGBカラーモデルは、数値のカラー仕様で使用されます。これらの例はすべて同じ色を指定しています。

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }      
em { color: rgb(100%, 0%, 0%) }

16進表記のRGB値の形式は、3つまたは6つの16進文字が直後に続く「＃」です。 3桁のRGB表記（#rgb）は、ゼロを追加するのではなく、数字を複製することで6桁の形式（#rrggbb）に変換されます。たとえば、＃fb0は＃ffbb00に展開されます。これにより、白（#ffffff）を短い表記（#fff）で指定できるようになり、ディスプレイの色深度への依存関係がなくなります。

最新のブラウザはすべてCSSをサポートしているため、WebサイトやWebアプリケーションでこのように機能すると想定できます。

17
Brian R. Bondy

IE8、Firefox 3.6、およびGoogle Chrome 5.0ベータ版でのテストでは、3つのブラウザーすべてが16進数を繰り返します。

  • 000は000000を生成します
  • FFFはFFFFFFを生成します
  • 876は887766を生成します

...など。

6
Kevin Ivarsen

#FFFを#FFFFFFに展開しないブラウザは知らない。私はあなたがそうではないと思うものに興味があります-または、いくつかは#FFFを表示し続けるということですか？

しかし、私が理解したように、＃FFFは有効な略記であり、＃F0も（有効に）＃F0F0F0に展開されます。

これは興味深いかもしれません http://www.websiteoptimization.com/speed/Tweak/hex/

1
grimorde

誰かに何か15が欲しいと言ってから、255で現れると期待するのと同じであるので、人々にこれをしないように勧めるべきだと思います。これが私にとってのWebデザインの「そこ」です。

1
Jaryn