【CSS Modules】::grammar-error疑似要素の使い方

::grammar-errorオブジェクトは、ユーザーエージェント（ブラウザ）が文法エラーと判断したテキストコンテンツ部分を表すオブジェクトです。この擬似要素は、主にcontenteditable属性が指定された要素や<textarea>要素など、ユーザーが直接編集可能なテキストエリア内で使用されます。ブラウザが内部的な文法チェッカーによって、テキスト内の文法的な誤りを検出した場合に、その特定の箇所にスタイルを適用するために利用されます。

開発者は、::grammar-errorセレクタを用いて、検出された文法エラー部分に対して、特別なCSSスタイルを定義することができます。例えば、エラー箇所に赤い波線の下線を引いたり、背景色を変更したりすることで、ユーザーに視覚的にエラーの存在を明確に伝えることが可能です。具体的な記述例としては、p::grammar-error { text-decoration: underline wavy red; }のように設定し、段落内の文法エラー部分に赤い波線の下線を表示させることができます。

この機能は、ウェブページのユーザビリティを向上させ、コンテンツの正確性を高める目的で提供されています。::grammar-errorは、::spelling-error（スペルミスを表す擬似要素）と同様に、ブラウザが自動的に判断して適用するものであり、開発者がJavaScriptなどを用いてエラーの検出ロジックを直接制御したり、この擬似要素を任意のテキストに強制的に付与したりするものではありません。そのため、開発者はエラーのスタイルを定義することに特化し、エラー検出の仕組み自体はブラウザに委ねる形となります。

Copy
1::grammar-error {
2  text-decoration: underline wavy red;
3  color: red;
4}

引数なし

引数はありません

戻り値なし

戻り値はありません