Jan 23

Do We Really Need HTML5 – Or We Are Just Instigated by Others

Last December, W3C claimed that the draft on HTML5 and Canvas 2D had been finalized, which is deemed to be a strong driving force for both HTML5 itself and those who are interested in it. Last year, Internet was overwhelmed with a lot of debates about whether HTML5 will replace Flash and become a new application development standard, and though Flash is still the mainstream, people increasingly believe that it is just a matter of time when this replacement happens. Is the demand of HTML5 a real deal, especially to developers and Internet users? Rather than making immediate conclusion, let us briefly compare the two products.

Flash

Since Macromedia released its first version in 1996, Flash has dominated Internet multimedia industry for over 15 years, and attracted a large number of web designers. Currently, about 97% browsers are equipped with Flash Player plug-in. But for Flash, we would not appreciate so many beautiful and interesting websites. As a mature development platform, Flash is propped up by many powerful programming tools, such as Adobe Flash CS Professional, which lowers the threshold of developing it.

Along with the proliferation of smart phones and tablets, surfing Internet with these portable devices became an inevitable trend. Unfortunately Flash does not perform well on them, because it overwhelms system resources and is too energy-consuming.

Continue reading

Mar 30

Cross-Browser HTML5 Placeholder Text

One of the nice enhancement in HTML5 web form is being able to add placeholder text to input fields. Placeholder attribute allows you to display text in a form input when it is empty and when it is not focused (it clears the field on focus). This is a nifty feature, but it is not supported by all browsers yet. This tutorial will show you how to use Modernizr to detect if placeholder is supported, or else use jQuery to display the fallback placeholder text dynamically.

Demo HTML5 Placeholder

Download Demo Zip

Old School Javascript Way

Before we had the placeholder attribute, we relied on Javascript to fake the placeholder text. Below is an example. The text is inserted in the value attribute. On focus, it checks if the value is “search” and returns empty to clear the field. If the value is empty, it returns “search.” As you can see, this way is not an efficient way because each field has to be checked. Continue reading