CSS標準の機能を使用したいと思ったことはありますが、すべてのブラウザでサポートされているわけではないため、使用しませんでしたか？ さらに悪いことに、すべてのブラウザーでサポートされていますが、バグがあり、矛盾しているか、まったく互換性がありませんか？ きっとあなたはこれに出くわしたので、 Houdiniをよく見ることをお勧めします。



これは新しいW3Cワーキンググループであり、上記の問題を恒久的に解決するという野心的なタスクを持っています。 これは、APIの新しいセットの助けを借りて行われる予定です。これにより、開発者は初めてCSSを独立して拡張でき、ブラウザーエンジンの作業中にレイアウトを作成してスタイルを適用するプロセスに接続するツールを提供できます。



しかし、これらの約束の背後には正確に何がありますか？ これは良いアイデアですか？ そして、上記のすべてが、開発者が今日および明日、サイトを作成するのにどのように役立ちますか？



これらすべての質問に答えようとします。 しかし、最初に、今日の現在の問題とそれらを解決する必要性を明確にします。 そして、Houdiniがそれらをどのように支援できるかについて説明し、開発中の最も印象的な機能をいくつか見ていきます。 結論として、開発コミュニティがHoudiniプロジェクトの実装をどのように支援できるかについて、多くの提案をします。

Houdiniはどのような問題を解決しようとしていますか？

新しいCSS機能を普及させるために記事を書いたり、デモアプリケーションを作成するたびに、必然的に次のようなコメントを受け取ります。 私たちがこれをさらに10年間使用できないことは何と残念なことでしょう。」 そのようなコメントは建設的ではなく、非常に迷惑ですが、開発者の気分は理解できます。 そのため、広範なイノベーションには数年かかります。 そして、ウェブの歴史が私たちに教えてくれる主な理由は、標準化プロセスを通して排他的に新しいCSS機能を取得することです。





^{標準化プロセスの段階}



標準化に反対することはありませんが、時間がかかりすぎます！ たとえば、2009年にflexboxが導入されましたが、開発者は、ブラウザーのサポートが不十分なため、まだ使用できないと説明しています。 幸いなことに、ほとんどすべての最新のブラウザーは自動的に更新されるため、この問題は徐々に解消されています。 しかし、この場合でも、機能の提供とそれを使用する一般的な意思の間には常に遅延があります。 興味深いことに、この状況はWebのすべての領域で見られるわけではありません。 たとえば、JavaScriptと比較します。





^{ポリフィルの実装手順}



この場合、アイデアが生まれてから作業に使用されるまでに数日かかる場合があります。 たとえば、実稼働環境では既にasync/await



関数を使用していますが、この機能はどのブラウザーにもまだ実装されていません！



確かに、あなたは両方のコミュニティのムードに大きな違いがあることに気づきました。 JSコミュニティでは、物事があまりにも急速に変化すると不満を言う記事を読みます。 また、CSSでは、新製品を使用する前に多くの時間が残っているため、誰もが新製品について学ぶことの無益さについて嘆きます。

それでは、なぜCSSポリフィルをもっと作成しないのですか？

一見、これは明らかな解決策です。 優れたポリフィルCSSのおかげで、JavaScriptのようにペースが速くなりますよね？ 悲しいかな、それほど単純ではありません。 CSSにポリフィルを埋め込むのは非常に難しく、多くの場合、パフォーマンスを完全にクラッシュさせずに埋め込むことはできません。



JavaScriptは動的言語であるため、JSでJSのポリフィルを作成できます。 その信じられないほどの拡張性は、その動的な性質の結果です。 また、CSSを使用して独自のポリフィルを作成することはほとんどありません。 ビルド段階で、CSSコードをCSS（トランスパイル）コードにコンパイルできる場合があります（ PostCSSはこれを行います）。 ただし、DOM構造に依存するもの、または要素の位置やレイアウトにポリフィルを使用する場合は、クライアント側でポリフィルロジックを実行する必要があります。 残念ながら、ブラウザはこのタスクを簡単にしません。



以下は、HTMLドキュメントの受信から画面上のピクセルの表示までのブラウザプロセスの基本図です。 JavaScriptが結果に影響を与えることができる青いステップが強調表示されています。





^{ブラウザレンダリングパイプラインへのJavaScriptアクセス}



かなり暗い写真。 開発者は、HTMLとCSSを解析し、それをDOMおよびCSSオブジェクトモデル （CSSOM）に変換するプロセスを制御しません。 カスケードを制御しません。 DOMの要素のレイアウトを選択するプロセスを制御するのではなく、表示されたときの色を制御するのではありません。 最後に、作曲家（コンポジット）の操作に影響はありません。 DOMのみが完全にあなたに従属します。 CSSOMにはある程度の影響がありますが、Houdiniのサイトによると、この手順は「明確に定義されておらず、ブラウザーによって異なり、重要な機能もありません」とのことです。 たとえば、今日CSSOMはクロスオリジンのスタイルシートのルールを表示せず、理解できない場合はルールを削除します。 これは、機能を追加するポリフィルを作成する場合、CSSOMをバイパスすることを余儀なくされることを意味します。 DOMを介して<style>



および/または<link rel="stylesheet">



タグを見つけてから、CSSを自分で取得して解析し、変換してからDOMに追加し直す必要があります。



もちろん、DOMの更新は通常、ブラウザーがすべてのステップ（カスケード、テンプレート、カラーリング、レイアウト）を再度実行する必要があることを意味します。





^{ブラウザレンダリングパイプラインでJavaScriptポリフィルを使用する}



ページの完全な再描画がパフォーマンスにあまり影響を与えないと考えている場合は、これが発生する頻度を覚えておいてください。 スクロール、ウィンドウのサイズ変更、マウスの移動、キーストロークなどのイベントに応じて、つまり変更を加えてポリフィルロジックを実行する必要がある場合、サイトの動作は著しく遅くなります。 すべての最新のCSSポリフィルに独自のCSSパーサーとカスケードロジックが含まれると想像すると、すべてがさらに暗く見えます。 また、これらは非常に複雑なコンポーネントであるため、ポリフィルは非常に大きいか、非常に重要です。



言われたことすべてをまとめると、ブラウザーが意図していないこと（ブラウザーにフィードしたCSSを含む）を強制的に実行させたい場合、DOMの自己修正を使用してそれをだます方法を考える必要があります。 パイプラインの他のステージにはアクセスできません。

しかし、なぜ内部ブラウ​​ザーエンジンを変更する必要があるのでしょうか？

私の意見では、これは記事全体の中で最も重要な問題です。 したがって、この点に到達したら、ゆっくりと思慮深く読み進めてください！



前のセクションの後、あなたの一人が考えました：「私はこれを必要としません！ 私は通常のWebページを実行しているだけで、ブラウザーの内部をハッキングしたり、非常に贅沢な実験的または超近代的なことをしようとはしていません。」 そのような考えにあなたが訪れたなら、私はあなたがこのテキストを今のところ延期し、あなたが近年ウェブサイトを作成するために使用した技術を注意深く研究することを主張します。 ブラウザでスタイルを適用するプロセスにアクセスしたいという願望は、派手なデモを作成することではなく、開発者とフレームワークの作成者に次の2つのことをする機会を与えることにつながります。

• ブラウザ間のスムーズな違い、
• 人々が今日それらを使用できるように、ポリフィルを使用して新しい機能を発明したり追加したりします。

jQueryを使用したことがある場合は、その機能を使用することですぐにメリットが得られます。 これは、ほとんどすべての最新のフロントエンドライブラリとフレームワークを支持する主な議論の1つです。 たとえば、GitHubで最も人気のある5つのJSおよびDOMリポジトリ（AngularJS、D3、jQuery、React、およびEmber）は、ブラウザ間の違いを滑らかにするために多大な努力を払っています。 これらの各プロジェクトは、時計のように機能する単一のAPIを提供します。



次に、CSSとこれらのすべてのクロスブラウザーの問題について考えます。 広く互換性があると主張しているBootstrapやFoundationのような一般的なフレームワークでさえ、実際にはクロスブラウザのバグの問題を解決しません-それらを単に回避します。 しかし、CSSのこれらのバグはすべて、過去の断片だけではありません。 今日でも、 flexboxのような新しいテンプレートモジュールを使用しているにもかかわらず、非互換性に常に直面しています。 CSSプロパティを使用でき、すべてのブラウザーで同等にうまく機能すると確信していた場合、開発者がどれほど簡単に生活できるか想像してみてください。 または、ブログで読んだり、会議や会議で聞いたすべての素晴らしいニュース（ グリッド 、 アンカーポイント、 スティッキーポジショニングなど）を覚えておいてください。 ネイティブCSS機能と同じくらい簡単に、今すぐそれらを使用できる方法を想像してください。 このためには、GitHubからコードをコピーするだけです。



これはすべて、Houdini開発チームの夢です。 これが彼らが創造しようとしている未来です。 また、CSSポリフィルの作成や実験的な機能の開発を計画していない場合でも、おそらく他の人にこれをしてもらいたいでしょう。 結局のところ、そのようなポリフィラが現れれば、誰もがこの恩恵を受けるでしょう。

Houdiniで現在開発中の機能は何ですか？

ブラウザパイプラインの表示ページへのエントリポイントが非常に少ないことを上で述べました。 実際、これはDOMであり、一見するとCSSOMです。 Houdini開発チームは、開発者にパイプラインの他の段階へのアクセスを初めて提供するいくつかの新しい仕様を導入しました。 これらの仕様は図に反映されています（計画されていますが、まだ実装されていないため、灰色で強調表示されています）。





^{新しいHoudini Visual Pipeline仕様}



次のセクションでは、これらの新しい仕様のそれぞれを簡単に見て、その機能を分析します。 この記事では多くの仕様について言及していませんが、プロジェクトリポジトリで完全なリストを見つけることができます 。

CSS解析API

この仕様はまだ実装されていないため、以下のすべてが変更される可能性があります。 基本的な考え方は、開発者がCSSパーサーを拡張し、新しいデザインを通知できるようにすることです。 たとえば、新しいメディアルール、新しい擬似クラス、ネスト、 @extends



、 @apply



などについては、パーサーがそれらを検出するとすぐに、それらをCSSOMの適切な場所に配置し、ドロップすることはできません。

CSSプロパティと値API

CSSには既にカスタムプロパティがあり、私はそれらが提供する機能が本当に好きです。 新しいAPIは、型を追加することでこの機能をより高いレベルに引き上げます。 これには多くの利点がありますが、最も重要なのは、型の助けを借りて、開発者が色の移行とカスタムプロパティのアニメーションを実装できることです（今日では不可能です）。



例を参照してください。

 body { --primary-theme-color: tomato; transition: --primary-theme-color 1s ease-in-out; } body.night-theme { --primary-theme-color: darkred; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

night-theme



クラスが<body>



エレメントに追加され、 --primary-theme-color



プロパティの値を参照するページ上のすべての個々のエレメントの色がtomato



からdarkred



徐々に移行します。 これまでのところ、このためには、プロパティ自体の遷移を記述することができないため、各要素の色遷移を手動で規定する必要があります。



このAPIのもう1つの有望な機能は、フックを登録することです。これにより、開発者はカスケード手順の完了後に要素のカスタムプロパティの最終値を変更できます。 これは、ポリフィルの使用に関して非常に便利です。

CSS型付きOM

この機能は、現在のCSSOMの2番目のバージョンと見なすことができます。 現在のモデルに関連する多くの問題を解決するように設計されており、新しい解析APIおよびプロパティと値のAPIによって追加された機能が含まれています。 型付きOMは、パフォーマンスを向上させるようにも設計されています。 CSSOM文字列値を型付きJS表現に変換すると、重大なパフォーマンスの問題が発生する可能性があります。

CSSレイアウトAPI

このAPIにより、開発者は独自のプロトタイピングモジュールを作成できます。 また、「プロトタイプモジュール」とは、 display



プロパティに渡すことができるすべてのものを意味します。 これにより、 display



： flex



やdisplay



： table



などのネイティブモジュールを使用するのと同じくらい速くレイアウトを作成できます。 例は、Masonryライブラリです。 開発者は、CSSだけでは実装できない複雑なレイアウトを作成する場合、このようなツールに頼らなければなりません。 そして、これらのレイアウトはすべて非常に印象的に見えますが、パフォーマンスは低く、特に最も強力なデバイスではそうではありません。



モックアップAPIは、レイアウト名（後でCSSで使用される）を取得するregisterLayout



メソッドと、すべてのレイアウトロジックを含むJSクラスを提供します。 registerLayout



使用して石積みを定義する方法の簡単な例を次に示します。

 registerLayout('masonry', class { static get inputProperties() { return ['width', 'height'] } static get childrenInputProperties() { return ['x', 'y', 'position'] } layout(children, constraintSpace, styleMap, breakToken) { // Layout logic goes here. } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここですべてが理解できないと思われる場合でも、心配しないでください。 最も重要なのは、次の例のコードを見てください。 masonry.js



ファイルをダウンロードしてサイトに追加すると、CSSを同様のスタイルで記述でき、すべてが機能します。

 body { display: layout('masonry'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSSペインティングAPI

このAPIは前のものと非常に似ています。 registerPaint



と同じように機能するregisterPaint



メソッドを提供します。 その後、CSSでpaint()



関数を使用して、パーサーが画像を必要とするすべての場所で、登録された名前を渡すことができます。



色付きの円を描く簡単な例：

 registerPaint('circle', class { static get inputProperties() { return ['--circle-color']; } paint(ctx, geom, properties) { // Change the fill color. const color = properties.get('--circle-color'); ctx.fillStyle = color; // Determine the center point and radius. const x = geom.width / 2; const y = geom.height / 2; const radius = Math.min(x, y); // Draw the circle \o/ ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * Math.PI, false); ctx.fill(); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSSでは、次のように使用できます。

 .bubble { --circle-color: blue; background-image: paint('circle'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、 .bubble



の背景に.bubble



要素が表示されます。 この円は、要素の中央に配置され、何が起こってもそのサイズに調整されます。

ワークレット

説明されている仕様の多くについて、サンプルコードが提供されています（たとえば、 registerLayout



およびregisterPaint



）。 このコードは、ワークレットのスクリプトに配置する必要があります。 これらは、スクリプトファイルをインポートして、メインスレッドに関係なく視覚化パイプラインのさまざまな段階で実行できるJSコードを実行できる「ウェブワーカー」に類似しています。



高性能を維持するために、ワークレットで許可される操作の種類は厳しく制限されます。

複合スクロールとアニメーション

公式の仕様はまだ存在していませんが、これはHoudiniの最も有名で期待される機能の1つです 。 ほとんどの場合、これらのAPIにより、メインスレッドの外部のリンカーの作業環境でロジックを実行でき、DOM要素の限られたプロパティセットの変更がサポートされます。 このセットには、エンジンにレイアウトまたはスタイル（変換、透明度、スクロールシフトなど）の再計算を強制することなく、読み取りまたは変更できるプロパティのみが含まれます。 これにより、ヘッダーや視差効果をスクロールするときのスティックなど、スクロールまたはユーザー入力に基づいた非常に高速なアニメーションを実装できます。 GitHubでこれらのAPI を使用する方法について詳しく読むことができます。



公式の仕様がないにもかかわらず、Chrome開発チームはすでに実験を開始しています。 これらのAPIが提供するプリミティブを使用して、 CSSアンカーポイントとスティッキーポジショニングを実装しました。 これは、Houdini APIが十分に高速であり、それらに基づいてChromeで新しい機能を作成できることを意味します。 この事実は、ネイティブツールと比較した場合のHoudiniのパフォーマンスに関する疑問を最終的に解消するはずです。



Chromeの内部アセンブリを使用して作成されたビデオを見ることができます。 スクロール時のタイトルの動作を示します。これは、ネイティブモバイルアプリケーションTwitterに実装されているものと同様です。 ソースコードも利用可能です。

今何ができますか？

私が言ったように、Houdiniはウェブ開発に関わるすべての人にとって興味があるように思えます。 このプロジェクトは、将来の私たちの生活を大いに促進することができます。 これらの仕様を直接使用したことがない場合でも、それらに基づいて構築されたツールを確実に使用できます。 そして明日は明るい未来は来ませんが、それでもあなたの多くに思われるよりは近いです。 今年、シドニーの主要なブラウザ開発者の代表者が集まってシドニーのHoudiniチームと会いましたが、何をどのように実装するかについて意見の相違はほとんどありませんでした。 私の知る限り、唯一の質問はHoudiniの作業の完了のタイミングです。



すべてのソフトウェア開発者と同様に、ブラウザメーカーは製品の新機能に特に注意を払う必要があります。 そして、そのような優先順位は、多くの場合、新しい機能に対する需要の程度に依存します。 そのため、Webサイトのスタイルとレイアウトの拡張性が懸念される場合、長年の標準化を待たずに新しいCSS機能を使用できる世界に住みたい場合は、使用するブラウザーの開発チームに関連付けられている人に通知してください。



また、コミュニティで新しい製品を適用するための可能な方法を共有することにより、ケースを支援することができます。 スタイルとレイアウトで何をしたいのか、今日するのが難しいまたは不可能なことを教えてください。 ユースケースの説明はGitHubの一部のドラフトで利用できますが、もちろんアイデアを共有してプルリクエストを作成できます。 適切なドキュメントがない場合は、新しいドキュメントを作成できます。



Houdini開発チーム（およびW3C全体）は、Web開発コミュニティから有益な応答を得る必要があります。 仕様プロセスに関与する人の多くはブラウザエンジニアです。 多くの場合、彼らはプロのWeb開発者ではなく、私たちの緊急のニーズや困難を常に知っているわけではありません。



彼らにあなたの意見を聞かせてください。

便利なリンク

• CSS-TAG Houdiniエディタードラフト 、W3C
  
  Houdiniドラフトの最新パブリックバージョン。
• CSS-TAG Houdiniタスクフォース仕様 、GitHub
  
  開発プロセスが進行中の公式GitHubリポジトリ。
• Houdiniサンプル 、GitHub
  
  コード例。
• Houdiniメーリングリスト 、W3C
  
  ここでは、一般的な質問をすることができます。