k8o

はじめに

Firefox 140で::spelling-errorと::grammar-errorのCSS擬似要素がサポートされました。これにより、全てのコアブラウザでこれらの擬似要素が利用可能になりました。 これらの擬似要素は、スペルミスや文法エラーとしてフラグ付けされたテキストに対するスタイルを定義するために使用されます。

::spelling-error

スペルミスとしてフラグ付けされたテキストに対するスタイルを定義します。

::spelling-error {
  background-color: #ffcccc;
  color: #d8000c;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

::spelling-errorの中では、colorとbackground-color、cursor、caret-color、outline、outlint-*、text-decoration、text-decoration-*、text-emphasis-color、text-shadowのみが使用可能です。

::grammar-error

文法エラーとしてフラグ付けされたテキストに対するスタイルを定義します。

::grammar-error {
  color: #d8000c;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: red;
}

::grammar-errorも::spelling-errorと同様のプロパティしか定義できません。

例

contenteditable属性で編集可能なテキストエリアを準備しました。spellcheck属性がtrueに設定されているため、スペルミスや文法エラーが自動的に検出されます。

contenteditable属性の値はplaintext-onlyです。これもまた、Baseline 2025の機能ですね（plaintext-onlyについても記事を書いているので良ければ読んでください）。

ここで検出されたエラーが::spelling-errorと::grammar-errorの擬似要素でスタイリングされます。

そのままではspellcheck属性の確認が行われず、見た目の変化がないことがあります。その場合は、テキストの一部を編集して再確認させることで、エラーが表示されるようになると思います。

また、ブラウザごとにspellcheckの挙動が異なるため、デフォルトの文章で両方のエラーを確認できない恐れがあります（Safariで確認しました）。期待としては、spelingがスペルミス、an grammarのanが文法エラーとして検出されることです。

まとめ

Baseline 2025入りした::spelling-errorと::grammar-errorを紹介しました。

spellcheck自体が日本語対応していないので、日本語ユーザーにとってはあまり恩恵がないかもしれませんが、英語のコンテンツを扱うときのために覚えておきたいです。