cssハックについて

質問

現在Safariに対してcssハックを適用させようとしているのですが、
そのハックがなぜか他ブラウザにまで影響してしまいます…
（Firefox、Operaなど。IEは大丈夫です）

なぜ他ブラウザにまで影響してしまうのかが判らないので、
教えて頂けると嬉しいです。
宜しくお願いします。

htmlに対するcss読み込みの記述---------
<link rel="stylesheet" type="text/css" href="css/importtop.css" />

importtop.css内の記述---------
/* For Specific Browsers */
@import "safari.css";

safari.css内の記述---------------
/* Safari4 */
body:first-of-type #content {
height: 635px;
}
body:first-of-type #container {
height: 635px;
}
body:first-of-type #sidebar {
height: 635px;
}
body:first-of-type #content {
height: 635px;
}
body:first-of-type .sbar {
height: 635px;
}

/* Safari3 */
html:not(:only-child:only-child) #container {
height: 635px;
}
html:not(:only-child:only-child) #content {
height: 635px;
}
html:not(:only-child:only-child) #sidebar {
height: 635px;
}
html:not(:only-child:only-child) .sbar {
height: 635px;
}

回答No.2

abril

＃現在使用中のブラウザのCSS3のセレクタの対応状況は、下記で実際にテストできます。
＃【参考】http://www.css3.info/selectors-test/test.html

サンプルの中でSafari用ハックとして使われている下記のセレクタ：

:first-of-type
:only-child
:not()

は、Safari4、Firefox3.5、Opera9.61はいずれも対応しています。その為、Firefox3.5とOpera9.61にとってはそれらのセレクタの記述は「（Safari以外に適用されない）ハック」の役目を果たしません。

この手の「CSSの本来の仕様では定められているセレクタだが、ブラウザの実装状況が追いついていないが故に」ハックの役目を果たしていたのものは、この様に、ヴァージョンアップしたブラウザや後発のブラウザにはハックとしての用途を成さなくなる事態が当然予測されるので、それまで意図通り表示されていたものがされなくなる、という何ともまずい事態を引き起こします。

一方、IE6用のアンダースコア・ハックの様な「CSSの記述として本来は”不正”なので正しく解釈するブラウザには無視される」というタイプの方はまだ、ブラウザの進化によって引き起こされる弊害は少ないでしょう（正常な表記の方で記した本来の正しいプロパティの値では起きてしまう不具合が、解消する方向に向かう可能性が高い為）。例えば、IE7からはアンダースコア・ハックは無視されてしまう様になりましたが、それと同時にIE6が抱えていたfloatのダブル・マージンのバグや、XML宣言の有無によるDOCTYPEスイッチの切替等の致命的不具合も解消された為、ハックによる振り分け自体が不要になりました。

ということで、今後できるだけハックは使用しない方向が望ましいですし、使用するとしてもNo.1様が仰る通り、（使用に反する独自解釈の多い）IE6以前程度にのみ有効な後者タイプのハックにと止めておいた方が宜しいかと思います。

余談ですが、サンプルのソースを見た感じだと、コンテンツのベースのレイアウト部分のコンテナの高さが、Safariだけ異なる値にしないと不具合が出てしまうので、という事なんでしょうか？Safariは優秀な方のブラウザ（確かSafari4は最初にAcid3 Testを100点満点でクリアしたブラウザです。こちらもテストしてみましたが、Firefox3.5は93点、Opera9.61は85点、という結果でした。【参考】http://acid3.acidtests.org/）だと思うのですが、どういう局面で不具合が出たのでしょうか？もしかしたら、ハックを使わずとも解消できる方法もあるのでは…？

回答No.1

Gotthold

最新のFirefoxやOperaは
すでに:first-of-typeなどに対応してるからでは？
Safariがいち早く対応したのでSafariだけに適用できた時期もあったのだと思いますが、
FirefoxやOperaもバージョンアップを続けているので
そんな状態が長く続くわけはないでしょう。

CSSハックは今後絶対に進化することがなさそうな
IE6/7くらいにしておいた方が良いのでは？
下手に使うとブラウザのバージョン依存を引き起こしかねないし。
どうしても使いたいなら最新情報の収集くらいは怠らないようにしないとね。