Skip to content

fix: :where() の引数に擬似要素を含める CSS 仕様違反を修正(3 箇所) #88

@shunei-web

Description

@shunei-web

概要

`:where()` の引数に擬似要素(`::placeholder`, `::selection`)を含めている CSS Selectors Level 4 仕様違反が 3 箇所ある。これらのセレクタは無効な CSSとして扱われ、スタイルが適用されていない可能性が高い。

背景

CSS Selectors Level 4 の仕様で、:where() および :is()セレクタリストを引数に取るが、擬似要素は compound selector の最後にのみ配置可能であり、:where() の引数に含めることはできない。

  • `:where(a)::before` — OK(`:where()` の後に擬似要素)
  • `:where(a, b::before)` — 無効(`:where()` の中に擬似要素)
  • `:where(::placeholder)` — 無効

参照: https://drafts.csswg.org/selectors-4/#matches

mflocss/spec PR#63 の作業中に、spec-writer が同様の誤り(`:where(*, *::before, *::after)`)を spec の Example 内に記述し、しゅんえいが発見。その流れで starter の CSS にも同じパターンが存在することが判明した。

対象

  • `src/assets/css/reset/reset.css`
  • : L110
  • `src/assets/css/foundation/form.css`
  • : L83
  • `src/assets/css/foundation/base.css`
  • : L36

現状

```css
/* reset/reset.css:110 */
:where(::placeholder) {
opacity: unset;
}

/* foundation/form.css:83 /
:where(::placeholder) {
/
... */
}

/* foundation/base.css:36 /
:where(::selection) {
/
... */
}
```

期待される状態

`:where()` を外し、擬似要素を単独で使用する。

```css
/* 修正後 */
::placeholder {
opacity: unset;
}

::selection {
/* ... */
}
```

詳細度の変化

  • 修正前: `:where(::placeholder)` → 詳細度 0,0,0(`:where()` が 0 にリセット)※ただしそもそも無効な CSS
  • 修正後: `::placeholder` → 詳細度 0,0,1

1 段階の詳細度上昇があるが、実務上の影響は限定的。他の `::placeholder` への上書きが競合するケースは稀。ただし、厳密には挙動変化を伴う修正として記録する。

受け入れ条件

関連

  • source: mflocss/spec PR#63 作業中の独立発見(しゅんえいによる指摘)
  • 関連 Issue: mflocss/wordpress-starter の同種問題 Issue(作成予定)
  • CSS 仕様: CSS Selectors Level 4 §4.2

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions