CSSハック

sikkuisikkuiです。

約10年前まではtableレイアウトが主流で、昔は僕もガチガチのテーブルレイアウトを組んでいました。
しかし現在のレイアウトはCSSが主流(主流という言い方は適切ではないかもしれない)。
CSSのおかげで何度も同じタグを打ち込んだりしなくてよくなったり、管理がしやすくなりましたが、
ブラウザ(InternetExplorer,FireFoxなど)ごとにCSSのバグがあったり、仕様の違いで
同じ表示にならなかったりします。

バグの発生を予想して、marginからpaddingに変えたり、背景画像の親要素にはzoom:1を入れたりしますが、どうしようもない場合、CSSハックというものを使います。
CSSの優先順位度とブラウザのバグを利用して、目的のブラウザのみにCSSをかける方法です。

InternetExplorer6用ハック

セレクタ {正規のスタイル}
* html セレクタ {IE6のスタイル}

InternetExplorer7用ハック

セレクタ {正規のスタイル}
*:first-child+html セレクタ {IE7のスタイル}

InternetExplorer8用ハック

セレクタ {正規のスタイル}
html:first-child セレクタ {IE8のスタイル}

FireFox3用ハック

セレクタ ,x:-moz-broken {FireFox3のスタイル}
セレクタ ,x:x {正規のスタイル}

Safari3,GoogleChrome用ハック

セレクタ {正規のスタイル}
html:not(:only-child:only-child) セレクタ {webkit系のスタイル}


よく使用しそうなものを挙げました。
他にもFirefox2,3にハックをかけたり、IE6以下のブラウザに任意のスタイルを読み込ませないようにしたり、様々ありますが、不要にセレクタの数が増えることになります。
セレクタの数が不要に増えることは好ましくありません。
本来はハックを使わずにバグを回避し、コーディングすることが好ましいですが、
どうしようもない場合、時間が無い場合、試してみてください。

トラックバック(0)

このブログ記事を参照しているブログ一覧: CSSハック

このブログ記事に対するトラックバックURL: http://crebatec.info/mt4/mt-tb.cgi/1126

コメントする

 

株式会社クレバテックの紹介

WEB(ホームページ),DTP(パンフレット、ポスター、ロゴ)の株式会社CREBATEC

ホームページ、Webシステム、業務システムから、パンフレット、ポスター、名刺、ロゴ、キャラクター作成まで、御社のCI(コーポレート・アイデンティティ)をトータルでサポートし、企業価値を高めるお手伝いをさせていただきます。

クレバテック ブログをRSSに登録 RSSに登録

関連サイト