
はてなのトップページに・・・・もう、涙で前がみえません。
これは見間違えなんでしょうか?何かアクセス解析がうちのサイトとは思えない数字を叩き出してます。
どうやら、CSSハックネタはウケが良いようなんで、CSSハック一覧表作ってみました。
途中で眠くて力尽きてます・・・続きはまた今度
(現在随時続きを追加しています。)
複合技CSSハックは一つでもブラウザがバージョンアップすると使えなくなる可能性があります。
また、理論上は可能というだけなので、適用されない場合もあるかもしれません。ご了承ください。
ここまでするぐらいならブラウザ別にCSSを外部読み込みさせた方が良い気もします。
注:全部自分で確認したわけじゃありません。(Mac持ってません)使用する前にご自分の環境で必ず確認してください。
CSSハック | 対応ブラウザ | 対応ブラウザのみ適用 (color:黒→赤を適用) |
対応ブラウザ以外適用 (color:黒→赤を適用) |
---|---|---|---|
対応ブラウザのみ適用 | 対応ブラウザ以外適用 | ||
通常 | CSS対応ブラウザ |
p { color: #F00; } |
|
スターハック | WinIE4.0〜6.0 MacIE4.0〜5.2 |
* html p { color: #F00; } |
p{ color: #F00; } * html p { color: #000; } |
アンダースコアハック | WinIE4.0〜6.0 |
p{ _color: #F00; } |
p{ color: #F00; _color: #000; } |
バックスラッシュハック | MacIE5.0〜5.2 | p { color: #F00; /*\*/ color:#000; /* */ } |
p { /*\*/ color: #F00; /* */ } |
Caioハック | NN4 |
p { color: #F00; /*/*/ color: #000;/* */ } |
p { /*/*/ color: #F00;/* */ } |
ハッシュハック |
WinIE4〜6 MacIE5.0〜5.2 Opera7 Mozilla Firefox |
p{ #color: #F00; } |
p{ color: #F00; |
スター7ハック |
WinIE5.5〜6.0 MacIE5.0〜5.2 Safari |
html*p { color: #F00; } |
p { color: #F00; } html * p1 { color: #000; } |
Fbriceインバージョン |
NN4 Opera4〜5 |
p{ /*/*//*/ color:#F00; /* */ } |
p{ color:#F00; } p{ /*/*//*/ color:#000; /* */ } |
:root擬似クラス |
MacIE5.0〜5.2 Mozilla FireFox Safari |
:root p{ color:#F00; } |
p{ color:#F00; } :root p{ color:#000; } |
xmlns属性 |
Mozilla FireFox Opera7.5〜 Safari |
html[xmls] p{ color:#f00; } |
p{ color:#F00; } html[xmls] p{ color:#000; } |
名称不明 (プロパティ名の前に全角スペース) |
WinIE4〜6 WinOpera8 |
p{ color:#f00; } |
p{ color:#F00; } p{ color:#000; } |
複合CSSハック スターハック スター7ハック |
Safari |
html*p { color: #F00; } * html p { color: #000; } |
p { color: #F00; } html*p { color: #000; } * html p { color: #F00; } |
さっき書いた記事だけだとあんまり意味がないので、Hollyハックに頼らないでMACIEに対してCSSハックする方法を考えてみました。
とっても単純な内容です。
* html p {
color: #F00;
_color: #000;
}
p{
color: #F00;
}
* html p {
color: #000;
_color: #F00;
}
スターハックでIE専用スタイルを適用したあとアンダースコアハックを使ってWINIE用スタイルを打ち消してるだけです。
しょぼくてすいません。
MacIE用CSSハックといえば、下記のような方法があります。
p{
/*\*/
color:#FF0000;
/**/
}
これは/*\*/と/**/の間に挟まれたCSSはMacIE5には適用されないというCSSハックでHollyハックと呼ばれているものです。
さまざまなサイトや雑誌で紹介されているこの方法ですが、これがInternet Explorer 5.1 for Mac (OS 8.1〜9.x 用) に通用しないような気がするんです。
なんか怪しいので会社に置いてあったMacで出来る限りの検証をしてみました。
1.[OS9][IE5.0][HollyHack可]
2.[OS8][IE5.1][HollyHack不可]
3.[OS9][IE5.1][HollyHack不可]
4.[OS9][IE5.0→IE5.1][HollyHack不可](1のMACのIEをアップデートしました。)
こんな感じでIE5.1は全滅でした。
これからは私の憶測に過ぎませんが、MacIE5.0が出た当初はHollyHackは使用可能な状況だったが、IE5.1からはバグ(HollyHackはCSSのバグ利用したもの)が改善されHollyHackが使えなくなっているではないのでしょうか。
でも、それだったらOSX用のIE5.2でまだHollyHackが使えるのは納得いかない気がいます。
と、書いてみたものの実はまだOSXでは検証してません。
今度近所の電気屋にでも行って検証してきます。
もしかしたらうちの環境のみ効かなかったのかもしれませんが、こういう環境もあるっていう事でブログに書いてみました。
誰もこんなロボット含めて一日10アクセスぐらいしかないブログ読んでないかもしれませんが、何かホーリーハックについてご意見、ご指摘、検証結果などありましたらコメントしていただけたら幸いです。
なんかOperaが無料になっちゃいました。 この前のOperaの無料祭りはなんだったんでしょうか。 それとも反響がすごかったから無料のしたのでしょうか? とりあえずこれからOperaを使うユーザーが多少なりとも増えるでしょうね。 でも、OperaってJavaScriptに弱いんだよなぁ・・・ http://www.jp.opera.com/
この広告は90日以上新しい記事の投稿がないブログに表示されております。