Webブラウザ別CSSハック&フィルタTips
連載インデックスへ
Webブラウザ別CSSハック&フィルタTips(3)

モダンブラウザでも使えるCSSハック18選

有限会社タグパンダ
喜安 亮介
2009/12/16
Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック&フィルタTipsをお届けします(編集部)

モダンブラウザとMac OS XのIE 5でも使えるCSSハック

 前回の「IE 6とIE 7のためのCSSハック16選」では、IE 6とIE 7のためのCSSハックのテクニックを紹介しましたが、今回は、モダンブラウザでも使えるCSSハックのテクニックを下記に分けて紹介します。

 前回同様、どちらの場合にしてもIE 6/7/8とほかのWebブラウザとの挙動を分けられるので、IE 6/7/8用のハックとして分類できることになります。また、そのほかのWebブラウザのハックに関しても同じ分け方です。

  • IE 6/7/8以外のすべてのWebブラウザで読み込む → IE 6/7/8のハックとして機能する
  • 逆に、IE 6/7/8で読み込む → IE 6/7/8のハックとして機能する

 ちなみに、Mac OS XのIE 5のシェアは皆無といっていいレベルなので、Mac OS XのIE 5以外のWebブラウザを分類する際には、Mac OS XのIE 5の○×は無視してあります。

 一方で、Mac OS XのIE 5のためのハックもあります。

 これらを表にまとめます。検証Webブラウザは、下記の通りです。

  • Windows:IE 6、IE 7、IE 8、Firefox 3.5、Safari 4、Chrome 3、Opera 10
  • Mac OS X:IE 5、Firefox 3.5、Safari 4、Opera 10
表 Webブラウザ別CSSハック(2)(表の完全版は連載インデックスにあります)
  名称 Windows Mac OS X バリデーション
IE 6 IE 7 IE 8 Firefox 3.5 Safari 4 Chrome 3 Opera10 IE 5 Firefox 3.5 Safari 4 Opera 10
IE 6/7/8をハック コンディショナルコメント × × × × × × × ×
ユーザーエージャントハック × × × × × × × ×
ルートセレクタハック × × × ×
ファーストオブタイプハック × × × × ×
否定lang疑似クラスハック × × × × ×
ノットターゲットハック × × × × ×
構造的な疑似クラスハック × × × × ×
否定Nth child疑似クラスハック × × × × × × ×
IE 8をハック ファーストチャイルドハック × × × × × × × × ×
IE 7、Firefoxをハック モズエニーリンクハック × × × × × × × ×
Firefoxをハック モズドキュメントハック × × × × × × × × × ×
コメントモズエニーリンクハック × × × × × × × × ×
Operaをハック xmlns属性セレクタハック × × × × × × × × × ×
Safari、Chromeをハック ウェブキットハック × × × × × × × × ×
Mac OS XのIE 5をハック MacIEスターハック × × × × × × × × × ×
インポートハック ×
メディアタイプ混合ハック ×
ホーリーハック
バックスラッシュハック
(/* \*/)
×
ホーリーハック
バックスラッシュハック
(/* \*//*/)
× × × × × × × × × ×
ホーリーハック
バックスラッシュハック
(/*\*/)
× × × × × × × × ×

 今回、紹介するCSSハックは、主に<p>要素を例にしていますが、ほかの要素でも書き方を同じにして、pの部分を書き換えれば適用できます。ただし一部のハックでは、要素が限定されるものもあります。

 CSSハックの基本については、下記記事をご参照ください。この記事はCSSの基本を紹介する連載「いまさら聞けないCSS/スタイルシート入門」に含まれますので、CSS自体の基本を抑えたい方は連載を通してご参照ください。

  1/3

 INDEX
Webブラウザ別CSSハック&フィルタTips(3) 
モダンブラウザでも使えるCSSハック18選
Page1
モダンブラウザとMac OS XのIE 5でも使えるCSSハック
  Page2
コンディショナルコメント
ユーザーエージェントハック
ファーストオブタイプハック
否定lang疑似クラスハック
ノットターゲットハック
構造的な疑似クラスハック
否定Nth child疑似クラスハック
ファーストチャイルドハック
  Page3
モズエニーリンクハック
モズドキュメントハック
コメントモズエニーリンクハック
xmlns属性セレクタハック
ウェブキットハック
Mac IEスターハック
インポートハック
メディアタイプ混在ハック
ホーリーハック、バックスラッシュハック
【おわりに】CSSハックの利用はリスクを見極めて慎重に

[an error occurred while processing this directive]
「デザインハック」コーナーへ



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間