CSS2とCSS3の違い

CSS3の主な変更点を理解する

CSS2とCSS3の最大の違いは、CSS3がモジュールと呼ばれる異なるセクションに分割されていることです。 これらのモジュールのそれぞれは、推奨プロセスのさまざまな段階でW3Cを通過しています。 このプロセスにより、様々なメーカーのブラウザでさまざまなCSS3が受け入れられ、実装されるようになりました。

このプロセスをCSS2で起こったことと比較すると、その中にあるすべてのカスケードスタイルシート情報を含む単一のドキュメントとしてすべてが提出されたので、推奨事項を個々の小さな部分に分割する利点が見え始めます。 それぞれのモジュールは個別に作業されるため、CSS3モジュールのブラウザサポートの幅がはるかに広がります。

新しく変化する仕様と同様に、可能な限り多くのブラウザとオペレーティングシステムでCSS3のページを徹底的にテストしてください。 目標は、すべてのブラウザでまったく同じように見えるウェブページを作成するのではなく、CSS3スタイルを含め、使用しているスタイルが、そのブラウザをサポートするブラウザで優れていること、そして古いブラウザしない。

新しいCSS3セレクタ

CSS3は、新しいCSSセレクタ、新しいコンビネータ、いくつかの新しい擬似要素とともにCSSルールを書くことができる、新しい方法を提供します。

3つの新しい属性セレクタ:

16の新しい疑似クラス:

1つの新しいコンビネータ:

新しいプロパティ

CSS3はまた、いくつかの新しいCSSプロパティを導入しました。 これらのプロパティの多くは、Photoshopのようなグラフィックスプログラムと関連性の高いビジュアルスタイルを作成することでした。 border-radiusやbox-shadowのようなものは、CSS3の導入以来、周りにあります。 flexboxやCSS Gridのような他のスタイルも、CSS3の追加と見なされることが多い新しいスタイルです。

CSS3では、ボックスモデルは変更されていません。 しかし、あなたのボックスの背景や罫線をスタイルするのに役立つ新しいスタイルのプロパティがたくさんあります。

複数の背景私は

背景画像、背景位置、および背景リピートスタイルを使用すると、複数の背景画像を指定して、ボックス内に重ねて重ねることができます。 最初のイメージはユーザーに最も近いレイヤーで、後ろにはイメージが描画されます。 背景色がある場合は、すべての画像レイヤの下に塗りつぶされます。

新しい背景スタイルのプロパティ

CSS3には新しい背景属性もいくつかあります。

既存の背景スタイルプロパティの変更

また、既存の背景スタイルプロパティにいくつかの変更があります。

CSS3ボーダープロパティ

CSS3の枠線は、慣れ親しんだスタイル(ソリッド、ダブル、ダッシュなど)でも、イメージでもかまいません。 さらに、CSS3は丸みのあるコーナーを作成する機能をもたらします。 ボーダー画像は興味深いのは、4つのボーダーすべての画像を作成し、その画像をボーダーに適用する方法をCSSに指示するからです。

新しいボーダースタイルのプロパティ

CSS3にはいくつかの新しいボーダープロパティがあります:

境界線と背景に関連するその他のCSS3プロパティ

ページ区切り、改行の列区切り(インライン要素の場合)でボックスが壊れている場合、box-decoration-breakプロパティは、新しいボックスが境界とパディングでどのようにラップされるかを定義します。 バックグラウンドは、このプロパティを使用して複数の破損したボックス間で分割できます。

また、ボックス要素に影を追加するために使用できるボックスシャドウプロパティもあります。

CSS3を使用すると、テーブルや複雑なdivタグ構造のない複数の列を持つWebページを簡単に設定できます。 あなたは単に、body要素が持つべき列の数とそれらの幅をブラウザーに伝えるだけです。 さらに、罫線(ルール)、列の高さにまたがる背景色を追加することができ、テキストはすべての列を自動的に流れます。

CSS3の列 - 列の数と幅を定義する

列の数と幅を定義できる3つの新しいプロパティがあります。

CSS3の列ギャップとルール

ギャップとルールは、同じ複数列シナリオの列間に配置されます。 ギャップは列を押し離しますが、規則はスペースを占めません。 列ルールがそのギャップよりも広い場合、それは隣接する列と重なります。 列のルールとギャップには5つの新しいプロパティがあります。

CSS3列ブレーク、スパニング列、および列の塗りつぶし

列区切りには、ページングされたコンテンツの区切りを定義するのと同じCSS2オプションが使用されますが、3つの新しいプロパティbreak-beforebreak-afterbreak-insideがあります。

テーブルと同様に、column-spanプロパティを持つ列にまたがるように要素を設定できます。 これにより、新聞のように複数の列にまたがる見出しを作成することができます。

列を埋めることで、各列に含めるコンテンツの量を決定します。 バランスの取れた列は、各列に同じ量のコンテンツを入れようとしますが、列が一杯になるまでコンテンツを流し、次の列に移動します。

CSS2に含まれているCSS3のその他の機能

CSS2には存在しなかったCSS3には、次のような多くの追加機能があります。