IE9で(ついでにIE7、IE8でも)text-shadow (jQuery移植版)
text-shadow for MSIE のjQueryプラグインっぽい移植版
jQuery版の開発は終了しました。 新版をご利用下さい(IE9のみ対応)。
asamuzaK.jp : IE9で(ついでにIE7、IE8でも)text-shadowを、jQueryプラグインっぽく移植してみた。 すでにjQueryを利用している人はこちらの方がいいかもしれないが、中途半端な移植しかしてないのでそうともいいきれないw
効能とスクリプトソース
セレクタ判別部分をjQuery(Sizzle)に丸投げしたので、これまでのスクリプトにあった制限事項の多くが解消されている。 具体的には…
- 「複数クラス(.classA.classB)」に対応
- 「(一部の)疑似要素/クラス(:pseudo)」に対応
- 「(一部の)E[attr]」に対応
- 「E > F > G」「E F + G」など、多階層なセレクタの組み合わせに対応
…など。 現時点ではスタンドアローン版でも「複数クラス」「E:pseudo」「E[attr]」「E > F > G」「E F + G」に対応済み
さらに、セレクタ記述上の制限の多くが解消されたので、おまけの機能として、スタイルシートからの自動読み込みも付与してみた。 つまり、スクリプトを設置するだけでOK。 こちらもスタンドアローン版にも組み込み済み
ただし
- スタイルシートをいちいち走査するため、実行速度の低下を招きかねない
- text-shadowの値に「!important」があっても、スクリプトでは吸い出せないため、せっかくの「!important」が無視されてしまう。テストケース
(getPropertyPriority()で取ろうとしても、IE9はtext-shadowなど未知のプロパティについてはnull値を返してくる。IE8以下はそもそもgetPropertyPriority()に未対応) - jQueryが未対応の疑似要素などがあった場合は、影が適用されない
というデメリットがあるので、あまりオススメはしないw。
自分で設定を記述した方が吉。
…にもかかわらず、初期動作を自動読み込みにしてあったりするという(爆
やっぱ諸処考えて、デフォルトではオフにしておくことにした。使う場合は、当該箇所のコメントマークを外してどうぞ。
もし試してみてダメだったら、あらためて手動で値を設定してください
一応、CSS自動読み込みをちゃんと適用させるための対策(小細工)を載せておきます。
バージョン | バグ | 回避策 |
---|---|---|
MSIE7~9共通 | text-shadowなど未知のプロパティでは'!important'指定が読み込まれない | '!important'をtext-shadowには指定しないw |
MSIE7~8共通 | @media handheld, printなどの値も読み込んで上書き適用してしまう。
例えば、
@media screen { E { text-shadow : 1px 1px 1px red; } } @media print { E { text-shadow : none; } }の順にCSS内で指定されていたら、結果的に"text-shadow:none;"が有効になって影が適用されない かといって、@mediaにはDOMを通じてアクセスできない |
MSIE独自実装のConditional Comment
<!--[if ie 7]> <link rel="stylesheet" href="ie7.css" /> <![endif]-->を使って、IE7/8向けのCSSの中でもあらためてtext-shadowを指定しておく そして、そのIE7/8向けCSSは、(link要素などによってリンクされた)CSSの後ろに置くこと または、IE7/8のバグを考慮しながら、@media の順番を入れ替えておく(面倒>ってConditional Commentとどっちもどっちかw) |
MSIE7 | @media queries を無視して、一切合切かまわずdocument.styleSheetsの値を取りに行く。 なお、IE8は@media queriesによって指定されたブロックは丸ごと無視する(仕様的には正しい動作) | 同上 |
スクリプトソース
すでに開発は終了しました。 新版をご利用下さい(IE9のみ対応)。
"IE9で(ついでにIE7、IE8でも)text-shadow (jQuery移植版)"へのTwitter上でのコメントやRT
9件のツイートがあります。
ツイート 1
Bug fix. カッコの抜けが1箇所あった。 asamuzaK.jp : IE9で(ついでにIE7、IE8でも)text-shadow (jQuery移植版) http://t.co/aYXFVuCe via @asamuzakjp
ツイート 2
text-shadow for MSIE。イベントハンドラのサンプルをいい加減に書いてたら、!importantがあったら適用されないことを発見。ムキになって修正w http://t.co/uWLlHGCJ http://t.co/aYXFVuCe via @asamuzakjp
ツイート 3
asamuzaK.jp : IE9で(ついでにIE7、IE8でも)text-shadow (jQuery移植版) http://t.co/784JvZCR
ツイート 4
IE9で(ついでにIE7、IE8でも)text-shadowを久々に更新。 getCompStyle関数で、IE9がquirksモードで動いていた場合にエラーが発生していたことに対処。 http://t.co/uWLha6BP http://t.co/aYXBnUBk
ツイート 5
IE9で(ついでにIE7、IE8でも)text-shadowを久々に更新。 getCompStyle関数で、IE9がquirksモードで動いていた場合にエラーが発生していたことに対処。 http://t.co/uWLha6BP http://t.co/aYXBnUBk
ツイート 6
IE9で(ついでにIE7、IE8でも)text-shadowを久々に更新。 getCompStyle関数で、IE9がquirksモードで動いていた場合にエラーが発生していたことに対処。 http://t.co/uWLha6BP http://t.co/aYXBnUBk
ツイート 7
text-shadow for MSIE jQuery版 バグ込みの開発版のソースを間違えてあげていた(汗 慌てて修正 http://t.co/aYXBnUBk
ツイート 8
こっちもだった(滝汗 http://t.co/uWLha6BP RT @asamuzakjp: text-shadow for MSIE jQuery版 バグ込みの開発版のソースを間違えてあげていた(汗 慌てて修正 http://t.co/aYXBnUBk
ツイート 9
サイトで公開しているサンプルソースについて、一部をMIT/GPLのデュアル・ライセンスとすることにした http://t.co/ZLBCKDYP http://t.co/FMZwB1v0 http://t.co/uWLha6BP http://t.co/aYXBnUBk など