はじめに

互換性

使えるフォールバックを保ちながら新しい CSS 機能を使い、ブラウザーの動作を確認して、サードパーティのスタイルをカスケードに配置します。

このページの内容

Master CSS は CSS を生成し、適用できるプロパティ、値、セレクターはブラウザーが決めます。使える基盤を作り、それを改善する新しい機能を加え、既存のスタイルがカスケードでどう働くか確認してください。

以下の例は、インストールを完了し、アプリが @import '@master/css'; を読み込んでいることを前提とします。

#ブラウザーの基盤要件を確認する

既定のプリセットは、カスケードレイヤー、OKLCH 色、適応する値のための light-dark() を使います。拡張機能にフォールバックを用意しても、これらの基盤要件はなくなりません。対象ブラウザーに対して、ブラウザーの基盤要件とベンダープレフィックスを確認してください。

クラスを認識できても、ブラウザー互換性の保証にはなりません。Master は一部のプロパティに互換プレフィックスを出力しますが、すべての新機能をポリフィルしません。同様に、ツールの unknown はその検査で CSS を未検証という意味であり、無効であるとも出荷可能であるとも証明しません。

#フォールバックを保って機能を追加する

#ネイティブの宣言

自動サイズ調整が使えなくても、ノート欄は編集できる必要があります。通常の textarea のサイズと縦方向のサイズ変更を設定し、拡張として field-sizing: content を加えます。このネイティブプロパティは内容に合わせてコントロールの大きさを変え、最小・最大高さが実用的な範囲を保ちます。

field-sizing: content 確認中…

フォールバックのあるノート欄

<div class="w-full (max-width:28rem) mx-auto">  <label for="project-note" class="block mb-xs text-sm fg-text-strong">Project notes</label>  <textarea id="project-note" name="note" rows="3" class="block w-full p-sm r-md b(1) b-solid b-line-divider bg-surface-inset text-sm fg-text-strong (resize:vertical) (min-height:6rem) (max-height:12rem) outline(2):focus-visible outline-solid:focus-visible outline-offset(3) (field-sizing:content)@supports(field-sizing:content)">Plan the next release. Review the draft. Check the examples. Test with a keyboard. Verify the small screen. Publish when ready.</textarea></div>

生成された CSS

@layer theme {  :root,  :host {    --color-zinc-5: oklch(96.5% .0011 265);    --color-zinc-100: oklch(15% .0016 265)  }  :root,  :host {    --color-surface-inset: light-dark(var(--color-zinc-5), var(--color-zinc-100));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-size-sm: .875rem;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --radius-md: .375rem;    --spacing-xs: .5rem;    --spacing-sm: .75rem  }}@layer utilities {  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .bg-surface-inset {    background-color: var(--color-surface-inset)  }  .b-line-divider {    border-color: var(--color-line-divider)  }  .r-md {    border-radius: var(--radius-md)  }  .b-solid {    border-style: solid  }  .b\(1\) {    border-width: calc(1 * 1px)  }  .fg-text-strong {    color: var(--color-text-strong)  }  .block {    display: block  }  .mx-auto {    margin-inline: auto  }  .mb-xs {    margin-bottom: var(--spacing-xs)  }  .outline-offset\(3\) {    outline-offset: calc(3 * 1px)  }  .p-sm {    padding: var(--spacing-sm)  }  .w-full {    width: 100%  }  .\(max-height\:12rem\) {    max-height: 12rem  }  .\(max-width\:28rem\) {    max-width: 28rem  }  .\(min-height\:6rem\) {    min-height: 6rem  }  .\(resize\:vertical\) {    resize: vertical  }  .outline-solid\:focus-visible:focus-visible {    outline-style: solid  }  .outline\(2\)\:focus-visible:focus-visible {    outline-width: calc(2 * 1px)  }  @supports (field-sizing:content) {    .\(field-sizing\:content\)\@supports\(field-sizing\:content\) {      field-sizing: content    }  }}

行を追加・削除してください。対応ブラウザーでは欄が最大 12rem まで伸び、それ以外は初期サイズを保ちます。どちらでもスクロールとサイズ変更ができます。

(field-sizing:content) はネイティブの宣言を供給します。@supports(field-sizing:content) 接尾辞が、その宣言を CSS 機能クエリー内に置きます。一致しなければ、ベーススタイルと通常の textarea の動作が残ります。

プレビューは現在のブラウザーの構文対応を確認します。対象ブラウザーで実際の編集動作もテストしてください。対応ブラウザーでフォールバックを調べるには、条件付きクラスを一時的に削除します。欄の自動伸長が止まり、スクロールですべてのテキストにアクセスできるはずです。これは拡張を切り離す操作で、古いブラウザーの再現ではありません。

生成された CSS で出力条件を確認します。クラスの構文は条件に記載しています。ネイティブ CSS ではさらに複雑な機能クエリーを表せます。

#新しいセレクター

セレクターによる拡張にも同じ方法を使えます。ここでは :has(:checked) が、チェック時にラベルの境界線を青くします。未対応でも、ネイティブのチェックボックスは選択を記録します：

任意の強調を加えるチェック状態

<label class="flex items-center gap-sm w-fit mx-auto p-sm r-md b(1) b-solid b-line-divider bg-surface-raised text-sm fg-text-strong b-blue-60:has(:checked)">  <input type="checkbox" name="updates" class="m(0) shrink(0) (accent-color:currentColor)">  <span>Send me release notes</span></label>

生成された CSS

@layer theme {  :root,  :host {    --color-zinc-90: oklch(24.6% .0022 265);    --color-zinc-100: oklch(15% .0016 265);    --color-blue-60: oklch(51.83% .2687 266.1)  }  :root,  :host {    --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-size-sm: .875rem;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --radius-md: .375rem;    --spacing-sm: .75rem  }}@layer utilities {  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .items-center {    align-items: center  }  .bg-surface-raised {    background-color: var(--color-surface-raised)  }  .b-line-divider {    border-color: var(--color-line-divider)  }  .r-md {    border-radius: var(--radius-md)  }  .b-solid {    border-style: solid  }  .b\(1\) {    border-width: calc(1 * 1px)  }  .fg-text-strong {    color: var(--color-text-strong)  }  .flex {    display: flex  }  .shrink\(0\) {    flex-shrink: 0  }  .gap-sm {    gap: var(--spacing-sm)  }  .m\(0\) {    margin: calc(0 * 1px)  }  .mx-auto {    margin-inline: auto  }  .p-sm {    padding: var(--spacing-sm)  }  .w-fit {    width: fit-content  }  .\(accent-color\:currentColor\) {    accent-color: currentColor  }  .b-blue-60\:has\(\:checked\):has(:checked) {    border-color: var(--color-blue-60)  }}

チェックボックスを選択してください。対応ブラウザーではラベルの境界線も変わります。選択の主な表示はチェックマークです。

ベーススタイルを新しいセレクターから独立させます。不可欠なコントロールや内容を拡張に依存させないでください。セレクターの表記と組み合わせはセレクターを参照します。

#サードパーティ CSS をカスケードに配置する

通常のユーティリティでライブラリーの通常スタイルを上書きしたい場合、その CSS を先の defaults レイヤーにインポートします。Master インテグレーションが処理するアプリの CSS エントリーで、それらのインポートより前にレイヤー順序を宣言してください。

Swiper のコア、ナビゲーション、ページネーションのスタイルを使うプロジェクトでは、このエントリーから読み込み、別の場所でレイヤー外のコピーを追加でインポートしないでください：

app.css

@layer theme, base, defaults, components, utilities;@import 'swiper/css' layer(defaults);@import 'swiper/css/navigation' layer(defaults);@import 'swiper/css/pagination' layer(defaults);@import '@master/css';@layer components {  .swiper-slide {    background-color: var(--color-surface-raised);  }}

スライダーの既存マークアップで、一方のスライドはコンポーネントの面を保ち、もう一方にローカルなユーティリティを加えられます：

<div class="swiper-slide">Default surface</div><div class="swiper-slide bg-blue-60 fg-white">Featured slide</div>

utilities の通常の背景宣言は components より優先され、後者は defaults より上です。HTML のクラス名を並べ替えても結果は変わりません。

より強い上書きを加える前に、ブラウザーの開発者ツールで競合する宣言を確認します。同じ作成者オリジンとコンテキストでは、レイヤー外の通常スタイルが、レイヤー内の通常スタイルより優先されます。ベンダーの !important 宣言も通常のユーティリティに優先し、重要宣言ではレイヤー順序が逆になります。これは Master 固有の優先順位ではなく、ネイティブのカスケード規則です。カスケードレイヤーで診断手順を説明しています。

Master 管理のスタイルシートでは、ネイティブセレクターは既定で保持されます。ネイティブの枝刈りを有効にする場合は、自分が管理するスタイルシートで @preserve native を使い、ベンダー、CMS、外部から挿入するセレクターを保護するか、それらを枝刈り対象外にしてください。サードパーティのウィジェットが使うセレクターは、アプリの走査対象マークアップに現れない場合があります。