CSS と CSS3 の違い

元の Cascading Style Sheets 仕様、およびそのはるか最近の CSS3 リビジョンは、HTML Web ページを強化およびフォーマットするために使用されるテクノロジです。 CSS は当初、Web ページのプレゼンテーション層を HTML でフォーマットするよりも効率的な方法で処理するように設計されました。HTML は、現代の Web の複雑な構造を処理することを意図したものではありませんでした。 CSS2 は広く採用されている CSS1 の拡張であるため、数字のない CSS という用語は CSS2 を含むことを意味します。 CSS3 仕様は 2014 年 7 月の時点でまだ開発中であるため、Web 開発者は機能のサポートがブラウザーによって異なることを考慮する必要があります。

CSS3 は CSS と下位互換性があります

CSS3 は、CSS のすべての機能との互換性を維持する CSS2 の更新版です。CSS3 は、どの CSS コードも廃止しません。 CSS3 コードは、Web ページの見栄えを良くして読み込みを高速化し、ユーザーのブラウザーでページを作成するための開発時間を短縮するように設計されています。 CSS3 により、Web デザインはページ デザイン要素のイメージ ファイルへの依存度が低くなり、使用するイメージが少なくなるため、ファイル転送要求とダウンロード時間が短縮されます。 CSS1 は外観の書式設定に重点を置いていましたが、CSS2 はテキストとオブジェクトの配置機能を追加しました。 IE 9 以前などの古いバージョンのブラウザは、CSS3 の追加機能を広くサポートしていないため、CSS フォールバック コードを維持するために余分な開発時間が必要になる場合があります。

CSS3 は角丸とグラデーションを追加します

CSS3 が登場する前は、Web 開発者は画像ファイルを設計して、構造的な境界線の角を丸くしたり、背景画像のグラデーションを追加したりする必要がありました。 CSS3 には、数行のコードで追加できる同等の機能が含まれています。 CSS では、Web 開発者は境界線またはグラデーションを設計し、それを画像サーバーにアップロードし、画像をページに配置し、CSS を使用して境界線を正しく配置する必要があります。 CSS3 では、Web 開発者は「.roundBorder{border-radius:10px;}」のようなコードで同様のことを実現できます。背景のグラデーションはもう少し複雑で、ブラウザごとに異なるコードが必要です。たとえば、Chrome と IE の白から黒へのグラデーションは、「.gradBG{background:liner-gradient(white,black);}」のようなコードを使用します。

CSS3 によるアニメーション機能とテキスト効果の追加

CSS3 には、ページ要素の外観を改善するために、CSS にはないいくつかの機能があります。 CSS3 を使用すると、Web 開発者はテキストにテキスト シャドウを追加して読みやすくしたり、視覚的なセンスを追加したり、長い単語内に改行を強制して、ワード ラップで列内に収まるようにすることができます。 CSS3 以前は、Web 開発者は JavaScript や jQuery などのスクリプト言語でアニメーションをコーディングする必要がありました。 CSS3 は、いくつかのアニメーション機能をデザイン レイヤーに追加します。 W3C は、さまざまなアニメーション技術間の互換性の問題を解決するために、Web アニメーション標準に取り組んでいます。

CSS3 はテキスト列を定義します

CSS3 は、テキスト セクションを複数の列に分割して新聞のように読む機能を追加します。 CSS2 仕様では、テキストを自動的に分割する機能が標準に備わっていないため、Web 開発者は複数列のテキスト セクションを作成するのに苦労しています。特にレスポンシブ デザイン (表示デバイスの画面解像度に基づいてコンテンツを再配置およびサイズ変更する開発手法) を特徴とするサイトでは、大きなモニターを使用しているユーザーは、画面全体に広がるテキスト行を読むのに苦労する可能性があります。