So there I was, minding my own business, casually browsing MSDN for no reason, when I came across the UNSELECTABLE attribute. This attribute, as MSDN cheerfully points out, “specifies that an element cannot be selected.” As in, text selection. With the mouse. Or, presumably, with the keyboard. Or, in case the author decides for you, not at all.
I will note in passing that you turn text selection off by setting the unselectable attribute to on. But that’s not the interesting part. This sentence caught my eye:
The UNSELECTABLE attribute is implemented as an expando. Setting the expando property of the document object to false precludes the functionality of all expandos.
“Precludes the functionality.” Awesome.
Which led me to this wonderful example of using the expando property:
The following example demonstrates that, by setting the
expandoproperty of the document object tofalse, the document ignores the UNSELECTABLE expando on the span and allows you to select the text.
Breathtakingly awesome.
But wait! What was that implementation note about the unselectable attribute? “The UNSELECTABLE attribute is implemented as an expando.” Hmm. “Is implemented as an expando” sounds like one of those boilerplate phrases, like “There is no public standard that applies to this…” Are there other wacky “expando” properties that can be neutralized by setting document.expando? As it turns out, no. The UNSELECTABLE attribute is the only expando property that Internet Explorer recognizes, and therefore the only feature that can be disabled (or, depending how you look at it, re-enabled) by setting document.expando.
To sum up, you can turn text selection off by setting the unselectable attribute to on, and then you can turn text selection back on by setting the document.expando property to false. No other functionality is affected, and it only works in Internet Explorer.
Here’s an idea for an April Fool’s joke: Microsoft apologizes for treating the web as their own private playground for 12 years, and offers all web developers a token refund and a free t-shirt. Feel free to post ideas for the t-shirt.
§
The “expando” stuff is certainly bizarre, but there’s nothing weird about an attribute for non-selectable text; it’s just never been standardized. KDE and Safari have “-khtml-user-select: none”, and I think Mozilla/Firefox have their own attribute name. It’s useful functionality: all other GUIs distinguish between text as content and text as a part of the UI, and don’t let you select text in window titlebars, menus, checkbox titles, etc.
This is too obvious, but:
“Microsoft made Web development unbearable for 12 years, and all I got was this lousy t-shirt”
Me again. I read through the “expando” docs, and it’s actually not that bizarre. Shall I explain?
1. The “expando” property controls the ability to add arbitrary named properties to DOM objects. If expando is turned off, attempts to set nonstandard properties will fail. As the docs point out, this can be a useful way to make sure you’re not screwing up by misspelling or mis-capitalizing a property name.
2. The “unselectable” property isn’t hardcoded into the DOM; there isn’t some native instance variable corresponding to it. Rather, it’s just stored as one of these arbitrary “expando” properties on the DOM object. This makes sense, if it was added late in a development cycle or it wasn’t felt to be worth the resources of adding another ivar to the native object.
3. So what the docs are pointing out is that, if you turned off the “expando” property on a DOM object, then you can’t set its “unselectable” property, because it’s not recognized as a standard property of the object.
I’m all in favor of making fun of Microsoft (I work for Apple, after all), and there’s plenty to make fun of them about, but this particular thingy happens to make sense if you read through the docs.
What are they smoking? Expando 2.0
— Andy ![]()
> -khtml-user-select: none
So Safari implements this feature in an accepted vendor-specific fashion, in a way that can ultimately be overridden by the end user (presumably “* { -khtml-user-select: inherit ! important }” or something would work in a user stylehseet?)
OK, I see the similarity. Do you see the difference?
— Mark ![]()
UNSELECTABLE may be used for DIV elements. So here’s a good idea: why don’t we all start wrapping all our page content with div unselectable = on?
Then all text everywhere will be unselectable, but only for IE users.
The date of this post? It’s significant, right?
> The date of this post? It’s significant, right?
No. I’m not participating in Internet Jackass Day; I don’t need a special day to be a jackass on the internet. And the described browser behavior is real.
— Mark ![]()
I actually wanted to use the “unselectable” attribute in a web app I’m designing. However, it also seems to mean that the dom element that is unselectable not only can’t be visibly selected, but also does seem to cancel keyboard events after the user clicks on it - which is somewhere between side effect and “makes some amount of sense, even if it is unfortunate.”
— LKM ![]()
I am no longer accepting public comments on this post, but you can use this form to contact me privately. (Your message will not be published.)
§
firehose ‧ code ‧ music ‧ planet
© 2001–8 Mark Pilgrim