はてなのトップページに・・・・もう、涙で前がみえません。
これは見間違えなんでしょうか?何かアクセス解析がうちのサイトとは思えない数字を叩き出してます。
2005年10月04日
ブラウザ別CSSハック一覧表
どうやら、CSSハックネタはウケが良いようなんで、CSSハック一覧表作ってみました。
途中で眠くて力尽きてます・・・続きはまた今度
(現在随時続きを追加しています。)
2005年10月現在使用可能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;
}
|
2005年09月30日
Hollyハックに頼らないMACIE用CSSハック
さっき書いた記事だけだとあんまり意味がないので、Hollyハックに頼らないでMACIEに対してCSSハックする方法を考えてみました。
とっても単純な内容です。
任意のブラウザのみ適用(color:黒→赤を適用)
* html p {
color: #F00;
_color: #000;
}
任意のブラウザ以外排除(color:黒→赤を適用)
p{
color: #F00;
}
* html p {
color: #000;
_color: #F00;
}
スターハックでIE専用スタイルを適用したあとアンダースコアハックを使ってWINIE用スタイルを打ち消してるだけです。
しょぼくてすいません。
Hollyハック(MacIE用CSSハック)が使えない!?
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アクセスぐらいしかないブログ読んでないかもしれませんが、何かホーリーハックについてご意見、ご指摘、検証結果などありましたらコメントしていただけたら幸いです。
2005年09月20日
operaが無料になりました。
なんかOperaが無料になっちゃいました。 この前のOperaの無料祭りはなんだったんでしょうか。 それとも反響がすごかったから無料のしたのでしょうか? とりあえずこれからOperaを使うユーザーが多少なりとも増えるでしょうね。 でも、OperaってJavaScriptに弱いんだよなぁ・・・ http://www.jp.opera.com/

