PHPnews.io

The Future of CSS:Style Spelling and Grammar Errors with the ::spelling-error and ::grammar-error pseudo-elements

Written by Bram.us / Original link on Feb. 21, 2021

Part of the CSS Pseudo-Elements Level 4 Specification are ways to style spelling and grammar errors.

By default spelling errors — words you have mistyped — get a red dotted underline, thanks to the ::spelling-error pseudo-class selector you can tweak that. Grammar errors — such as a missing capital letter at the beginning of a sentence — can be styled with the ::grammar-error pseudo-class selector.

::spelling-error {
  text-decoration: underline wavy red;
}

::grammar-error {
  text-decoration: underline wavy blue;
}

~

Embedded below is a demo that shows the output of the browser you are visiting with, and the wanted output:

css-spelling-grammar-error.png
See the Pen The Future of CSS: Style Grammar and Spelling Errors (Demo) by Bramus (@bramus) on CodePen.

As you can see your browser does not yield the proper output, as ::spelling-error/::grammar-error currently have no support in any browser at the time of writing:

mdn-css__selectors__spelling-error-1613938668302.png

mdn-css__selectors__grammar-error-1613938626951.png

☝️ Another selector part of this specification is ::target-text, which enables you to style the target text from text-fragment links. It already has support in Chromium 89.

~

Once these highlight pseudo-elements do gain browser support, do note that they can only be styled by a limited set of properties that do not affect layout. Only following properties apply to the highlight pseudo-elements:

~

In case you are interested, here are the relevant bugs to flag/star/follow:

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

bram bram bram bram tutorialzine selectors bram

« The Paradox of Simplification - Technique #2: Manage Modal State With Livewire »