上段がLab、下段がOKLab表色系。
全てに視認できる差異がある。赤に関しては左端始点の明度を落とすと差異が確認しづらくなる(明度が高い範囲では大きな差異がある)

↑Lab / ↓OKLab

    /* 指定可能な色空間は srgb / p3 / rec2020 の3つ */
    @media (color-gamut: rec2020) {
      background-image: radial-gradient(in oklab, oklch(0.6 0 0), transparent 72%);
    }

    @media (color-gamut: p3) {
      background-color: color(display-p3 1 1 0);
    }
        

「クライアント(ブラウザ)が指定した色域に対応しているか」によって適用するスタイルを変更するためのメディア特性。
・srgb：ユーザエージェントと出力機器がsRGBに対応しているか否か。大概のモニタが対応。
・p3：Display P3またはそれ以上の色域に対応しているか。sRGBが含まれる。
・rec2020：ITU-R 勧告 BT.2020またはそれ以上に対応しているか。P3を含む。

    各クエリごとに画像の表示幅が固定で、DPIにのみ注意すればよい場合は、
    密度記述子 Nx を用いてDPIに比例した倍数の解像度を持つ画像セットを用意する

    <!-- 密度記述子 -->
    <picture>
      <source
        media="(max-width: 767px)"
        type="image/avif"
        srcset="img_01_sp.avif 1x, img_01_sp@2x.avif 2x, img_01_sp@3x.avif 3x"
        width="300"
        height="400"
      >
      <source
        media="(max-width: 1200px)"
        type="image/avif"
        srcset="img_01_tb.avif 1x, img_01_tb@2x.avif 2x, img_01_tb@3x.avif 3x"
        width="1000"
        height="1000"
      >
      <source
        type="image/avif"
        srcset="img_01.avif 1x, img_01@2x.avif 2x, img_01@3x.avif 3x"
        width="1200"
        height="900"
      />
      <source
        media="(max-width: 767px)"
        type="image/webp"
        srcset="img_01_sp.webp 1x, img_01_sp@2x.webp 2x, img_01_sp@3x.webp 3x"
        width="300"
        height="400"
      >
      <source
        media="(max-width: 1200px)"
        type="image/webp"
        srcset="img_01_tb.webp 1x, img_01_tb@2x.webp 2x, img_01_tb@3x.webp 3x"
        width="1000"
        height="1000"
      >
      <source 
        type="image/webp"
        srcset="img_01.webp 1x, img_01@2x.webp 2x, img_01@3x.webp 3x"
        width="1200"
        height="900"
      />
      <source
        media="(max-width: 767px)"
        srcset="img_01_sp.jpg 1x, img_01_sp@2x.jpg 2x, img_01_sp@3x.jpg 3x"
        width="300"
        height="400"
      >
      <source
        media="(max-width: 1200px)"
        srcset="img_01_tb.jpg 1x, img_01_tb@2x.jpg 2x, img_01_tb@3x.jpg 3x"
        width="1000"
        height="1000"
      >
      <img
        srcset="img_01.jpg 1x, img_01@2x.jpg 2x, img_01@3x.jpg 3x"
        src="img_01.jpg"
        width="1200"
        height="900"
        alt="test image"
        loading="lazy"
      >
    </picture>
        

    ・クエリごとに画像のアスペクト比が変化する
    ・inline-size: 100% など画面幅に合わせ表示サイズ横幅が可変する
    場合は
    ・アスペクト比変化への対応：picture タグ
    ・画面幅に合わせた表示サイズの変化 sizes 属性
    で対応する

    <!-- クエリごとにアスペクト比が異なる且つ横幅が可変する画像に対する picture + 幅記述子 -->
    <picture>
      <source
        media="(max-width: 767px)"
        type="image/avif"
        srcset="img_01_sp.avif 300w, img_01_sp@2x.avif 600w, img_01_sp@3x.avif 900w"
        sizes="100dvw"
        width="300"
        height="400"
      >
      <source
        media="(max-width: 1200px)"
        type="image/avif"
        srcset="img_01_tb.avif 1000w, img_01_tb@2x.avif 2000w, img_01_tb@3x.avif 3000w"
        sizes="100dvw"
        width="1000"
        height="1000"
      >
      <source
        type="image/avif"
        srcset="img_01.avif 1200w, img_01@2x.avif 2400w, img_01@3x.avif 3600w"
        sizes="1200px"
        width="1200"
        height="900"
      />
      <source
        media="(max-width: 767px)"
        type="image/webp"
        srcset="img_01_sp.webp 300w, img_01_sp@2x.webp 600w, img_01_sp@3x.webp 900w"
        sizes="100dvw"
        width="300"
        height="400"
      >
      <source
        media="(max-width: 1200px)"
        type="image/webp"
        srcset="img_01_tb.webp 1000w, img_01_tb@2x.webp 2000w, img_01_tb@3x.webp 3000w"
        sizes="100dvw"
        width="1000"
        height="1000"
      >
      <source 
        type="image/webp"
        srcset="img_01.webp 1200w, img_01@2x.webp 2400w, img_01@3x.webp 3600w"
        sizes="1200px"
        width="1200"
        height="900"
      />
      <source
        media="(max-width: 767px)"
        srcset="img_01_sp.jpg 300w, img_01_sp@2x.jpg 600w, img_01_sp@3x.jpg 900w"
        sizes="100dvw"
        width="300"
        height="400"
      >
      <source
        media="(max-width: 1200px)"
        srcset="img_01_tb.jpg 1000w, img_01_tb@2x.jpg 2000w, img_01_tb@3x.jpg 3000w"
        sizes="100dvw"
        width="1000"
        height="1000"
      >
      <img
        srcset="img_01.jpg 1200w, img_01@2x.jpg 2400w, img_01@3x.jpg 3600w"
        src="img_01.jpg"
        width="1200"
        height="900"
        sizes="(max-width: 1200px) 100dvw, 1200px"
        alt="test image"
        loading="lazy"
      >
    </picture>
        

    ・画像のアスペクト比がクエリ間で共通
    ・画面横幅に合わせ画像表示サイズも拡縮する
    場合は sizes 属性のみの対応で問題ない。
    複数拡張子に対応するため picture 要素は使用することになるが、記述量は例2より大幅に削減される。

    <!-- 画像のアスペクト比がクエリで変わらない且つ画面幅に画像サイズが追従する場合 -->
    <picture>
      <source
        type="image/avif"
        srcset="img_01_sp.avif 300w, img_01_sp@2x.avif 600w, img_01_sp@3x.avif 900w, img_01_tb.avif 1000w, img_01.avif 1200w, img_01_tb@2x.avif 2000w, img_01@2x.avif 2400w, img_01_tb@3x.avif 3000w, img_01@3x.avif 3600w"
        sizes="(max-width: 1200px) 100dvw, 1200px"
      >
      <source
        type="image/webp"
        srcset="img_01_sp.webp 300w, img_01_sp@2x.webp 600w, img_01_sp@3x.webp 900w, img_01_tb.webp 1000w, img_01.webp 1200w, img_01_tb@2x.webp 2000w, img_01@2x.webp 2400w, img_01_tb@3x.webp 3000w, img_01@3x.webp 3600w"
        sizes="(max-width: 1200px) 100dvw, 1200px"
      >
      <img
        srcset="img_01_sp.jpg 300w, img_01_sp@2x.jpg 600w, img_01_sp@3x.jpg 900w, img_01_tb.jpg 1000w, img_01.jpg 1200w, img_01_tb@2x.jpg 2000w, img_01@2x.jpg 2400w, img_01_tb@3x.jpg 3000w, img_01@3x.jpg 3600w"
        src="img_01.jpg"
        width="1200"
        height="900"
        sizes="(max-width: 1200px) 100dvw, 1200px"
        alt="test image"
        loading="lazy"
      >
    </picture>
        

    上から
    ・picture + x / Aspects Difference in Each Query  / Fixed Image Size 
    ・picture + w + size / Aspects Difference in Each Query / Adjastable Image Size
    ・picture + w + size / No Aspects Difference in Any Query / Adjastable Image Size

  ==================================

    <picture>
      <source
        media="(max-width: 767px)"
        type="image/avif"
        srcset=".avif 1x, .avif 2x, .avif 3x"
        width=""
        height=""
      >
      <source
        type="image/avif"
        srcset=".avif 1x, .avif 2x, .avif 3x"
        width=""
        height=""
      />
      <source
        media="(max-width: 767px)"
        type="image/webp"
        srcset=".webp 1x, .webp 2x, .webp 3x"
        width=""
        height=""
      >
      <source 
        type="image/webp"
        srcset=".webp 1x, .webp 2x, .webp 3x"
        width=""
        height=""
      />
      <source
        media="(max-width: 767px)"
        srcset=".jpg 1x, .jpg 2x, .jpg 3x"
        width=""
        height=""
      >
      <img
        srcset=".jpg 1x, .jpg 2x, .jpg 3x"
        src=".jpg"
        width=""
        height=""
        alt=""
      >
    </picture>

  ==================================

    <picture>
      <source
        media="(max-width: 767px)"
        type="image/avif"
        srcset=".avif 300w, .avif 600w, .avif 900w"
        sizes="100dvw"
        width=""
        height=""
      >
      <source
        type="image/avif"
        srcset=".avif 1200w, .avif 2400w, .avif 3600w"
        sizes="1200px"
        width="1200"
        height="900"
      />
      <source
        media="(max-width: 767px)"
        type="image/webp"
        srcset=".webp 300w, .webp 600w, .webp 900w"
        sizes="100dvw"
        width=""
        height=""
      >
      <source 
        type="image/webp"
        srcset=".webp 1200w, .webp 2400w, .webp 3600w"
        sizes="1200px"
        width=""
        height=""
      />
      <source
        media="(max-width: 767px)"
        srcset=".jpg 300w, .jpg 600w, .jpg 900w"
        sizes="100dvw"
        width=""
        height=""
      >
      <img
        srcset=".jpg 1200w, .jpg 2400w, .jpg 3600w"
        src=".jpg"
        width=""
        height=""
        sizes="(max-width: 1200px) 100dvw, 1200px"
        alt=""
      >
    </picture>

  ==================================

    <picture>
      <source
        type="image/avif"
        srcset=".avif 300w, .avif 600w, .avif 900w, .avif 1000w, .avif 1200w, .avif 2000w, .avif 2400w, .avif 3000w, .avif 3600w"
        sizes="(max-width: 1200px) 100dvw, 1200px"
      >
      <source
        type="image/webp"
        srcset=".webp 300w, .webp 600w, .webp 900w, .webp 1000w, .webp 1200w, .webp 2000w, .webp 2400w, .webp 3000w, .webp 3600w"
        sizes="(max-width: 1200px) 100dvw, 1200px"
      >
      <img
        srcset=".jpg 300w, .jpg 600w, .jpg 900w, .jpg 1000w, .jpg 1200w, .jpg 2000w, .jpg 2400w, .jpg 3000w, .jpg 3600w"
        src=".jpg"
        width=""
        height=""
        sizes="(max-width: 1200px) 100dvw, 1200px"
        alt=""
      >
    </picture>
        

▼dialog attr: command

• ・command='show-modal': モーダルUIの展開
• ・command='close': モーダルUIを閉じる
• ・command='toggle-popover': ポップオーバーUIの開閉
• ・command='show-popover': ポップオーバーUIの展開
• ・command='hide-popover': ポップオーバーUIを閉じる
• ・command='request-close': requesttclose() の機能を提供(from chrome 139~)

▼dialog attr: closedby

• ・closedby='any': ダイアログの外側を押下 or ESCでダイアログが閉じる
• ・closedby='closerequest': ESCでのみダイアログが閉じる
• ・closedby='none': ESCでもダイアログが閉じない
• ※いずれも command='close' 属性を発火させた場合は閉じる

▼root:has(:modal) と body:has(dialog[open]) の違い

従来支配的であったbody:has(dialog[open])は、showModal()と異なるshow()メソッドを用いた"背景の操作をブロックしない非モーダル"という表示方法についても背景要素をブロックしてしまう。
popover APIの登場により上述の方法による非モーダル要素の登場機会は減ったものの、依然として不具合の原因となる可能性は存在する。

:modal疑似クラスを用いることで、showModal()メソッドで開かれたdialog要素のような「ユーザがその操作をしている間ほかのすべての要素との操作をブロックする状態にある要素」のみを選択可能となる。

:modal 疑似クラスは動画など特定の要素をrequestFullscreen() APIを用いてフルスクリーンを表示する際にも適用されるため、 :root:has(:modal) はフルスクリーン表示時にも併せて対応可能となる。

なおスクロールを制御するCSSとしてはoverflow: clipも存在する。
基本的には意図しないスクロールコンテナやスタッキングコンテキストの出現を防げるためoverflow: clipが優先されるが、現状Firefoxにてルート要素に対するoverflow: clipを用いたスクロール抑制が機能していないため、同目的にはhiddenが推奨される。

▼なぜ :root に overflow: hidden を設定するか

position: stickyとの兼ね合いにより、bodyへのoverflow: hidden指定は推奨されない。
sticky は「最も近い親のスクロールコンテナを基準に固定される」仕組みのため、body要素にoverflow: hidden を設定することで同要素が新たなスクロールコンテナとなり、本来:root(またはhtml)に紐づいていたはずのstickyがbody基準に移行してしまい、不具合が発生する。
一方CSSの仕様として「ルート要素に付与されたoverflowプロパティはそのままブラウザの表示領域全体(いわゆるビューポート)に転送される」ため、:rootへの指定では新たなスクロールコンテナは生成されず、不具合には発展しない。

現状command属性とcommandfor属性が全ブラウザ対応ではないため、主要環境で有効化するためにはinvokers-polyfillを用いる必要がある。

    # npm から直接ライブラリを使用する場合
    $ npm install invokers-polyfill
    $ npm install dialog-closedby-polyfill
              

    // main.js など
    import 'invokers-polyfill'
    import 'dialog-closedby-polyfill'
              

    <!-- CDNで使用する場合 -->
    <head>
      <script type="module" src="https://unpkg.com/invokers-polyfill@latest/invoker.min.js"></script>
      <script type="module" src="https://cdn.jsdelivr.net/npm/dialog-closedby-polyfill@latest/index.min.js"></script>
    </head>
              

ブロック要素(dialog / divなど)にpopover属性を付与することで、非モーダルとなるshow()にて同要素を展開する。
command属性で展開する

▼ popover 属性

• ・popover: “popover”のみ指定した場合、デフォルト値autoが適用される。
• ・popover="auto": 閉じるボタンのほか、ポップオーバー領域の外側を押下することでも閉じることが可能。
• ・popover="manual": 閉じるボタンなど、ユーザ側が明示的に閉じる操作を行わないとモーダルが閉じない。

▼ popovertargetaction 属性

• ・show: popovertarget属性で指定した id を持つ要素をポップオーバーとして表示する。
• ・hide: 同様にポップオーバーを非表示にする。
• ・toggle: こちらは単独で表示 / 非表示を切り替える。

▼ :where()

引数として指定された全てのセレクタを対象にスタイルを適用させる疑似クラス。
特有の点としてあらゆる他セレクタより継承度が低くなる仕様があり、例えば以下の形で:where()を用いてのh2スタイルの上書きは出来ない。

    h1 {
      color: red;
    }

    :where(h1, h2, p:not(first-child)) {
      color: blue;
    }
                

▼ :is()

記述方法は:where()と同様だが特性は真逆であり指定した引数の中で最も高い継承度を継承する。
以下例で:where()が最大の継承度を保持しているとした場合、指定した引数全てがh1と同様の強い継承度を持つ。
伴って後述の:is()にて指定のcolor: blue;はh1に適用される。

    html body main section h1 {
      color: red;
    }

    :is(h1, h2, p:not(first-child)) {
      color: blue;
    }
                

▼ :has()

引数として取った要素が、:has()の指定元要素から相対位置(相対セレクターリスト)として存在する場合にスタイルを適用する。伴って基準セレクタの親要素や兄弟要素を指定することが可能。具体的な使用例は上記サンプルソースを参照。
なお複数の独特な仕様や注意点が存在するため、使用は慎重に行う必要がある。

• ・DOMが更新されるたびブラウザが:has()を再評価するため、実装方法次第では甚大なパフォーマンス低下を発生させる
• ・:has() の中に:has()を入れ子することは出来ない
• ・:has()の引数に疑似要素を指定することは出来ない(循環クエリ発生の危険性があるため)

    div:has(p:has(> span)) {
      /* 入れ子の :has() は不可 */
    }

    details:has(::details-content) {
      /* 疑似要素の引数への指定は不可 */
    }
                

▼ :has() と論理演算

:has()はその用法によって「引数のいずれか一つを持つか」または「引数全てを持つか」の識別に用いることができる。
「引数のすべてを持つ場合」を指定したい場合は:has()を連結する。

    /* video、または audio を持つ場合 */
    .content__wrap:has(video, audio) {
      ...
    }

    /* video または audio を持つ場合 */
    .content__wrap:has(video):has(audio) {
      ...
    }
                

▼ :has() と正規表現

:has()はその用法によって「先読みアサーション」的な使用が可能となる。

    /* 肯定先読み abc(?=xyz) */
    .abc:has(+ .xyz) {
      ...
    }

    /* 否定先読み abc(?!xyz) */
    .abc:has(+ :not(.xyz)) {
      ...
    }
                

▼ :has() とパフォーマンス懸念

・広範な規模となる引数の指定を避ける
アンカーセレクタA:has(B)のAは、bodyや:root、全称セレクタのように子要素が大量となるものを指定してはいけない。
上述の通り:has()は DOM が更新されるたび都度再評価されるため、そのような指定は膨大な数の子要素が精査されるため。

・引数は結合子を用いて可能な限り対象を絞る
同様の理由で、.A:has(> .B)や .A:has(+ .B)のように予め可能な限り走査の対象となる要素を絞ることで、パフォーマンス負荷を抑えることができる。

    /* 実はよろしくない */
    :root:has(:modal) {
      ...
    }            

    .content__wrap:has(> .astro-code) {
      ...
    }
                

▼ :not()

基本的な考え方は:has()と同様だが、独自の注意すべき挙動がいくつか存在する。

• ・無意味なセレクターを作成可能。:not(*)など
• ・無理やり詳細度を上げることが可能。#foo:has(#bar)など
• ・:not(.foo)のような指定にはbodyやhtmlも含まれる
• ・例えばbody:not(table) aはtable内の 子孫aを含んでしまう。tableが包括する全てのaを指定したい場合はbody:not(table a) とする
• ・複数のセレクタを同時に否定可能。例えばbody:not(.foo, .bar)は body:not(.foo):not(.bar)と同等
• ・:has()と異なり、:not()単独では指定した引数のうちいずれかが無効の場合そのほかの引数も全て無効となる。回避する場合は:not(:is(.foo, .bar))とする

▼ 寛容な解釈

CSSの仕様としてwhere / is / not / hasは「寛容なセレクター解釈」を行う。
通常、引数を伴うセレクタはひとつでもその引数の解釈に失敗すると、単独であっても複数であっても全ての引数(セレクターリスト)を無効とするが、
これらは解釈に失敗した引数のみ無視し、そのほかの正常なセレクタは引き続き扱い続ける。

BEMなどの命名則を用いて構造を示すことは避ける。
代替としてCascade Layersや:where()を用いて制作者が自然に意図を反映できるようなしくみを構築する。

Cascade Layers(@layer)を用いて明示的なスタイル階層を定義しておき、且つ階層の優先度を定義する(例：reset > base > theme > components > utilities ...)。
併せて :where() を用いて妥当な、明確な意味合いを持つ競合でのみ継承度の比較が行われるようにすることで、スタイルのオーバーライドを簡易にする。
なお:not()や遠い祖先からの継承など特殊ケースにおいては :where() の使用を控えること。

明示的な値の代わりにinherit, initial, unset, revertなどの共通キーワードを積極的に使用することで、スタイルの流れや意味合いをより明快にするとともに保守性を向上させる。

▼各値の詳細

• ・initial：「W3C」が定義する各プロパティの初期値を値とする。ユーザエージェントやリセットCSSの初期値ではないことに注意
• ・inherit：該当プロパティを持つ最も近い親または祖先要素の値を継承する。いずれの祖先も該当プロパティを保持していない場合はinitialと同じ挙動を取る。注意点として"例えそのプロパティが非継承プロパティであったとしても強制的に継承する"点がunsetと異なる
• ・unset：親または祖先が該当のプロパティを保持しており且つそのプロパティが"継承プロパティである場合"はその値を継承する。該当プロパティが非継承プロパティの場合、およびいずれの親または祖先要素も該当プロパティを保持敷いていない場合はinitialと同一の挙動を取る
• ・revert：その環境のスタイルオリジンまでロールバックする。例えばStylus拡張などでブラウザ上に閲覧者が独自のスタイルを当てている場合はページ自体のスタイルを破棄して閲覧者作成のスタイルへ、特に閲覧者側指定のスタイルが無ければユーザエージェントの初期値に戻す

▼代表的な継承プロパティ

• color
• font
• font-family
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-variation-settings
• line-height
• letter-spacing
• word-spacing
• text-align
• text-indent
• text-transform
• white-space
• word-break
• overflow-wrap
• direction
• writing-mode
• visibility
• cursor
• list-style
• list-style-image
• list-style-position
• list-style-type
• quotes
• tab-size
• orphans
• widows
• border-collapse
• border-spacing
• caption-side
• empty-cells
• text-rendering
• text-justify

▼代表的な非継承プロパティ

• margin
• margin-top
• margin-right
• margin-bottom
• margin-left
• padding
• padding-top
• padding-right
• padding-bottom
• padding-left
• width
• height
• min-width
• max-width
• min-height
• max-height
• display
• position
• top
• right
• bottom
• left
• z-index
• float
• clear
• overflow
• overflow-x
• overflow-y
• box-sizing
• box-shadow
• opacity
• transform
• transform-origin
• transition
• animation
• background
• background-color
• background-image
• background-position
• background-size
• background-repeat
• border
• border-width
• border-style
• border-color
• border-radius
• outline
• outline-width
• outline-style
• outline-color
• flex
• flex-grow
• flex-shrink
• flex-basis
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content
• align-self
• order
• gap
• row-gap
• column-gap
• grid
• grid-template
• grid-template-columns
• grid-template-rows
• grid-column
• grid-row
• grid-area
• grid-gap
• content
• counter-reset
• counter-increment
• object-fit
• object-position
• resize
• pointer-events
• user-select