第一印象
ライブラリは巨大です！ 8.85MB（今日） のアーカイブは、過負荷のSourSforgeからすぐにはダウンロードされませんでした。 アーカイブは、ライブラリコンポーネントの簡単なナビゲーションとサンプルの表示のために、index.htmlが置かれているyuiフォルダーに解凍されました。 膨大なサイズ自体は、豊富な画像+サンプルに詰め込まれた350のhtmlドキュメントファイル+数え切れないほどのjsファイルによって引き起こされます。 ライブラリの「中心」はビルドフォルダにあります-コンポーネントファイルはディレクトリ全体に分散しています。Yahoo!のJavaScript機能 YUIは印象的です。 サンプルをざっと見てみると、フレームワークが本当に多くのことができることがわかりましたが、この記事ではCSSについて説明します。
CSSについて
Yahoo!のCSSコンポーネント YUIには4つの主要なコンポーネントが含まれています（実際、それ以上は必要ありません）。- CSSのリセット -値がブラウザーごとに異なるHTML要素のデフォルトスタイルをリセットします。
- ベースCSS-ほとんどのHTML要素（リスト、リンク、ヘッダーなど）に共通のベーススタイルを設定します。
- Fonts CSS-ページのベースフォントのクロスブラウザー値を設定します（サイズ、行間隔、コードの一部の要素の等幅）
- グリッドCSS-レイアウトのブロックレイアウト用の一連のスタイル。固定幅とラバーの両方があります。
CSSリセット
最後に、CSSのリセットの概要に到達し、それを詳しく見ていきます。 パス/ yui / build / reset /で、readmeと2つのccsファイルを検出します。
- reset.css-コメント付きのライブラリの開発バージョン。
- reset-min.cssは、難読化プログラムを通過したプロジェクトに直接接続するためのバージョンです。したがって、コメントなしで1行で入力します。 解析に適していない。
コードreset.css
/ *
著作権©2008、Yahoo！ Inc. 無断複写・転載を禁じます。
BSDライセンスの下でライセンスされているコード：
developer.yahoo.net/yui/license.txt
バージョン：2.5.1
* /
html {色：＃000;背景：#FFF;}
body、div、dl、dt、dd、ul、ol、li、h1、h2、h3、h4、h5、h6、pre、
コード、フォーム、フィールドセット、凡例、入力、textarea、p、blockquote、th、td {margin：0; padding：0;}
テーブル{border-collapse：collapse; border-spacing：0;}
fieldset、img {border：0;}
アドレス、キャプション、引用、コード、dfn、em、strong、th、var {font-style：normal; font-weight：normal;}
li {list-style：none;}
キャプション、th {text-align：left;}
h1、h2、h3、h4、h5、h6 {font-size：100％; font-weight：normal;}
q：前、q：{content： '';}の後
abbr、頭字語{border：0; font-variant：normal;}
/ *行の高さとセレクタの外観を保持する* /
sup {vertical-align：text-top;}
sub {vertical-align：text-bottom;}
input、textarea、select {font-family：inherit; font-size：inherit; font-weight：inherit;}
/ * IEのサイズ変更を有効にする* /
入力、textarea、選択{* font-size：100％;}
/ * IEでは凡例が継承されないため* /
凡例{色：＃000;}
ルールをさらに詳しく分析してみましょう。
html {色：＃000;背景：#FFF;}
-白い背景と黒いテキストの色は便利です ユーザーはブラウザの設定でデフォルト値を設定できますが、これはページのデザインを台無しにします。
要素の束{margin：0; padding：0;}
-インデントをリセットします。
q：前、q：{content： '';}の後
-引用の擬似要素の内容をリセットします。
abbr、頭字語{border：0; font-variant：normal;}
-略語および頭字語の葉
キャラクターのカスタムケース。
アドレス、キャプション、引用、コード、dfn、em、strong、th、var {font-style：normal; font-weight：normal;}
-これらの要素のテキストの通常のスタイルと太字を指定します。
fieldset、img {border：0;}
-境界線をリセットします。 リンク内の画像のデフォルトの境界線は非常に迷惑です。
キャプション、th {text-align：left;}
-テーブルヘッダーとヘッダーセルの左揃え。
input、textarea、select {font-family：inherit; font-size：inherit; font-weight：inherit;}
-（IE：ではなく）標準に準拠したブラウザの場合、親からフォーム要素のフォントプロパティを強制的に継承します。
凡例{色：＃000;}
-凡例はIEのテキストの色を継承しません。明示的に記述します。
入力、textarea、選択{* font-size：100％;}
-IEで100％のフィールド幅。
そのようなもの。
長所
Yahoo!を使用する YUI Reset CSSは、プロジェクトに役立つでしょう。- ライブラリはすべての標準修正を慎重に処理しており、すべてのcssファイルの先頭にimgaのゼロ境界とテーブルの崩壊を記述することを永遠に忘れることができます。
- セマンティックレイアウトのまれに使用される要素は忘れられません（「まれに使用される」スリッパを投げることはありませんが、これは真実です）。ブラウザは常にデフォルトで切り株デッキを処理します。 いいね
- このライブラリは、IEの多数の無効な修正を回避し、それによりシンプルでわかりやすくしました。 しかし、残念ながら、すべてではありません:(
- Yahoo!開発者 フレームワークを絶えず更新するため、リセットをアップグレードするために多くの努力をする必要はありません。
一般に、PR！
CrossPost レビューYahoo!でCSSをリセット YUI c webew.ru