ブラウザ毎の getComputedStyle の戻り値

JavaScript

currentStyle, getComputedStyle() が返す値を調べています。

getComputedStyle() は、描画に使われるスタイルに(近い)値を取得する便利なメソッドです。
currentStyle は IE と Opera で使用できる JavaScript プロパティですが、やる気の無い値(widthで"auto"を返す等)を返すことでも有名です。

color:

Browser gray skyblue #C0FFEE transparent 評価
Firefox2 rgb(128, 128, 128) rgb(135, 206, 235) rgb(192, 255, 238) rgb(0, 0, 0)
Firefox3 rgb(128, 128, 128) rgb(135, 206, 235) rgb(192, 255, 238) transparent ○
Opera9.27 #808080 #87ceeb #c0ffee #000000
Opera9.6β #808080 #87ceeb #c0ffee #000000
Safari3.1 rgb(128, 128, 128) rgb(135, 206, 235) rgb(192, 255, 238) rgba(0, 0, 0, 0) ○
Chrome0.2.149 rgb(128, 128, 128) rgb(135, 206, 235) rgb(192, 255, 238) rgba(0, 0, 0, 0) ○
IE6 gray skyblue #c0ffee
IE7 gray skyblue #c0ffee
IE8β2 gray skyblue #c0ffee

IE8とOpera9.6βはCSS3に対応できていません。Firefox2にも問題が見られます。

background-color:

Browser gray skyblue #C0FFEE transparent 評価
Firefox2 rgb(128, 128, 128) rgb(135, 206, 235) rgb(192, 255, 238) transparent ○
Firefox3 rgb(128, 128, 128) rgb(135, 206, 235) rgb(192, 255, 238) transparent ○
Opera9.27 #808080 #87ceeb #c0ffee transparent ○
Opera9.6β #808080 #87ceeb #c0ffee transparent ○
Safari3.1 rgb(128, 128, 128) rgb(135, 206, 235) rgb(192, 255, 238) rgba(0, 0, 0, 0) ○
Chrome0.2.149 rgb(128, 128, 128) rgb(135, 206, 235) rgb(192, 255, 238) rgba(0, 0, 0, 0) ○
IE6 gray skyblue #c0ffee transparent ○
IE7 gray skyblue #c0ffee transparent ○
IE8β2 gray skyblue #c0ffee transparent ○

outline:

Browser 0 solid invert 3px dotted black 6px dashed transparent 評価
Firefox2 0px solid rgb(random) 3px dotted rgb(0, 0, 0) 0px none rgb(0, 0, 0) バグ
Firefox3 0px none rgb(0, 0, 0) 3px dotted rgb(0, 0, 0) 6px dashed transparent
Opera9.27 0px solid invert 3px dotted #000000 6px dashed invert
Opera9.6β 0px solid invert 3px dotted #000000 6px dashed invert
Safari3.1 0px solid rgb(0, 0, 0) 3px dotted rgb(0, 0, 0) 6px dashed rgba(0, 0, 0, 0) ○
Chrome0.2.149 0px solid rgb(0, 0, 0) 3px dotted rgb(0, 0, 0) 6px dashed rgba(0, 0, 0, 0) ○
IE6 全てundefined 全てundefined 全てundefined
IE7 全てundefined 全てundefined 全てundefined
IE8β2 0px solid invert 3px dotted black 6px dashed transparent ○
Browser 9px outset #c0ffee 1em none invert 1pt 評価
Firefox2 9px outset rgb(192, 255, 238) 0px none rgb(random) 0px none rgb(random) バグ
Firefox3 9px outset rgb(192, 255, 238) 0px none rgb(0, 0, 0) 0px none rgb(0, 0, 0)
Opera9.27 9px outset #c0ffee 16px none invert 1px none invert
Opera9.6β 9px outset #c0ffee 16px none invert 1px none invert
Safari3.1 9px outset rgb(192, 255, 238) 0px none rgb(0, 0, 0) 0px none rgb(0, 0, 0)
Chrome0.2.149 9px outset rgb(192, 255, 238) 0px none rgb(0, 0, 0) 0px none rgb(0, 0, 0)
IE6 全てundefined 全てundefined 全てundefined
IE7 全てundefined 全てundefined 全てundefined
IE8β2 9px outset #c0ffee 1em none invert 1pt none invert
Browser 0 solid black 評価
Firefox2 0px solid rgb(0, 0, 0) ○
Firefox3 0px solid rgb(0, 0, 0) ○
Opera9.27 0px solid #000000 ○
Opera9.6β 0px solid #000000 ○
Safari3.1 0px solid rgb(0, 0, 0) ○
Chrome0.2.149 0px solid rgb(0, 0, 0) ○
IE6 全てundefined ×
IE7 全てundefined ×
IE8β2 0px solid black ○


Firefox2(2.0.0.17)のバグが見つかりました。IE8β2はoutlineは解析されているようですが、実際には描画されません。

word-spacing

Browser normal 0 0% 0.1px 0.1% 0.01px -0.1px 評価
Firefox2 normal 0px normal 0.133333px normal 0px -0.133333px ○
Firefox3 normal 0px normal 0.1px normal 0.0166667px -0.1px ○
Opera9.27 0px 0px 0px 0px 0px 0px 0px
Opera9.6β 0px 0px 0px 0px 0px 0px 0px
Safari3.1 0px 0px 0px 0px 0px 0px 0px
Chrome0.2.149 0px 0px 0px 0px 0px 0px 0px
IE6 normal 0px normal 0px normal 0px 0px ○
IE8β2 normal 0px normal 0.1px normal 0.01px -0.1px ○

white-space:

Browser 未指定 normal pre nowrap 評価
Firefox2 normal normal pre nowrap ○
Firefox3 normal normal pre nowrap ○
Opera9.27 normal normal pre nowrap ○
Opera9.6β normal normal pre nowrap ○
Safari3.1 normal normal pre nowrap ○
Chrome0.2.149 normal normal pre nowrap ○
IE6 normal normal normal nowrap バグ
IE8β2 normal normal nowrap nowrap バグ

max-width:

Browser none 0 100pt 10000px 評価
Firefox2 none 0px 133.333px 10000px ○
Firefox3 none 0px 133.333px 10000px ○
Opera9.27 none 0px 133px 10000px ○
Opera9.6β none 0px 133px 10000px ○
Safari3.1 none none none none バグ
Chrome0.2.149 none none none none バグ
IE6 undefined undefined undefined undefined ×
IE8β2 none 0px 100pt 10000px ○

SafariとChromeはmax-widthの値が取得できないが、max-widthによるサイズ制限は正常に行われる。

margin-top:

Browser auto 0 0.1px 0.01px -0.1px -0.01px 0% 0.1% 評価
Firefox2 0px 0px 0.133333px 0px -0.133333px 0px 0px 0.733333px
Firefox3 0px 0px 0.1px 0.0166667px -0.1px -0.0166667px 0px 1.1px ○
Opera9.27 auto 0px 0px 0px 0px 0px 0px 0px
Opera9.6β auto 0px 0px 0px 0px 0px 0px 0px
Safari3.1 0px 0px 0px 0px 0px 0px 0px 0px
Chrome0.2.149 0px 0px 0px 0px 0px 0px 0px 0px
IE6 auto 0px 0px 0px 0px 0px 0% 0.1%
IE8β2 auto 0px 0.1px 0.01px -0.1px -0.01px 0% 0.1% ○

voice-family:

Browser 未指定 male female child hoge 評価
Firefox2
Firefox3
Opera9.27
Opera9.6β
Safari3.1 undefined undefined undefined undefined undefined
Chrome0.2.149 undefined undefined undefined undefined undefined
IE6 undefined undefined undefined undefined undefined
IE8β2 undefined undefined undefined undefined undefined

ボイスをインストールしても状況は変わらず。残念

cursor:

Browser 未指定 auto default pointer text 評価
Firefox2 auto auto default pointer text ○
Firefox3 auto auto default pointer text ○
Opera9.27 default default default pointer text ×
Opera9.6β default default default pointer text ×
Safari3.1 auto auto default pointer text ○
Chrome0.2.149 auto auto default pointer text ○
IE6 auto auto default pointer text ○
IE8β2 auto auto default pointer text ○

text-indent:

Browser 未指定 0 0.1px 0.01px -0.1px 0% 0.1% 0.01% 評価
Firefox2 0px 0px 0.133333px 0px -0.133333px 0px 0.733333px 0.0666667px
Firefox3 0px 0px 0.1px 0.0166667px -0.1px 0px 1.1px 0.1px ○
Opera9.27 0px 0px 0px 0px 0px 0px 0px 0px ×
Opera9.6β 0px 0px 0px 0px 0px 0px 0px 0px ×
Safari3.1 0px 0px 0px 0px 0px 0% 0.09375% 0.0078125%
Chrome0.2.149 0px 0px 0px 0px 0px 0% 0.09375% 0.0078125%
IE6 0pt 0px 0px 0px 0px 0% 0.1% 0.01%
IE8β2 0pt 0px 0.1px 0.01px -0.1px 0% 0.1% 0.01%

ruby-align: (IEの先行実装でCSS非標準)

Browser 未指定 auto left center right distribute-letter distribute-space line-edge 評価
Firefox2 undefined undefined undefined undefined undefined undefined undefined undefined ×
Firefox3 undefined undefined undefined undefined undefined undefined undefined undefined ×
Opera9.27 undefined undefined undefined undefined undefined undefined undefined undefined ×
Opera9.6β undefined undefined undefined undefined undefined undefined undefined undefined ×
Safari3.1 undefined undefined undefined undefined undefined undefined undefined undefined ×
Chrome0.2.149 undefined undefined undefined undefined undefined undefined undefined undefined ×
IE6 auto auto left center right distribute-letter distribute-space line-edge ○
IE8β2 auto auto left center right distribute-letter distribute-space line-edge ○