HTMLとCSSのメタ・フレームワーク「XSA」を公開しました

「限界突破した style属性 (EXtended Style Attribute)」を意味する「XSA (エクサ)」という HTML と CSS のメタ・フレームワークを GitHub に公開したので、紹介します。

限界突破した style属性 とは

style属性 は HTML のすべての要素に使えるグローバル属性の1つです。

<p style="color: var(--red);"> … </p>

style属性 を追加した要素に直接、CSSプロパティ と値を設定してスタイルを適用することができます。しかし、擬似クラスや擬似要素などを使用した複雑なスタイリングを設定することはできませんでした。これを打破するのが XSA です。

<p style="--color--: var(--red);"> … </p>

CSSプロパティ の前後にハイフン2つ (--) を付けカスタムプロパティ化した XSAプロパティ を style属性 に追加したとき、

[style*="--color--:"] {
  color: var(--color--);
}

それ自体をトリガーとして、CSSプロパティ に値を設定するという仕組みです。

<div style="
    --cqi-s_c-nth-1_hover_color--: var(--red);
    --cqi-s_c-nth-2_hover_color--: var(--green);
    --cqi-s_c-nth-3_hover_color--: var(--blue);
    ">
  <p>コンテナ要素がSサイズ以上でホバー時に赤色になる段落</p>
  <p>コンテナ要素がSサイズ以上でホバー時に緑色になる段落</p>
  <p>コンテナ要素がSサイズ以上でホバー時に青色になる段落</p>
</div>

カスタムプロパティは子孫要素に継承されるので、適用条件を示すクエリやセレクタをエンコードした XSAプレフィックス を付けることで、

@container (inline-size > 480px) {
  [style*="--cqi-s_c-nth-1_hover_color--:"] > :where(:nth-child(1)):where(:hover) {
    color: var(--cqi-s_c-nth-1_hover_color--);
  }
  [style*="--cqi-s_c-nth-2_hover_color--:"] > :where(:nth-child(2)):where(:hover) {
    color: var(--cqi-s_c-nth-2_hover_color--);
  }
  [style*="--cqi-s_c-nth-3_hover_color--:"] > :where(:nth-child(3)):where(:hover) {
    color: var(--cqi-s_c-nth-3_hover_color--);
  }
}

style属性 の限界を突破して、子孫要素や擬似要素へのスタイリングと、メディアクエリ、コンテナクエリ、擬似クラスによる条件分岐が HTML からできるようになります。

XSA の利用方法

現在、XSA CSS, XSA JS, XSA PostCSS, XSA PHP の4つのパッケージを GitHub に公開しています。

XSAプロパティ のライブラリを使用する

あらかじめ、使用する XSAプロパティ を決めておき、その範囲内でスタイリングしていく方法です。GitHub に上がっているパッケージでは、XSA CSS がこれに該当します。

[style*="--background--:"] { background: var(--background--); }
[style*="--color--:"] { color: var(--color--); }
[style*="--font-size--:"] { font-size: var(--font-size--); }
[style*="--font-style--:"] { font-style: var(--font-style--); }
[style*="--font-weight--:"] { font-weight: var(--font-weight--); }
[style*="--text-decoration--:"] { text-decoration: var(--text-decoration--); }

例えば、WYSIWYGエディタ でテキスト装飾をする場合、上記のコードだけでも多くのことができるようになります。

XSAプロパティ から CSSコード を生成する

GitHub に上がっているパッケージでは、XSA JS, XSA PostCSS, XSA PHP がこれに該当し、すべての CSSプロパティ と、ありとあらゆる XSAプレフィックス の組み合わせが使用可能になります。

XSA JS はブラウザでアクセスされた時、XSA PostCSS は Node.js でビルドされた時、XSA PHP はサーバにリクエストがあった時に、使用された XSAプロパティ を分解・デコードして、CSSコード を生成します。ウェブサイトの構築環境によって使い分けることができます。

XSA の用途

XSA は Tailwind CSS に代表されるユーティリティファーストな使い方もできます。XSA JS の xsa.min.js (約10KB) は Tailwind CSS v4.3 Play CDN (約268KB) の 4%以下 のサイズです。それでいて、Tailwind CSS に勝るとも劣らないポテンシャルがあります。

しかし、ユーティリティファーストな使い方を推奨している訳ではありません。XSA は style属性 で使用できる XSAプロパティ を確立するだけで、値の部分は自由に設定することができます。つまり、どのようなデザインルールにも適合できる汎用性を持っています。

HTML だけで完結したい場合、ボタンなどのコンポーネントにオプションを追加したい場合、ページ毎に内容が変わる部分をスタイリングする場合、複数のウェブサイト間でフォーマットだけは調整しておきたい場合など、様々な運用方法ができると思います。

CodePen

まとめ

是非とも、XSA と、XSA CSS, XSA JS, XSA PostCSS, XSA PHP の4つのパッケージをお試しください。

〆

XSA の公式マニュアルは note で手に入れることができます。興味ある方は是非ご覧ください。