::spelling-error and ::grammar-error
::grammar-error は CSS の擬似要素で、ユーザーエージェントが文法的に正しくないとしたテキストの部分を示します。
::grammar-error 擬似要素は、すべての表示強調擬似要素に共通する特別な継承モデルに従います。この継承の仕組みの詳細については、表示強調擬似要素の継承の節を参照してください。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 121 | 121 | | 17.4 | 121 | 17.4 | |
| `::スペルミス` | 121 | 121 | | 17.4 | 121 | 17.4 |
基本構文
CSS
::spelling-error {
text-decoration: wavy underline red;
}
::grammar-error {
text-decoration: wavy underline green;
}ライブデモ
実務での使いどころ
-
スペルチェック表示のカスタマイズ
ブラウザのスペルチェック・文法チェック機能のハイライト表示をアプリケーションのデザインに合わせてカスタマイズします。
注意点
- Firefoxでは未サポートであり、使用できるCSSプロパティも限定されています（color、background-color、text-decorationなど）。
アクセシビリティ
- スペルチェックのハイライトは色だけでなく波線などの装飾も併用し、色覚多様性のあるユーザーも識別できるようにしてください。