CSS を使って不可能なことをやりたいと思ったことはありますか?最近私はこう考えています。自分の想像力だけで独自のカスタム スタイルやアニメーションを作成できたらどうなるでしょうか?作成したばかりの新しい CSS プロパティをブラウザーに理解させることができたらどうなるでしょうか?あるいは、画面上でいくつかのスタイルのペイントを開始することもできます - ExCusE mE!
それでは、CSS Houdini にご挨拶しましょう!
開発者として、私たちは常に CSS をその限界を超えて曲げる方法を探していました。私たちは、それを使って素晴らしいものを構築するために、ハックな回避策とサードパーティのライブラリに依存しました。しかし、私が最初に Houdini について知ったときと比べると、そんなことはありませんでした。そこからはゲームオーバーでした。文字通り、私たち開発者にブラウザの CSS エンジンへの鍵が与えられたようなものです。今では、これまでアクセスできなかったスタイリング力を活用できるようになりました。このブログ投稿では、Houdini がどのように機能するか、現実世界のアプリでどこで使用されるか、そしてなぜ昨日のように Houdini を学習し始める必要があるのかについて詳しく説明します。
CSS Houdini は、開発者がブラウザの基盤となるレンダリング エンジンに直接アクセスできるようにする API のコレクションで、CSS 自体を利用して拡張できるようにします。 Houdini と呼ばれるのは、有名な魔術師 Harry Houdini のように、開発者が実行時に実行できる低レベルの JavaScript API と機能にアクセスできるようにすることで、不可能 (または以前は不可能だった) ことを可能にするためです。
CSS は歴史的に宣言型言語です。スタイルを定義すると、ブラウザーがレンダリングを処理します。このアプローチにはいくつかの制限があります:
Houdini は、独自のスタイルと動作をブラウザーで直接記述できる API を使用してこれらすべてを変更し、非常に必要なパフォーマンス インストルメンテーション フックとレンダリング機能を公開します。
Houdini API を使用すると、開発者はブラウザのスタイルとレイアウトの機能を拡張できます。主要な部分には次のようなものがあります:
独自のグラフィックス (パターン、グラデーション、形状など) を作成し、背景や境界線の描画に使用できます。
デザインを適用する要素を配置する方法のカスタム レイアウト動作を定義できます。
アニメーションを細かく制御して、カスタム アニメーション効果を作成できます。
プログラムによる CSS 値の読み取り/書き込み/操作のよりパフォーマンスの高い方法。
これにより、特定のタイプとデフォルトを使用して新しいカスタム CSS プロパティを定義できます。
ペイント API を使用してカスタム背景パターンを作成する方法を見てみましょう。
例: カスタムの点線の背景
ペイント ワークレットを定義する
まず、カスタム ペイント ワークレットを定義するための JavaScript ファイル (dotted-background.js) を作成します。
ワークレットを登録します
CSS ファイルで、ワークレットをリンクします:
結果
これで、div にはカスタムの点線の背景が追加され、外部ライブラリに依存せずに Paint API を通じて完全にスタイル設定されました。
動的グラデーション
ユーザーの操作に応答したり、時間の経過とともに変化したりするグラデーションを作成します。
例: ユーザーの入力に応じて変化するグラデーションの背景を持つログイン ページ。
カスタムアニメーション
アニメーション ワークレットを使用して、要素のバウンスやインタラクティブな視差効果など、物理ベースのスムーズなアニメーションを作成します。
例: カーソルを置くと「フローティング」する製品カード。
ユニークなレイアウト
Layout API を使用すると、スパイラル、ギャップのあるグリッド、さらには六角形のレイアウトなど、独自の形状やパターンで要素を配置できます。
例: 写真をハニカムパターンで表示するギャラリー アプリ。
パフォーマンスの向上
Houdini はブラウザのレンダリング エンジンと直接統合されているため、重い JavaScript ライブラリに依存する必要はありません。
無限のカスタマイズ
CSS がネイティブに実行できることに制限されることはもうありません。それを夢見ることができれば、Houdini でそれを構築できます。
将来性のあるスキル
Houdini の採用が進むにつれて、これらの API の使用方法を知っている開発者は、すぐに本当に素晴らしいものを構築し始めることができるようになります。
Houdini は強力ですが、まだ新興テクノロジーです:
CSS Houdini は、スタイル、アニメーション、その他ほとんどすべてのものへのアプローチ方法を変えています。この API は、開発者にブラウザのレンダリング エンジンへの低レベルのアクセスを提供します。これにより、以前の CSS では想像できなかった多くの可能性が開かれます。 Houdini があれば、動的なグラデーション、シェイク可能なレイアウト、生きていると感じるアニメーションなどをすべて作成できます。
この機能はまだ初期の段階ですが、その機能を試してみたいと思っています。そのとき、私たちがウェブ上でできることには本当に制限がなくなるでしょう。それで、あなたも私たちの最愛のプラットフォームに魔法をもたらすことに興奮していますか?なぜなら私はそうだからです。
以上がCSS Houdini: ブラウザの秘密のスーパーパワーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
