Псевдоэлемент ::grammar-error

Псевдоэлемент ::grammar-error применяет стиль к фрагменту текста, который браузер помечает как написанный с грамматической ошибкой. Сама проверка грамматики выполняется браузером на основе указанного языка и встроенного словаря.

Учтите, что не все браузеры имеют встроенную проверку грамматики для выбранного языка. К примеру, Edge для русского языка поддерживает проверку орфографии, но не грамматики. Для проверки грамматики английского языка следует выполнить ряд действий.

  • Открыть Параметры браузера или перейти к странице edge://settings/languages
  • В предпочитаемые языки добавить английский.
  • Включить помощь по грамматике и проверке орфографии.
  • Выбрать Редактор Microsoft.
  • Для английского языка включить грамматику.

На рис. 1 показаны настройки браузера Edge для включения грамматики.

Параметры Edge

Рис. 1. Параметры Edge

Псевдоэлемент ::grammar-error допускает использование ограниченного набора стилевых свойств:

Синтаксис

Селектор::grammar-error { … }

Пример

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>::grammar-error</title>
  <style>
   ::grammar-error {
    text-decoration: underline wavy blue;
   }
   ::spelling-error {
    text-decoration: underline wavy magenta;
   }
  </style>
 </head>
 <body>
  <textarea>T he quick brown fxo jumps over the lazy dog.</textarea>
 </body>
</html>

В данном примере при щелчке по текстовому полю слова с орфографическими ошибками выделяются розовым подчёркиванием, а с грамматическими ошибками синим подчёркиванием (рис. 2).

Вид текста с грамматическими и орфографическими ошибками

Рис. 2. Вид текста с грамматическими и орфографическими ошибками

Спецификация

CSS Pseudo-Elements Level 4

Браузеры

121 121 107 17.4
121 81 17.4