カテゴリー:CSSハック

リスト表示へ

IE8だけに適用させるCSSハック

2009年5月12日 13:04

IE8 がリリースしてしばらく経ちました。
現状では、CSS2.1 への準拠が一番、と言われていますが、正直 CSS3 に対応してくれないと使い物にならない、ってのが正直な感想です。

ただそれでも、以前の IE たちに比べるとずいぶんとお利口になったようで、あまりレイアウトが崩れる、というのがないのではないでしょうか。
しかしながら、まだたまにおかしな挙動をする部分があり、しかもそれが IE8 だけ、なんてことになるとハックの出番かな、なんてことになります。

そんなこんなで、IE8 対策が必要な場合に備えて、ハックを調べてみたらいくつか見つかりました。備忘録的にもエントリーしたいと思います。(ハックは 2 種類あります)

参考サイト

IE8 だけに適用させる CSS ハックデモ

CSS ソース

HTML ソース

CSS ソース概要

今回のサンプルで、実際に使いやすいのは sample02 ではないかなと思います。
そのものズバリを適用させることができるので。ということで、順番前後しますが sample02 から説明したいと思います。

sample02 の説明

見てもらうと分かりますが、注意点は 3 箇所。
まず最初に、html>/**/bodyと、子セレクタを使いつつ、>bodyの間に/**/と、空のコメントを入れます。
これを入れないと、IE7 でも適用されてしまうようです。

次に、プロパティの後ろに/***/を入れます。(サンプルではcolor /***/
これに関しては、この表記がなくても IE6,7, Firefox2,3, Safari4, Opera9, Google Chrome で確認したところどれも適用されませんでした。Mac では確認していないので Mac 向けの指定かもしれません。念のため。

最後に、値の後ろに9を追加します。
他のプロパティも指定したい場合は、9がないときと同じように行末に;をつけて、次のプロパティからは/***/なくても大丈夫なようです。

sample01 の説明

続いて sample01 の説明です。
sample01 は 3 行からなります。サンプルソースのコメントに書いてありますが、1 行目が IE6, 7 用、2 行目が IE8 用、最後がモダンブラウザ用となります。

最初の 1 行目は通常の指定ですね。このままであれば、全ブラウザに適用されるスタイルになります。
続いて 2 行目。これは間接セレクタを使った指定です。ただこの指定だけだと間接セレクタを正常に解釈できるモダンブラウザにも適用されてしまうために、これを打ち消すために最後の 3 行目が必要なわけです。

そして最後の 3 行目、IE8 は CSS3 の対応があまいく、not 疑似クラスに対応していないため IE8 を除いたモダンブラウザ向けにスタイルが適用できる、というわけです。これが打ち消しの 3 行目です。

ちなみに、2 行目の指定でコメントが途中入っているのは IE7 対策です。
このコメントがないと IE7 にもスタイルが適用されてしまうためこのような記述があります。

合わせて読むと役に立つかもなエントリー

CSSの1行でできるIE6対策(ハック)

2008年3月 5日 17:33

Internet Quality さんの所の紹介エントリーにあったサイトで、IE6 だけにうまく CSS を適用しているサイトがあったので、自分のメモとしてもエントリー。n

サンプルを見ると、ごく簡単な処理になってます。
通常、importantを指定したスタイルが適用されますが、どうやら IE6 の場合、同じセレクタ内の場合はimportantで書かれていても、そのあとに書かれた同じスタイルが適用されてしまうようです。

なので、IE6 だけに適用したいものなんかは、ハックを使わずにこんな感じで適用するとスマートかも。ただし、imporantを使ってるので、他のところで上書きしようとしてもできないので、通常のハック同様、乱用は禁物ですが・・・。n

合わせて読むと役に立つかもなエントリー

IE7を対象としたハック

2007年5月22日 14:13

今回は CSS ハックのお話。
というのも、IE だけがどうしても言うことを聞いてくれず、なんとかハックを使わずに処置したいなーと思って試行錯誤してたんだけどどうやらそれもつらくなってきたのでしかたなくハックを使ってみた。
IE(7も含む)をはじきたいなーと思って調べてみたらわりとあっさり見つかりました。n

ただ、実際自分で書いて置かないと忘れてしまうのでメモ兼エントリー。

ちなみに Lucky bag::blog さんの記事を参考にしました。
今回参考にしたのは下の 5 つ。n

IE7 を含めるのかそうじゃないのか、でわりと振り分けの必要が出てくると思いますが、とりあえずこれだけ覚えておけばIE対策としてはなんとかなるかもしれません。n

Safari用 CSSハック

2007年1月11日 11:26

こちらはかなり前のversionにのみの可能性があります。(safari2 あたり)
もし適用できないようであれば、他の方法を探してみてください・・。

ということで、なんか案件で Safari だけ挙動がおかしい部分があり、急ぎだったので Safari だけに適用できるハックがないか探していたら見つけました。
内容はこんな感じ。

/* xxxx */でコメントアウトし、さらにhtml:66irst-childを適用させたい CSS の前に追加することで Sarari だけに CSS を読み込ませることができるみたいです。
66fに該当するんだろうか。
文字参照(だっけ?)でも CSS がちゃんと動くってことかな?

[clearfix] どんなブラウザでもクリアするワザ【最終版?】

2006年11月21日 11:53

クリアするウラワザ で書いた、ひとつのボックスで完結する float のクリアワザの、IE7 対応版です。内容としては、前回とほぼ同じ。
ただ、IE 用に、IE 独自拡張 CSS の zoomプロパティを使うところ。n

とすることで IE7 でも大丈夫なようです。
細かい内容については、前回の記事を参照くださいwn

ちなみにこちらのサイトが元ネタです。
STOP'N LISTEN

合わせて読むと役に立つかもなエントリー

クリアするウラワザ

2006年11月 7日 17:27

float、結構思惑通りに動かなくて苦労しますよね。
CSS 触り立てで陥るのが、float によって親ボックスが正常にしたまで伸びない、ということ。
(まぁ、動作的にはそれで正しいですが、直感的に言うとやや違和感ありますよね)
しかし、最初は「なにごと?!」と思ってしまいます。n

自分のイメージで簡単に説明します。
まず、輪ゴムを想像してください。(え? とか思わないでw)
さらに、タバコとかなんでもいいので箱(ボックス)を想像してください。
さて、その輪ゴムをその想像した箱にくくり付けてください。
輪ゴムは、箱の形になって伸びますよね?
これが、いわゆる通常時の親ボックスの形です。n

さて、今度はその箱から輪ゴムをとってください。
すると輪ゴムは元の形にもどって小さくなりますよね?
これが、float(浮いた)したボックス(タバコの箱)と親ボックス(輪ゴム)の関係です。
つまり、子ボックスが浮いてしまったために、親ボックスの中には何もない状態となってしまった、というわけです。n

だから、いきなりボーダーが変になったーと思っても、それが正常の動作(輪ゴムが元に戻るのと同じ)なのです。n

さて、ではどう対処したらいいか?n

float したボックスのあとに、float を clear するボックスを挿入しても解決されますが、ただそれだと HTML 的に汚くなってしまうので、CSS だけで解決しましょう。n

float を囲っている親ボックスに対して以下のプロパティを追加してください。n

スターハック

2006年7月10日 10:50

IE4〜6、MacIE4〜5 に CSS を適用するハックです。
色々組み合わせることで個別にスタイルを分けることも可能です。n

セレクタの前に* htmlをつけると、WinIE4〜6、MacIE4〜5 でスタイルが適用されます。
ちなみに、ルート要素である html の前にユニバーサルセレクタを置くのは間違いであり、本来の記述方法ではありません。(つまりこれもバグです)
なので、あまり多様はしないほうがいいかも…。

内容はこんな感じ。n

スター7・ハック

2006年7月 7日 16:33

NescapgeやIEにだけCSSを読み込ませたい場合に使えます。
ただし、これはバグを利用した技です。
また、今後のIEではこれを読み込まなくなる可能性もあります。n

記述ミスを利用してハックする。n

と、body、*、#hogeの間に空白を含めずに書きます。
本来は、ユニバーサルセレクタ(*)の前後には、空白かプラス記号(+)、大なり記号(>)しか置けません。
しかし、ネスケとIEではこれを読み込んでしまう為、(モダンブラウザはエラーとして扱う)他のブラウザをはじきたい(ネスケとIEにだけプロパティを設定したい)場合に効果があります。
ただし、先にも言ったようにこれはバグのため、できるだけ使わないほうが無難です。n

ホーリー・ハック

2006年7月 7日 16:31

Mac IE を"はじく" CSS ハックです。
このハック内の CSS プロパティは、Mac IE には読み込まれません。
簡単に言うと、コメントのバグを利用したハックです。n

Mac IEにだけ読み込ませたくないプロパティがある場合は以下のように書きます。

これは、Mac IE のコメントのバグを利用したハックです。
Mac IE の場合、コメントの終了部分にバックスラッシュ(日本では ¥ )を入力すると、コメントが"終了しない"というバグがあります。n

そのため、「/* Hiiden from Mac IE ¥*/」と書くと、他のブラウザでは正常にコメントがここで終了するのに対し、Mac IE ではコメントがまだ続く、と解釈します。n

なので、その下に書いてあるプロパティもコメント扱いされ、読み込まれない、というわけです。
ただそうなると、その下が延々とコメントになってしまうので、終了させたいところで「/**/」と空のコメントを入れ、Mac IE にもコメントの終了を知らせます。n

こうすることで、Mac IE にだけ読み込ませたくないプロパティがある場合に、Mac IE だけをはじくことができます。n

1