💅🏽 🐕 🐤 高度なCSSハックコレクション 😥 🤚🏼 🈚️

この記事は、同様の記事と比較したCSSハックの拡張コレクションです。

ハッキングとは、特定のブラウザのみがCSSを認識できるようにする方法です。

ハックは、レイアウトのバグを修正するためだけでなく、特定のブラウザ機能を使用してWebページのレンダリングを高速化する場合にも使用できます（CSS3プロパティなど）

IEの条件付きコメントは誰でも知っている

その名声にもかかわらず、めったに使用されないものが多くあります。

たとえば、IEバージョン5〜8を除くすべてのブラウザーに表示されるスタイルシート。

 < link href ="styles.css" rel ="stylesheet" media ="all" /><! -- [ endif ] -- >

第6、第7、第8バージョンの条件付きコメント（第8バージョンもサポートしています-驚かないでください）：

IEのその他のハッキング

* html .class{background:red}

htmlページにdoctypeがある場合、このハックはIE6でのみ機能します。

quirks-modeの場合、ハックはIE6およびIE7で機能します。

*+html .class{background:red}

または

*:first-child+html .class{background:red}

HTMLページにdoctypeがある場合、このハックはIE7で機能します。

IE6でのみ動作するダーティハック

.class{ _background:red }

.class{ -background:red }

IE7でのみ機能するダーティハック

-,.class{ background:red; }

IE6およびIE7で動作するダーティハック

.class{ *background:red }

.class{ //background:red; }

.class{background:red!ie}

IE6およびIE7で動作するハックです！重要なプロパティとの類似性。

IE6、IE7、Safariのダーティハック

html*.class{background:red}

Nuance-Google Chrome 2では機能しません。このハックは、8からスタイルを分離する必要がある場合にIEの一般的なCSSファイルに役立ちます

Safari 3のダーティハック

html:root*.class{background:red}

また、Chrome 2では機能しません。このハックおよびその他のサファリハックを使用する理由については、こちらを参照してください。

FF2、FF3のダーティハック

@-moz-document url-prefix(){ .class{background:red} }

FF2、FF3、IE7のダーティハック

x:-moz-any-link,.class{background:red}

FF3およびIE7のダーティハック

x:-moz-any-link,x:default,.class{background:red}

Opera 9.5およびIE7のダーティハック

noindex:-o-prefocus,.class{background:red}

オペラ専用のハックにするには、IE7をサポートしないフレーミングハックを使用します。

FF2、FF3、Safari 3、Chrome 2、Opera 9.5のハック

html:root .class{background:red}

Safari 3および4のハック、Chrome 2

@media screen and (-webkit-min-device-pixel-ratio:0) { body:first-of-type .class {background: red} }

Safari 3、Chrome 2、Opera 9.5のハック

body:first-of-type .class{background:red}

@media all and (min-width:0){ .class{background:red} }

FF2、FF3、Safari 3、Chrome 2のハック

html:not([lang*=""]):not(:only-child) .class{background:red}

このハックは、たとえば、SafariとFFでCSSを使用して角を丸くしたい場合や、他のブラウザーで写真にしたい場合に使用できます。

IE6からスタイルを分離する

 < link href ="styles.css" rel ="stylesheet" media ="all" /><! -- [ endif ] -- >

html>body .class{background:red}

head+body .class{background:red}

html:first-child .class{background:red}

IE6とIE7からのスタイルの分離

html>/**/body .class{background:red}

IE6-8からのスタイルの分離

*|html .class{background:red}

html:not([lang*=""]) .class{background:red}

IEのスタイルの分離について

マイクロソフト自体は、条件付きコメントの使用を推奨しています（公式ブログ）。私の仕事では、すべてのIEに条件付きコメントを使用します。

さらに、IE6とIE7のハック* html

と*+html

スタイルをそれぞれ分離します。残りのスタイルはすべてのIEで取得されます。

IE8レンダリングの変更

Webページのヘッダーにこの行を追加すると、コンテンツの値に応じてレンダリングのタイプが変更されます（これはハックではありませんが、プロパティはハックに非常に似ています）。

< meta http-equiv ="X-UA-Compatible" content ="IE=8" />

コンテンツの基本的な値は次のとおりです（ここから引用）。

"IE = 7"-すべてのページがレンダリングされる厳密モードをオンにします。
「IE = EmulateIE7」-DOCTYPEに応じて、標準レンダリングモード（厳密）または互換モード（Quirks）のいずれかが使用されるIE7互換モードが含まれます。
「IE = EmulateIE8」-互換表示モードがユーザーのブラウザーで有効になっているかどうかに関係なく、ページは強制的に「IE8標準」モードになり、互換モードページは互換モードで表示されます。
「IE = 8」-「IE8標準」の標準に最大限準拠するモードがオンになります。

IE8で古いプロジェクトを書き直したくない場合IE=EmulateIE7

使用できます

上記のすべての例で、.classはクラスの例（id、タグなどを指定できます）、およびbackground：redはプロパティとその値の例です。

PSあなたが見たいレイアウトに関する記事をコメントに書いてください-あなたが提案したトピックを理解したら、私はこれに関する記事を書きます。

高度なCSSハックコレクション