はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

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

CSSハック一覧表

2007/07/30 Mon [Edit]

CSS のハックが少しずつ貯まって来たので一覧表を作ってみました。
CSS ハックとは何か簡単に説明すると、それぞれの WEB ブラウザのバグなどを利用し、特定の WEB ブラウザに特定のプロパティ(設定)を適用させたり、逆に適用させないようにし、CSS 内に併記した複数のスタイルのプロパティ(設定)を、それぞれの WEB ブラウザに振り分ける技術のことです。

これからは私が使用した CSS ハックや詳細などはこのエントリで随時まとめていこうと思います。
追記:2007年12月4日〕
追記:2008年1月12日〕
追記:2009年7月23日〕

下のソースのい部分がそれぞれの CSS ハックの部分です。

スターハック

WinIE4 ~ IE6MacIE4 ~ IE5 にだけ適用させられるスターハック。

* html p { /* for WinIE4 ~ IE6 and MacIE4 ~ IE5 */
	font-weight : normal;
}

CSS の書式としては正しくないようですが、CSS Validator ではエラーにならない。

アンダースコアハック

簡単に WinIE4 ~ IE6 にだけ適用させられるアンダースコアハック。使う時は「その他のブラウザ用」の指定よりに記述します。

.sample {
	width : 300px;/* その他のブラウザ用 */
	_width : 320px; /* WinIE4 ~ IE6 にだけ適用* /
	padding : 20px;
}

CSS Validator ではエラーになる

Win IE4 ~ IE6 用の CSS ハック

MacIE には適用させずに Win IE4 ~ IE6 だけに適用させる為の CSS ハック。( Mac 除けスターハック ※勝手に命名)

/* Mac IE から隠す \*/
* html p {
	font-weight : normal;
}
/* Mac IE から隠すの終わり */

CSS Validator でエラーにならない。

CSS xmlns 属性ハック拡張型

Safari2(サファリ2)だけに適用させる為の CSS ハック。( Safari2 ハック ※勝手に命名)

html[xmlns*=""] body:last-child p { /* for Safari2 */
	font-weight : normal;
}

CSS Validator ではエラーになる
2008/01/12 追記) Safari3 では使えなくなっているので注意です。

Safari3 に未知の CSS 疑似要素

Safari3(サファリ3)だけに適用させる為の CSS ハック。( Safari3 ハック ※勝手に命名)

body:first-of-type p { /* for Safari3 */
	font-weight : normal;
}

CSS Validator ではエラーになる

Opera 用の CSS ハック

Opera(オペラ)だけに適用させる為の CSS ハック。( Opera ハック ※勝手に命名)

*+html:first-child p { /* for Opera */
	line-height : 150%;
}

CSS Validator でエラーにならない。

Safari2 と Opera9 用の CSS ハック

Safari2 と Opera9 だけに適用させる為の CSS ハック。( Sapera ハックもしくは Operi ハック ※勝手に命名)

html:first-child p { /* for Safari2 and Opera9 */
	line-height : 150%;
}

CSS Validator でエラーにならない。
2008/01/12 追記)Safari3 には適用されないので Safari2 を視野に入れないのなら Opera9 用のハックとして使えます。

IE7 用のハック

IE7 だけに適用させる為の CSS ハック。( IE7 ハック ※勝手に命名)

*:first-child+html p { /* for IE7 */
	font-weight : normal;
}

CSS Validator でエラーにならない。

IE7 用のハック( Opera9 も)

IE7 だけに適用させる為の CSS ハック。( IE7 ハック2 ※勝手に命名)

*+html p { /* for IE7 */
	font-weight : normal;
}

CSS Validator でエラーにならない。
2008/01/12 追記)XML 宣言があると Opera9 にも適用されます

IE6 以外のモダンブラウザ

IE6 以外のモダンブラウザ( IE7 含む)に適用させる為の CSS セレクタ。(仲間はずれの IE6 ハック※勝手に命名)

html > body p { /* Win IE6 以外のモダンブラウザに適用 */
	font-weight : normal;
}

CSS Validator でエラーにならない。

IE8 用のハック

IE8 だけに適用させる為の CSS ハック。( IE8 ハック ※勝手に命名)

html>/**/body p { /* for IE8 */
	font-weight /*\**/: normal\9;
	font-size: 10px\9;
}

CSS Validator でエラーになる。
2009/07/23 追記)プロパティが複数の場合は値と ;(セミコロン)の間に \9 を置いていきます。

※当サイトのモダンブラウザの確認には下記ブラウザを使用中。
Windows : IE8・IE7・IE6・FireFox3・Opera9・Netscape7
Macintosh : Firefox3・Safari3・Opera9・Netscape7

以上が使用したことがある、または知っている CSS ハック一覧です。上記した以外にも CSS ハックは探すと他の方法も見つかると思います。また、ハックと呼べるものと呼べないものも区別していません。

CSS ハックの下に記述した Validator でエラーになる・ならないの意味が分からない方は、あくまで主観ですがあまり気にしなくても良いと思います。W3CでCSSの検証をした時にエラーになると言う意味です。

それよりも CSS ハックはブラウザのバージョンが変わるとハックとしての機能が失われる可能性があります。なので、なるべくなら使わないで済ませる方が良いと思います。

次のエントリでは CSS ハックとサヨナラ、もしくは上手に付き合う方法をご紹介します。興味のある方は CSSハックとサヨナラもしくはハイタッチをご覧ください。

Prev
CSSハックとサヨナラもしくはハイタッチ
Top
はじめてのブログデザイン
Next
イベントハンドラ一覧表

Comments

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

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