CSS（Cascading Style Sheets）プログレッシブエンハンスメントの詳細説明

カスケード スタイル シート (CSS) を使用して、プログレッシブ エンハンスメントを作品に組み込む方法は数多くあります。この記事では、最も成功している方法のいくつかについて説明し、サイトを段階的に強化する他の方法を検討します。

スタイルシートの構成

多くの Web デザイナーや開発者は、ドキュメントにスタイル シートを導入する方法についてあまり考えていませんが、実際にはこれは芸術です。適切なアプローチを使用すれば、プログレッシブ エンハンスメントの多くのメリットをすぐに得ることができます。

複数のスタイルシートを使用する

スタイルを少し分割すると、多くのメリットが得られます。明らかに、1500 行を超えるスタイルシートは維持するのが少し難しく、複数のスタイルシートに分割するとワークフローが改善され、労力が節約されます。めったに言及されないもう 1 つの利点があります。ターゲットのメディア タイプ (翻訳: コンピュータ、プリンタ、テレビ、携帯電話などのさまざまなメディア タイプを指します) でより一貫したプレゼンテーション効果を得るのに役立ちます。

main.css ファイルには、サイトのすべてのスタイル ルールが含まれており、タイポグラフィ、レイアウト、色を含む独立したスタイル シートに分割し、それに応じて type.css、layout.css、color.css という名前を付けることを検討してください。


(図: 1 つのスタイル シートを複数の関連するスタイル シートに分割する方法)

上記の分離が完了したら、いくつかの魔法のトリックを使用して、古いブラウザ (IE5/Mac など) や CSS レイアウトの強力なサポートが欠けている多くのブラウザに「忠実度の低い」エクスペリエンスを自動的に提供することができます。やり方は？すべてはファイルをインポートする方法によって異なります。 main.css が link 要素を通じて導入されると仮定します。


まず、上記の参照行を 3 つの関連するスタイルシートに分割します。


以前は、多くの開発者がメディア値を「スクリーン」または「プロジェクション」に設定し、Netscape 4.x ではレイアウト スタイルを完全に無効にしていました (注釈: Netscape 4.x は、フローティングや配置などの複雑なレイアウトをサポートしていません)。ただし、より良い解決策があります。この方法を詳しく説明する前に、代替メディアの種類を見てみましょう。

オプションのメディアタイプ

プログレッシブ エンハンスメントは主にコンテンツに焦点を当てており、コンテンツ表示をサポートするすべてのデバイスに「強化された」エクスペリエンスを提供したいと考えています。したがって、印刷デバイスやモバイル デバイスなど、ブラウザ以外のデバイスを考慮することが重要です。

残念ながら、モバイル デバイス市場はまだ細分化されており、未成熟です (すべてのハンドヘルド ブラウザが「画面」を対象としたメディア タイプ スタイルをレンダリングすると考えてはいけません)。その結果、すべてのメディアにおけるプログレッシブ エンハンスメントについて詳しく説明すると、本ではないにしても、何ページもかかることになります。ただし、絶望しないでください。モバイルの世界では、違いが統一され始めており、非常に賢い人々がリソースを結集して、私たちの発展を支援し始めています。ただし、時間と労力を節約するために、印刷デバイスに焦点を当てます。

通常、印刷スタイルを追加するには別のリンク要素を使用する必要があります。


慣例により、上記のスタイル シートには、レイアウトや色のルールを含む、印刷関連のルールがすべて含まれています。特にレイアウトに関しては、スタイル シートのルールのほとんどが main.css からコピーされる可能性が高く、言い換えると、多くの重複コードが発生します。

パブリケーション スタイルとカラー スタイルをレイアウト スタイルから分割することの利点がわかります。印刷スタイル シートでこれらの繰り返しルールが必要なくなりました。これに加えて、別の組織上のヒントを使用して、サイトの使いやすさを向上させたり、問題のあるブラウザーから特定のレイアウト スタイルを非表示にしたりすることができます。

スタイルシートを振り返って、次のコードを考えてみましょう。


メディア タイプを宣言していないため、Netscape 4.x はこれら 3 つのファイル内のすべてのスタイルを読み取ります。ただし、Netscape ブラウザは基本的な CSS を理解するので、これを利用できます。 layout.css に含まれるすべてのスタイルを、適切に screen.css という名前の新しいスタイル シートに移動することで、スタイルをさらに整理できます。最後に、layout.css のコンテンツを更新して screen.css をインポートします。これにより、NS4.x とその兄弟ブラウザはスマートではなくなります (@import ディレクティブを理解できないため)。 (翻訳注: 著者がここで話しているのは、layout.css のすべてのコンテンツを screen.css に移動し、次に、layout.css の @import を通じて screen.css を導入することです。最善の方法は、これを次の場所に追加することだと思います。 layout.css NS4.x でも理解できる最も基本的なレイアウト スタイルを保持し、他の高度なレイアウト スタイルを screen.css に移動します。


改善の余地がいくつかあります。スタイルシートがターゲットとするメディアを宣言する必要があります。メディア タイプを @import 宣言に追加することで宣言します。


問題は、IE7 以前のブラウザはこの構文を理解できないため、上記のスタイル シートを無視することです。これらのブラウザに上記のスタイル シートを提供したい場合 (これはしばしば望まれることです)、条件付きコメントを使用すると簡単に実行できます。以下で詳しく説明します。ワシのように鋭い目を持っている人なら、スタイル シート名の両側に二重引用符 (") の代わりに一重引用符 (') が使用されていることに気づいたかもしれません。この小さなトリックにより、IE5/Mac はスタイルを無視できます。 IE5/Mac の CSS レイアウト機能は非常に弱く (特にフローティングと位置決めのサポート)、結局のところ、色とレイアウトの情報を取得できるので、場合によっては十分であるため、レイアウト ルールを非表示にしても問題ありません。 。

同じ手法を使用して、print.css ファイル (ご想像のとおり、印刷レイアウトの特定のルールが含まれています) をインポートできます。


美しく整理されたスタイル シートだけでなく、サイトのデザインを段階的に強化する効果的な方法も提供できるようになりました。


(複数のスタイル シートがどのように相互に関係し、それらをドキュメントに適用するかを示す図)

IE6はどうやって対処すればいいのでしょうか？

多くの人にとって、Internet Explorer 6 は新しい Netscape 4 であり、誰もがそれがなくなることを望んでいます。

IE6 の問題についての喧々諤々の話はやめましょう。 IE6 の問題は詳しく文書化されており、正直に言って、修正するのはそれほど難しくありません。さらに、IE7 の採用は (特に消費者市場で) 非常に急速であり、IE8 はすでにパブリック ベータ版になっています。これは、いつか、老朽化し​​た IE6 に本当に別れを告げることができることを意味します。

意図的か非意図的かにかかわらず、Microsoft が IE5 を発表したとき、条件付きコメントという段階的な機能強化のための優れたツールが提供されました。これらの賢いロジック (他のすべてのブラウザでは HTML コメントに限定されています) により、マークアップ コードの特定のスニペットが IE でのみ動作するだけでなく、これらのコード スニペットが特定のバージョンの IE でのみ動作することも可能になります。

Web 標準を意識した開発者として、私たちは常に最初に既存の標準に準拠したブラウザの大部分で設計をテストし、その後、小さな変更で軌道に戻ることができるブラウザにパッチを提供する必要があります。ワークフローは人それぞれ異なりますが、私はすべてのプロジェクトを標準のドキュメント セットから始めるのが最善であると考えています。私の基本スイートには次のファイルが含まれています。


次に、プロジェクトのニーズに応じて、ブラウザ固有の CSS ファイルを追加して、これらの「軽微な変更」を含めます。現在、ほとんどのプロジェクトでは、これらのファイルは ie7.css と ie6.css です。プロジェクトで IE6 より前のバージョンのサポートが必要な場合は、それに対応するファイル (ie5.5.css など) も作成します。これらのファイルを配置したら、適切なスタイルシートにスタイル ルールを追加し始めました。

CSS のほとんどは Firefox の CSS エディター サイドバーを使用して記述されているため、CSS テストは Mozilla Firefox で開始します。 Firefox でページのデザインが完了したら、すぐに別のブラウザを開いてテストして表示しました。ほとんどは Web 標準に準拠しているため、完璧に動作します。次に、IE7 を開いてテストします。ほとんどの場合、多くの問題は発生しません。場合によっては、hasLayout をトリガーする必要がある場合や、その他の小さなレイアウト エラーを修正する必要がある場合があります。これらの修正を基本スイートのスタイルシート ファイルに書き込む代わりに、ie7.css に追加し、ドキュメントの HEAD の条件付きコメントを介して導入しました。


上記の条件付きコメントにより、IE7 以下 (翻訳注: lte は以下の略語です) で導入されたスタイルを認識できるようになります。そのため、IE7でページを閲覧すると、これらのパッチが取得されます。ただし、新しいバージョンの IE を使用している場合 (これらの問題は修正されている可能性があります。たとえば、IE8 は hasLayout を放棄し、これらの問題はなくなりました)、これらのスタイルは無視されます。一方、これらのスタイルは IE6 を使用して取得できます。 IE7 のレンダリングのバグは IE6 にも存在する傾向があるため、これは良いことです。前述したように、IE7 以下のバージョンでは、メディア タイプを使用した @import を理解できません。この方法での screen.css の導入は、IE7 以下のバージョンでは無効です。したがって、ie7.css ファイルの先頭にメディア タイプを指定しない @import ステートメントを追加して、screen.css を導入する必要もあります。

IE7 にパッチを適用したら、IE6 を開いて、何かパッチを適用する必要があるかどうかを確認します。必要に応じて、ドキュメントに別の条件付きコメントを追加し、それを ie6.css にインポートします。


次に、IE6 に必要なパッチを対応するスタイル シートに追加するだけです。これらのスタイル シートは IE7 では無視されますが、IE5.5 などのバージョンには影響します。

このように条件付きコメントを使用すると、プロジェクト内のターゲット ブラウザを簡単に管理し、CSS パッチ ファイルを独立した無料の状態に保つことができます。

その他の考慮事項

CSS のプログレッシブ エンハンスメントは、スタイル シートとドキュメントの関連付けに限定されず、CSS の記述方法にも適用できます。

たとえば、生成されたコンテンツについて考えてみましょう。すべてのブラウザでサポートされているわけではありませんが、追加のデザインやテキストを追加するのに最適な方法です。これはページの使いやすさに必須ではありませんが、視覚的またはその他の機能を向上させることができます。

簡単な問い合わせフォームを例として挙げます。


(図: この例で使用される HTML フォーム (コードは以下に示されます))

上記のHTMLコードを書くと、必然的にlabel要素にコロン(:)を書くことになると思います。なぜこれを行うのでしょうか?本当にラベル要素にコンテンツが追加されているのでしょうか?あまり。この目的は、ユーザーに追加の視覚的な手がかりを提供することです。ラベル要素は冗長であるため、削除する必要があります。


より完全に適切な方法は、コンテンツを生成してドキュメントにコロンを追加し直すことです。


この方法でフォームを作成すると、柔軟性が得られます。サイト全体から装飾文字を削除する必要がある場合、各フォームを探す必要がなく (以前は場所がわかっていましたが) CSS ファイルを編集するだけで済みます。このトリックも、コロンなしではフォームが使用不能にならないため、かなり劣化します。これは、漸進的な強化の好例です。

おそらく、高度な CSS セレクター (翻訳: セレクター、セレクターとも訳されますが、演算子が演算子ではなく演算子と翻訳されるなど、セレクターの方が元の意味をよりよく反映すると思います) を使用すると、特定のスタイルを変更できることを発見したかもしれません。より高度なブラウザを使用すると、時間の経過とともにサイトが強化されます。良い例は属性セレクターです。これは IE6、その同時代のブラウザー、および以前のブラウザーでは理解されません (したがって無視されます)。 Egor Kloos は、CSS Zen Garden の「Gemination」というタイトルの投稿でこのコンセプトを見事に使用しました。


(図: 標準ブラウザと IE6 での Egor Kloos の CSS Zen Garden 作品 (「Double Double」) のレンダリングの比較)

彼はどうやってそれをしたのでしょうか？わずかに変更されたコード例を次に示します。


違いは明らかであり、CSS でプログレッシブ エンハンスメントをどのように使用できるかを見事に示しています。

同様に、Andy Clarke のサイトには IE6 に関するヒントがいくつかあります。 IE のフィルターを使用し、いくつかの条件付き注釈を追加することで、Andy はサイトからすべての色を削除し、真の「ローファイ」エクスペリエンスを実現するいくつかの置き換え可能な画像を提供することに成功しました。


(図: 標準ブラウザと IE6 での Andy Clark のサイトの比較)

上の図の灰色のテクニックは次のとおりです。条件付きコメントによって追加された IE6 (およびそれ以下) のスタイルシートに、次のステートメントを追加します。


上記の 2 つの例には、日常業務では使用されないテクニックが多すぎるかもしれませんが、実際に CSS プログレッシブ エンハンスメントを適用する方法の概念を説明するのに非常に役立ちます。

要約する

これまで説明したように、CSS プログレッシブ エンハンスメントをサイトに適用するには複数の方法があります。最も簡単で、おそらく最良の方法は、スタイル シートを整理し、それを文書にどのようにリンクするかを慎重に検討することです。条件付きコメントを理解すれば、IE 固有の問題に対処するのは簡単になります。セレクターの使用方法とセレクターが使用されるシナリオを明確に理解していれば、CSS でより詳細な調整を行うことができます。

この知識を身につければ、進歩的な強化の専門家への道を順調に進むことができます。