Spelling and grammar text decorations
text-decoration-line の spelling-error と grammar-error は、ブラウザ標準のスペルチェック・文法チェックマーキング（通常は赤や緑の波線）をCSSで適用できます。エディターやライティングツールのUIで一貫した見た目を提供するために使用します。カスタムの校正ツールやテキストエディターの開発に役立ちます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
grammar-error | 121 | 121 | 137 | 26.2 | 121 | 26.2 |
spelling-error | 121 | 121 | 137 | 26.2 | 121 | 26.2 |
基本構文
CSS
.spelling-error {
text-decoration-line: spelling-error;
}
.grammar-error {
text-decoration-line: grammar-error;
}ライブデモ
実務での使いどころ
-
カスタム校正ツール
独自のスペルチェック・文法チェック機能で、ブラウザネイティブと同じ見た目のエラー表示を適用します。
注意点
- 実際の表示スタイル（波線の色や形）はブラウザによって異なります。
アクセシビリティ
- エラー表示は色だけに依存せず、テキストやツールチップによる補足説明も提供してください。