How to write backwards compatible HTML5?

99封情书 提交于 2019-11-28 21:28:35
Sarfraz

When talking about HTML5 or CSS3, you should head over to:

When can I use...

As can be seen, we are still far far away from using that.

Also, since old versions of the browsers won't support HTML5 or CSS3, however, you can do what is known as:

Progressive Enhancement and Graceful Degradation

Here are some resources also:

Browsers that, collectively, cover 95% of the world: Firefox, Chrome, IE6/7/8. The best way to test them is to install them on your computer.

You want to use html tags and css compatible with mobile browsers.

For anything CSS3 wrap it in conditional javascript. I always make sure the device width is atleast 240px, then anything below that is the old, crappy, mobile look.

You can use a small mobile boilerplate for CSS, to reset the basic tags you use (make them look them same in different browsers). As with any boilerplate, you should look at the css to see if it's WAY overkill.

For a comprehensive guide check out the W3 Mobile CSS2 guidelines: http://www.w3.org/TR/2000/WD-css-mobile-20001013

Another good resource is this compatibility table: http://www.quirksmode.org/m/css.html

Graceful Degradation is all about making compromises -- if you could do everything in the lower version, you probably would. To pick on the example of rounded corners you cite, it may acceptable to you (or your client) to live without them, where there don't exist renderer specific CSS extensions to support them (this is how http://www.ipswich-angle.com/ handles it, for example, I believe). Other options involving images are there, but it is largely dependant on what compromises you and your client are willing to make.

A service like browsershots.org is quite useful to check how your site renders on different browsers and operating systems. You have to wait in a queue for a while but it's worth doing that.

I was going to make this a comment, but then I got carried away..

w3schools has suggestions for using semantic web elements on your site. It suggests using a Javascript library called html5shiv.js to add styling support to IE8 and below so you can find javascript files which emulate specific functionality built into HTML5 like JSON2.js and Webforms2.js.

Finally this article gives a full example of emulating a HTML5 form with many of the new attributes/functionality.

As for building the site, I'd recommend building a HTML4 site first using semantic elements freely (with html5shiv) and testing with IE7. Then as you build parts of the site that require new features, research a Javascript file that will provide older browsers with the same functionality, e.g: when it's time to add your first rounded corner or gradient maybe add CSS3Pie. Always remember as well that your box-model; border-radius and gradients are supported in webkit as well as mozilla's API so many css3 attributes you'll need to add 3 times:

border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;

Unfortunately I don't have a good resource for how the webkit/mozilla APIs compare with HTML5 functionality.

The only functionality I've struggled to find is support for CSS3 selectors in older browsers, often you can get away with this, I mean if you're not gonna upgrade your browser IMHO you can live with few double-thickness borders or missing alternate row styling in tables.

Maybe one day there will be a site that you can upload your code to that will tell you things like "chrome 20.xyz doesn't support rounded corners, add -webkit-border-radius to add support" but until then adding backwards compatibility after the fact will be near-impossible for complex sites.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!