Webブラウザ別CSSハック＆フィルタTips
連載インデックスへ
 Webブラウザ別CSSハック＆フィルタTips（3）

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

有限会社タグパンダ
喜安 亮介
2009/12/16

モズエニーリンクハック

  • Moz Any Link Hack

　IE 7やFirefox、Mac OS XのIE 5に適用します。使用方法は、IE7、Firefox、Mac OS XのIE 5に適用させたいセレクタの後に「, x:-moz-any-link, x:only-child」を記述するだけです。「moz」が付いているのは、Mozillaの独自拡張です。

　独自拡張なので、W3C CSSバリデーションには通らず、文法的には正しくありません。「-moz-any-link」というのは「:link」「:visited」にマッチします。Firefox 3にも対応しています。

■ 構文

p, x:-moz-any-link, x:only-child{color:#f00;}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample10</title>
  <style type="text/css">
    p, x:-moz-any-link, x:only-child{color:#f00;}
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

モズドキュメントハック

  • @Moz Document Hack

　Firefoxに適用します。使用方法は、「@-moz-document url-prefix() { } 」の「｛　｝」の中に、Firefoxのみに適用させたいスタイルを記述するだけです。

　「moz」と付いているのはMozillaの独自拡張なのですが、「@-moz-document url-prefix(http://example.com)」のように記載すると、そのURLで始まるページにスタイルが適用されます。「（）」内を空にすることで現在のページに適用しています。Firefox 3にも対応しています。

　W3C CSSバリデーションには通らず、文法的には正しくありません。

■ 構文

@-moz-document url-prefix() { p { color: #f00; } }

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample11</title>
  <style type="text/css">
    @-moz-document url-prefix() { p { color: #f00; } } 
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

コメントモズエニーリンクハック

  • Comment Moz Any Link Hack

　Firefoxに適用します。Firefox、Mac OS XのIE 5に適用させたいセレクタの前に「html>/**/body」を記述し、「, x:-moz-any-link」を記述することで使用できます。

　IE 7以外に適用されるコメントハックと、Mozillaの独自拡張を併記することにより、Firefox 3.5、Mac OS XのIE 5に適用させています。現状、制作案件でMac OS XのIE 5に対応させる必要はなくなってきているので、このハックを使う必要性は少ないと思います。Firefox 3にも対応しています。

　W3C CSSバリデーションには通らず、文法的には正しくありません。

■ 構文

html>/**/body p, x:-moz-any-link{color:#f00;}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample12</title>
  <style type="text/css">
    html>/**/body p, x:-moz-any-link{color:#f00;}
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

■ 備考

　下記のように「x:default」を追記しても同じ挙動です。これも、W3C CSSバリデーションは通りません。

html>/**/body p, x:-moz-any-link, x:default { color: red; }

xmlns属性セレクタハック

  • Xmlns Attribute Selector Hack

　Opera 10に適用します。使用方法は、「html[xmlns*=""] body:last-child」を、セレクタの前に記述するだけです。

　「html[xmlns*=""] 」は、「xmlns属性を持ち、1つ以上その値を含んでいるものに適用する」という意味で、「:last-child」は、「最後にある子要素に適用する」という意味です。

　また、Safari 3では利用できていましたが、バージョンアップに伴い、Safari 4では利用できなくなったようです。W3C CSSバリデーションには通らず、文法的には正しくありません。

■ 構文

html[xmlns*=""] body:last-child p{color:#f00;}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample13</title>
  <style type="text/css">
    html[xmlns*=""] body:last-child p{color:#f00;}
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

ウェブキットハック

  • WebKit Hack

　レンダリングエンジンの「WebKit」を利用しているWebブラウザ、例えば、SafariやGoogle Chromeに適用します。使用方法は、Safari、Google Chromeに適用させたいセレクタを「@media screen and (-webkit-min-device-pixel-ratio:0){}」で囲むだけです。

　一応「（）内の条件（最小のピクセルが0の場合）」が当てはまる場合のみ適用させるという意味になっていますが、これだと全部該当するので、基本的には「WebKit」を用いているかどうかで、対応Webブラウザが決まります。

　Safari 3にも対応しています。W3C CSSバリデーションには通らず、文法的には正しくありません。

■ 構文

@media screen and (-webkit-min-device-pixel-ratio:0){
p{
  color:#f00;
}
}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample14</title>
  <style type="text/css">
    @media screen and (-webkit-min-device-pixel-ratio:0){
    p{
      color:#f00;
    }
    }
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

Mac IEスターハック

  • Mac IE Star Hack

　Mac OS XのIE 5に適用します。使用方法は、Mac OS XのIE 5のみに適用させたいセレクタの前に、「* html>」を記述するだけで、使用できます。

　「スターハック（* html）」と子セレクタを組み合わせたハックです。スターハックを適用するものの中で子セレクタに対応しているのがMac OS XのIE 5のみなので、それだけに適用できます。

■ 構文

* html>body p{
  color:#f00;
}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample15</title>
  <style type="text/css">
    * html>body p{
      color:#f00;
    }
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

インポートハック

  • インポートシングルクォーテーションハック（@import Single Quotes w/o Whitespace）

　Mac OS XのIE 5には適用されません。使用方法としては、読み込みたい.cssファイルをシングルクォーテーションで囲むだけで適用します。このハックはIE 5.5以下の古いWebブラウザの@importの認識の違いを利用し振り分けています。

　対象Webブラウザを見れば分かると思いますが、2009年現在では、主要なほとんどのWebブラウザで適用しています。従って、このハックを使用する機会は少ないでしょう。さらに、外部CSSも<link>属性を使って読み込むため、このハックを使用することはないと思われます。

■ 構文

@import'style.css';

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample16</title>
  <style type="text/css">
    @import'style.css';
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

■ 備考

　そのほか、下記の書き方でも挙動は同じです。

  • インポートダブルクォーテーションハック（@import Double Quotes w/o Whitespace） 
@import"style.css";
  • インポートスペースシングルクォーテーションハック（@import Single Quotes w/o url()）
@import 'style.css';
  • インポートシングルクォーテーションハック（@import Single Quotes w/ url()）
@import url('style.css');

　また、下記のような書き方だと、すべてのWebブラウザで適用してしまうため、ハックとして機能しません。

  • インポートスペースシングルクォーテーションハック（@import Double Quotes w/o url()）
@import "style.css";
  • インポートノークォーテーションハック（@import No Quotes w/ url()）
@import url(style.css);
  • インポートシングルクォーテーションハック（@import Double Quotes w/ url()）
@import url("style.css");

メディアタイプ混在ハック

  • @media with Media Type in Mixed Case

　Mac OS XのIE 5には適用されません。使用方法は、Mac OS XのIE 5に適用させたくない部分を「@media all {}」で囲うだけです。

　こちらも古いタイプのWebブラウザを振り分ける際に使用していましたが、2009年現在の主要なWebブラウザではほとんど適用しているため、あまり実用的ではありません。Mac OS XのIE 5もサポートが終了しているので、こちらを考慮する機会は減っています。

■ 構文

@media all {
p {
  color: #f00;
}
}

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample17</title>
  <style type="text/css">
    @media all {
    p {
      color:#f00;
    }
    }
</style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

ホーリーハック、バックスラッシュハック

  • Escaped Comment End

　Mac OS XのIE 5には適用されません。使用方法は、Mac OS XのIE 5に適用させたくない部分の最初に「/* \*/」を記述し、最後に「/* */」を記述するだけです。

　Mac OS XのIE 5のコメントアウトの解釈の違いを利用したハックです。Mac OS XのIE 5はコメントアウトの終了（*/）の前に「\」マークを記述すると、コメントアウトが終了していないと認識するため、その中に記述している指定までコメントアウトされてしまいます。よって、Mac OS XのIE 5とそのほかのWebブラウザを振り分けることが可能です。

■ 構文

/* \*/
p {
  color: #f00;
}
/* */

■ コーディングサンプル（←クリックすると、実際にサンプルがWebブラウザで見られます）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>sample18</title>
  <style type="text/css">
    /* \*/
    p {
      color: #f00;
    }
    /* */
  </style>
</head>
<body>
  <p>対応Webブラウザではテキストが赤色で表示されます。</p>
</body>
</html>

■ 備考

　以上のことを逆に応用すると、Mac OS XのIE 5のみに適用することも可能です。「/* \*/」の後ろに「/*/」を付けると、Mac OS XのIE 5のみに適用します。

/* \*//*/
p {
  color: #f00;
}
/* */

　下記のように書くと、IE 8とMac OS XのIE 5のみに適用します。

/*\*/ html:\66irst-child /**/ p{color:#f00;}

【おわりに】CSSハックの利用はリスクを見極めて慎重に

　CSSハック／フィルタの連載も、今回で最後ですが、いかがでしたでしょうか？ 今回の連載では、有名なハックから、普段あまり使われないマイナーなハックまで、リファレンス的に一挙にまとめてみました。

　CSSハックを使った技術は、今後レンダリング性能が上がったモダンブラウザが普及していき、IE 6やIE 7の普及率の減少するにつれて、少しずつ使われなくなっていくであろうと思われます。当たり前のことですが、CSSハックを使わずともズレることのない設計を行うことが、実装のうえで大前提になります。

　しかし、実際の制作現場（特に、保守案件）ではハックを使用せざるを得ない局面がたくさんあります。こういった局面では、どのハックを、どの部分に、どうやって使っていくことが、最もリスクが少ない実装なのかを見極めながら慎重に利用していきましょう。

　特に気を付けなければならないのは、文法的な間違い（バリデーションエラー）をついたハックを使って制作されたサイトは、将来のWebブラウザのバージョンアップにより、サイトが予想外の不具合を引き起こす元となります。こういったリスクが存在することを理解したうえで、適切に使用していきましょう。

■ ＠IT関連記事

いまさら聞けない“Web標準”、そしてXHTML＋CSS
いまさら聞けないリッチクライアント技術（4）　今回はXHTMLとCSSを使ったWeb標準規格を紹介。その歴史や役割、さらにはHTMLとXHTMLの違いやCSSについても解説
「リッチクライアント ＆ 帳票」フ ォーラム 2007/9/19
D89 Web標準HTMLタグリファレンス
Web標準に基づいたXHTMLタグの正しいマークアップ方法のリファレンス一覧です。Web標準のタグリファレンスを7回連載でおさらいします
WebデザイナのためのHTMLチューニング入門
Webサイトを見た人の印象を良くするのか悪くするのかには“速度”が大きくかかわってきます。FirefoxのプラグインYSlowで測る7つの計測ポイントから“速い” HTMLの書き方を学びましょう
業務で使える！ 無料Webサイト作成ツール集
Webオーサリングツールを使ってみよう：特別編　HTML＋CSS、JavaScriptでWebぺージを作るときにどんなツールを使ってますか？ 無料でも便利なものがたくさんあります
「リッチクライアント ＆ 帳票」フォーラム 2007/7/6
Webブラウザ非互換性の温床となったのは何か？
AcidテストとWebブラウザの仕組み（前編）　IE8.0やFirefox3.0の出現で、注目されるWebブラウザ。いまこそ、復習しよう。Webブラウザの非互換性の発生源を探ろう
「リッチクライアント ＆ 帳票」フ ォーラム 2008/7/3
Webブラウザ標準適合性のわなとAcidテストの正体
AcidテストとWebブラウザの仕組み（後編）　1つのWebページを開くだけで100項目のWebブラウザの標準適合性が検証できるAcidテスト。Acidテストの正体に踏み込む
「リッチクライアント ＆ 帳票」フ ォーラム 2008/7/31
テキストエディタでWebサイト構築をガンバル人へ
どこまでできる？ 無料ツールでWebサイト作成（6）　テキストエディタで「あえて」Webページをコーディングしている人のために便利な無料の補助ツールをいくつか紹介します
「リッチクライアント ＆ 帳票」フォーラム 2008/2/5

喜安 亮介……1980年愛媛県生まれ。タグパンダの代表取締役。ディレクター兼デザイナーとしてWeb制作案件に携わる。社名のパンダは、「白・黒はっきりした正しい判断力と柔軟性のあるクリエイティブな発想」を提供するという思いから。

3/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メールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

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

本日 月間
＠IT