How to use HTML5 on your site now

There have been many articles written about HTML5, such as "What to expect from HTML5?" and "How will HTML5 change the web", but the main thing for web developers to know is: What can I use now? What does HTML5 do and how do I start using it? The good news is that there are already a lot of things in HTML5 available.

However, you must understand one thing at the beginning. You need to know your audience, otherwise you should not use HTML5. If most people visiting your site are using IE6, then there is absolutely no reason for you to use HTML5. On the other hand, if your site’s visitors are all using mobile browsers, such as iPhones and iPads, then what are you waiting for? You can get started now! Wait, here are some guidelines, it’s not too late to start after reading them.

What HTML5 features can you use now?

Although the HTML5 standard is still a draft and is still being discussed in the hands of standards organizations, important parts have been implemented by many modern browsers. Apple Safari, Google Chrome, Mozilla Firefox, Opera and Microsoft IE9 all already support some features of HTML5.

Let’s first take a look at how each browser scores on the HTML5 TEST website:

*Apple Safari 5.0: 208

* Google Chrome 5.03: 197

*Microsoft IE7: 12

*Microsoft IE8: 27

*Mozilla Firefox 3.66: 139

* Opera 10.6: 159

It seems obvious that most mainstream browsers that are not IE core have good support for HTML5, and they can make "websites using the HTML5 draft" work very well.

Back to the beginning, you can now use HTML5 doctype, there is no reason not to use it, you can even query and replace throughout the website:

becomes:

The following code looks cleaner and more straightforward, doesn't it? If browsers rendered your web pages in a standards-compliant way, they would still do so.

Let’s talk about the video. Many publications about HTML5 will mention the current competitors, four in total: Flash, H.264, OGG and WebM. All of these may become a standard format in the future, and none of them will play correctly in all browsers on all platforms. Sadly, it seems that the browser sponsors have not prepared one for this feature anytime soon. Public format.

So, it is obvious that the Video tag has not yet reached the stage where it can be applied. But wait, one should expect the HTML5 video tag to be format-independent. In fact, since a video can contain multiple Source tags, it has to work this way. If your browser does not support the first option, then you will try the second, then the third, the fourth, the fifth...

HTML to handle situations like this is an open source project that supports web-based video without using any scripts and browser sniffing and can be found here .

Semantically speaking, a big change in HTML5 is those tags with clear semantics. The change you can see is that your site is now filled with code similar to this:

In HTML5, you can express it like this:

Is the semantics clearer? Of course, we still have to use CSS [Cascading Style Sheets] to format these elements. But wait, no version of IE supports these tags! This is a huge problem for people! Are we really so unlucky? Thankfully, we have a solution: all you need to do is paste the following code into the HEAD tag of your page:

HTML5 Shiv is an open source project based on a simple discovery: if you create a DOM element in IE, then you can use that name in styles. For example, if you use

Create a DOM element, then you can add any number of foo tags to the current page, and IE will format them. HTML5 Shiv contains some HTML5 elements that IE cannot recognize, and then creates them one by one. This way you can use these HTML5 tags, for example:

Smart Forms, another feature that makes HTML5 smarter. If you're tired of writing the same script every time to check the validity of an email address or something like a phone number, Internet address, etc., you're not alone! There's a reason for letting the browser do all this annoying work, isn't it? Quite true.

Here is the syntax:

What will happen to those older browsers? The smarter part: if they see a TYPE attribute with a value they don't recognize, they will render the element with the default value of Text, which is exactly the backward compatibility result we expect. Browsers that support HTML5 will automatically verify this field type, but you'd better not throw away your previous scripts, at least - not until IE9 becomes popular.

If you're wondering what browsers that support these types of actions do beyond validation, you can try these forms on your iPhone. You'll notice that the keyboard type associated with the form changes. Sometimes it's numeric, sometimes it's alphanumeric with an @ symbol appended, and some even has a key.com directly. That's what these elements are. magic. All you need to do is change the value of the type attribute.

It can also be a little smarter, here is a new attribute:

This value can simply specify a piece of text, an effect you often see on the Internet. This text is displayed when there is no value. When you click, the value becomes empty, and it returns to the text when you leave it. In the past, Javascript was used to process it, but now The browser will do this for you.

What HTML5 features can you use right away?

Not all HTML5 elements are ready for use yet, for various reasons (none of which are abbreviated by IE), browser support is coming soon, and in the not-too-distant future, you will immediately have two elements Ready to use.

Magic fonts, every designer has a dream, hoping that all visitors to the site will install the fonts they need when designing. To do this, there used to be a variety of methods, including pictures, Flash, etc., but now , they have this right, and you can force your visitors to install the fonts you specify. This is what CSS3 supports: @font-face attribute. Versions of Firefox before 3.5 and mobile versions of Safari (before iOS 4) do not support this attribute. If your site has a lot of similar visits, then you may have to wait.

Regardless, there's no real reason for all browsers to use the same font. If you want to provide custom fonts to browsers that support this attribute, and then provide an alternative font to browsers that do not support this attribute, it is also a good solution. At this time, http://www.fontsquirrel. com/fontface/generator is a good place to go.

Shadows and rounded corners are things that make many designers happy. Text shadows, block shadows, block rounded corners, etc. are now standards supported by CSS3. Again, if you don't want to measure rendering in different browsers based on pixel perfection, you can start using these features now. CSS3 generators will help you do this.

What features might you use someday?

This catalog contains features that developers and designers have been thinking about for years. Unfortunately, it may be several more years before they can be used in the real world.

Smart forms have been mentioned before, but in fact there are many more useful elements that have not been mentioned, but before wider support, there is no way to use them.

Sliding selector:

Color picker:

Date picker:

Input box with regular validation:

Required input boxes:

None of these tags have cross-browser or cross-platform support, but when that day comes, you will definitely be eager to use these tags.

Printed layouts, another CSS3 feature, are still years away from being fully implemented. Provides designers with multi-column layout features. Currently it can only be implemented in the test cases of Firefox and Safari.

Geolocation detection, with the growth of location-based services such as Gowalla and Foursquare, it is useful for browsers to know where the user is. So it’s not surprising that mobile browsers based on mobile phones are the first to implement this feature. Firefxo 3.5 and Safari 5 have already begun to provide support for geolocation. (Chrome's similar service is implemented through Gears, but it is gradually moving to HTML5).

Work offline and store locally. Storing data in the cloud is a great idea when you don't realize you don't have an internet connection; or you have an application that needs to process large amounts of data and has to frequently run on the server. There are more transactions with clients than you imagine; or your mobile data traffic is limited and you want to store more data on your phone to avoid too much traffic loss. The answer at this time is to use Local storage to enable applications to work offline and then sync to the cloud when connected.

Browsers that support this feature are: Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, Chrome 4+.

Artboards, animations and transformation effects, one of the promises of HTML5 can be achieved using the Canvas element and some CSS3 properties to achieve a fully illustrated and fully animated website. This is from the standard as of July 12, 2010.

Green = Achieved, Red = Not planned

Shortcuts to cutting-edge HTML5

If you can't wait for IE8 to die, there are many ways to skip it and move on - again, it depends on your visitors. Take a look at your site's access logs to see what browser headers are most visited. One way to do this is, for example, to use Google's Chrome Frame to embed a Chrome instance into IE. If you understand that visitors to your site may have installed GCF [Google Chrome Frame], then you can add it to your HEAD The META tag on the previous line forces IE to use GCF to display your website:

[Editor: But I would like to remind you that doing so will invalidate the original IE7 compatibility mode of IE=7. Please weigh it yourself if you choose. ]

Coupled with a short script provided by Google, which allows users who have not installed GCF to jump to the GCF installation page, you may be able to skip the restrictions of IE. [Editor: I’m crazy. It looks like free advertising for GCF to bring free traffic...]

The elements listed in this article are only a small part of the current HTML5 and CSS3 drafts. If you have to use some of the new features, it is necessary to check the existing open source projects so that you can browse Server compatibility issues are minimized.

When reporting on HTML, many media focus on its stance, such as "less than 2022" and "Flash killer". The reality is that HTML5 is a long-required and completely new upgrade to the long-overdue HTML4 - so you can start using it today.

Contributed by: SafariX — Safari Chinese blog, sharing Safari information, tips and extensions.

Original source: Infoworld

Chinese source: http://safarix.net/how-to-use-html5-on-your-site-today