CSS Painting APIが勧告候補になりました。

UI開発者 宇賀

皆さんこんにちは！UI開発者の宇賀です。

今回は先日勧告候補になったCSS Painting APIについてご紹介します。

「勧告候補（Candidate Recommendation）」とはW3Cの勧告プロセスの過程の1つで、レビューを終えて各ベンダーへ実装を呼びかける段階にあたります。

CSS Paiting APIとは

CSS Painting APIはJavaScriptでCSSの機能を拡張することができるようになるための仕様Houdiniの1つであり、canvasのような方法でbackground-imageを生成することができます。

Houdiniの中で初の勧告候補となり、今後の発展により期待が高まりますね。その他の仕様の勧告及び各ブラウザの実装状況は、「Is Houdini ready yet?」というサイトでまとめて確認することができます。対応しているブラウザでぜひ動作をご確認ください。

CSS Painting APIを使ってみる

このAPIを試すときに注意しなければならないポイントが1つあります。それは、今年の4月に公開されたCSS Paint APIの使いどころという記事で紹介されているとおり、SSL環境でなければ動作しないという点です。

本APIを利用するには、スタイリングに必要なコードが書かれたJavaScriptファイルを次のような記述で読み込みます。

CSS.paintWorklet.addModule('JavaScriptファイルのパス');

ここでは、背景の縞模様が文字サイズに応じて変化するサンプルを用意しました。

htmlファイル

次のようなマークアップをbody要素内に用意します。

<style>
textarea {
  --background-a: #000;
  --background-b: #222;
  --font-size: 16px;
  --line-height: 2;

  font-size: var(--font-size);
  line-height: var(--line-height);
  padding: 0 .4em;
  border: 0;
  color: #fff;
  width: 100%;
  height: 300px;
  background-image: paint(codeline);
  box-sizing: border-box;
}
</style>

<textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla odit vitae quisquam temporibus. Vel quaerat cupiditate in optio expedita blanditiis maxime aliquam, est molestias consectetur voluptatem unde quibusdam nobis dolorem!</textarea>

<script>
  CSS.paintWorklet.addModule('sample.js');
</script>

カスタムプロパティはJavaScriptで拾えるため、line-heightプロパティとfont-sizeプロパティを変数化しておき、CSS Painting APIで縞の高さを計算する際に利用します。

JavaScriptファイル

次のようなコードが書かれたJavaScriptファイルを「sample.js」という名前でhtmlファイルと同階層に設置します。

(() => {
    'use strict';

    class CodelinePainter {
        static get inputProperties() {
            return [
                '--background-a',
                '--background-b',
                '--font-size',
                '--line-height'
            ];
        }

        paint(ctx, geom, properties) { // eslint-disable-line class-methods-use-this
            const colorA = properties.get('--background-a').toString();
            const colorB = properties.get('--background-b').toString();
            const height = parseFloat(properties.get('--font-size').toString(), 10) * parseFloat(properties.get('--line-height').toString(), 10);
            const {width} = geom;
            let y = 0;

            for (y; y < geom.height / height; y++) {
                ctx.beginPath();
                ctx.fillStyle = (y % 2 === 0) ? colorA : colorB;
                ctx.rect(0, height * y, width, height);
                ctx.fill();
            }
        }
    }

    registerPaint('codeline', CodelinePainter);
})();

動作を確認する

SSL環境下に上記の用意ができましたら、当該ページを対応しているブラウザで確認してみてください。開発者ツールのElementsインスペクタで、textarea要素にあたっているCSSルールセット内の「--font-size」プロパティの値を変更してみると、文字サイズに応じて背景の縞模様が一緒に変化するのがお分かりいただけるかと思います。

JavaScriptに続いてCSSも日々進化しています。以前から注目度の高い技術ですが、Houdiniは今後も目が離せないですね！