読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

import { Fun } from 'programming'

ちょっと待って!#FFF と #FFFFFF って同じ色??

どうも!chuckです。

今日コーディングしていて気になりました。

 

#FFF と #FFFFFFは同じなのか??と。

 

なので、軽く調べてみました。

 

 

なんのこっちゃ(ヽ´ω`)という方向け↓

スタイルシート[CSS]/CSSの基本/CSSの色指定 - TAG index Webサイト

 

まずはググらずに確認します。

 

自作してみる

HTMLでdivタグを2つ用意。

f:id:chuck0523:20150918001407p:plain

 

見やすくするために、まずはbodyを黒くします。

f:id:chuck0523:20150918001542p:plain

 

そしてdivタグにそれぞれ、以下のスタイルを割り当てます。

f:id:chuck0523:20150918001456p:plain

こっちが#FFF

 

f:id:chuck0523:20150918001513p:plain

こっちが#FFFFFF

 

そしてブラウザで確認するとこのとおり。

f:id:chuck0523:20150918001623p:plain

ふむ。。。同じに見えますね。

 

危惧されたこと

僕はてっきり、#FFF が #F0F0F0 になってしまうのでは?!と思いました。

なので、#F0F0F0 も用意してみます。

 

divタグを増設。

f:id:chuck0523:20150918001752p:plain

 

背景色が#F0F0F0になるようにスタイルを充てます。

f:id:chuck0523:20150918001833p:plain

 

いざ!ブラウザで確認!

f:id:chuck0523:20150918001906p:plain

おっ!

一番右だけ色が違いますね!これがF0F0F0の色なんですね!

 

というわけで、#FFFはきちんと#FFFFFFに変換されていました。

 

 

 

 

 

 

safariでは。

というわけで、クロスブラウザ確認。

 

ローム

f:id:chuck0523:20150918002139p:plain

ロームでも#FFF=#FFFFFFですね

 

FireFox

f:id:chuck0523:20150918002216p:plain

FireFoxでも同様です。

 

Opera

f:id:chuck0523:20150918002533p:plain

変わらず。

 

IE

未確認

 

 

結論

というわけで、モダンブラウザでは、#FFFは#F0F0F0ではなく#FFFFFFとして表示してくれるようです。

 

一応調べた

stackoverflow.com

 

f:id:chuck0523:20150918002857p:plain

 

ふむふむ。W3Cにしっかり書いてあるようですね!

これ->Syntax and basic data types

 

例えば#FB0と指定したら、#FFBB00となるようです。

 

書いたコード

gist92fa0c29a75ed85f6cf1