05/12/2013 - No Comments!

User-Select CSS

While watching a Treehouse video on responsive web design, they threw in a little tidbit that I hadn't come across yet, and found very useful. What's a blog for, if not sharing this stuff? Here's the rub.

When a user performs a Tap and Hold gesture on touch devices with webkit browsers, the text is selected and given the option to "copy". This tends to happen by accident quite often within the many navigational patterns on the web. I don't know about you, but this has happened to me, and it's very annoying!

tap and hold, interaction icon

Tap and Hold

An easy fix to this is to add the CSS property user-select:none; to your navigation elements. Chances are that the user won't be needing to copy-paste your 'About', 'Home' or 'Contact Us' text, so the risk of diminishing UX is low. I would NOT recommend applying this globally to your web pages, however, as this would!

This is a non-standard property, meaning there is no spec or cross-browser support for it yet, so use at your own risk! Remember, test early and often! Here's a full list of browser prefixes:

.class {
-webkit-user-select: none;  /* Chrome, Safari */
-moz-user-select: none;     /* Firefox */
-ms-user-select: none;      /* IE 10+ */
-o-user-select: none;       /* Opera */
user-select: none;
}

Published by: Ray in Best Practices, CSS, Learning