7ヶ月前に投稿

CSS Houdini を試してみた

この記事は約 4 分で読めます。

お気付きかと思いますが、
トップページのエントリータイトルと
記事のタイトルにCSS Houdini
Confetti(紙吹雪)Multiple underline
(複数の下線)

を実装しています。

では、
CSS Houdiniとは何でしょう?

Houdini は、CSS エンジンの一部を公開する低レベル API のセットであり、開発者はブラウザーのレンダリングエンジンのスタイリングおよびレイアウトプロセスにフックすることで CSS を拡張できます。 Houdini は、開発者が CSS オブジェクトモデル(CSSOM)に直接アクセスできるようにする API のグループです。 開発者は、ブラウザーが CSS として解析できるコードを記述できるため、ブラウザーにネイティブに実装されるのを待たずに新しい CSS 機能を作成できます。

CSS Houdini | MDN (mozilla.org)

・・・だそうですが、
イマイチよくわからない(汗

具体的なプロジェクトの
発足は不明ですが、
2016年あたりからニュース
記事に取り上げられていますね。

簡単に言うと、JavaScriptからブラウザ本体をいじれるようにしよう!というプロジェクトです。 ブラウザの低レベルAPIを提供し、JavaScriptからブラウザの描画アクションにフックさせ、CSSからアクセス可能にします。

Houdini、それはCSSの進化を促すプロジェクト – The future starts today (hatenablog.com)

とどのつまり、
え?使いたいプロパティが古いブラウザに対応してない?
それならHoudiniを使って自分で作成すればいいじゃない!
と言う事のようです。

Houdiniに含まれるAPIのうち、
この記事でお話しているのは
CSS Painting API」と呼ばれ、
現在、最もサポートされている
Houdini API の一つであり、
その仕様は W3C勧告候補です。

CSS Painting API は、CSS Houdini umbrellaの一部で、開発者は要素の背景、境界線、またはコンテンツに直接描画できる JavaScript 関数を記述できます。

CSS Painting API – Web APIs | MDN (mozilla.org)


現在、すべての
Chromiumベースのブラウザで有効になっており、
Safariで部分的にサポートされており、
Firefoxで検討中です。

CSS ペイント API は、クロムベースのブラウザで現在サポートされています。

しかし、完全なブラウザのサポートがなくても、
Houdini Paint APIを使用してクリエイティブになり、
CSS PaintPolyfillを使用して
すべての最新ブラウザでスタイルが機能することを
確認できます。

以下のExampleは、
Houdini.howのWorklet Libraryから
いくつか実装したものです。

Example

このダミーテキストは自由に改変することが出来ます。なお、組見本の「組」とは文字組のことです。活字印刷時代の用語だったと思います。これは正式な文章の代わりに入れて使うダミーテキストです。主に書籍やウェブページなどのデザインを作成する時によく使われます。このダミーテキストは自由に改変することが出来ます。本文用なので使い方を間違えると不自然に見えることもありますので要注意。カタカナ語が苦手な方は「組見本」と呼ぶとよいでしょう。なお、組見本の「組」とは文字組のことです。活字印刷時代の用語だったと思います。

カタカナ語が苦手な方は「組見本」と呼ぶとよいでしょう。主に書籍やウェブページなどのデザインを作成する時によく使われます。書体やレイアウトなどを確認するために用います。本文用なので使い方を間違えると不自然に見えることもありますので要注意。カタカナ語が苦手な方は「組見本」と呼ぶとよいでしょう。ダミーテキストはダミー文書やダミー文章とも呼ばれることがあります。これは正式な文章の代わりに入れて使うダミーテキストです。なお、組見本の「組」とは文字組のことです。活字印刷時代の用語だったと思います。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

CSS Houdini を試してみた