Style Spelling and Grammar Errors with the ::spelling-error and ::grammar-error pseudo-elements

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:


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:

☝️ 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:

  • color
  • background-color
  • text-decoration and its associated properties
  • text-shadow
  • stroke-color, fill-color, and stroke-width

~

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.

~

📚 This post is part of a series called The future of CSS. Latest posts in this series:

Mars 2020 Entry Descent Landing

Relive the whole Mars 2020 Entry Descent Landing in your browser, in 3D, powered by Three.JS/WebGL 🤯

Here’s a few pointers to use:

  • Use the ⏪ ⏩ at the bottom to speed up / slow down the animation
  • Scroll over the pane on the left to jump between phases of the landing
  • You can click and drag around as you see fit, zooming also possible

Mars 2020 Entry Descent Landing →

Pure CSS Stopwatch ⏱️

Nice demo by Jhey in which he created a Pure CSS Stopwatch:


See the Pen Pure CSS Working Stopwatch 😎 (@property) by Jhey (@jh3y) on CodePen.

It uses a clever combination of CSS Animations, CSS Counters, and @property:

  1. Each digit gets its own CSS Animation with its own timing.
  2. Inside each animation the value of a CSS Counter is adjusted.
  3. By defining those values as numbers using CSS @property, CSS knows how how to “animate” (read: interpolate) the values.

The animation play state is controlled using a checkbox, as detailed here.

💁‍♂️ CSS Counters is one of the 9 Underutilized CSS Features

front-of-the-front-end / back-of-the-front-end


Photo by Alex on Unsplash

Late 2019 Brad Frost already pondered about The Great Divide and introduced the terms “front of the frontend” and “back of the frontend”. In a new post he gives the easily-shareable overview that lists the differences between both.

A succinct way I’ve framed the split is that a front-of-the-front-end developer determines the look and feel of a button, while a back-of-the-front-end developer determines what happens when that button is clicked.

  • A front-of-the-front-end developer is a web developer who specializes in writing HTML, CSS, and presentational JavaScript code.
  • A back-of-the-front-end developer is a web developer who specializes in writing JavaScript code necessary to make a web application function properly.

Imo this separation also is present in backend development, where you have the “front-of-the-backend” people and “back-of-the-backend” people. Hear me out:

  • A Front-of-the-backend person writes PHP/JS/etc. scripts which perform the required actions such as inserting records into a database, sending off an e-mail, etc.
  • A Back-of-the-backend person provisions and maintains the infrastructure.

You might already know these two parties as “backend devs” and “ops”, so nothing new there. Thanks to things like Docker and CI/CD the line between both has become more and more vague, with overlaps in responsibilities between both.

front-of-the-front-end and back-of-the-front-end web development →

An Interactive Guide to CSS Transitions

Putting libraries like GSAP and Framer Motion and React Spring aside, Josh W. Comeau digs into the transition property — “the CSS motion workhorse” as he calls it — and easing functions.

I especially like the sandbox at the very end of the post that lets you play the various easing functions and framerate

An Interactive Guide to CSS Transitions →

Unconventional Autoloaders in PHP

Recording from the October 2020 edition of Laravel Worldwide Meetup where Liam Hammet (starting at 36:58​) showed off some nice use cases for custom autoloaders in PHP:

We use autoloaders in PHP all the time, but if you change your mindset a little, you’ll find they can do a lot more than you might’ve thought. We’ll be taking a look at using some unconventional techniques, we can use autoloaders to take PHP a step further, introducing interesting and exciting new functionality PHP natively doesn’t support.

Really enlightening stuff! Slides also available.

Unconventional Autoloaders (Talk) →

GitHub Skyline — Your GitHub Story in 3D

Nice in-browser 3D-render of your GitHub History. You can download the result as a .stl file to run it through your 3D printer.

Here’s my 2020 timeline for example:

I take pride in the fact that my Saturdays (front row) and Sundays (back row) remain as good as empty, and that there’s an occasional gap in between the blocks where I took some time off.

GitHub Skyline →

Debugging layout repaint issues triggered by CSS Transition

Dzhavat ran into an interesting performance issue where practically his whole site would repaint when a transition in the header was triggered.

The element being animated is a span wrapping some text placed inside an h1. The h1 itself is in the upper left corner on the page and contains my name. Initially, only the letter “D” is shows. The remaining part fades-in on hover.

I was quite surprised to see the whole page flashing green given the transition was scoped to a very isolated element. I didn’t really see any connection between animating a span and causing repaint on the whole page.

The culprit: Stacking Contexts

Debugging layout repaint issues triggered by CSS Transition →