CSSハック(IE6、IE7に効くもの、効かないもの)

December 17 [Thu], 2009, 20:17


普段はお仕事でFirefoxを主ブラウザとしてコーディングし、ある程度出来上がったら、IE6、IE7、IE8、Macのsafariと検証していく形をとっています。
この場合CSSハックは、IE6、IE7のみに効くものがあれば、おおよそOKです。

@IT(アットマークIT)に有限会社タグパンダさんが書かれたCSSハックについて良い記事がありますので、詳しくはそちらをご覧ください。

IE 6とIE 7のためのCSSハック16選
http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack02/03.html

モダンブラウザでも使えるCSSハック18選
http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack03/01.html

私の記事は自分がコーディングするときにささっと確認用に書いています。
CSSの文法エラーチェックはW3CのCSSValidationで確認しました。

W3C/CSSValidation
http://jigsaw.w3.org/css-validator/#validate_by_uri

IE 7をハック(IE7のみに効くハック )
名称 CSS記述例 CSS文法
スター+ハック *+html p { margin: 10px; }
IE7スターハック *:first-child+html p { margin: 10px; }


IE 6をハック(IE6のみに効くハック )
名称 CSS記述例 CSS文法
スターハック * html p { margin: 10px; }
2スターハック * html*p { margin: 10px; }
アンダースコアハック p { _margin: 10px; }
インポータントハック p{ /* 通常 */
margin: 10px !important;
/* IE 6以下 */
margin: 10px;
}


IE 6をハック(IE 6のみに効かないハック)
名称 CSS記述例 CSS文法
チャイルドセレクタハック html > body p { margin: 10px; }
隣接セレクタハック head + body p { margin: 10px; }
オーウェンハック head:first-child + body p { margin: 10px; }
属性セレクタハック html[xmlns] p { margin: 10px; }


IE 6/7をハック(IE 6とIE 7に効くハック )
名称 CSS記述例 CSS文法
スター7ハック html*p { margin: 10px; }
ハッシュハック p { #margin: 10px; }
アスタリスクハック p { *margin: 10px; }
全角スペースハック p{ /* 通常 */
margin: 10px;
/* IE 6/7 */
 margin: 10px;
}


IE 6/7をハック(IE 6とIE 7に効かないハック)
名称 CSS記述例 CSS文法
コメントハック p/* */ { margin: 10px; }


IE 8のみに効くハック
名称 CSS記述例 CSS文法
ファーストチャイルドハック html:first-child p { margin: 10px; }


<補足>
firefoxのみに効く、モズドキュメントハックとコメントモズエニーリンクハックもあるようですが、W3C/CSSValidationでは文法エラーになってしまいます。

モズドキュメントハック
@-moz-document url-prefix() { p { margin: 10px; } }

コメントモズエニーリンクハック
html>/**/body p, x:-moz-any-link { margin: 10px; }

CSSのおすすめ本
現場のプロから学ぶXHTML+CSS
CSSのことだけ書かれた本ではないですが、コーディングする際に役に立つ情報満載です。HTML+CSSをはじめて間もない方や、中級者の方でも自分のやりかたに不安がある方はお手に取ってみてみてください。
個人的オススメ度:★★★★

Web標準テキスト(2) CSS (Web標準テキストシリーズ)
CSSについて書かれた本です。私は、ネット上でCSSの情報を拾ってきてばかりいたので、自分の知識を整理するために購入しました。会社の机の上にいつも置いてます。(誤植が多いらしいです。)
個人的オススメ度:★★★

Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。
知ってることも多いかもしれませんが、きっと、すぐ役立つ本だと思います。
個人的オススメ度:★★★★

  • URL:https://yaplog.jp/movieee/archive/169
Comment
小文字 太字 斜体 下線 取り消し線 左寄せ 中央揃え 右寄せ テキストカラー 絵文字 プレビューON/OFF

不正な自動コメント投稿を防ぐため、チェックボックスにチェックをしてください。

利用規約に同意する
 X 
禁止事項とご注意
※本名・メールアドレス・住所・電話番号など、個人が特定できる情報の入力は行わないでください。
「ヤプログ!利用規約 第9条 禁止事項」に該当するコメントは禁止します。
「ヤプログ!利用規約」に同意の上、コメントを送信してください。
P R
チケットぴあ
プロフィール
  • プロフィール画像
  • アイコン画像 ニックネーム:movieee
  • アイコン画像 性別:女性
  • アイコン画像 血液型:B型
  • アイコン画像 職業:専門職
読者になる
Webデザイン、コーディングをしています。
パソコンが好きでいろいろ触っては壊して、、、を繰り返してます。組み立てる事も楽しいですが、解体するほうがもっと楽しいです。
このブログはパソコンの不具合やコーディングで困ったことを主に書いています。
もう一つコーディングに関してのブログ書いています。よかったら遊びに来てください!

最近読んだおすすめの本

Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
XHTMLの文法や規格を習得したい方へ…

佐藤可士和の超整理術
仕事や日常をデザインしたい方へ…

デザイン・ルールズ デザインをはじめる前に知っておきたいこと
初心へ帰りたいデザイナーの方へ…

Yapme!一覧