lab-css

RULES

JSゼロ縛りのルール

基本ルール

  • 作品本体(作品を構成するDOMとスタイル)にはJavaScriptを一切使わない。アニメーション、状態変化、インタラクションはすべてCSS(とHTMLのフォーム要素)だけで実現する。
  • ページシェル(ギャラリー枠、コード表示、バッジ、ナビゲーション)はNext.jsで実装してよい。作品とシェルは明確に分離する。
  • アニメーションライブラリの類は一切導入しない。追加している実行時依存はコードハイライト用のshikiのみで、これも作品には関与しない。
  • 各作品のコードタブに表示しているHTML/CSSは、実際に作品を動かしているものと同一のソースファイルである。

例外規定: CSS Houdini Paint API

CSS Houdini Paint APIを使う作品に限り、ワークレットを登録するためのCSS.paintWorklet.addModule()の1行だけJavaScriptの使用を許可する。

  • ワークレット本体(paint関数)はJSファイルだが、描画ロジックはCSSカスタムプロパティ経由で制御されるため、例外として扱う。
  • この例外を適用した作品には「ワークレット登録のみJS使用(例外規定)」の注記バッジを必ず表示する。

現時点で例外規定を適用した作品はまだ公開していない。

アクセシビリティと動きへの配慮

  • 動きの大きい作品はprefers-reduced-motion: reduceでアニメーションを停止し、CSSのみの「再生する」チェックボックスでオプトイン再生できる。
  • 作品ごとの必須CSS機能が使えないブラウザでは、@supportsによるCSSオンリー判定で警告文を表示する。
  • 点滅表現は3回/秒を超えない。

作品一覧へ戻る