日々増え続ける、インターネットブラウザ、なんでもいいからスタイルシートの適応だけでも統一して欲しいと願う日々、作者だけではないと思います。作者がサイト制作を行う上で、色々失敗を繰り返してきた結果、究極の作成手順を見つけました。
基本的に最初はMacで制作して、ブラウザチェックもMacで行い、最後にWINDOWSでチェックしてます。なので順番的には
【Mac】→
→【WINDOWS】
7→
6
上記のブラウザチェックで整えていくと結果的にほぼオールブラウザで閲覧が可能になるということに気づいた。
余談はこの辺にしておき、今回のテーマは【主なスタイルシートハック】ということで、主要ブラウザで潰しておきたいスタイルシートハックの一覧をご紹介しておきます。今回標準で表記したいCSSは以下のスタイルシート
[css]
#box1 {
width:800px;
color:#FF0000;
}
[/css]
![ie7 ie7](https://mono-stock.com/pages/wp-content/uploads/ie7.png)
[css]
*:first-child+html #box1 {
width:800px;
color:#FF0000;
}
[/css]
![icon_browser_explorer icon_browser_explorer](https://mono-stock.com/pages/wp-content/uploads/icon_browser_explorer.gif)
[css]
:html #box1 {
width:800px;
color:#FF0000;
}
[/css]
![icon_browser_firefox icon_browser_firefox](https://mono-stock.com/pages/wp-content/uploads/icon_browser_firefox.gif)
![icon_browser_safari icon_browser_safari](https://mono-stock.com/pages/wp-content/uploads/icon_browser_safari.gif)
![icon_browser_explorer icon_browser_explorer](https://mono-stock.com/pages/wp-content/uploads/icon_browser_explorer.gif)
[css]
:root #box1 {
width:800px;
color:#FF0000;
}
[/css]
![icon_browser_firefox icon_browser_firefox](https://mono-stock.com/pages/wp-content/uploads/icon_browser_firefox.gif)
![icon_browser_safari icon_browser_safari](https://mono-stock.com/pages/wp-content/uploads/icon_browser_safari.gif)
![icon_browser_opera icon_browser_opera](https://mono-stock.com/pages/wp-content/uploads/icon_browser_opera.gif)
[css]
html[xmlns] #box1 {
width:800px;
color:#FF0000;
}
[/css]
![icon_browser_netscape icon_browser_netscape](https://mono-stock.com/pages/wp-content/uploads/icon_browser_netscape.gif)
![icon_browser_opera icon_browser_opera](https://mono-stock.com/pages/wp-content/uploads/icon_browser_opera.gif)
[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…