--年--月--日 --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

俺的cssハックまとめ

2009年02月10日 18:55

cssハックというモノがあります。
これの必要性は、cssに対する、ウェブブラウザ(エンジン)の解釈の違いから生じます。

さて、その差異をなくすために、○○のブラウザだけに適用するcss、というのを記述してやれば良いことになります。
ということで俺的簡易まとめ。
先に前提として言っておきますが、スタイルは後述した方が適用されます


*Firefoxの場合

selector{
 general
}
selector, x:-moz-any-link{
 firefox only
}



*Operaの場合(たぶん)

selector{
general
}
selector, x:-o-prefocus {
opera only
}



*IEの場合
HTML側に

IE以外cssを読む記述 or IE以外適用するcssの記述
<!--[if IE ]>
IEのみcssを読む記述 or IEのみ適用するcssの記述
<![endif]-->>


と書く。
■解説
まず、webkit(SafariやChrome)やOperaはなんか凄い標準に対応していたりするので、そっちに合わせましょう。
そして、これらのブラウザを使っている人はアップデートをちゃんとする人ですので、モダンブラウザだと考えて問題ないと思います。

次に、Firefoxですが、「未対応なセレクタを含むときは、全体を無効にする」という仕様を利用しています。
つまり、「selector, 未対応なselector { }」という記述は、未対応なのを含むので、それ自体が無効になります。(あくまで未対応。存在しないタグとかそういうことではなく)
x:-moz-any-linkは当然Firefoxのみ対応ですので(mozって書いてある)、Firefoxのみ有効です。

最後に、IE。
これは、cssではなく、htmlに対するIEの拡張です。条件付コメントというらしい。
IEは古いバージョンの人なども多いと思いますが、これはバージョンに関してもみっちり指定できます。(参照
上長ではありますが、バグ(=ハック)ではなく、IEの仕様ですし、IE以外ではただのコメントとして解釈するので、安心・安全です。


さて、最後になりますが、cssは後に書いた方が適用されます。
Safari、Chrome、Opera向け→Firefox向け→IE向け
と書けば良いと思います。
もし、後に書いた方を100%適用させたいなら、

selector{
style: style !important;
}


と書いてあげればいいです。それぞれの行に、セミコロンの前に書いて上げてくださいね。
スポンサーサイト


コメント

    コメントの投稿

    (コメント編集・削除に必要)
    (管理者にだけ表示を許可する)

    トラックバック

    この記事のトラックバックURL
    http://suiseidreaming.blog45.fc2.com/tb.php/201-4de164d2
    この記事へのトラックバック


    最近の記事


    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。