Appify your Application (1)

In our last post we showed you, how you can outsource the design of your application. And while it’s great to be able to do that, it’s still important to know a couple of techniques to make your app behave like an app and not like a Website. This is more about the “Feel” part of Look and Feel. UIs rendered by a WebView sometimes simply behave slightly different than native controls. That’s especially true on mobile devices. There are a couple of tricks you should know in order to fix this. I’ll explain them in a couple of posts. The first trick is about how to stop text selection.

Fix text selection

When you create an app with a WebView by default all text will be selectable. Being able to copy text may be beneficial sometimes, in an app it just feels odd. In an app by default they’re not. So lets disable this feature. You can do so via CSS:

*
{
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}

input
{
-khtml-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
-webkit-user-select: auto !important;
user-select: auto !important;
}

Most modern Browsers support user-select with a vendor prefix (-webkit, -moz…).