Home > Designing, Others > A Super Weird CSS Bug That Affects Text Selection

A Super Weird CSS Bug That Affects Text Selection

November 12th, 2019 Leave a comment Go to comments

You know how you can style (to some degree) selected text with ::selection? Well, Jeff Starr uncovered a heck of a weird CSS bug.

If you:

  1. Leave that selector empty
  2. Link it from an external stylesheet (rather than block)

Selecting text will have no style at all. ???

In other words, if you up some CSS that includes these empty selectors:

::-moz-selection {
}
::selection {
}

Then text appears to be un-selectable. You actually can still select the text, so it’s a bit like you did ::selection { background: transparent; } rather than user-select: none;.

The fact that it behaves that way in most browsers (Safari being a lone exception) makes it seems like that’s how it is specced, but I’m calling it a bug. A selector with zero properties in it should essentially be ignored, rather than doing something so heavy-handed.

Jeff made a demo. I did as well to confirm it.

See the Pen
Invisible Text Selection Bug by Chris Coyier (@chriscoyier)
on CodePen.

The post A Super Weird CSS Bug That Affects Text Selection appeared first on CSS-Tricks.

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.