過去のCSSの奇妙な挙動

ウェブの浮き沈みは、私たちを今日のこの場所に導きました。ここに至るまでの道のりがなければ、私たちが知っているようなウェブは存在しなかったでしょう。しかし、その道のりのいくつかの段階は、控えめに言っても興味深いものでした。CSSはウェブ上の要素をスタイル設定するためのものですが、その誕生以来、時にはそれ以上の役割を担わされてきました。奇妙な役割を引き受け、おそらく持つべきではなかった振る舞いを身につけてきました。それが人生というものです。文脈依存の奇妙なHTMLについて詳述してきたように、これは主に仕様外のCSSに焦点を当てたものです。ブラウザ固有のハック、技術に限定された構文、そして疑わしい状況、企業の複雑さ、難解な実装から生まれたエンジン独自のコードスニペットです。 プロパティ解析 width: 300px; *width: 250px; _width: 200px; -width: 200px; ほとんどのブラウザは、アスタリスクで始まるプロパティを無効と正しく扱います。しかし、Internet Explorer 7以前では、これを有効とみなしました。それはあまりに有名になり、アスタリスクの形状から「スターハック」という名前が付けられました。同様に、アンダースコアやハイフンでプロパティを始める場合、Internet Explorer 6だけがこれを有効とみなしました。他にも多くの類似したハックが使われましたが、その大部分はbrowserhacks.comという同名のサイトに最もよく文書化されています。主な要点は、一部のブラウザがプロパティ、セレクタ、値を誤って解析し、ブラウザの動作が非常に多様だった時代にそれを有利に利用できたということです。HTMLドキュメントで行えるような、条件付きコメントを使用してCSSを特定のブラウザにのみ適用するように制限することはできませんでした。 そのため、何が無効で何が有効かという疑わしい解析のこの悪用は、特定のブラウザをターゲットにするために一般的でした。 重要な背景: red !interesting; Internet Explorer 7以前では、感嘆符で始まるほぼ全てのテキスト文字列を!importantとして扱いました。最も一般的には、人々は!ieと書くことで、スタイルがInternet Explorerでのみ優先度を上書きするように利用しました。Internet Explorerにとって、任意の!bananaと仕様上の!importantは同じでしたが、他のブラウザは後者のみを正しく受け入れました。Internet Explorer 6以下には、同じブロック内で後で宣言されたスタイルが!importantの値を上書きするという関連するバグもありました。例えば、ここでは本来白であるべきところが黒になります。 color: white !important; color: black; ドキュメントレベルのブラウザ検出 CSSを通じてドキュメントレベルでどのブラウザが使用されているかを識別する方法は数多くありました。例をいくつか挙げます。 Internet Explorer 6以前では、* html {}と書くことができました。 Internet Explorer 7のみでは、*:first-child+html {}を使用できました。 Internet Explorer以外のブラウザは、html > /**/ body {}をサポートしていました。 初期のFirefoxでは、body:empty {}内にスタイルが適用されました（bodyにコンテンツがある場合でも）。 このアプローチは、特定のブラウザのみの要素をターゲットにしようと複数の下降セレクタを書く必要があったため、使用するのがしばしば厄介でした。 Clearfix .clearfix { zoom: 1; } バージョン8まで、Internet ExplorerにはhasLayoutという概念がありました。内部フラグであり、要素が自身を描画する責任があるか（true）、親要素が責任を持つか（false）を指定しました。当然ながら、これは不明瞭で混乱を招くシステムでした。<img>、<iframe>、およびほとんどの入力関連要素は、本質的に「レイアウトを持つ」ものでした。他の要素は、特定のCSS宣言が存在しない限り、レイアウトを持ちませんでした。レイアウトを持たない要素は、奇妙なマージンや境界線の動作、位置指定の複雑さ、一般的な奇妙なレンダリングに遭遇する可能性があり、最も重要なことに、子要素がフロートされたときに親コンテナが崩壊する原因となりました。これは、ページレイアウトの事実上の方法であったフロート要素が多用された時代に、あらゆる種類の問題を引き起こしました。 zoomプロパティは、ターゲットが表示されるサイズを変更します。値が1の場合、ターゲットは既存のサイズで表示されます。これは無用に見えるかもしれませんが、zoomは要素にレイアウトを与えるため、要素の視覚的な外観を他に何も変更せずにレイアウトを与える簡単な方法として使用されました。 Hand Cursor cursor: pointer; cursor: hand; Internet Explorer 6以前では、Internet Explorerはcursorプロパティのpointer値を尊重しませんでした。代わりに、非標準のhand値のみをサポートしており、これは指差しアイコンを提供しました。そのため、サイトでは両方の値をCSSに記述することが一般的で、Internet Explorer以外のブラウザではcursor: handが無効とみなされ、pointerを使用する一方、Internet Explorerはhandを使用することを期待していました。 CSS Expressions top: expression(eval(document.documentElement.scrollTop)); 正式には「Dynamic Properties」と呼ばれるCSS Expressionsは、CSSでJavaScriptを実行する方法でした。これは、position: fixed（上記のコードスニペットが対処しているもの）やmin-width、max-widthなどのスタイリング機能の遅れを補うためにInternet Explorer 5で導入された非標準の動作でした。これにより、レイアウトの作成が非常に困難になりました。CSS Expressionsはハック的で扱いにくく、多くの複雑さを露呈しました。Date()を使用して、一日の時間に基づいて適用されるスタイルを変更することさえできました。CSS Expressionsは常に再評価されるため、パフォーマンスに非常に大きな負荷がかかりました。Yahoo! Developer NetworkブログのSteve Soudersが指摘したように、Expressionsの問題は、ほとんどの人が予想するよりも頻繁に評価されることです。ページがレンダリングされリサイズされるときだけでなく、ページがスクロールされるとき、さらにはユーザーがページ上にマウスを移動するときでさえ評価されます。Microsoftは、彼らの劇的なタイトルの投稿「Ending Expressions」で発表したように、Internet Explorer 8でそれらのサポートを終了しました。 Filters Internet Explorerには多くの不安定な動作があり、視覚効果、さらにはopacityのような基本的なプロパティでさえ、他のブラウザに遅れをとっていました。そのため、Microsoftは独自のフィルター機能をもたらしました。フィルターは、WindowsのDirectXベースのコンポーネントを使用しており、ウェブプラットフォーム標準からかけ離れていました。Internet Explorerはバージョン4で初めてフィルター機能を導入しました。構文は非常にシンプルで、要素のopacityを下げる例は次のようになります。 filter: alpha(opacity=50); これは完璧からは程遠いものでしたが、Explorerの多くの短所に対処することを可能にしました。フィルターは要素にレイアウトが必要であり、また、小さなテキストのClearTypeフォントアンチエイリアシングを剥ぎ取り、ジャギーに見えるようにするという迷惑な点もありました。時には、インタラクティビティに問題を引き起こすこともありました。 バージョン5.5では、フィルター構文はより複雑になり、次のようになりました。 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); DXがDirectXを参照していることに注意してください。フィルターはアニメーションさせることさえできました。フィルター機能の最後のアップデートで、MicrosoftはCSS標準により準拠するためにバージョン8でフィルタープロパティにベンダープレフィックスを付けました。また、フィルターがフォントアンチエイリアシングを剥ぎ取らないようにし、値を引用符で囲む必要がありました。 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; -ms-filterは、Internet Explorer 10で最終的に削除されました。この削除は、Internet Explorerのレガシーモードにも及びました。バージョン10のリリースまでには、opacityプロパティ（バージョン9で追加された）のように、フィルターのほとんどの一般的な用途はブラウザでサポートされていました。opacity以外では、Explorerのフィルター機能の非常に一般的な用途の2つは、透過PNG画像を処理することとグラデーションを適用することでした。 Internet Explorer 6以前では、PNGの透過部分はグレーの背景に置き換えられていました。後続のバージョンでも、PNGは通常、ガンマに関連する問題に遭遇する可能性がありました。そのため、人々はしばしばAlphaImageLoaderを介して画像をロードしました。 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png'); グラデーションは、背景画像を使用する代わりにフィルターで適用されました（li