ハックコレクション

この投稿では、私が知っているCSSのすべてのハックを収集しようとしました。 ほとんどのハックは常にIEでのみ使用されているため、多くの人は通常の最新のブラウザーの必要性を疑うかもしれませんが、この投稿は好奇心が強い人向けです:)、レイアウトではハックを使用しない方が良いでしょう。 しかし、とにかく、一度彼らがいると、彼らについて知らないのは罪です。

Safariによって処理される同じOperaの多くのハックとは異なり、コードを少し変更し、Opera 9.2、Opera 9.5、Safari 3は独自のcssを表示します。

ドキュメントの本文でブラウザに対応するdivを表示または非表示にするcssファイルを作成したので、ハックですべてが正常かどうかを簡単に追跡できます。

.browser { 位置絶対 ; top0 px ; 0 px ; z-index2 ; パディング10 px }
.browser div { displaynone }

/ *すべての健全なブラウザ* /

*:lang(ru)#lightMOD { displayblock } / *トリッキーなセレクター-最新のブラウザーはすべてIE6またはIE7ではありません* /
html> / ** / body #lightMOD { displayblock } / *ライブコメント-最新のブラウザーはすべてIE6またはIE7ではありません* /

/ * IE * /

* html#lightIE6 { displayblock } / *ロイヤルティの解析 -IE6 およびIE7の互換モードで動作します* /
* + html#lightIE7 { displayblock }

body div.stopper {
100 ;
最大幅1100 px ;
最小幅900 px ;
* widthexpression(document.body.clientWidth > 1100"1100px"document.body.clientWidth < 900"900px""100%" ); / * 1つのプロパティのオーバーライド-この場合、最小幅と最大幅のエミュレーション* /
}

/ * FireFox * /

@ -moz-document url-prefix(){

/ *すべてのFireFoxについて、一般に、FFによってのみ処理されるフレームのおかげで、スタイルなしで既にスタイルを記述できます* /
#lightFFx:-moz-any-link { 表示ブロック }

/ *主なことは、登録を間違えることです。IDに対してのみ機能します* /
#lightFF2 [id = lightff2] { displayblock }

/ * Firefox 3には新しいセレクターがあります:デフォルト。 アラームは、IEをフレーミングせずに、この構成を理解します* /
#lightFF3x:-moz-any-linkx:default { displayblock }

}

/ * Opera 9.5 * /

/ * Opera 9.5だけでメディアが処理された後ではなく-どうやらこの方法で書くことはできないか、そのようなフォーメーションのサポートをまだ導入していないか、賢明に使用し、曲がっている可能性のあるものの中に書いてはいけません。プロセス* /
すべてではないメディアおよび(-webkit-min-device-pixel-ratio) {

#lightO95 { 表示ブロック }

}

/ * Opera 9.2 * /

/ * Operaはこの設計をサポートしていませんが、とにかく未知の理由でOpera 9.2が処理します-注意することもお勧めします* /
メディアすべておよび(スキャン:プログレッシブ) {

#lightO92 { displayblock }

}

/ * Safari * /

/ *最初の構造はOpera 9.5に対するものであり、Opera 9.5は2番目の構造を理解し、2番目はOpera 9.2に対するものです。 上部の歪み:)一般に、安全な設計、なぜなら 9.2はもはや進化せず、明らかに処理できません。first-of-type、および-webkit-は独自のプロパティであり、Opera 9.2は9.5のサポートの欠如に起因する誤った処理を行います* /
/ * Safariは両方を理解するため、ハックは機能します* /
media allおよび(-webkit-min-device-pixel-ratio:0) {

body:最初のタイプ#lightSF3 { displayblock }
/ *代わりに:first-of-typeを使用することもできます:nth-​​of-type(1)-Safari 3.1用です* /

}

私は多かれ少なかれコードを強調しました...

IE8のハックはまだないか、本当に良いでしょう;)しかし、私は個人的に疑います... MSは-ms-プロパティを導入しようとしています(私はすでに自分の目で-ms-box-modelを見ました)。 一般的に、正しい方法-このような「熊手」が最も安全です。

http://test.dis.dj/css/で実際に動作を確認できます(右側には、ハッキングが機能した出力のブロックがあります)。

コメントで正しく指摘されているように、問題の本質をもっと説明しておくといいでしょう。 それで、ハッキングとは何であり、なぜ彼らはそれらの使用があふれているのでしょうか。

すべてのハッキングは、いくつかのカテゴリに分類できます。
1.純粋な形式のハック-ブラウザパーサーによるCSSルールの処理における忠誠心の使用(たとえば-IEの幅)
2.意図的にCSSを追加し、他のブラウザーは原則的に純粋に理解しない(特にここでは、Mozillaはプロパティ-moz-と素晴らしいもの@ -moz-documentを使用してステアリングします。
3.機能ブラウザーは、CSS3などのイノベーションをサポートします。 IE6については、CSS2の部分も理解していません(子セレクターE> Fなど)

ハックの最初のグループは無効なCSSにつながり、一般に安全に使用できます。 曲がったコードを処理する必要はありません。したがって、健全なブラウザはそのようなことをスキップします。 少なくとも、MS自体は、第7 IEでも標準モードでほとんどのハックを処理しないため、MS(ハック)の将来に対する恐れはありません。

2番目のグループは、おそらく最も安全なオプションです。 開発者が突然自分のイノベーションを放棄することを決定しない限り。

3番目のグループは、最も陰湿で望ましくないポイントです。 CSS Constructions Media Queryは、すべてのブラウザーが遅かれ早かれサポートする公式のCSS3です。 さまざまなトリッキーなセレクターも公式に推奨されています。 したがって、あるブラウザのハックが他のブラウザによっても解釈される瞬間が来るかもしれません。 代表的な例はOperaとSafariです。 両方とも部分的にサポートされており、細かい点で異なりますが、それらのおかげでルールを分けることが可能になりました。 このバージョンのセミハックには、Opera 9.5の場合のように、意図的に構文エラーや不正確さが導入される場合があります。 これは、もちろん、新しいバージョンをある程度保存しますが、それでも良い方法を見つけることはできません。

著者の個人的な意見:ハックは悪であり、ハックは少なければ少ないほど良い。 誰もが知っている方法を実装する必要がある場合にIE6でのみ使用する必要がありますが、実装しません(透明度、最小最大幅など)。

UPD。 IE8のハック: /*/ #nav a {position:relative;} /**/
UPD2。 標準モードでのIE8のハック: .test { color /*\**/: blue\9 }
UPD3。 IEのハック(標準モードの8番目を含む) .test { color: blue\9 }

PSプラスのおかげで-これは私の最初の投稿です:)

Source: https://habr.com/ru/post/J43318/


All Articles