k8o

はじめに

擬似要素である::spelling-errorと::grammar-errorは、スペルミスや文法エラーとしてフラグ付けされたテキストに対するスタイルを定義するために使用されます。

::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にすることでテキストの入力しか行えないようにしています。plaintext-onlyについても記事を書いているので良ければ読んでください。

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

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

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

おわりに

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

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