HTML5 Prefetching

One of the most interesting, but not widely known features of HTML5 is prefetching. By using it you can start loading pages (or even files) before the user requests them. This can increase your site’s speed and the user’s experience! Did I mention that it’s super easy to implement it? Just put the below code into the head section of your page:

See the Pen HTML5 Prefetching by John Tsevdos (@tsevdos) on CodePen

For prefetching a specific file use the same code by pointing directly to the file.

See the Pen HTML5 Prefetching by John Tsevdos (@tsevdos) on CodePen

The above feature works only on Firefox. If you want to use it in Chrome as well you have to use the “prerender” attribute as well:

See the Pen HTML5 Prefetching by John Tsevdos (@tsevdos) on CodePen

Browsers that don’t support prefecthing will simply ignore it (Safari and IE) but sooner or later they will implement it, so you have no reason not to use it asap! Please try not to prefetch everything, it’s wrong! For more details regarding this neat HTML5 feature have a look at Mastering HTML5 Prefetching, an excellent resource on the topic.

Not so popular HTML5 attributes

HTML5 offers many new attributes that make our lives easier and our code more semantic. In many cases they even provide functionality that we used to implement with javascript, like the placeholder attribute. I’m pretty sure you all know the placeholder attribute, but what about the following ones?

hidden attribute

The hidden attribute, as you can easily guess, hides the element that it is set on. It acts almost identical to style { display: none; }, but it’s simpler, cleaner and more semantic (since you are hiding the element directly on DOM rather than style). It is also ridiculously easy to make a fallback on browsers that do not support the specific attribute, just hide it in your styles ( { display: none; } ) or javascript…

See the Pen Not so popular HTML5 attributes : hidden attribute by John Tsevdos (@tsevdos) on CodePen

download attribute

Do you have downloadable content in your website (like PDF files etc)? If yes then with a little HTML5 attribute you can provide better semantics to the link element, give a better description/title to your file and enforce the browser to download it! Just use the download attribute followed by a string that represents the description/title of your download. Even if your filename is a timestamp or a temp name, the user will download the file,  having as its name the title you used.

See the Pen Not so popular HTML5 attributes : download attribute by John Tsevdos (@tsevdos) on CodePen

autofocus attribute

Finally with the autofocus attribute you can autofocus any input, textarea or button you want. Simple as that.

See the Pen Not so popular HTML5 attributes : autofocus attribute by John Tsevdos (@tsevdos) on CodePen

To conclude, whenever possible, try to use the new HTML5 attributes. They will always be more semantically correct and it’s super easy to implement them. Also, most of them have very simple fallbacks but even if you don’t provide any, most of the time you won’t break something, so you don’t have any excuse.

How to style placeholder text

The placeholder attribute is one of the most useful HTML5 attributes, because with just a tiny attribute you provide a better user experience to the end user, you make your code more semantic and all of this is achieved without writing a single line of javascript. But this super easy and time saving attribute is a bit difficult to style. The typical input styles don’t apply to our placeholder! No worries though, in webkit-based and gecko-based browsers you can apply the below rules and style your placeholders.

See the Pen How to style placeholder text by John Tsevdos (@tsevdos) on CodePen

Note 1: Don’t try to combine the selectors because it won’t work! If a browser doesn’t understand a selector it invalids all the following rules and this will always be true in our case, since webkit-based browsers won’t understand the :-moz-placeholder selector while the gecko-based brosers won’t understand the ::-webkit-input-placeholder!

See the Pen How to style placeholder text by John Tsevdos (@tsevdos) on CodePen

Note 2: For some reason the placeholder attribute inherits all the input stytles (ex. color, background etc.) in gecko-based browsers (tested in Firefox 14). If you encounter this problem just make your selector more specific.

See the Pen JviFh by John Tsevdos (@tsevdos) on CodePen