【ブラウザ】よく使うCSSハックのまとめ(IE6~9・Firefox・Chrome)

私がコーディング時によく使うCSSハックを紹介します。

コーディング・プログラミング画面

もちろん、CSSハックはなるべく使わないようにマークアップすることが大切。そのため、どうしても表示がきちんとされない時の最終手段と覚えておくようにしましょう。

関連記事:「読み方のわからないHTMLタグとCSSプロパティ」ベスト5!正しい読み方は?

CSSハックとは

Webサイト作成の際にWebブラウザ間(以下単に「ブラウザ」)で異なるCascading Style Sheets(CSS)の実装状況の違いやバグなどを吸収し、極力各ブラウザでの表示を同一にするためのテクニックの一つである

LINK:CSSハック – Wikipedia

created by Rinker
¥2,441 (2019/08/25 07:40:33時点 Amazon調べ-詳細)

Internet Explorer

IE6以下(アンダースコアハック)

.hack {
	_color : #FFFFFF;
}

IE7

.hack {
	*color :#FFFFFF;
} 

IE8

.hack {
	color : #FFFFFF\9;
}

IE9

:root .hack {
   color:#FFFFFF \0/;
}

モダンブラウザ

IE7とモダンブラウザ

html>body .hack {
	color :#FFFFFF;
}

IE7以外のモダンブラウザ

html>/**/body .hack {
	color :#FFFFFF;
} 

Firefox 3.0以上

.huck, x:-moz-broken {
	color :#FFFFFF;
}  

Firefox 3.5以上とGoogle Chrome

body:nth-of-type(1) .huck {
	color :#FFFFFF;
} 

CSSハックの実例

実際に使う時はこんな感じで記述します。

.hack {
	color : #FFFFFF;  /* all browsers */
	_color : #FFFFFF;  /* IE6 */
	*color :#FFFFFF;  /* IE7 */
	color : #FFFFFF\9;  /* IE8 */
}

こんな記事も読まれてます

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

コメント