CSSハックについてまとめてみた。

2132 回閲覧 このエントリーをはてなブックマークする この記事のブックマークユーザー 永続的リンク2008/02/22 05:58:05 カテゴリ: ウェブ関係, CSS
スポンサード リンク
Firefox ロゴ

CSSコーディングをしている時によくあるブラウザごとのスタイルシートの解釈の違い。・・・ブラウザのバグ。
だから正しく書いても意図どおりに表示されないという現実。
Firefoxでは正しく表示されるのに、IEでみたら・・・・。IE7で見たらOKでIE6だと・・・・。


そんな時「IE6にだけ有効なcss」「FirefoxやSafariに・・・」と思いますよね。


こんな状況になったらCSSハックを使うという手があります。CSSハックはブラウザごとのバグや解釈の違いを逆手にとってブラウザごとの表示の違いを調整する方法です。

今回はその備忘録をかねてまとめてみました。

[続き:]

CSSハック一覧

先に一覧を載せておきます。※サンプルはbody要素を指定する時の例です。


Windows IE7のみにスタイルを適用するハック。

*+html body{color : #000000}
*:first-child+html body{color : #000000}

Windows IE 4〜6、Mac IE 4〜5のみにスタイルを適用するハック。
通称スターハック

* html body{color : #000000}

Windows IE4~6に適用するハック。アンダースコアハック。

body{_color : #000000;}

IE7・Firefox・Safari・Opera(IE6以下は除外)のみにスタイルを適用するハック。

html>body{color : #000000}

Firefox、Safari、Opera(IEを除く)のみにスタイルを適用するハック。

html[xmlns] body{color : #000000}
html>/**/body{color : #000000}



CSSハックとは?

 先にも書きましたが、ブラウザごとの表示の違いを調整するために、各ブラウザのバグや解釈の違いを利用し調節する方法です。
つまり、特定のブラウザに対して有効または、無効にすることができます。
※今回の備忘録では、正確にはCSSハックと呼べないものもあるかもしれませんが、各ブラウザの表示の統一を目的としてハックとしてまとめています。

 注意しなくてはいけないのは、正規の書き方とはことなるものもあるということ。ソースも若干複雑にもなります。
基本的には、どうしてもという時に利用するようにするのが良いと思います。

参考サイト【感謝】



 →ツイッターのフォローはこちら
スポンサード リンク
         

関連記事

↑ページ上部へ

アクセスカウンター

今日 : 5 昨日 : 16

ブログ内容

主にウェブ関係のことを書いてます。たまにブレイクダンスとか他のことも書いています。

プロフィール

MICK

MICKです。

1983年1月24日生まれ。ウェブの世界にいるのは、偶然のようで必然なのかも。

好きなこと :
 挑戦すること。物事に没頭すること。勉強すること。
嫌いなこと :
 自慢話を聞くこと。人の悪口を言うこと。

運営サイト

      

カテゴリ一覧

サイト広告

オススメの書籍とか

感想

紹介

色々

最近のコメント

最新記事

注目記事

人気記事

最近の人気記事

人気の記事

関連サイト

運営サイト

色々

最近のトラックバック