のブラウザ サポート
の主な特徴は、CSS ツールがクラス A ブラウザを完全にサポートするようにグレード付けされていることです。ブラウザのサポートの評価は純粋に Yahoo! の評価であり、Web サイトで完全な説明を参照できます。基本的には、今日市場に出ているブラウザで CSS がどのように適切に動作するかを説明しています。
このオンライン表では、ブラウザーはブラウザー サポートの 3 つのレベル (A、C、および X) に分類されています。レベル A は最高レベルのサポートです。最新の Web 標準の力を活用することで、YUI ライブラリは、高度な機能と視覚的な忠実性を提供するクラス A エクスペリエンスを発見します。サポート カテゴリと関連ファイルを見ると、CSS がサポートされている場所がわかりますが、CSS はすべてのブラウザで利用できるはずです (ダウングレードの可能性もあります)。
再利用可能な CSS
YUI ライブラリには、書式設定、フォントの導入、およびグリッドベース (列と行) のレイアウトを含む 3 つの CSS 領域または機能が含まれています。これらの用語は、Web サイトでこれら 3 つの要素を説明するために使用されます。
ページ グリッド: 使用しているテンプレートの容量内に 1 ～ 4 列のグリッドを埋め込むことができます。
フォント: ブラウザー間のタイポグラフィーの標準化と制御を提供します。一般に、一貫したフォントと行の高さを提供しながら、(ブラウザー内で) ユーザーによるフォントの調整を完全にサポートします。
リセット: HTML 要素へのデフォルトの割り当てをブラウザー間で標準化します。また、強調された要素に太字を使用するなど、ブラウザーで一般的なデフォルトの表現も削除され、すべてのフォント定義が意図的であり、要素が常に慣例的な視覚的表現ではなく意味的な意味で使用されるようになります。
インストール後、YUI ライブラリ ダウンロードの各要素は、Web サーバー上の次のディレクトリ/ファイルで利用可能になります。
ページ グリッド: buildgridsgrids.css
フォント: buildfontsfonts.css
リセット: eset eset.css をビルドします。
これらのベース ディレクトリは、独自の Web サーバーにインストールすることも、サイト内に配置して、必要に応じて参照できるようにすることもできます。 CSS の重要な特徴は (無料であることに加えて)、リリース前に徹底的にテストおよびデバッグされることです。実際に CSS ツールが動作している様子を詳しく見てみましょう。
グリッド ベースのページ レイアウト
グリッド ベースのレイアウトは、ほぼすべてのサイト デザインやページ レイアウトの原動力となります。以前は、これは HTML テーブルを通じて行われることが多かったですが、CSS はページ レイアウトに大きな力と柔軟性を提供します。 Page Grid は、要件に応じて列と行を含むページを構築するコードを提供します。
ページ グリッドの最も基本的なレベルでは、7 つの Web ページ テンプレートが提供され、そのうち 6 つは詳細なメイン コンテンツ/ツールバー レイアウトを定義し、7 番目のテンプレートはツールバーのないレイアウトを定義し、メイン コンテンツがページ幅全体を占めます。これらのテンプレートの名前は次のとおりです。
yui-t1: 左側に幅 160 ピクセルのツールバーと、幅 570 ピクセルのメイン領域が含まれます。
yui-t2: 左側に幅 180 ピクセルのツールバーと幅 550 ピクセルのメイン領域が含まれます。
yui-t3: 左側に幅 300 ピクセルのツールバーと幅 430 ピクセルのメイン領域が含まれます。
yui-t4: 右側に幅 180 ピクセルのツールバーと幅 550 ピクセルのメイン領域が含まれます。
yui-t5: 右側に幅 240 ピクセルのツールバーと幅 490 ピクセルのメイン領域が含まれます。
yui-t6: 右側に幅 300 ピクセルのツールバーと幅 430 ピクセルのメイン領域が含まれます。
yui-t7: 幅 750 ピクセルのメイン領域が含まれており、ツールバーはありません。
目的に合わせてこれらのテンプレートを組み合わせる (大胆な場合は編集する) ことができます。リスト A では、最初のレイアウトを使用してページをレイアウトします (注: CSS ツールは Web サーバーのデフォルト ディレクトリにインストールされています)。
リスト A
<html><head>
<title>Yahoo CSS ツールの例 1</title>
<link rel="stylesheet" type="text/css" href="build/grids/grids.css">
</head>
<本文>
<div id="doc" class="yui-t2">
<div id="hd">ページヘッダー</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">メインエリア</div>
</div><div class="yui-b">左列</div>
</div>
<div id="ft">ページフッター</div>
</div></body></html>
HTML ページに関するいくつかの注意事項:
レイアウトはページ全体に与えられます。メインの div タグには yui-t2 クラスが割り当てられます。これは、2 番目のテンプレートが使用されていることを示しています。
ページはヘッダー、本文、フッター領域に分かれています。ヘッダーには hd という識別子が与えられ、ボディには bd、フッターには ft が付けられます。
ページの本文は、左側の領域 (テンプレートがサポートしている場合) とメイン領域に分かれています。どちらにも yui-b クラスが割り当てられますが、メイン領域には div タグに yui-main 識別子属性が追加されます。