Tips for HTML5 Apps

By Nethru Limited (www.nethru.com)

With the help of PhoneGap, we can create our informative apps in fast and simple ways using HTML5 and CSS3 languages. PhoneGap will create a web view component to render your HTML contents in the app. But this may come out some problems for the HTML5 apps, for example, the text contents can be selected, the images can be dragged, etc. In this article, I will share some tips to prevent these things happen, so that your HTML5 apps can just look like a native app.

TIPS FOR HTML5 APPS
1. DISABLE TEXT SELECTIONS

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

input, textarea {
   -webkit-user-select: auto !important;
}

This can disable the selecting function of the browser, as well as the copy and paste dialog, will be disabled together.
However, the form elements like input, textarea will be prevented from selecting as well. You have to enable the selecting function for these form elements.

2. DISABLE IMAGE DRAGGING AND SAVING DIALOG

html * {
   -webkit-touch-callout: none;
   -webkit-user-drag: none;
}

Web browser allows you to drag the images which are using img tags (not in CSS background-image), and with long pressing on the image, it prompts a dialog to let you save the images. This simple CSS code allows you to disable this browser feature in your HTML5 apps.

3. TURN OFF DEFAULT TAP HIGHLIGHT COLOR

html * {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Web browser has its own color highlight handling for the links by default, this CSS code can disable it and you can add your preferred highlight colors on the tap event of different link components inside your app.