The new HTML5/CSS3 (Web8!) stuff sounds cool! Should I start using it now or stick with css/xhtml wait until more browsers can use it?
3
-
What do you mean with Web8?– f00860Commented Jul 8, 2010 at 19:20
-
3html5 + css3 = web8!– JasonCommented Jul 8, 2010 at 19:22
-
What about HTTP 1.0 and ECMAScript 5.0?– deleteCommented Jul 16, 2010 at 8:35
Comments disabled on deleted / locked posts / reviews
|
9 Answers
HTML5 is supported by all browsers now, even IE5!(if you use the html5shiv script). I highly recommend reading http://diveintohtml5.org It is one of the best HTML5 resources out there.
As for CSS3, if you do use it, make sure to use vendor predix too, on top of the regular syntax. e.g.
border-radius
-moz-border-radius
-webkit-border-radius
I believe in progressive enhancement. IE9's css3 support sounds very promising.
-
2I think you mean to put the border-radius on the bottom, right? Commented Jul 10, 2010 at 0:33
-
1Alas, the original Dive Into HTML5 site is gone. There are many mirrors available. Here's one: diveintohtml5.info Commented Oct 14, 2011 at 17:49
Probably.
There are parts of HTML5 that you can use right now, today. Forms for example. If you have <input type="email"> in a browser that doesn't support HTML5 (yes, even IE6) you will simply see the same thing you'd see if you used <input type="text">. Yet on a browser that supports HTML5 form elements, you gain the advantages of the email type: namely the client will error check the value with no extra JS required. While yes, you'll still need the JS for non-HTML5 browsers, you will have one more layer of validation in the supporting browsers.
Another question on this site provides a good overview of the new features available to you through HTML5 and CSS3. There's a lot of good data on forms in that question, too.
Because Internet Explorer (and older versions of Safari and Firefox, however rare they may be) do not support many of these features you are left with JavaScript libraries to fill the void. These include a performance hit (even though it's only for the browsers that need to use them) so be mindful of your users when employing them.
To mitigate the issues with lack of feature support, should you decide that these new features are worth it, use the following resources:
- html5shiv: a JavaScript shiv for IE to recognize and style the HTML5 elements.
- CSS3 Pie: an IE attached behavior (an
.htcfile) that makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features. When applied to an element, it allows IE to recognize and displayborder-radius,box-shadow,border-image, multiple background images, andlinear-gradientas background image. - Modernizr: a Javascript library that uses feature detection to test the current browser against upcoming CSS3/HTML5 features, adding classes to the <html> element for those which are supported. Also creates a self-titled global JavaScript object which contains a boolean property for each feature,
trueif supported andfalseif not. Adds support for styling and printing HTML5 elements so you can use elements such as<section>,<header>and<nav>. - ie-css3.js: allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them. Supports different CSS3 selectors based on which JavaScript library your site uses.
- DD_belatedPNG: a Javascript library that adds PNG image support to IE6. You can use PNGs as the
srcof an<img />element or as abackground-imageproperty in CSS. UnlikeAlphaImageLoader,background-positionandbackground-repeatwork as intended, and elements will respond to thea:hoverpseudo-class. - TwinHelix IE PNG Fix: an IE attached behavior (an
.htcfile) that adds PNG support with alpha opacity to IE 6. Full CSS background positioning and repeat are supporting (including CSS sprites) with additional (included) JavaScript. - Whatever:hover: an IE attached behavior (an
.htcfile) that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser. Includes AJAX support, meaning that any html that gets inserted into the document via javascript will also trigger:hover,:activeand:focusstyles in IE.
Interesting to note that DD_belatedPNG solves both issues addressed by Whatever:hover and TwinHelix's IE PNG Fix with pure JavaScript, while Whatever:hover and TwinHelix's IE PNG Fix use a combination of JavaScript and IE attached behaviors (.htc files).
Generally people who use non-IE browsers upgrade them when asked to, and so IE bears the brunt of "But some browsers don't support this feature!" complaints. Modernizr will add the ability to use HTML5/CSS3 to any browser you're likely to see and not just IE. ie-css3.js will do the same thing, you simply have to implement it without an IE conditional comment (which means all browsers will end up getting it unless you include it with server-side user-agent checks – this will greatly reduce performance for all of your visitors, rather than just your IE users.)
-
Sorry Bryson but those things which add HTML5 support to Internet Explorer are utter nightmares for practical purposes.– deleteCommented Jul 16, 2010 at 7:21
-
1I have updated my post with a few more bits of info, and acknowledged the performance hits in using these JS libraries. However, I disagree with you that their use is a nightmare. I have used all of these at least once, and they all serve a purpose. They have also not caused me any additional headaches. What makes you say that they are nightmares?– BrysonCommented Jul 16, 2010 at 7:46
-
OK, "utter nightmares" may be a too-strong way of phrasing things but the performance often suffers badly enough that the page becomes unuseable, so I think you're overstating the case.– deleteCommented Jul 16, 2010 at 8:34
Use whatever technology suits your needs most.
Eric Meyer wrote a nice article about why starting to use vendor-specific prefixes on CSS rules isn't lame like using css filter hacks used to be.
I think the same applies to HTML5. If you can check browser support for different features, why not use it. So long as the site degrades gracefully, live it up.
answered Jul 8, 2010 at 19:22
Some other useful links, when deciding what CSS3 features you might want to use: http://caniuse.com/ (gives a good breakdown of what elements and selectors are usable across which platforms)
http://css3please.com/ (an in-page-editable playground to mess with CSS3 features, this also gives some advice about which techniques and features are supported by which platforms for commonly-requested stylings, like rounded corners, gradient backgrounds, etc.)
I use it to enhance the experience on modern browsers so the users with a good browser get "rewarded" with nicer looking UI's (Rounded corners, shadows, that kinda stuff). I guess you shouldn't use it as a replacement for let's say your current clientside form validation, unless you got some kind of JS fallback for it.
If you are starting a new project using HTML5 which should also be supported in older browsers, the best option is to use Initializr -
It uses HTML5 Boilerplate at the backend, and adds a few options of its own to give you a template which you can deploy on your own site. It includes the Javascript libraries (like HTML Shiv or Modernizr), which will make your site compatible with older browsers.
Depends on what the audience is and what features you want to use. I expect it will be several more years before the average project can drop support for ie6 :(
If your site is a private intranet and you either control the browser, or have a limited range of browsers to deal with, then feel free to work on the bleeding edge of technology.
If not, no matter what you use, you will always have to take into account the lowest common denominator. In this case it is probably some combination of IE 6 and a range of mobile browsers. So, if you move ahead with HTML 5 you have the added issue of making sure your site 'degrades' nicely.
HTML5 and CSS3 provides may new features so you can easily develop web site. Like HTML5 introduces many new tags like <video>,<audio>,<header>,<footer>etc.. CSS3 introduces opacity,box shadow,selectoers etc.. Also CSS3 supports responsive designs and produce fewer line of code. For making website responsive may you use css3/html5 and many more advantages it providing.