IEでもCSS3ドロップシャドウのアップデート

category-icon

 こんばんは、martinです。以前、IEでもCSS3のドロップシャドウ(text-shadowbox-shadow)を使いたいということで、それを可能にするスクリプトを書きましたLink

 で、コメントLink で、IE7以下では、text-align:centerを指定すると影がすごくズレるというご指摘をいただきました(IE8では問題ない)。調べてみると、どうも「text-align:centerの指定が内包されるボックス要素にも適用されてしまう」という、懐かしいIEのバグが原因のようなので、それを修正しました。ついでに、画面のリサイズ(window.onresize)にも対応させました。以下のスクリーンショットのように、Firefox3.6など今時のブラウザに引けを取らない感じで、ボックスシャドウやテキストシャドウが可能になります。
Firefox3
Firefox3.6でのスクリーンショット。ChromeやOperaでもほぼ同じ。
IE7-compatible
IE8で、後方互換モード(IE7相当)表示。遜色ないレベルで再現。

実際のデモのページはこちら。→http://p2b.jp/demo/CSS3dropshadow.htmlLink

 使い方は簡単で、CSS3なページのHEAD要素内に、IE(IE9未満)だけ読み込むような外部JavaScript(実態はHTCファイル)を記述するだけです。最新版を添付しておきますね。

 <!--[if lt IE 9]>
  <script type="text/javascript" src="path/to/css3shadow.htc"></script>
 <![endif]-->

 デモページにもありますが、box-shadowinset(内側ドロップシャドウ)や複数のtext-shadow指定にも対応しています。

Box-shadow-inset
IE7互換モードでの表示。まぁ悪くない。

 スクリプト自体はそんなに凝ってるわけではないのですが、あまり気合の入った指定をしなければ、それなりに動いてくれるかなと思います

   

— posted by martin at 07:36 am   commentComment [7]  pingTrackBack [0]

この記事に対するコメント・トラックバック [7件]

scrollUp1. kanonji Website — 2010/10/18@11:01:30

http://f.hatena.ne.jp/kanonji/20101018110736Link

私のIE8だと適用されませんでした。
ちょっと理由に見当がつかないのですが、一応ご報告まで。
JavaScriptは動作しますし・・・ htcを無効にするような設定でもあったりするんでしょうか。

<script>google.load("jquery", "1");</script>
また、上記の様なhtml内部にJavaScriptを書いたscriptタグがあると、エラーが出てしまうようです。

if(relpath && relpath.indexOf('css3shadow.htc') !== -1){
14行目を上記の様にして対処してみました。

Owner Comment martin Website  2010/10/19@03:34:50

ご指摘ありがとうございます。以前、htcファイルに関して、

「インターネットオプション」⇒「セキュリティ」⇒「インターネット」⇒「レベルのカスタマイズ」内の「拡張子ではなく、内容によってファイルを開く」が「無効」であると実行されず、「有効」であると実行されるようです。

という情報を頂いたことがあります。参考になると良いのですが。

3. kanonji Website — 2010/10/19@14:36:52

ありがとうございます。
残念ながら「拡張子ではなく、内容によってファイルを開く」は有効でした。
とりあえずご報告だけで失礼します。

4. Kazz Website — 2010/10/30@17:38:46

はじめまして。
css3shadow.htcを設置した後に、ログを見ていて気づいたことがありましたのでお知らせします。
このスクリプトによって、サーバーへのHTTPリクエストが劇的に増えています。
スクリプトが再帰的に処理している時に発生しているのか、あるいは、ユーザーがスクロールなどをした時にその都度発生しているのかは、ログからは定かではありませんが、cssファイル、jsファイル、画像、htmlなど、同じファイルを(css3shadow.htc自身も含めて)極短時間に繰り返しリクエストしていることを確認しました。
サーバーにかなりの負荷をかけているのではないかと思います。
下記に、ログの一例を置いていますので、ご参照下さい(アクセス元だけ改変してます)。
http://asamuzak.jp/test/css3shadow_htc_log.txtLink

Owner Comment martin Website  2010/11/25@10:41:33

こんばんは。返事が大変遅くなって申し訳ありません。久しぶりにログインして、未公開のコメントに気付きました。お知らせメールも来るはずなんですが…。こちらでは、ちょっと確認したかぎりでは問題ないようですが、原因がはっきりするまでスクリプトの配布は控えておこうと思います。ご指摘ありがとうございました。

scrollUp6. Kazz Website — 2010/11/13@16:35:18

以前お送りしたコメントが反映されていないようなのですが、バグですかねぇ?
コメント数は「3」となってますが、2つしか表示されてません。
リプライがあると、それもコメントに数えて、最後の1つ(か、リプライの数があればその分だけ?)が落っこちているような感じに思えます。

Owner Comment martin Website  2010/11/25@10:43:28

こんばんは。コメント関連は、途中までいじってそのままなので、バグみたいですね。最新版の配布前のご指摘助かります。ありがとうございました。週末辺りにチェックしてみます。

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0075 sec.
prev
2024.3
next
          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
31