Hatena::ブログ(Diary)

latest log このページをアンテナに追加 RSSフィード

2008-09-28

ブラウザ毎の getComputedStyle の戻り値

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

getComputedStyle() は、描画に使われるスタイルに(近い)値を取得する便利なメソッドです。

currentStyle は IEOpera で使用できる 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.149rgb(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.149rgb(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.1490px 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.1499px 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.1490px 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 normal0 0% 0.1px0.1% 0.01px-0.1px評価
Firefox2 normal 0px normal0.133333pxnormal0px-0.133333px
Firefox3 normal 0px normal0.1px normal0.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.1490px 0px 0px 0px 0px 0px 0px
IE6 normal 0px normal0px normal0px 0px
IE8β2 normal 0px normal0.1px normal0.01px -0.1px

white-space:

Browser 未指定normalprenowrap評価
Firefox2 normalnormalprenowrap
Firefox3 normalnormalprenowrap
Opera9.27 normalnormalprenowrap
Opera9.6β normalnormalprenowrap
Safari3.1 normalnormalprenowrap
Chrome0.2.149normalnormalprenowrap
IE6 normalnormalnormalnowrapバグ
IE8β2 normalnormalnowrapnowrapバグ

max-width:

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

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

margin-top:

Browser auto0 0.1px0.01px -0.1px-0.01px0%0.1%評価
Firefox2 0px 0px0.133333px0px -0.133333px0px 0px0.733333px
Firefox3 0px 0px0.1px 0.0166667px-0.1px -0.0166667px0px1.1px
Opera9.27 auto 0px0px 0px 0px 0px 0px0px
Opera9.6β auto 0px0px 0px 0px 0px 0px0px
Safari3.1 0px 0px0px 0px 0px 0px 0px0px
Chrome0.2.1490px 0px0px 0px 0px 0px 0px0px
IE6 auto 0px0px 0px 0px 0px 0% 0.1%
IE8β2 auto 0px0.1px 0.01px -0.1px -0.01px 0% 0.1%

voice-family:

Browser 未指定malefemalechildhoge評価
Firefox2
Firefox3
Opera9.27
Opera9.6β
Safari3.1 undefinedundefinedundefinedundefinedundefined
Chrome0.2.149undefinedundefinedundefinedundefinedundefined
IE6 undefinedundefinedundefinedundefinedundefined
IE8β2 undefinedundefinedundefinedundefinedundefined

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

cursor:

Browser 未指定autodefaultpointertext評価
Firefox2 autoautodefaultpointertext
Firefox3 autoautodefaultpointertext
Opera9.27 defaultdefaultdefaultpointertext×
Opera9.6β defaultdefaultdefaultpointertext×
Safari3.1 autoautodefaultpointertext
Chrome0.2.149autoautodefaultpointertext
IE6 autoautodefaultpointertext
IE8β2 autoautodefaultpointertext

text-indent:

Browser 未指定00.1px0.01px-0.1px0%0.1%0.01%評価
Firefox2 0px0px0.133333px 0px-0.133333px0px0.733333px0.0666667px
Firefox3 0px0px0.1px0.0166667px-0.1px0px1.1px0.1px
Opera9.27 0px0px0px0px0px0px0px0px×
Opera9.6β 0px0px0px0px0px0px0px0px×
Safari3.1 0px0px0px0px0px0%0.09375%0.0078125%
Chrome0.2.1490px0px0px0px0px0%0.09375%0.0078125%
IE6 0pt0px0px 0px 0px 0%0.1%0.01%
IE8β2 0pt0px0.1px0.01px-0.1px0%0.1%0.01%

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

Browser 未指定autoleftcenterrightdistribute-letterdistribute-spaceline-edge評価
Firefox2 undefinedundefinedundefinedundefinedundefinedundefinedundefinedundefined×
Firefox3 undefinedundefinedundefinedundefinedundefinedundefinedundefinedundefined×
Opera9.27 undefinedundefinedundefinedundefinedundefinedundefinedundefinedundefined×
Opera9.6β undefinedundefinedundefinedundefinedundefinedundefinedundefinedundefined×
Safari3.1 undefinedundefinedundefinedundefinedundefinedundefinedundefinedundefined×
Chrome0.2.149undefinedundefinedundefinedundefinedundefinedundefinedundefinedundefined×
IE6 autoautoleftcenterrightdistribute-letterdistribute-spaceline-edge
IE8β2 autoautoleftcenterrightdistribute-letterdistribute-spaceline-edge

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト

コメントを書くには、なぞなぞ認証に回答する必要があります。

Connection: close