翻訳者: 実際...これがおそらく私を最も興奮させる機能だと思います...しかし、頭痛も怖いです...元のリンクを添付します
新しい CSS 機能を使用したいと思ったが、ブラウザがこの機能を完全にサポートしていないため、最終的には断念したことはありませんか?さらに悪いことに、ブラウザはすでにそれをサポートしていますが、問題がたくさんあります。皆さんもこういった状況に遭遇したことがあるのではないでしょうか。上記の状況に遭遇したことがある場合は、Houdini について心配する必要があります。
Houdini は、w3c の新しいタスク チームです。彼らの最終目標は、上記の問題を解決し、ブラウザーが新しい CSS 機能をより迅速にサポートできるようにすることです。このプロジェクトは、一連の新しい API を提供し、開発者が CSS 自体の機能を拡張できるようにすることを初めて試みています。フックを通じて、ブラウザーのレンダリング プロセスを操作できます。
フック 簡単に説明すると、フックとは英語でフックと訳され、プログラムの特定の位置に予約されたプログラムコードを埋め込んで、対応する他のプログラムコードを呼び出すことを指します。これは、特定のクリップ内の位置を空けることと大まかに考えることができます。後でこの位置にアクションを配置することもできますが、それは問題ではありません。
しかし、これは具体的に何を意味するのでしょうか?これは本当に良いアイデアでしょうか?そして、これは私たちの開発プロセスにどのような助けとなるでしょうか。
この記事では、これらの質問に答えていきます。しかしその前に、まず今日私たちがどのような問題に直面しているのか、そしてなぜこれらの変更を加える必要があるのかを理解する必要があります。次に、Houdini とは何か、そして Houdini がこれらの問題をどのように解決するかについてさらに詳しく説明し、現在開発中の興味深い機能のいくつかをリストします。最後に、より具体的な例をいくつか図解で示します。
新しい CSS 機能を紹介する記事を書くたびに、誰かが「これはすごい！」とコメントしますが、これを理解できるようになるにはあと 10 年かかるかもしれません。非建設的なメッセージ... 過去の歴史から判断すると、機能の提案から広く採用されるまでには確かに数年かかります。最も重要な理由は、CSS に新しい機能を追加する唯一の方法が、次の標準プロセスを介することであるということです。
ブラウザ自体が関与しすぎているため、このような処理には異論はありません。もちろん、これには長い時間がかかることも承知しています。たとえば、フレックスボックスは 2009 年に初めて提案されましたが、サポートされているブラウザが不十分であることに開発者が不満を抱いているのを今でも見かけます。ほとんどすべてのブラウザが自動的に更新されるため、この問題は徐々に解決されていますが、モダン ブラウザであっても、機能の提案から実際に機能が使用されるまでにはまだ長い時間がかかります。
興味深いのは、Web 分野のすべてがこの状況にあるわけではないということです。最近の Javascript と、なぜ Javascript がこれほど急速に開発できるのかを見てみましょう。
より。上の写真 このプロセスでは、提案を概念化して実際に製品に使用するまでに数日しかかからない場合もあります。例: 製品ですでに非同期/待機機能を使用しています。この機能はブラウザでもまだサポートされていません。
また、JavaScript コミュニティでは更新速度が速すぎるという不満の声が聞こえ始めていますが、CSS コミュニティでは主に多くの不満が見られます。あまりにも多くのことを学んでも無駄であり、それを使用するには時間がかかると不平を言う人。
JavaScript のプロセスを読んだ後、最初に直感的に思ったのは、CSS にも Polyfill を提供する必要があるということです。Polyfill があれば、CSS も Javascript と同じくらい早く進化できるのではないか、ということです。残念ながら、これは想像するほど簡単ではありません。古いテクノロジーを使用して CSS に新しい関数や API を実装することは非常に困難であり、ほとんどの場合、パフォーマンスが完全に犠牲になります。
JavaScript は動的言語です。つまり、JavaScript を使用して Javascript をポリフィルに置き換えるのは比較的簡単です。 CSS については、ポリフィルに CSS を使用することはほとんどありません。一般に、トランスレーターは、PostCSS などの CSS を生成するために使用されます。ポリフィルを DOM 構造または要素のレイアウトと位置に直接追加する場合は、対応するロジック プログラムをクライアントで実行する必要があります。
残念ながら、ブラウザにはこれを行う簡単な方法がありません。
下の図は、HTML ファイルを受信して画面に表示するまでのブラウザのプロセスを簡単にまとめたものです。青いブロックは、JavaScript が結果を制御できるキーポイントです
上の図では、開発者として、ブラウザーが HTML と CSS を解析して DOM と CSSOM に変換するプロセス、特にブラウザーのレイアウトと要素のレンダリングをほとんど制御できないことがわかります。このプロセスで制御できるのは DOM へのアクセスだけです。代わりに CSSOM を開く時期が来ましたか?しかし、最初に、Houdini Web サイトで言及されている改善された CSSOM 部分について触れておきます。これは、一貫性のないブラウザ間の動作と主要な機能の欠如を確認するものです。
主要な機能の欠如に関しては、たとえば、ブラウザーの CSSOM はクロスサイト アクセスのスタイル ルールを表示せず、理解できないスタイルを直接無視します。これは、次のような場合にも同様です。ブラウザーでサポートされていない機能を追加する場合は、CSSOM を使用できません。代わりに、DOM を使用して
