7 Useful Mobile HTML, CSS, and JavaScript Snippets

Mobile HTML, CSS, and JavaScript development has been done for a few years now and as you work, you build up a nice arsenal of useful snippets. Some of those snippets are clever and involved, others are simply rarely-known gems you don’t want to forget about. Here are a series of snippets you can use in your mobile sites and HTML5 apps!

Style Selection Background

Sometimes you want to customize the button tap highlight color so that it matches other colors on your site, or you may just want to remove it all together — here’s how you do it!

Removing the selection color is useful when you use an A element as a trigger for functionality, like a slideshow, sliders, or buttons.

Add a HTML5 App Manifest

Mozilla’s awesome new HTML5-based mobile operating system, Firefox OS, is going to be a game-changer in the mobile app space. No more needing to write “native” code for each device, no more reliance on PhoneGap to be a first-class device language. Better yet, essentially all you need to do to make your existing website or web app a Firefox OS app is add a manifest.webapp file to your domain which looks similar to this:

{
    "version": "1.0",
    "name": "Your App Name",
    "description": "Your new awesome HTML5-based mobile web app!",
    "launch_path": "/index.html",
    "icons": {
        "16": "/img/mylogo-16.png",
        "48": "/img/mylogo-48.png",
        "128": "/img/mylogo-128.png"
    },
    "developer": {
        "name": "Developer Name",
        "url": "http://yourawesomeapp.com"
    },
    "installs_allowed_from": ["*"],
    "locales": {
        "es": {
            "description": "Su nueva aplicación impresionante Open Web",
            "developer": {
                "url": "http://yourawesomeapp.com"
            }
        },
        "it": {
            "description": "Il vostro nuovo fantastico Open Web App",
            "developer": {
                "url": "http://yourawesomeapp.com"
            }
        }
    },
    "default_locale": "en"
}

It really can’t get any easier! To guard yourself against problem when your app is used offline, be sure to include the HTML standard appcache too!

Prevent Page Zoom

Some will argue it’s best practice to always allow mobile page zooming, but I disagree — there are times when preventing page zoom is important. A HTML META tag will provide the perfect method of preventing page zoom:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

Add this tag to your page HEAD and you’re all set. I use this for my blog, for example, because I’ve taken the time to customize the page structure and, more importantly, font sizes to display well on mobile devices.

Hide the Address Bar

This is one of the oldest tricks in the book! No one wants their app-in-a-browser to look like a normal web page by displaying the address bar, so you can try to hide it:

// When ready...
window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});

This snippet doesn’t work in all browsers but still works for many of the popular mobile device browsers. This snippet can make a giant difference in site perception!

Detect Orientation Change

If you need to use absolute positioning in your mobile app, or simply want to adjust layouts or element positions in your mobile site/app, knowing when the device orientation changes could be critical. Luckily there’s an event for that:

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
    // Announce the new orientation number
    console.log(window.orientation);
    // 0 means portrait, 90 means landscape rotated to the left, -90 means landscape rotated to the right
}, false);

There are other methods of detecting orientation change, like listening for the window.onresize event or the window.matchMedia check, but the orientationChange event was created for just this!

WebKit CSS Madness

WebKit has played host to a number of interesting CSS properties whose values bled beyond presentation and into functionality. Here are a few of them:

/* don't let iOS' "actions" dialog to come up when element is touch/held */
.prevent-action {
    -webkit-touch-callout: none;
}

/* no dragging of element at all */
.content p.no-drag {
    -webkit-user-drag: none;
}

/* drags entire element, not the text/selection */
.sidebar div.element-drag {
    -webkit-user-drag: element;
}

/* change the character used to hide user passwords */
input[type="password"] {
    -webkit-text-security: square;
}

The WebKit iOS-specific CSS properties are interesting to say the least. These properties are all useful and tied into functionality, not just presentation.

Launch the Photo Chooser

There may be times when your mobile website or app wants to allow users to upload an image. The best way to get the image app launcher is via the following HTML:

<input type="file" name="image" accept="image/*" capture>

The above snippet instantly pushes the user into the camera roll or to the dialog whereby you can provide an existing image or take a new one.

Little customizations and functionality adjustments like those presented above can make a massive difference in usability, functionality, and elegance in display. Do you have a few small mobile snippets you’d like to share? Please do!