How many HTML 5 tricks do you have in your tool-belt? “Tricks” that turn into your valuable trump cards each time you need to cut down on the need for custom code, to simplify common tasks, to add specific desktop functionality or to streamline your in-browser work on a website? Well, it can never get too “bulky”, right? This is why I've prepared for you a list of 9 cool things that you can do with HTML 5, that you may not be familiar with... yet.
1. Trigger a Visual Color Picker
And the code behind this HTML trick looks like this: <input type="color">.
It will automatically display a device-specific color picker once clicked upon. Just imagine pulling this trick in the context of creating/editing images or interactive animations on an HTML canvas.
Also, just imagine the time-consuming custom code writing session you would have otherwise invested in building this UI component!
Note: except for Safari, all the other browsers support it on mobile.
2. Use the HTML 5 Vibration API
You might legitimately be asking yourself: how would making end users' phones vibrate be of any help to... anyone?
Now just imagine this possible scenario:
Your marketing team “fuels” their ad campaigns with this “user alerting” function in HTML 5, that draws customer's attention to certain... ads.
The function that Vibration API triggers is vibrate(), which does precisely what it says: it makes the customer's phone vibrate!
3. Pull One Anchor Element Trick... or Two
Now here are some pretty cool things that you can do with HTML 5.
Using the here below anchor tags you get to streamline common tasks and... focus on far more complex ones truly worth your time and energy as a Drupal developer:
<a href=”skype:username?chat”>Start chat with the username</a>
<a href=”skype:username?add”>Add username</a>
<a href=”mailto:[email protected]">Send email</a>
<a href=”skype:username?call”>Start call with the username</a>
4. Define Multiple, Per-Screen Resolution Images
And it's the HTML 5 <picture> element that's “behind” this cool HTML trick.
What it does is enabling you to define one different image per device screen resolution. And you're free to specify as many different images as viewports.
Why was this HTML 5 feature even needed? Especially if you're already implementing responsive design principles?
It's simple: because an image that automatically resizes to fit specific viewports “forces” the user to download the largest version of the image and then downsample it.
By specifying a whole different image for each screen resolution you're obviating this inconvenience that comes along with responsive design.
5. Cool Things That You Can Do With HTML 5: Recolor The Toolbar
The devil is in the detail.
Just type in the magic formula <meta name="theme-color" content="#FFFFFF"/> and let it work its “spell”: recoloring your browser UI when viewing your website.
An HTML 5 trick that will add a nice touch of aesthetic refinement on mobile platforms...
Note: “theme-color” works only in fullscreen mode on iOS (yet it works perfectly with Firefox, Chrome and Opera), so you'll be needing "apple-mobile-web-app-status-bar-style".
6. Make Your Browser Refresh, By Default, Every X Seconds
Is this scenario (too) familiar to you?
You're experimenting with CSS and every few seconds you need to manually refresh your browser in order to vizualize the results of your “experiments” on your website.
Well, not anymore!
One of the cool things that you can do with HTML 5 is using a meta code — <meta http-equiv=”refresh” content=”3"/> — precisely for setting your browser to refresh, automatically, every 3 seconds.
How convenient!
And there's more! You can even set it to refresh your browser every other... 5 seconds while you work “wonders” with your CSS files.
7. Use Prefetching: Load Web Pages Before They're Even Requested
Anticipation is key in delivering unparalleled user experience.
And this is precisely what you'll achieve (delivering unmatched user experience) using the following HTML 5 meta code: <link rel=”prefetch prerender” href=””/>.
It will prefetch the CSS files of that specific page which you anticipate that your site visitor is about to request. And this before he/she even gets the chance to click on the corresponding link in the navigation menu.
One of the many cool things that you can do with HTML 5 and that you may haven't known about yet.
And you'll trigger a similar action by pulling the rel=”prerender” HTML trick, yet expect it to render the entire web page and not just its CSS files.
Note: you can pull this HTML trick in IE and/or Chrome only.
8. Hide Specific Elements (No CSS Tricks Needed)
<h1 hidden>Hello World</h1>The difference between the CSS “hidden” attribute and the HTML 5 “hidden” attribute? The latter is rather similar to CSS “display:none” (instead of working as the “visibility: hidden” CSS attribute).
Meaning that it won't just hide the content element (hence allowing it to still take up space on your website).
9. Edit Content Right Within Your Browser
Convenience at its best! This is how you could call the <h1 contentEditable>Hello World</h1> trick that you can pull in HTML 5.
It empowers you to edit content on your website right inside your web browser! Just click the content that you need to edit and start typing in.
And this is how my list of cool things that you can do with HTML 5 looks like!
Were you already familiar with (some of) them? What other great HTML and CSS “tricks” have you added to your own tool-belt. Feel free to share them in the comments section below!