CSSハック

CSSハックは、ブラウザ、バージョン番号、または機能に応じてCSS マークアップを非表示または表示するために使用するコーディング手法です。ブラウザは CSS の動作をそれぞれ異なる方法で解釈し、 W3C 標準のサポートレベルも異なります。CSS ハックは、レンダリングに互換性のない複数のブラウザで一貫したレイアウト外観を実現するために使用されることがあります。これらのハックのほとんどはブラウザの最新バージョンでは機能しないため、機能サポート検出などの他の手法が普及しています。

ハッキングの種類

無効または非準拠の CSS

さまざまなブラウザによる CSS の解釈の癖により、ほとんどの CSS ハックでは、特定のブラウザでのみ解釈される無効な CSS ルールを記述するか、特定のブラウザのバグに依存します。この例としては、Internet Explorer 6 をターゲットにするために、ルールの前にアンダースコア ( のように) を付けることがあります。他のブラウザはその行を無視するため、その行を使用して 1 つのブラウザ_widthに固有のコードを記述できます。

同様の CSS ハックには、アスタリスク、空白の欠落、プロパティ名の周りの CSS コメントなどの構文エラーを誘発することが含まれます。さらに、Internet Explorer 6 および 7 では、!important感嘆符の後の任意の文字列で宣言が認識されます (例: ) !ie。^[1]

サポートされていない CSS

新しい CSS ルールは現在の標準では正しいのですが、古いブラウザでは「無効」として無視されます。古いルールの後に、古いルールを取り消したり変更したりする新しいルールを記述することで、古いブラウザでのみ特定のルールをアクティブにすることができます。

条件付きコメント

バージョン 10 より前のInternet Explorer では、 HTML ブロックを特定のバージョンのブラウザでのみ読み取ることができる特別なコメント構文がサポートされていました。これらのコメントは主に、古いバージョンのブラウザに特定の CSS および JavaScript 回避策を提供するために使用されます。他のブラウザではこれらのコメントを解釈したり、同様の機能を提供したりすることはできませんでした。

以下は、これらのコメントのさまざまな構文の例です。

< head > 
  < title >テスト</ title > 
  < link  href = "all_browsers.css"  rel = "stylesheet"  type = "text/css" > 
  <!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]--> 
  <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]--> 
  <!--[if !lt IE 7]> <![IGNORE[--> <![IGNORE[]]>  < link  href = "recent.css"  rel = " stylesheet"  type = "text/css" > <!--<![endif]--> < link href = "not_ie.css" rel = " stylesheet" type = "text /css" > <!--<![endif]--> </ヘッド>

批評家

ハックを使用してコードを隠すと、ブラウザが更新されたときにページが誤って表示されることがよくあります。これらのハックは、新しいブラウザで予期しない動作を引き起こし、以前のバージョンとは異なる解釈をする可能性があります。Internet Explorer 6 と 7 が使用されなくなって以来、CSS ハックも減少しています。機能ターゲットの最新の方法は、それほど脆弱ではなく、エラーも発生しにくくなっています。

代替案

ブラウザのプレフィックス

最も人気のあるブラウザレンダリングエンジンにはそれぞれ、実験的なプロパティ用のベンダープレフィックスがあります。しかし、ライブコードでこれらのプロパティが急増したため、ブラウザベンダーはこの方法をやめ、機能フラグを採用し始めました。^[2]

接頭辞のリスト

以下は、さまざまなレイアウトエンジンのプレフィックスのリストです。

例

/* クロスブラウザ CSS3 線形グラデーション */ 
.線形グラデーション{ 

  /* Gecko ブラウザ (Firefox) */ 
background-image : -moz- linear-gradient ( top , #D7D 0 % , #068 100 % );       

  /* オペラ */
背景画像: -o- linear-gradient ( top , #D7D 0 % , #068 100 % );       

  /* 古い Webkit 構文 */ 
background-image : -webkit- gradient ( linear , left top , left bottom , color -stop ( 0 , #D7D ), color-stop ( 1 , #068 ));       
       

  /* Webkit (Safari、Chrome、iOS、Android) */ 
background-image : -webkit- linear-gradient ( top , #D7D 0 % , #068 100 % );       

  /* W3C */
背景画像: linear-gradient (下へ, #D7D 0 % , #068 100 % );        

}

制限

ベンダープレフィックスは開発中の機能用に設計されたもので、構文が最終版ではない可能性があります。また、各ブラウザーの機能実装にルールを追加すると、多くのブラウザーをサポートする場合に拡張性が損なわれます。その結果、主要なブラウザーベンダーはベンダープレフィックスの使用をやめ、機能クエリなどの他の方法を採用するようになりました。 @supports

機能の削除

JavaScript 機能検出

特定のブラウザで利用可能な機能を検出し、それらをターゲットとする CSS ルールを記述するためのJavaScriptライブラリが複数存在します。Modernizr などのライブラリはhtml要素にクラスを追加し、などの CSS ルールを可能にします。 .cssgradients .header

機能クエリ

CSS3 では、機能クエリと呼ばれる新しい機能が導入され、CSS 内の特定の機能の検出が可能になりました (機能検出用の JavaScript ライブラリを使用する必要はありません)。この新しいディレクティブを使用すると、特定の機能のサポートの有無をチェックできます。また、チェックはand、、、orおよびと組み合わせることができますnot。当然ながら、ルールはをサポートするブラウザーでのみ機能します。@supports@supports

ヘッダー{表示:ブロック; } 
     


@ supports ( display : flex ) {ヘッダー{ display : flex ; } }

スクリプトポリフィル

JavaScript の機能検出とルールは、フォールバック機能を必要とするブラウザーをターゲットにするのに役立ちますが、特定のブラウザーのバグに対処したり、高度な機能を有効にしたりすることはできません。すべてのブラウザーで動作を一貫させるスクリプトであるポリフィルを使用すると、新しい CSS ルール ( IE 8 のメディアクエリなど) のサポートを追加したり、特定のブラウザーのバグを修正したりできます。ポリフィルは、ブラウザーに機能がない機能を追加または修正するため、機能クエリとは異なる目的を果たしますが、機能クエリと組み合わせて使用できます。 @supports

条件付きコメント

参考文献

^ Paul Irish (2009年4月15日). 「ブラウザCSSハック」www.paulirish.com . 2022年6月8日閲覧。
^ 「ベンダープレフィックス」。Mozilla Developer Network 。 2016年10月12日閲覧。

外部リンク

ブラウザの奇妙さ - ジェフ・クレイトンのライブ CSS ハックとテストで主流のブラウザをフィルタリング。Safari 7 と 8 で唯一知られている CSS ハックも含まれています。
browserhacks.com – 複数のブラウザフィルターメソッドとテスト (Hugo Giraudel、Joshua Hibbert、Tim Pietrusky、Fabrice Weinberg、Jeff Clayton)
Safari/Webkit (ウェブキット) プレフィックスフィルターリフィックスフィルター]
Mozilla (moz) プレフィックスフィルター
Opera (wap) プレフィックスフィルター – このページには、Opera のすべての CSS セレクターが記載されています。
CSS フィルター – 特定のブラウザーのルールを表示または非表示にする CSS ハックのかなり完全な表。
フィルターとクロスオーバー – CSS フィルター。解析エラーは赤でマークされています。
– CSS ブラウザセレクター – ブラウザ固有の CSS を単一のスタイルシートに組み合わせることができます (JavaScript を使用)。
– #IEroot – すべての CSS を含む単一のスタイルシートで IE をターゲットにする (JavaScript を使用せず、条件付きコメントを使用してブラウザ固有のタグを任意のコンテンツルートに割り当てる<div>)
スタイルシート内で IE (任意のバージョン) のみをターゲットにする方法 – StackOverflowでのディスカッション
IE でのみスタイルを適用する – StackOverflowでの議論
CSS コメント - CSS にコメントを追加する方法

[1] Paul Irish (2009年4月15日). 「ブラウザCSSハック」www.paulirish.com . 2022年6月8日閲覧。

[2] 「ベンダープレフィックス」。Mozilla Developer Network 。 2016年10月12日閲覧。