CSS2とCSS3の最大の違いは、CSS3がモジュールと呼ばれる異なるセクションに分割されていることです。これらのモジュールのそれぞれは、推奨プロセスのさまざまな段階でW3Cを通過しています。このプロセスにより、様々なメーカーのブラウザでさまざまなCSS3が受け入れられ、実装されるようになりました。
このプロセスをCSS2で起こったことと比較すると、その中にあるすべてのカスケードスタイルシート情報を含む単一のドキュメントとしてすべてが提出されたので、推奨事項を個々の小さな部分に分割する利点が見え始めます。それぞれのモジュールは個別に作業されるため、CSS3モジュールのブラウザサポートの幅がはるかに広がります。
新しく変化する仕様と同様に、可能な限り多くのブラウザとオペレーティングシステムでCSS3のページを徹底的にテストしてください。目標は、すべてのブラウザでまったく同じように見えるウェブページを作成するのではなく、CSS3スタイルを含め、使用しているスタイルが、そのブラウザをサポートするブラウザで優れていること、そして古いブラウザしない。
新しいCSS3セレクタ
CSS3は、新しいCSSセレクタ、新しいコンビネータ、いくつかの新しい擬似要素とともにCSSルールを書くことができる、新しい方法を提供します。
3つの新しい属性セレクタ：
- 属性の開始が正確に一致する
要素foo ^ = "bar" この要素はfooという属性を持ち、 "bar"で始まる。
- 属性の終わりが正確に一致する
要素foo $ = "bar" この要素はfooという属性を持ち、 "bar"で終わります。
- 属性には一致が含まれています
要素foo * = "bar" 要素には、文字列「bar」を含むfooという属性があります。
16の新しい疑似クラス：
- ：ルート
- ドキュメントのルート要素。 HTMLでは、これは常にです。
- ：n番目の子供（n）
- これを使用して正確な子要素を一致させるか、変数を使用して交互の一致を取得します。
- ：nth-last-child（n）
- 最後のものから数えて正確な子要素にマッチします。
- ：n番目の型（n）
- 兄弟要素の前に同じ名前の兄弟要素をドキュメントツリー内で一致させます。
- ：n番目の最後の型（n）
- 下から数えて同じ名前の兄弟要素をマッチさせます。
- ：最後の子
- 親の最後の子要素にマッチします。
- ：ファースト・オブ・タイプ
- その型の最初の兄弟要素にマッチします。
- ：last-of-type
- その型の最後の兄弟要素にマッチします。
- ：一人っ子
- 親の唯一の子である要素にマッチします。
- ：唯一のタイプ
- その型の唯一の要素にマッチします。
- ：空の
- 子がない要素（テキストノードを含む）と一致します。
- ：ターゲット
- 参照URIのターゲットである要素にマッチします。
- ：有効
- 要素が有効になっているときに要素を一致させます。
- ：無効
- 要素が無効になったらそれをマッチングします。
- ：チェック済み
- 要素がチェックされたら一致させます（ラジオボタンまたはチェックボックス）。
- ：not（s）
- 要素が単純なセレクタと一致しない場合にマッチします。
1つの新しいコンビネータ：
- elementA〜elementB
- elementBがelementAの後ろに続くときにマッチします。必ずしも直ぐではありません。
新しいプロパティ
CSS3はまた、いくつかの新しいCSSプロパティを導入しました。これらのプロパティの多くは、Photoshopのようなグラフィックスプログラムと関連性の高いビジュアルスタイルを作成することでした。 border-radiusやbox-shadowのようなものは、CSS3の導入以来、周りにあります。 flexboxやCSS Gridのような他のスタイルも、CSS3の追加と見なされることが多い新しいスタイルです。
CSS3では、ボックスモデルは変更されていません。しかし、あなたのボックスの背景や罫線をスタイルするのに役立つ新しいスタイルのプロパティがたくさんあります。
複数の背景私は
背景画像、背景位置、および背景リピートスタイルを使用すると、複数の背景画像を指定して、ボックス内に重ねて重ねることができます。最初のイメージはユーザーに最も近いレイヤーで、後ろにはイメージが描画されます。背景色がある場合は、すべての画像レイヤの下に塗りつぶされます。
新しい背景スタイルのプロパティ
CSS3には新しい背景属性もいくつかあります。
- 背景クリップ
- このプロパティは、背景イメージをどのようにクリップするかを定義します。デフォルトはボーダーボックスですが、パディングボックスまたはコンテンツボックスに変更することができます。
- 背景起源
- このプロパティは、背景がパディングボックス、境界線ボックス、またはコンテンツボックスのいずれの場所にあるべきかを決定します。
- 背景サイズ
- このプロパティを使用すると、背景イメージのサイズを指定できます。小さな画像をページに合わせて伸ばすことができます。
既存の背景スタイルプロパティの変更
また、既存の背景スタイルプロパティにいくつかの変更があります。
- バックグラウンドリピート
- このプロパティには、スペースとラウンドの2つの新しい値があります。スペースは、クリップされずにボックス内で均一にタイル状のイメージを配置します。ラウンドは背景画像を再スケーリングし、ボックス内に何度もタイルを並べるようにします。
- 背景アタッチメント
- 新しい値 "local"が追加され、要素にスクロールバーがある場合、その要素の内容とともに背景がスクロールします。
- バックグラウンド
- バックグラウンド省略形プロパティは、サイズと原点のプロパティを追加します。
CSS3ボーダープロパティ
CSS3の枠線は、慣れ親しんだスタイル（ソリッド、ダブル、ダッシュなど）でも、イメージでもかまいません。さらに、CSS3は丸みのあるコーナーを作成する機能をもたらします。ボーダー画像は興味深いのは、4つのボーダーすべての画像を作成し、その画像をボーダーに適用する方法をCSSに指示するからです。
新しいボーダースタイルのプロパティ
CSS3にはいくつかの新しいボーダープロパティがあります：
- ボーダー半径
- ボーダー - 右上 - 半径, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius
- これらのプロパティを使用すると、境界に丸みのあるコーナーを作成できます。
- border-image-source
- 既に定義されている枠線スタイルの代わりに使用するイメージソースファイルを指定します。
- ボーダーイメージスライス
- 境界の画像エッジからの内側のオフセットを表します。
- border-image-width
- ボーダー画像の幅の値を定義します。
- 縁取り画像
- 境界線イメージ領域が境界線の枠を越えて延びる量を指定します。
- ボーダーイメージストレッチ
- 境界線イメージの辺と中間部分をどのようにタイルまたはスケーリングするかを定義します。
- ボーダーイメージ
- すべてのボーダーイメージプロパティの短縮形プロパティ。
境界線と背景に関連するその他のCSS3プロパティ
ページ区切り、改行の列区切り（インライン要素の場合）でボックスが壊れている場合、box-decoration-breakプロパティは、新しいボックスが境界とパディングでどのようにラップされるかを定義します。バックグラウンドは、このプロパティを使用して複数の破損したボックス間で分割できます。
また、ボックス要素に影を追加するために使用できるボックスシャドウプロパティもあります。
CSS3を使用すると、テーブルや複雑なdivタグ構造のない複数の列を持つWebページを簡単に設定できます。あなたは単に、body要素が持つべき列の数とそれらの幅をブラウザーに伝えるだけです。さらに、罫線（ルール）、列の高さにまたがる背景色を追加することができ、テキストはすべての列を自動的に流れます。
CSS3の列 - 列の数と幅を定義する
列の数と幅を定義できる3つの新しいプロパティがあります。
- 列幅
- 列の幅を定義します。ブラウザはテキストを広げて幅の広い列でスペースを埋めるでしょう。
- 列カウント
- ページの列数を定義します。ブラウザはスペースに収まる大きさの列を作成しますが、指定した数だけ作成します。
- 列
- 幅または数のいずれか（またはその両方を定義することはできますが、ほとんど意味をなさない）を省略可能なプロパティです。
CSS3の列ギャップとルール
ギャップとルールは、同じ複数列シナリオの列間に配置されます。ギャップは列を押し離しますが、規則はスペースを占めません。列ルールがそのギャップよりも広い場合、それは隣接する列と重なります。列のルールとギャップには5つの新しいプロパティがあります。
- 列ギャップ
- 列間のギャップの幅を定義します。
- 列ルール色
- ルールの色を定義します。
- 列ルールスタイル
- ルールのスタイル（ソリッド、ドット、ダブルなど）を定義します。
- 列ルール幅
- ルールの幅を定義します。
- 列ルール
- すべての3つの列ルールプロパティを一度に定義する略式プロパティ。
CSS3列ブレーク、スパニング列、および列の塗りつぶし
列区切りは、ページされたコンテンツの区切りを定義するのに使用されたのと同じCSS2オプションを使用しますが、3つの新しいプロパティがあります。 ブレーク・ビフォア, 休憩、および ブレークイン.
テーブルと同様に、column-spanプロパティを持つ列にまたがるように要素を設定できます。これにより、新聞のように複数の列にまたがる見出しを作成することができます。
列を埋めることで、各列に含めるコンテンツの量を決定します。バランスの取れた列は、各列に同じ量のコンテンツを入れようとしますが、列が一杯になるまでコンテンツを流し、次の列に移動します。
CSS2に含まれていないCSS3のその他の機能
CSS2には存在しなかったCSS3には、次のような多くの追加機能があります。
- CSSテンプレートレイアウトモジュールとCSS3グリッド位置決めモジュール：CSSでグリッドを作成する。
- CSS3テキストモジュール：テキストをアウトラインしたり、CSSでドロップシャドウを作成したりすることもできます。
- CSS3カラーモジュール：今度は不透明です。
- ボックスモデルへの変更：IEタグのように動作するマーキープロパティを含みます。
- CSS3ユーザーインターフェイスモジュール：あなたに新しいカーソル、アクションへの応答、必須フィールド、要素のサイズ変更さえ与えます。
- メディアクエリ：メディアクエリを使用すると、スタイルシートの使用方法を柔軟に設定できます。たとえば、20em以上のビューポートを持つハンドヘルドデバイス専用のスタイルシートを定義することができます。
- CSS3 Rubyモジュール：ドキュメントに注釈を付けるためにテキストルビーを使用する言語のサポートを提供します。
- CSS3ページングされたメディアモジュール：ページングされたメディア（紙、OHPなど）をさらにサポートします。
- 生成されたコンテンツ：L、実行中のヘッダーとフッター、脚注、およびプログラムで生成されたその他のコンテンツ、特にページングされたメディア。
- CSS3音声モジュール：聴覚CSSへの変更。
