CSS2 と CSS3 の違い
CSS3 の主な変更点を理解する
目次拡大- 新しい CSS3 セレクターの導入
- CSS3 の新しい CSS プロパティ
- 複数の背景画像
- 新しい背景スタイル プロパティ
- 既存の背景スタイル プロパティの変更
- CSS3 の新しい境界線のプロパティとスタイル
- 新しい境界線スタイルのプロパティ
- その他の境界線と背景のプロパティ
- 列の数と幅を定義するための新しいプロパティ
- CSS3 列のギャップと規則
- CSS3 の新しい列分割オプション
- CSS3 のその他の新機能
CSS2との最大の違い CSS3 CSS3 が異なるセクションに分割されているということです。 モジュール .これらの各モジュールは、推奨プロセスのさまざまな段階で W3C を通過しています。このプロセスにより、CSS3 のさまざまな部分が受け入れられ、さまざまなメーカーによってブラウザーに実装されることがはるかに容易になりました。
このプロセスを CSS2 で起こったことと比較すると、すべてが単一のドキュメントとして送信され、 カスケード スタイル シート その中の情報を見ると、レコメンデーションをより小さな個別の部分に分割することの利点が見え始めます。各モジュールは個別に作業されているため、開発者は CSS3 モジュールの幅広いブラウザー サポートを利用できます。
新しい CSS3 セレクター
CSS3 は、新しい CSS セレクター、新しいコンビネーター、およびいくつかの新しい疑似要素を使用して、CSS ルールを記述するいくつかの新しい方法を提供します。
3 つの新しい属性セレクターがあります。
- ドキュメントのルート要素。
- これを使用して子要素を正確に一致させるか、変数を使用して代替一致を取得します。
- 最後の要素から数えて正確な子要素に一致します。
- ドキュメント ツリー内で、その前に同じ名前を持つ兄弟要素を照合します。
- 下から数えて同じ名前の兄弟要素を一致させます。
- 最後に一致 子要素 親の。
- その型の最初の兄弟要素に一致します。
- その型の最後の兄弟要素に一致します。
- 親の唯一の子である要素に一致します。
- そのタイプの唯一の要素に一致します。
- 子を持たない要素 (テキスト ノードを含む) に一致します。
- 参照 URI のターゲットである要素に一致します。
- 要素が有効になっている場合に一致させます。
- 要素が無効になっている場合に一致させます。
- 要素がチェックされている場合 (ラジオ ボタンまたはチェックボックス) に一致します。
- 要素が単純な要素と一致しない場合に一致 セレクター .
- elementB が elementA のどこかに続く場合に一致しますが、すぐに一致する必要はありません。
- このプロパティは、背景画像を切り取る方法を定義します。デフォルトはボーダーボックスですが、パディングボックスまたはコンテンツボックスに変更できます。
- このプロパティは、背景をパディング ボックス、ボーダー ボックス、またはコンテンツ ボックスに配置するかどうかを決定します。
- このプロパティは、 背景画像のサイズ .それはあなたがすることができます 小さい画像をページに合わせて引き伸ばす .
- このプロパティには 2 つの新しい値があります — スペース と 円形 . [スペース] は、タイル イメージをボックス内でクリッピングせずに均等に配置します。 Round は背景画像を再スケーリングして、ボックス内で何度も並べて表示されるようにします。
- 要素にスクロール バーがある場合に要素のコンテンツとともに背景がスクロールするように、新しい値「local」が追加されます。
- background 短縮形プロパティは、サイズと起点のプロパティを追加します。
- ボーダー右上半径 、 ボーダー右下半径 、 境界左下半径 、 ボーダー左上半径
- これらのプロパティを使用すると、境界線に丸みを帯びた角を作成できます。
- 既に定義されている境界線スタイルの代わりに使用するイメージ ソース ファイルを指定します。
- ボーダー イメージのエッジから内側へのオフセットを表します。
- ボーダー画像の幅の値を定義します。
- ボーダー イメージ領域がボーダー ボックスを超えて広がる量を指定します。
- ボーダー画像の側面と中央部分をどのようにタイルまたはスケーリングするかを定義します。
- すべての border-image プロパティの省略形プロパティ。
- 列の幅を定義します。ブラウザーはテキストをフローして、その幅の列でスペースを埋めます。
- ページの列数を定義します。ブラウザーは、スペースに収まる十分な幅の列を作成しますが、指定した数だけです。
- 幅または数値のいずれか (またはその両方) を定義できる省略形のプロパティですが、ほとんど意味がありません。
- 列間のギャップの幅を定義します。
- ルールの色を定義します。
- ルールのスタイル (実線、点線、二重線など) を定義します。
- ルールの幅を定義します。
- 3 つの列ルール プロパティをすべて一度に定義する省略形のプロパティ。
16 個の新しい疑似クラスが導入されました。
新しいコンビネータが 1 つあります。
新しいプロパティ
CSS3 では、いくつかの新しい CSS プロパティも導入されました。これらのプロパティの多くは、次のようなグラフィック プログラムに関連する可能性が高いビジュアル スタイルを作成します。 フォトショップ .これらのいくつか (border-radius や box-shadow など) は、CSS3 の導入以来存在しています。その他、フレックスボックスなど CSS Grid は、まだ CSS3 の追加と見なされることが多い新しいスタイルです。
CSS3 では、ボックス モデルは変更されていません。ただし、ボックスの背景と境界線のスタイルを設定するのに役立つ新しいスタイル プロパティが多数あります。
複数の背景画像
background-image、background-position、および background-repeat スタイルを使用して、複数の背景画像をボックス内で重ねて表示するように指定できます。最初の画像はユーザーに最も近いレイヤーで、次の画像は後ろに描かれています。背景色がある場合は、すべての画像レイヤーの下に塗りつぶされます。
新しい背景スタイル プロパティ
CSS3 には、いくつかの新しい背景プロパティもあります。
既存の背景スタイル プロパティの変更
また、既存の背景スタイル プロパティにもいくつかの変更があります。
CSS3 ボーダー プロパティ
CSS3 では、ボーダーは使い慣れたスタイル (実線、二重線、破線など) にすることも、画像にすることもできます。さらに、CSS3 は丸みを帯びた角をサポートします。 4 つの境界線すべての画像を作成し、その画像を境界線に適用する方法を CSS に指示するので、境界線の画像は興味深いものです。
新しい境界線スタイルのプロパティ
CSS3 には、いくつかの新しい境界プロパティがあります。
境界線と背景に関連する追加の CSS3 プロパティ
改ページ、列の区切り、または改行 (インライン要素の場合) でボックスが壊れている場合、 ボックス装飾休憩 プロパティは、新しいボックスが境界線とパディングでどのようにラップされるかを定義します。背景は、このプロパティを使用していくつかの壊れたボックスに分割されます。
新しい ボックスシャドウ プロパティは、ボックス要素に影を追加します。
CSS3 を使用すると、複数の列を含む Web ページを表や複雑な設定なしで簡単にセットアップできるようになりました。 分周 タグ構造。 body 要素に必要な列数と幅をブラウザに伝えるだけです。さらに、列の高さにまたがる境界線 (ルール) と背景色を追加すると、テキストがすべての列に自動的に流れます。
列の数と幅を定義する
新作は3つ プロパティ 列の数と幅を定義できます。
CSS3 列のギャップとルール
ギャップとルールは、同じ複数列シナリオの列間に配置されます。ギャップは列を押し広げますが、ルールはスペースを占有しません。列ルールがギャップよりも広い場合、隣接する列に重なります。列のルールとギャップには、次の 5 つの新しいプロパティがあります。
CSS3 列の区切り、列のスパン、および列の塗りつぶし
桁 ブレークは、ページ付きコンテンツのブレークを定義するために使用されるのと同じ CSS2 オプションを使用しますが、3 つの新しいプロパティがあります。 ブレーク・ビフォア 、 休憩後 、 と 侵入 .
テーブルと同様に、column-span プロパティを使用して複数の列にまたがるように要素を設定できます。これにより、新聞のように複数の列にまたがる見出しを作成できます。
列を埋めることで、各列にどれだけのコンテンツが入るかが決まります。バランスの取れた列は各列に同じ量のコンテンツを配置しようとしますが、自動は列がいっぱいになるまでコンテンツを流し込み、次の列に進みます。
CSS2 に含まれていない CSS3 のその他の機能
CSS3 には、CSS2 には存在しなかった多くの追加機能があります。