You can customize the text color and background color of text when it’s selected with ::selection
and ::-moz-selection
. We’ve covered that a number of times here in various forms and it’s a cool little trick.
Even the HTML5 Boilerplate has it in there by default, using super hot pink, which is the easiest way to spot a boilerplate site =).
But when you change text selection styling away from its default, you lose the default styling’s ability to desaturate itself when the window goes out of focus. See:
I rather like how the default desaturates and becomes less visually intense. After all, chances are you are focused on another window right now and don’t need a background window fighting for attention.
Perhaps a little known fact, but you can use a pseudo selector in conjunction with ::selection
to apply styling when the window is in it’s inactive state. It uses the :window-inactive
pseudo selector, like this:
::selection {
background: hsl(136,65%,45%);
color: white;
}
::selection:window-inactive {
background: hsl(136,25%,65%);
}
Using HSL for color value there, I was able to lower the saturation and increase the lightness to get a less intense version of the same hue.
Remember Firefox has it’s own version of ::selection
, ::-moz-selection
. It also has it’s own version of :window-inactive
, :-moz-window-inactive
. Unfortunately using these things together doesn’t work.
/* Does work */
::-moz-selection {
background: rgba(255,0,0,0.9);
color: white;
}
/* Doesn't work */
::-moz-selection:-moz-window-inactive {
background: rgba(255,0,0,0.3);
}
/* Nor this */
:-moz-window-inactive::-moz-selection {
background: rgba(255,0,0,0.3);
}
So anyway, you can at least get a custom text selection color in Firefox (3.6+ ?) but you can’t style it specially for window inactive. However, Firefox (3.6 and 4 tested) automatically make your text selection gray on when the window is out of focus.
It’s important to note that it’s not because :-moz-window-inactive
doesn’t work, it does, you can use it on any element, actually, like making a div change background color in that state. It’s just using them together that doesn’t.
This is not a case where we can shake our fists at the browser vendors. None of this is standardized. ::selection isn’t standard. :window-inactive isn’t standard. In fact, ::selection is actually technically a pseudo element not pseudo selector so it should have to come last in the selector, but if you switch them around it doesn’t work.
More than just text selection
If :window-inactive was standardized and more widely supported, you could do way more with it than just deal with text selection colors. Think of gray-scaling a whole website or stopping animations.
Ace tip as usual! If you’re playing with text selection stuff, don’t forget this tip if you’re using text-shadow.
http://www.welcomebrand.co.uk/blog/design-development/using-text-shadow-dont-forget-highlighting/
J.
I don’t really thing that :window-inactive should be standardised: “Think of gray-scaling a whole website or stopping animations” – that’s something that a browser should take care of, websites wouldn’t be consistent and they would be bulkier. I can’t think of anything useful happening, when the window is inactive (since the user is not really using the window when it is inactive).
What’s weird is that ::selection used to be in the CSS3 spec, but was later removed. I wonder why…
Hm… Didn’t know that. That is a bit odd. Mozilla says, however, that they will continue to support it.
with all these fancy things CSS will soon become advanced like C++…
…(and i’m not up to it)
What about this?
:-moz-window-inactive ::-moz-selection {
I would have expected a space between the two because what happening to the window is higher in the dom tree. (haven’t tested it though)
Good thought, but quick test in Firefox 4 is a no-go:
http://jsbin.com/epole5/3
Nice finding Chris. Thanks for the tip.
Awesome Article.Technology
This could be used for displaying ads when the user is doing something else, then when switching back you see the ad for a second, then it retracts to the sidebar. Spotify does this, and it’s not ok, it feels very intrusive.
is this other site supposed to be copying your posts word for word?
http://highland-park-web-design.info/window-inactive-styling/
At least this post, take a look at the image source on that site.