Hatena::ブログ(Diary)

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

2008-09-28

ブラウザ毎の 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.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○

SafariとChromeは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○

Permalink | コメント(0) | トラックバック(1) | 04:22 ブラウザ毎の getComputedStyle の戻り値を含むブックマーク ブラウザ毎の getComputedStyle の戻り値のブックマークコメント

コメント一覧

スパム対策のためのダミーです。もし見えても何も入力しないでください
 ゲスト
コメントを書くには、なぞなぞ認証に回答する必要があります。

トラックバック - http://d.hatena.ne.jp/uupaa/20080928/1222543331
リンク元
はてなスターカウンター
はてなスターカウンター
カレンダー
<< 2008/09 >>
日 月 火 水 木 金 土
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
WEB+DB Vol.57〜 Vol.61で連載してました
Pogoplug
TopHatener
プロフィール

uupaa

uupaa はてなダイアリープラス利用中

http://twitter.com/uupaa

uupaa’s profile
カテゴリー
最新タイトル
最近のトラックバック
最近書いたコメント
最近のコメント