主なスタイルシート【CSS】ハック

日々増え続ける、インターネットブラウザ、なんでもいいからスタイルシートの適応だけでも統一して欲しいと願う日々、作者だけではないと思います。作者がサイト制作を行う上で、色々失敗を繰り返してきた結果、究極の作成手順を見つけました。

基本的に最初はMacで制作して、ブラウザチェックもMacで行い、最後にWINDOWSでチェックしてます。なので順番的には
【Mac】→→【WINDOWS】7→6
上記のブラウザチェックで整えていくと結果的にほぼオールブラウザで閲覧が可能になるということに気づいた。

余談はこの辺にしておき、今回のテーマは【主なスタイルシートハック】ということで、主要ブラウザで潰しておきたいスタイルシートハックの一覧をご紹介しておきます。今回標準で表記したいCSSは以下のスタイルシート

[css]
#box1 {
width:800px;
color:#FF0000;
}
[/css]

【IE7ハック】7

[css]
*:first-child+html #box1 {
width:800px;
color:#FF0000;
}
[/css]

【スターハック】Win4〜6 Mac4〜5

[css]
:html #box1 {
width:800px;
color:#FF0000;
}
[/css]

【:root疑似クラスハック】 Mac5

[css]
:root #box1 {
width:800px;
color:#FF0000;
}
[/css]

【xmlns属性ハック】

[css]
html[xmlns] #box1 {
width:800px;
color:#FF0000;
}
[/css]

【Fabriceインバージョン】 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…