XSA

XSA は限界突破した style属性 (EXtended Style Attribute) を意味します。HTML の style属性、CSS の属性セレクタとカスタムプロパティ、この3つを組み合わせたシンプルなメタ・フレームワークです。

カスタムプロパティの命名規則を軸に、カスタムプロパティ名をトリガーとする CSSルール のライブラリと、カスタムプロパティ名から CSSルール を生成するスクリプトを提供しています。

HTML からの高度なスタイリング

style属性 に設定した XSAプロパティ
<div style="--color--: var(--red);"> … </div>

CSSプロパティ の先頭と末尾にハイフン2つ (--) を付けカスタムプロパティ化した XSAプロパティ を HTML の style属性 に設定したとき、

XSAプロパティ に対応する CSSルール
[style*="--color--:"] {
  color: var(--color--);
}

それ自体をトリガーとして CSSプロパティ に値を設定し、スタイルに反映する仕組みです。

XSAプロパティ に対応する CSSルール は CSSライブラリ を読み込むか、JavaScript または PHP のスクリプトによって自動生成させます。

上書きによって無効化される XSAプロパティ
[style*="--color--:"] {
  color: var(--color--);
}
.example:where([style*="--color--:"]) {
  color: inherit;
}

XSAプロパティ は詳細度が属性セレクタ1つ分しかないので、!important を使用することなく上書き・無効化することができます。

XSAプレフィックス を設定した XSAプロパティ
<div style="--cqi-s_c3-first_hover_color--: var(--red);"> … </div>

クエリとセレクタをエンコードした XSAプレフィックス とカスタムプロパティの継承を組み合わせることで、

XSAプロパティ に対応する CSSルール
@container (inline-size > 480px) {
  [style*="--cqi-s_c3-first_hover_color--:"] > * > * > *:where(:first-child):where(:hover) {
    color: var(--cqi-s_c3-first_hover_color--);
  }
}

style属性 だけでは不可能だった、子孫要素・擬似要素のスタイリング、クエリ・擬似クラスによる条件分岐も可能にします。

HTMLファースト の実現

style属性 の使用方法をカスタムプロパティの命名規則と共に定義し直すことで、CMS、CSSフレームワーク、デザイントークンなどに依存しない、HTMLファースト を実現します。

様々な CMS、CSSフレームワーク で使用される赤色の設定
/* WordPress */
.has-red-color { color: … ; }
.has-red-background-color { background-color: … ; }

/* Bootstrap */
.text-danger { color: … ; }
.bg-danger { background-color: … ; }

/* Tailwind CSS */
.text-red-500 { color: … ; }
.bg-red-500 { background-color: … ; }

例えば、CMS や CSSフレームワーク で文字色・背景色を設定するための class属性値 は一意ではありません。そのため、CSS側 を別のものに差し替えただけでは機能せず、HTML側 の変更も必要になります。これは、HTML が CSS に依存していることを意味します。

--what-- と --do による色の管理
<style>
/* --do */
:root { --red: … ; --yellow: … ; --green: … ; --blue: … ; … }
[style*="var(--color-danger)"] { --color-danger: … ; }
…
</style>
<style>
/* --what-- */
[style*="--color--:"] { color: var(--color--); }
[style*="--background-color--:"] { background-color: var(--background-color--); }
…
</style>
…
<div style="--color--: var(--red); … "> … <div>
<div style="--background-color--: var(--color-danger); … "> … <div>

そこで、class属性値 の .what-do (何をどうする) を --what-- (何を) と --do (どうする) に分解し、HTML の style属性 に閉じ込めることで、特定の CSSフレームワーク や デザイントークン への依存から HTML を解放します。

簡単に言えば、style属性 に設定した、CSSプロパティ名 をベースとするカスタムプロパティを、CMS や CSSフレームワーク に関係なく使える class属性値 のように扱えるということです。

詳細は、XSA の GitHubリポジトリ と各種パッケージをご覧ください。

XSA の客観的な評価や、使用することで何がどう変わるかが知りたい場合は、Google Gemini や ChatGPT に次の質問をしてみてください。

XSA HTMLマニュアル

GitHubリポジトリ と各種パッケージ、AI への質問をご覧になれば、使用方法などは分かると思いますが、そこから更に踏み込んだ情報をマニュアルとして提供しています。

このマニュアルは HTMLファイル です。XSA を使用して作られた、生きたマニュアルになっています。XSA がどのような意図を持って開発されたのか、XSA でどのようなことが可能になるのかを、すぐに使える HTMLコード やデモンストレーションを交えて紹介しています。

XSAプロパティ を使用した HTMLコード を AI に生成してもらうための YAMLプロンプト も含まれています。

XSA HTMLマニュアル の目次
  1. XSA とは
  2. XSA の目的
  3. XSA の特徴
  4. XSA の導入方法
  5. XSA 構文リファレンス
  6. XSA のデモンストレーション
  7. AI駆動開発

Tailwind CSS にアレルギーがある方・疲弊してしまった方、効率的にウェブサイトを作成・運用したい方、ブラウザが存在する限り動き続ける堅牢性・耐久性を求めている方には、XSA とこのマニュアルが処方箋になると思います。

約200KB・約70,000文字のボリュームで、英語版と日本語版があります。ブラウザの翻訳機能を使用すれば、それら以外の言語でもお読みいただけると思います。是非お買い求めください。

マニュアルを購入する