日々増え続ける、インターネットブラウザ、なんでもいいからスタイルシートの適応だけでも統一して欲しいと願う日々、作者だけではないと思います。作者がサイト制作を行う上で、色々失敗を繰り返してきた結果、究極の作成手順を見つけました。
基本的に最初はMacで制作して、ブラウザチェックもMacで行い、最後にWINDOWSでチェックしてます。なので順番的には
【Mac】
→
→【WINDOWS】
7→
6
上記のブラウザチェックで整えていくと結果的にほぼオールブラウザで閲覧が可能になるということに気づいた。
余談はこの辺にしておき、今回のテーマは【主なスタイルシートハック】ということで、主要ブラウザで潰しておきたいスタイルシートハックの一覧をご紹介しておきます。今回標準で表記したいCSSは以下のスタイルシート
[css]
#box1 {
width:800px;
color:#FF0000;
}
[/css]
7[css]
*:first-child+html #box1 {
width:800px;
color:#FF0000;
}
[/css]
Win4〜6 Mac4〜5[css]
:html #box1 {
width:800px;
color:#FF0000;
}
[/css]
Mac5[css]
:root #box1 {
width:800px;
color:#FF0000;
}
[/css]
[css]
html[xmlns] #box1 {
width:800px;
color:#FF0000;
}
[/css]
4 4〜5[css]
/* これ以降Netscape 4、Opera 4〜5のみに適用される /*//*/
#box1 {
width:800px;
color:#FF0000;
}
/* これ以降全てのブラウザに適用される */
[/css]
基本的には以上のハックを潰しておけばだいたいは形になります。
作者が主に使用しているのは【IE7ハック】【スターハック】【:root疑似クラスハック】の3つです。
しっかりしたCSSを記述していれば、少なくとも上記3つでカバーできるのだ。
ちなみに作者はMac版IE Win版IE6以前は特別な状況で無い限り対象外にしています。
もう少し詳しく書かれているサイト様はworldending.jpになります。見やすくすてきなサイトなので是非参考にしてください。
≫≫http://blog.worldending.jp/web…
