CSS カスケードレイヤープランナー
最大 8 層まで名前とルールを設定し、宣言順を整えます。書き出した @layer 宣言とブロックをそのままスタイルシートに貼り付けられます。
ブラウザ内でローカルに実行 · @layer · 宣言順 · カスケード優先度
最大 8 層まで名前とルールを設定し、宣言順を整えます。書き出した @layer 宣言とブロックをそのままスタイルシートに貼り付けられます。
ブラウザ内でローカルに実行このプランナーはカスケードレイヤーの一覧を 1 つだけ持ちます。各項目は名前とそのレイヤーのルールで、書き出しは @layer reset, tokens, base, components, utilities; という 1 行の宣言と、その順に並んだレイヤーごとのブロックになります。右側のスタックは同じ一覧を上から下に読んだもので、最初のカードが先に宣言され、同じプロパティを 2 つのレイヤーが設定したときは最後のカードが勝ちます。
既定のプランは reset・tokens・base・components・utilities の 5 層で、それぞれに短いサンプルルールが入り、4 番目が選択されています。実行ボタンはなく、スタック・表示・コード欄は入力のたびに更新され、[CSS をコピー] でそのテキストがクリップボードに入ります。
カスケードレイヤーは宣言された順に解決されるため、同じプロパティを 2 つのレイヤーが設定したときは、宣言で後に名前を書いたレイヤーが勝ちます。スタックはその両端にラベルを付け、最初のカードが「最初に宣言 · 優先度が低い」、最後のカードが「最後に宣言 · 優先度が高い」となり、間のレイヤーには @layer の印だけが付きます。
前に移動と後ろに移動は選んだレイヤーを 1 つずつずらし、先頭の宣言行はその場で書き換わります。スタックに見えているレイヤーが、そのまま宣言に並ぶ名前と順序です。
レイヤー名は CSS の識別子に変換されます。プランナーは小文字化し、a-z・0-9・_・- 以外をハイフンに置き換え、両端のハイフンを削り、数字で始まる名前には x- を付けます。MAIN LAYER と入力すれば main-layer として書き出され、空欄なら layer になります。
ワークベンチには 2 つの上限があります。1 つのプランに入るレイヤーは 1〜8 層で、名前欄は 36 文字で止まります。9 層目を足そうとしたり最後の 1 層を消そうとしてもプランは変わらず、理由がパネルの上に表示されます。
すでに使われている名前へ改名することはできますが、書き出しではその名前が繰り返され、ブラウザーは 2 つのブロックを 1 つのレイヤーに統合します。つまり両方のカードのルールが同じレイヤーに入ります。プランナーはその状態になるとすぐに注意書きを出すので、コピーする前に重複へ気づけます。
プランはページの外へ出ません。一覧・ルール・宣言はブラウザー内で作られ、[CSS をコピー] はそのままクリップボードへ書き込み、アップロードもアカウントも実行ボタンもありません。[リセット] でいつでも 5 層の既定に戻せます。