Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。
- バージョン 6 以下の IE
- IE7
- それ以外のモダンブラウザ（Safari、Opera、Firefox）
ブラウザごとのハック
全てのサンプルは body 要素を指定の対象としている。
- バージョン 6 以下の IE にのみ適用
* html body- サンプルページ
- バージョン 7 の IE にのみ適用
*+html body- サンプルページ
- バージョン 7 を含む全ての IE にのみ適用
*+html body, * html body- サンプルページ
- IE7 を含むモダンブラウザにのみ適用（バージョン 6 以下の IE を除外）
html>body- サンプルページ
- IE7 を除くモダンブラウザにのみ適用
html>/**/body- サンプルページ
ちなみに、上記 IE7 向けのハックは、あくまで beta2 でのものなんで、正式版では使えなくなっている可能性もある。分からないけど。
その他、ブラウザ振り分けに使えそうなハック
対象要素に属性があれば、属性セレクタを使ったハックなんかも使える。例えば、下記のような要素を対象としてみる。
<p class="foo" id="bar">...</p>IE6 以下を弾きたければ、CSS3 の属性セレクタを使って p[id$="bar"]{...} とすれば良いかもしれない。さらに IE7 も弾きたければ、否定擬似クラスを使って p[id$="bar"]:not([class="hoge"]){...} とか。ただ、これだと Opera9 も弾かれちゃうんで、CSS3 の Media Queries 使って @media screen and (min-width: 0) {p[id$="bar"]{...}} って感じで上書きさせれば大丈夫。
Comments
html > body
これはハックとは言わないのでは?
＞ななしさん
「CSSハックまとめ」と書いてあるでしょう。
その上で「ブラウザごとの振り分け」がテーマですよね。
流れを読んだほうがよいのでは。
こんにちわ^^
いつも拝見させてもらっています。
今回の CSSハック も、ためになる情報で助かります♪
各ブラウザに対応するのってムズかしいですね…(－.－;)はぁ
では。。。
>これはハックとは言わないのでは?
まぁ、何を持って CSS ハックと定義するのかってのはあるとは思うんですが、ブラウザの実装の不備をついて、何がしかの指定を振り分けるって事は CSS ハックの内なんだろうという俺解釈な訳で、つまりは、通りすがり さんの仰る通りと言うことです。
>>bzbell さん
ありがとうございます :-)
確かに各ブラウザに対応させるのって面倒ですよね。
今回紹介したハックもいつまで利用できるのか微妙だと思うんで、使うのであれば、そこら辺のリスクを考えないとあとあと面倒な事になりそうです。
それを上書きとは言いませんよ。
今更ですが、
*+html body
は、IE5やIE4にも適用されるので、
IE7だけのハックとしては利用価値は低いかもですね。
そうなんですよねぇ。
この記事の内容も古くなってて、今は :first-child 疑似クラスを使って、*:first-child+html {} という形みたいですね。
記事を更新しなきゃなとは思ってるんですが…。
こんにちは！ハックをまだ勉強したてで、わからないことばかりですが
頑張って勉強させてもらってます。
さて、見やすく文字間隔を広げようとp letter-spacing:1pt; font:MS UI Gothic;と指定し、文字間隔は広がったのですが、
改行がおかしくなりました。
Firefoxで見るとbr br で一行空きますが、IEで見ると行間があかず
brbrbr やっと一行あきますが、firefoxでは二行空きます。
スタイルのPをはずすと、普通にbrbrで両ブラウザとも一行改行
されます。
どんな風にハックをかければ、同じように１行改行になるのでしょうか？
ご教示頂ければ幸いです。
文字間隔と改行に相関関係はないはずなので、他の指定が影響していそうな感じです。
p要素に対するスタイルを外すと直るということであれば、その辺りの何かの指定が影響しているのでしょう。
いずれにしろ、判断材料が足りないのでなんともお答えできません。