NoteBook > CSSハック

CSSハック


CSSハックまたはCSSフィルタとは、ブラウザのバグやCSSへの対応状況の違いを利用して、特定のブラウザの場合のみCSSを適用させるために使用します。

目次

はじめに

メジャーブラウザ(IE,FireFox,Opera,Safari)以外や、今後の新しいブラウザでは意図しない結果を生じる可能性がありますので多用は避けるべきです。 通常、IE以外のブラウザは自動アップデート機能やユーザーの性質から、最新のブラウザに早い段階でアップデートされる傾向がありますので、特別な理由がない限り IEの旧バージョン向けの対応で十分と思われます。

コンディショナルコメント(Conditional comments)

コンディショナルコメント（条件分岐コメント）について、MSDNより次のように紹介されています。以下の文章はMSDNからの引用です。
条件分岐コメント は、Microsoft Internet Explorer 5 で導入された、IE ブラウザの種類とバージョンを特定する簡単で管理しやすい方法です。構文はコメント ベースなので、他のブラウザではステートメントは無視されます。これは、IE を対象とする * HTML フィルタなどのフィルタの代わりに使用するのに適しています。コードを見やすくするため、条件分岐コメントでは、IE 固有のスタイル シートへのリンクを設定することをお勧めします。

この方法のデメリットは、HTMLとして記述する必要があるため、サイトのHTMLファイルの量に比例して修正の量が多くなってしまうことです。しかし、SSIやプログラム等による出力であれば、そのデメリットを感じることはないでしょう。

以下に簡単に記述例を紹介します。

記述例
IEのみCSSを適用
<!--[if IE ]><type="text/css" href="iestyles.css" ><![endif]-->
IE6のみCSSを適用
<!--[if IE 6]><type="text/css" href="iestyles.css" ><![endif]-->
IE6以下にCSSを適用
<!--[if lte IE 6]><type="text/css" href="iestyles.css" ><![endif]-->
IE6以上にCSSを適用
<!--[if gte IE 6]><type="text/css" href="iestyles.css" ><![endif]-->
IE6以外にCSSを適用
<![if ! IE 6]><type="text/css" href="iestyles.css" ><![endif]-->
↑トップへ戻る

CSSハック

ここで紹介するCSSハックはCSSの構文チェックではエラーとなりません。また、今後も高い可能性で問題なく使用できると思われます。

基本的に最新バージョンよりも古いバージョンのブラウザ (変更が生じないか、または開発が終了したブラウザ) のみを対象とするCSSハックは使用しても問題の発生の確率は低いといえます。
対応ブラウザには、誤りがある可能性があります。例えば、IE8以下は将来IE9以下となる可能性を持っています。そのような可能性のあるものにはできるだけコメントを記載しています。

ハックの一覧
ハックタイプ対応ブラウザCSS2バリデーション
スターハックセレクタIE6以下,MacIE5以下Valid
IE7スターハックセレクタIE7Valid
チャイルドセレクタハックセレクタモダンブラウザ,IE7,MacIE5Valid
コメントハックセレクタIE6,IE7を除くすべてValid
ファーストチャイルドハックセレクタIE8,MacIE5,Opera9以下Valid
インポータントハックプロパティIE6Valid
ハックの説明
スターハック Star HTML Hack
対応ブラウザ
IE6以下,MacIE5以下
バリデーション
Valid
用法
* html Selector { ... }
解説

バグを利用しています。この方法は IE のみに適用されていましたが、IE 7 以降では無視されます

↑一覧へ戻る
IE7スターハック IE 7 Star Hack
対応ブラウザ
IE7
バリデーション
Valid
用法
*:first-child+html Selector { ... }
解説

バグを利用しています。

↑一覧へ戻る
チャイルドセレクタハック Child Selector Hack
対応ブラウザ
IE6以下を除くすべて
バリデーション
Valid
用法
html > body Selector { ... }
解説

IE6以下では実装されていない機能を利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
コメントハック Comment Hack
対応ブラウザ
IE6,IE7以外
バリデーション
Valid
用法
html>/**/body Selector { ... }
解説

バグを利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
ファーストチャイルドハック First-child Hack
対応ブラウザ
IE8,MacIE5,Opera9以下
バリデーション
Valid
用法
html:first-child Selector { ... }
解説

バグを利用しています。別の記述でhtml:\66irst-child Selector { ... }も同じ動作をしますが、使用しない方が良いでしょう。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
インポータントハック !important Hack
対応ブラウザ
IE6
バリデーション
Valid
用法
Property: Value !important; Property: Value;
解説

バグを利用しています。セレクタ内で!important指定があるプロパティの後に、同じプロパティがあると、IE6では先に記載された!important指定が無視されます。他のブラウザでは!importantの指定が有効となるので、注意してください。

↑一覧へ戻る
↑トップへ戻る

推奨しないCSSハック

ここで紹介するCSSハックは、次の５つのいずれかもしくは複数に該当するため、非推奨としています。種類の把握や、危険を認識した上で使用することを前提として紹介します。 対応ブラウザには、誤りがある可能性があります。例えば、IE8以下は将来IE9以下となる可能性を持っています。そのような可能性のあるものにはできるだけコメントを記載しています。

  • CSSの構文としてはバリデーションエラー（Invalid）となる。
  • 将来のバージョンでの動作が定かではない。（対象に含まれない可能性や含まれてしまう可能性がある）
  • 先に紹介した方法で代替が可能。
  • ブラウザのバージョンアップにより使用しているユーザーすでに少ない（ブラウザシェアが1%未満）
  • あまり知られていない方法であり、対応ブラウザに確実性がない。
ハックの一覧
ハックタイプ対応ブラウザCSS2バリデーション
２スターハックセレクタIE6以下,MacIE5以下Invalid
アンダースコアハックプロパティIE6以下Invalid
隣接セレクタハックセレクタIE6以下を除くすべてValid
オーウェンハックセレクタIE6以下を除くすべてValid
属性セレクタハックセレクタIE6以下とMacIE5を除くすべてValid
スター＋ハックセレクタIE7,MacIEValid
スター７ハックセレクタIE7以下,MacIE5Invalid
ハイフンハックプロパティIE6以下Invalid
スラッシュハックプロパティIE7以下Invalid
ハッシュハックプロパティIE7以下Invalid
アスタリスクハックプロパティIE7以下Invalid
!ieハックプロパティIE7以下Invalid
!important!ハックプロパティIE7以下Invalid
全角スペースハックプロパティIE7以下Invalid
タイトル属性ハックその他IE7以下,MacIE5以下Valid
タイトル属性ハックその他IE8以下,Opera10,MacIE5以下Valid
コメントハックセレクタMacIE5を除くすべてValid
コメントハックセレクタIE6,IE7,MacIE5を除くすべてInvalid
コメントハックセレクタIE6,IE7,MacIE5Invalid
ルートセレクタハックセレクタIE8以下,MacIE5を除くすべてInvalid
ファーストオブタイプハックセレクタIE8以下,MacIE5,Firefox3以下を除くすべてInvalid
否定Lang疑似クラスハックセレクタIE8以下,MacIE5を除くすべてInvalid
ノットターゲットハックセレクタIE8以下,MacIE5を除くすべてInvalid
構造的な疑似クラスハックセレクタIE8以下,MacIE5,Safari3以下を除くすべてInvalid
否定Nth Child疑似クラスハックセレクタIE8以下,MacIE,Opera10以下を除くすべてInvalid
モズエニーリンクハックセレクタIE7,FireFox,MacIE5Invalid
モズエニーリードオンリーハックセレクタIE7,FireFox1.5以上,MacIE5Invalid
モズブロークンハックセレクタIE7,FireFox3.0以上,MacIE5Invalid
モズドキュメントハックセレクタFireFoxInvalid
コメントモズエニーリンクハックセレクタFireFox,MacIE5Invalid
エンプティハックセレクタFirefox 1.5,2.0 Invalid
safariハックセレクタsafariInvalid
xmlns属性セレクタハックセレクタOpera10,Safari3のXHTMLInvalid
ウェブキットハックセレクタwebkit(chrome,safari,他)Invalid
Mac IEスターハックセレクタMacIE5Valid
インポートハックその他MacIE5を除くすべてValid
メディアタイプ混合ハックセレクタMacIE5を除くすべてValid
ホーリーハック、バックスラッシュハックセレクタMacIE5を除くすべてValid
ホーリーハック、バックスラッシュハックセレクタMacIE5Valid
ホーリーハック、バックスラッシュハックセレクタIE8,MacIE5Valid
説明
２スターハック Two Star Hack
対応ブラウザ
IE6以下 , MacIE5
バリデーション
Invalid
用法
* html*Selector { ... }
解説

バグを利用しています。スターハックとスター7ハックを組み合わせたものです。

↑一覧へ戻る
アンダースコアハック Underscore Hack
対応ブラウザ
IE6以下
バリデーション
Invalid
用法
_Property: Value;
解説

バグを利用しています。IE7で修正されました。IE7以降はカスタムプロパティとして処理されますが、適用はされません。

↑一覧へ戻る
隣接セレクタハック Adjacent Sibiling Selector Hack
対応ブラウザ
IE6以下を除くすべて
バリデーション
Valid
用法
head + body Selector { ... }
解説

IE6以前では実装されていない機能を利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
オーウェンハック Owen Hack
対応ブラウザ
IE6以下を除くすべて
バリデーション
Valid
用法
head:first-child + body Selector { ... }
解説

IE6以前では実装されていない機能を利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
属性セレクタハック Attribute Hack
対応ブラウザ
IE6以下とMacIE5を除くすべて
バリデーション
Valid
用法
html[xmlns] Selector { ... }
解説

IE6以前では実装されていない機能を利用しています。XHTMLの場合の必須属性を使用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
スター＋ハック The Next-to-nothing Hack
対応ブラウザ
IE7 , MacIE
バリデーション
Invalid
用法
*+html Selector { ... }
解説

バグを利用しています。また、Operaの古いバージョンも対象となるようです。

↑一覧へ戻る
スター7ハック Star 7 Hack
対応ブラウザ
IE7以下,MacIE5
バリデーション
Invalid
用法
html*Selector { ... }
解説

IE7以下では間にスペースがあると仮定されるバグを利用しています。htmlと*の間にスペースがないことに注意してください。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
ハイフンハック
対応ブラウザ
IE6以下
バリデーション
Invalid
用法
-Property: Value;
解説

バグを利用しています。IE7で修正されました。

↑一覧へ戻る
スラッシュハック
対応ブラウザ
IE7以下
バリデーション
Invalid
用法
/Property: Value;
解説

バグを利用しています。IE8は含まれません。

↑一覧へ戻る
ハッシュハック Hash Hack
対応ブラウザ
IE7以下
バリデーション
Invalid
用法
#Property: Value;
解説

バグを利用しています。IE8は含まれません。

↑一覧へ戻る
アスタリスクハック Asterisk Hack
対応ブラウザ
IE7以下
バリデーション
Invalid
用法
*Property: Value;
解説

バグを利用しています。IE8は含まれません。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
!ieハック
対応ブラウザ
IE7以下
バリデーション
Invalid
用法
Property: Value !ie;
解説

IE7以下では!importantの代わりに無効な識別子が指定された場合、識別子は無視されプロパティは有効となります。その他のブラウザではプロパティは無効となります。ただし!importantとはなりません。ie以外の識別子でも同様ですが、ieで動作する意味を込めて!ieと記述します。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
!important!ハック
対応ブラウザ
IE7以下
バリデーション
Invalid
用法
Property: Value !important!;
解説

IE7以下では指定されたプロパティが!important指定されたものとして扱われます。その他のブラウザではプロパティは無効となります。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
全角スペースハック Em Space Hack
対応ブラウザ
IE7以下
バリデーション
Invalid
用法
　Property: Value;
解説

バグを利用しています。プロパティの前に全角スペースを記述します。

↑一覧へ戻る
タイトル属性ハック title Hack
対応ブラウザ
IE7以下,MacIE5以下
バリデーション
Invalid
用法
<link rel="stylesheet" type="text/css" href="test1.css" media="all" title="test1">
<link rel="stylesheet" type="text/css" href="test2.css" media="all" title="test2">
解説

バグを利用しています。タイトル属性が指定された２つの外部CSSがある場合、通常、２つめのCSSは読み込まれませんが、IE7以下では読み込みます。

↑一覧へ戻る
タイトル属性ハック title Hack
対応ブラウザ
IE8以下,Opera10,MacIE5以下
バリデーション
Invalid
用法
<style type="text/css" title="test1"> ... </style>
<style type="text/css" title="test2"> ... </style>
解説

バグを利用しています。タイトル属性が指定された２つのスタイルタグがある場合、通常、２つめのは無視されますが、IE8以下では適用されます。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
コメントハック(MacIE5を除くすべて) Comment Hack
対応ブラウザ
MacIE5を除くすべて
バリデーション
Valid
用法
Selector/* */ { ... }
Selector/**/ { ... }
Property/**/: Value;
Property/* */: Value;
Property/**/:/**/Value;
解説

バグを利用しています。５つの方法のいずれも同じ動作となります。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
コメントハック(IE6,IE7,MacIE5を除くすべて) Comment Hack
対応ブラウザ
IE6,IE7,MacIE5を除くすべて
バリデーション
Invalid
用法
html~/* */body Selector { ... }
解説

バグを利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
コメントハック(IE6,7,MacIE5用) Comment Hack
対応ブラウザ
IE6,IE7,MacIE5
バリデーション
Invalid
用法
/**/ html* Selector { ... }
解説

バグを利用しています。

↑一覧へ戻る
ルートセレクタハック :root Selector Hack
対応ブラウザ
IE8以下,MacIE5を除くすべて
バリデーション
Invalid
用法
:root Selector { ... }
解説

対応していない機能を利用しています。CSS2ではInvalidですが、CSS3よりサポートされる予定です。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
ファーストオブタイプハック First of Type Hack
対応ブラウザ
IE8以下,MacIE5,Firefox3以下を除くすべて
バリデーション
Invalid
用法
body:first-of-type Selector { ... }
解説

対応していない機能を利用しています。CSS2ではInvalidですが、CSS3よりサポートされる予定です。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
否定Lang疑似クラスハック Not Lang Pseudo Class Hack
対応ブラウザ
IE8以下,MacIE5を除くすべて
バリデーション
Invalid
用法
html:not([lang*=""]) Selector { ... }
解説

対応していない機能を利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
ノットターゲットハック Not Target Hack
対応ブラウザ
IE8以下,MacIE5を除くすべて
バリデーション
Invalid
用法
html:not(:target) Selector { ... }
解説

対応していない機能を利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
構造的な疑似クラスハック Structual Pseudo Class Hack
対応ブラウザ
IE8以下,MacIE5,Safari3以下を除くすべて
バリデーション
Invalid
用法
body:nth-of-type(1) Selector { ... }
解説

対応していない機能を利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
否定Nth Child疑似クラスハック Not Nth Child Pseudo Class Hack
対応ブラウザ
IE8以下,MacIE,Opera10以下を除くすべて
バリデーション
Invalid
用法
html:not(:nth-child(n)) Selector { ... }
解説

対応していない機能を利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
モズエニーリンクハック Moz Any Link Hack
対応ブラウザ
IE7,FireFox,MacIE5
バリデーション
Invalid
用法
Selecter , x:-moz-any-link, x:only-child { ... }
解説

Firefox固有の機能を利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
モズエニーリードオンリーハック Moz Read Only Hack
対応ブラウザ
IE7,FireFox1.5以上,MacIE5
バリデーション
Invalid
用法
Selecter , x:-moz-read-only, x:only-child { ... }
解説

Firefox固有の機能を利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
モズブロークンハック Moz Broken Hack
対応ブラウザ
IE7,FireFox3.0以上,MacIE5
バリデーション
Invalid
用法
Selecter , x:-moz-broken , x:only-child { ... }
解説

Firefox固有の機能を利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
モズドキュメントハック @Moz Document Hack
対応ブラウザ
FireFox
バリデーション
Invalid
用法
@-moz-document url-prefix() { Selector { ... } }
解説

Firefox固有の機能を利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
コメントモズエニーリンクハック Comment Moz Any Link Hack
対応ブラウザ
FireFox,MacIE5
バリデーション
Invalid
用法
html>/**/body Selector, x:-moz-any-link { ... }
解説

Firefox固有の機能を利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
エンプティハック（仮称）
対応ブラウザ
Firefox 1.5 , 2.0
バリデーション
Invalid
用法
body:empty Selector { ... }
解説

Firefox 1.5 と 2.0ではbody:emptyはbody要素が選択されます。このセレクターはCSS2では構文エラーとなりますが、CSS3ドラフトではエラーとはなりません。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
safariハック（仮称）
対応ブラウザ
Safari
バリデーション
Invalid
用法
/* \*/html:\66irst-child Selector {} /* */
解説

ホーリーハックとファーストチャイルドハックを利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
xmlns属性セレクタハック Xmlns Attribute Selector Hack
対応ブラウザ
Opera10,Safari3 XHTML
バリデーション
Invalid
用法
html[xmlns*=""] body:last-child Selector{ ... }
解説

バグを利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
ウェブキットハック WebKit Hack
対応ブラウザ
Webkit(Google Chrome, Safari)
バリデーション
Invalid
用法
@media screen and (-webkit-min-device-pixel-ratio:0){ Selector {}}
解説

Webkit固有の機能を使用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
Mac IEスターハック Mac IE Star Hack
対応ブラウザ
MacIE5
バリデーション
Valid
用法
* html>body Selector { ... }}
解説

バグを利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る
インポートハック @import Single Quotes w/o Whitespace
対応ブラウザ
MacIE5を除くすべて
バリデーション
Valid
用法
@import'style.css';
@import"style.css";
@import 'style.css';
@import url('style.css');
解説

MacIE5ではいずれの記述方法も無視されます。

↑一覧へ戻る
メディアタイプ混合ハック @media with Media Type in Mixed Case
対応ブラウザ
MacIE5を除くすべて
バリデーション
Valid
用法
@media all { Selector { ... } }
解説

対応していない機能を利用しています。MacIE5では無視されます。

↑一覧へ戻る
ホーリーハック、バックスラッシュハック Escaped Comment End
対応ブラウザ
MacIE5を除くすべて
バリデーション
Invalid
用法
/* \*/ Selector { ... } /* */
解説

バグを利用しています。MacIE5では\*はエスケープされるため無視されます。

↑一覧へ戻る
ホーリーハック、バックスラッシュハック Escaped Comment End
対応ブラウザ
MacIE5
バリデーション
Invalid
用法
//* \*//*/ Selector { ... } /* */
解説

バグを利用しています。

↑一覧へ戻る
ホーリーハック、バックスラッシュハック Escaped Comment End
対応ブラウザ
MacIE5,IE8
バリデーション
Invalid
用法
/*\*/ html:\66irst-child /**/ Selector{ ... }
解説

バグを利用しています。将来のバージョンも含まれる可能性があります。

↑一覧へ戻る

参考サイト

↑トップへ戻る