CSS の進化: 基本から現代の魔法まで-jsチュートリアル-php.cn

CSS の進化: 基本から現代の魔法まで

DDD

リリース： 2024-09-13 14:15:55

オリジナル

677 人が閲覧しました

The Evolution of CSS: From Basics to Modern-Day Magic

CSS (カスケードスタイルシート) は、1990 年代後半に初めて登場して以来、Web デザインの縁の下の力持ちです。これは、Web 世界の魔法のワードローブだと考えてください。平凡で退屈な HTML を、視覚的に素晴らしいインタラクティブなワンダーランドに変えるのです。この記事では、CSS のその地味な始まりから、あらゆる Web 開発者のツールキットにおける究極のウィザードとしての現在の役割に至るまで、CSS の興味深い進化について詳しく説明します。

初期: CSS 1.0 および 2.0

私たちの物語は 1994 年に始まり、Håkon Wium Lie という先見の明のある人物が Web ページのスタイルを設定するための新しい言語を提案しました。 1996 年に早送りすると、World Wide Web Consortium (W3C) が最初の公式 CSS 1.0 仕様を発行しました。当時、CSS は赤ちゃんの魔法使いのようなもので、その本にはほんのいくつかの呪文が含まれていました。

色と背景: 基本的なテキストと背景の色 — 虹はまだありません!
Font Magic: サイズ、スタイル、ファミリーの選択など、フォントの制限された制御。
テキストのトリック: 単純なテキストの配置と装飾。
Spacing Sorcery: マージン、パディング、境界線を含む基本的なレイアウトコントロール。
その後 1998 年に CSS 2.0 が登場し、私たちの小さな魔法使いはいくつかの新しいトリックを学びました:

要素の配置: 静的、相対、絶対、および固定の配置。
Z-Index: レイヤーケーキのように、要素を互いの上に積み重ねます。
メディアタイプ: 画面、プリンターなどのさまざまなスタイルルール。
高度なセレクター: :hover などの新しいセレクターで雰囲気を盛り上げます。
しかし、ブラウザのサポートに一貫性がないという暗い側面もありました。開発者は、さまざまなブラウザ間で動作させるために風変わりな「ハック」や呪文を使用する必要があり、CSS 2.0 は壊れた杖で呪文を唱えるような気分になってしまいました。

移行段階: CSS 2.1 とブラウザ戦争

「ブラウザ戦争」として知られる 2000 年代初頭へようこそ。これは、Internet Explorer と Netscape Navigator の間で、それぞれが独自の CSS 解釈で相手を出し抜こうとする壮大な戦いのようなものだと想像してください。結果？一貫性のない動作と開発者の不満。

2011 年に CSS 2.1 が登場します。これは、CSS 2.0 のバグと曖昧さの修正を目的とした控えめなアップデートです。シーンにもう少し安定性をもたらしましたが、本当の魔法はまだバックグラウンドで醸成されていました...

現代: CSS3 と現代マジックの台頭

ついに魔法がやって来ました! 2000 年代後半から CSS3 が展開され始めましたが、今回はひねりが加えられており、モジュール式でした。 CSS3 は単なる 1 つの魔法の本ではありませんでした。それは、レイアウト (フレックスボックス、グリッド) からアニメーションなどに至るまで、すべての個別のモジュールを備えたライブラリ全体でした。この新しいアプローチにより、ブラウザーはより迅速に機能を導入できるようになり、突然、Web 開発者は非常に強力な魔法を手に入れることができました。

1. フレックスボックスとグリッド: レイアウトの魔法使い

Flexbox (フレキシブルボックスレイアウト): Flexbox は、複雑なレイアウトを簡単に作成できる 1 次元レイアウトウィザードのようなものです。コンテナ内でアイテムを整列または分配する必要がありますか?コンテンツがどれほど予測不可能であっても、Flexbox があなたをサポートします!
CSS グリッド: グリッドはレイアウトのグランドマスターであると考えてください。これにより 2 次元の制御が可能になり、開発者は厄介なフロートや位置決めハックに頼ることなく、複雑で応答性の高いグリッドを作成できます。グリッドテンプレート列やグリッドテンプレート行などのツールを使用すると、レイアウトの世界のマスターとなります。

2. レスポンシブデザイン: カメレオンのように適応する

スマートフォンやタブレットの台頭により、ウェブサイトはこれまで以上に適応性を高める必要がありました。メディアクエリを入力します。これは、幅、高さ、解像度などのデバイスの特性に基づいてサイトの外観を変更できるようにする魔法です。ここで「モバイルファースト」アプローチが登場しました。最初に小さな画面向けにデザインし、次に大きな画面向けに強化するというものです。結果？手袋のようにあらゆるデバイスにフィットするウェブ!

3. アニメーションとトランジション: ページに命を吹き込む

CSS3 により、ウェブは独自の生命力を獲得しました。開発者は、JavaScript を必要とせずに、CSS で直接、滑らかで視覚的に魅力的なアニメーションを作成できます。次のような効果を想像してください:

トランジション: トランジションプロパティ、トランジション期間などを使用した状態変化 (ホバー効果など) によってトリガーされる単純なアニメーション。
アニメーション: @keyframes を使用してマルチステージアニメーションを作成する、より複雑なシーケンス。
突然、ウェブサイトが踊ったり、ジャンプしたり、反応したりできるようになり、ユーザーを魅了し、ウェブをより活気のある場所にしました。

4. カスタムプロパティ (CSS 変数): 個人用ポーションの材料

カスタムプロパティとも呼ばれる CSS 変数により、スタイルが動的かつカスタマイズ可能になります。サイトのテーマを数秒で変更したいですか?魔法の要素を一度定義すれば、それをスタイルシート全体で使用できます。例:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

ログイン後にコピー

単一の値を変更できるようになり、Web サイト全体が魔法のように変わります!

5. 変換とフィルター: 視覚効果をマスターする

CSS3 は、現実を曲げたりねじったりするためのツールである変換とフィルターも提供します。

変形: 回転、拡大縮小、平行移動、傾斜などの効果を適用して、素晴らしい視覚効果を作成します。
フィルター: ぼかし、グレースケール、ドロップシャドウなどの動的な効果を追加して、外部グラフィックソフトウェアに依存せずに要素をポップにします。

6. CSS Houdini: 究極の魔法を解き放つ

次に、CSS Houdini を紹介します。CSS Houdini は、開発者がブラウザの CSS レンダリングエンジンにさらに深くアクセスできるようにする新しい API セットです。型チェックを備えたカスタムプロパティ、新しいレイアウトアルゴリズムなど、独自の CSS 魔法の呪文を作成するところを想像してみてください。まだ初期段階ですが、Houdini はすべてを変える可能性を秘めています。

将来を見据えて: CSS の将来

私たちの魔法の言語の次は何でしょうか?杖をしっかり持ち続けてください。これからさらに多くのことが起こります:

コンテナクエリ: ビューポートだけでなく、コンテナのサイズに基づいてスタイルを設定します。
サブグリッド: CSS グリッド機能が強化され、さらに正確な制御が可能になりました。
CSS ネスト: Sass や他のプリプロセッサでおなじみの機能がネイティブ CSS に登場します。
新しいカラー関数: 最新の色空間と color-mix() などの関数のサポート。
CSS はさらに強力になり、Web デザインで可能なことの限界を押し広げることになります。さあ、杖 (キーボード) を手に取り、ウェブマジックを作成する準備をしましょう!

以上がCSS の進化: 基本から現代の魔法までの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。