CSS は永久に変更されただけ: 知っておくべき進化した機能

Web 開発者として、私たちは皆、CSS を扱うときにイライラする瞬間を経験したことがあります。 div のセンタリングからダーク モードへの移行の管理まで、CSS は歴史的に数え切れないほどの開発者の悩みの種でした。しかし、風景は変わりつつあります。最近のメジャー アップデートとレベッカ パープルの美しい新しいロゴにより、CSS は強力で開発者にとって使いやすい機能の新時代を迎えています。

?毎週の CSS ヒント、コード スニペット、チュートリアルを受信箱に直接入手できます - 完全に無料です。

レベッカ・パープルの重要性

新機能について説明する前に、新しい CSS ロゴの色の背後にある感動的なストーリーに注目する価値があります。レベッカ パープルは単なる色の名前ではなく、Web 開発コミュニティにおいて深い意味を持っています。 CSS のパイオニアであるエリック メイヤーの娘、レベッカ メイヤーにちなんで名付けられたこの色は、永遠の賛辞として機能します。レベッカさんは6歳の時にフルネームで呼ばれることを主張したが、その後すぐに亡くなった。彼女の記憶はこの標準 CSS カラーを通じて生き続けており、おそらく今後何世紀にもわたって Web の基盤の一部となるでしょう。

1. 複雑さを排除してコンテンツを調整する

div のセンタリングに関するミームを覚えていますか?現在では廃止されています。新しい align-content プロパティは、フレックスボックスやグリッドを必要とせず、あらゆるブロック レイアウトで直接機能します。このような基本的な機能を実装するのに 25 年もかかったのはほとんど驚くべきことですが、実装しないよりは遅かった方が良いです。

.centered-content {
    align-content: center;  /* That's it! No flexbox or grid needed */
    block-size: 100vh;
}

2. @property を使用した型付き CSS 変数

CSS Houdini の一部である @property ルールは、変数処理の革新的な要素です。以前は、CSS 変数は単純な文字列として解釈され、アニメーションの可能性が制限されていました。数値、色、パーセンテージなどの変数タイプを指定できるようになり、より安全なコードとより洗練されたアニメーションが可能になります。

/* Old way - limited animation capabilities */
:root {
    --gradient-stop: 50%;
}

/* New way - fully animatable */
@property --gradient-stop {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

.gradient {
    background: linear-gradient(90deg, blue var(--gradient-stop), red);
    transition: --gradient-stop 0.3s;
}

.gradient:hover {
    --gradient-stop: 75%;
}

3. 開始スタイル: 第一印象の向上

新しい @starting-style ルールは、アニメーションの一般的な課題を解決します。 「display: none」で非表示にされた要素が表示されると、その開始アニメーションがトリガーされないことがよくあります。このルールを使用すると、要素が最初にレンダリングされるときに要素の初期スタイルを定義できるため、ダイアログ、ポップオーバー、その他の動的コンテンツに最適です。

.dialog {
    display: none;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.3s, opacity 0.3s;
}

@starting-style {
    .dialog {
        transform: translateY(20px);
        opacity: 0;
    }
}

.dialog.open {
    display: block;  /* Will now animate smoothly from the starting style */
}

4. 数学的能力の強化

CSS は、新しい数学関数を備えた強力なスタイリング言語として進化し続けています。

.mathematical {
    /* Rounding numbers */
    width: round(45.6px);           /* 46px */
    height: round(down, 45.6px);    /* 45px */
    margin: round(up, 45.6px);      /* 46px */

    /* Remainder operations */
    padding: rem(17, 5);            /* 2 (remainder of 17÷5) */
    gap: mod(17, 5);               /* Same as rem() */
}

5. light-dark() による簡略化されたダークモード

ダーク モードの実装は、light-dark() 関数を使用するとより簡単になります。この機能を使用すると、メディア クエリを使用せずに、明るい配色と暗い配色に異なる値を指定できます。

6. よりスマートなフォーム検証スタイル

新しいユーザー有効擬似クラスとユーザー無効擬似クラスにより、フォーム検証の UX が向上しました。前任者 (:valid および :invalid) とは異なり、これらはユーザーの操作後にのみトリガーされ、早期のエラー メッセージを防ぎます。

.centered-content {
    align-content: center;  /* That's it! No flexbox or grid needed */
    block-size: 100vh;
}

7. 補間サイズによるアニメーションの画期的な進歩

おそらく最も興味深い追加機能は、補間サイズのプロパティです。これにより、要素を動的な高さでアニメーション化するという長年の課題が解決されます。

/* Old way - limited animation capabilities */
:root {
    --gradient-stop: 50%;
}

/* New way - fully animatable */
@property --gradient-stop {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

.gradient {
    background: linear-gradient(90deg, blue var(--gradient-stop), red);
    transition: --gradient-stop 0.3s;
}

.gradient:hover {
    --gradient-stop: 75%;
}

楽しみにしている

これらの機能は氷山の一角にすぎません。コンテナ クエリ、サブグリッド、:has セレクターなどの強力な追加機能により、CSS はより高機能で開発者にとって使いやすい言語へと進化し続けています。すべての主要なブラウザーでサポートされている最新の CSS ベースラインは、CSS が単に生き残っているだけではなく、繁栄していることを証明しています。

CSS が Web 開発において必要悪とみなされていた時代は終わりました。これらの新機能は、言語をより直観的で強力なものにしながら、現実世界の開発者の課題を解決するという取り組みを示しています。私たちが前進するにつれて、CSS は単に変化しているだけではなく、Web スタイルへのアプローチ方法に革命を起こしていることは明らかです。

以上がCSS は永久に変更されただけ: 知っておくべき進化した機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。