What features can I use in HTML5 and CSS3 without thinking too much about IE6 and similar? What features should I avoid?
What features can I use in HTML5 and CSS3 without thinking too much about IE6 and similar?
Define "too much". Anything that is in HTML 4 and CSS 1 makes for a very safe baseline…
On a more practical note caniuse will tell you when support for a particular feature has been added. You then need to decide if it will degrade cleanly or not.
That said, don't go looking HTML 5 / CSS 3 / etc features to use. If you have a problem, look for a solution. Don't look for a solution and then try a find a problem to solve with it.
http://www.caniuse.com/ is a great resource when you have a particular feature in mind to use - but are but sure the of browser compatibility.
In addition, many HTML5/CSS3 features have additional links with further information available on Can I Use.
Paul Irish has an awesome commented HTML5 Boilerplate.
From "Why it is awesome":
Cross-browser compatible (IE6, yeah we got that.) HTML5 ready. Use the
new tags with certainty.
Open this website in IE6 and find out: http://html5test.com/
(I don't have IE6 installed so I can not check it for you atm)
You also might wanna have a look at: HTML5 Cross Browser Polyfills.
I guess you have to avoid many things :-)
I would start by avoiding:
- Drag and Drop API,
- File API
Quirksmode has always done me well.
I think you should be a little more specific in your question - I don't worry about IE compatibility so I would say use them All. However I know that view is not shared by all, So i think a better answer would be use them all until you run into one that explicitly is not compatible with your target browsers / os
Once you start to see problems then work on correcting them.
I will say it once again - put together a specific list of supported browsers / os and you will be much much better off (hint - don't support < IE9 if you want to use the majority of these features)
The HTML5 doctype (<!doctype html>) works just fine in IE 6 (in as much as it puts IE 6 into standards mode).
Aside from that, I think pretty much nothing new in HTML5 or CSS3 (apart from #font-face) is supported in IE 6, so you’ll have to at least decide whether the experience in IE 6 is good enough. Usefully though, the new features generally don’t have any negative effect in IE 6.
For example, the new <input> types like <input type="date"> will render just like <input type="text"> in IE 6. So you’ll have to decide whether just having a simple text input is fine for IE 6 users, or whether you need to provide date-picking functionality using JavaScript.
This is pretty much the question with all HTML5/CSS3 features — can users of older browsers do without them, or do you need to add an alternative implementation?
The main exception is new tags in HTML5 — Internet Explorer 6 won’t let you style tags that it doesn’t know about, unless you create an instance of that tag using JavaScript. (The same is true of the HTML 4 tag <abbr>, because IE for some reason doesn’t know about that either.)
Related
I am just curious to know that why default css doesn't works for all the browsers, specially it breaks for IE browsers(6,7,8,9). So usually we need to create different css files for different browsers (mainly for IE), why is that?
Some browsers don't support all of the features CSS has to offer.
Also in some cases you need to "fine-tune" the css specially for IE because of the "css box model". You may also need it to enable backwards compatibility for previous versions.
I'm not a fan of creating browser specific CSS and usually try to use a solution that will work in all browsers. The reasons for some things not working in different browsers are:
bugs
different interpretation of styling
using something that was not implemented in the previous version
CSS is a big scary technology with no official implementation, only official specs. This means that there is no STANDARD interpreter that defines how the language is supposed to be interpreted, only docs which guide interpreter makers. The result is many interpreters, each with their own quirks and glitches.
...
And then there's IE
...
Microsoft has long held a firm foot in the "let's do it our way" ring. There have been many reasons for this ranging from implementing features that the WC3 CSS standards don't, yet, support (for example, they had a very early version of the modern opacity command) to more sinister reasons like trying to force compliance with their standard making niche appeal for their browser.
Either way, if you're going into web-dev, IE is going to be the bane of your existence. If you think CSS is bad, wait till you get to JS.
It is needed when you implement some feature of css which is not provided in all browser.
Then someone need various css files for fallback.
suppose you are using position:fixed; in css and if you want your site to be perfect in ie6 then you will need some other css file for callback because position:fixed; is not supported in ie6
Is there any single framework with which I can build a css3, html5 website that is compatible for all browsers including IE7 and later? Can http://html5boilerplate.com/ boilerplate help me in this?
You will never get the IE7 or IE8 rendering engine to achieve full compatibility with HTML5, CSS3, and other modern technologies. They are simply not capable of it.
However there are some hacks, tools and plugins which can get you part of the way.
Tools like Modernizr will help you by allowing you to detect which features are supported, to give your site a chance to work around it.
jQuery is a great library anyway, but is particularly good in this context because it abstracts a lot of browser differences away from the developer. Some things are easy in most browsers but a real pain in IE; jQuery takes a lot of that kind of stuff and makes it easy regardless.
Dean Edwards' IE7.js and Selectivzr are both Javascript libraries that give IE support for lots of the CSS selectors which were missing in older versions. This allows you to write your stylesheets without worrying so much about what IE supports. (IE7.js also fixes a number of IE's other glitches and missing features too)
CSS3Pie is a hack for IE that adds support for CSS border-radius, gradients and box-shadow.
There are in fact a whole load of hacks along these lines, all aimed at adding features to older versions of IE which it is missing. Modernizr's website has a big list of them here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
However there is one big caveat to all of this. Speed. IE<=8 is a slow browser. It has a slow Javascript engine. Virtually all of these hacks are javascript based. You might get away with running a few of them on any given site, but trying to use enough of them to give IE anything like full support for HTML5 and CSS3 will slow the browser down to the point of being unusable.
There is one other angle to approach this question though, and that's Google's Frame plugin for IE. This basically installs the entire Google Chrome browser engine into IE. The user is still running the IE shell, but the web page is rendered as it would be in an up-to-date version of Chrome.
This sounds great, but of course it isn't perfect. The main down-side of it is that the end user has to install it manually onto their computer, which means that you as a web developer have no real control over whether it's there or not. So its not something you can just add to your site and expect everything to magically work.
Finally, you may also be interested in CanIUse.com, which gives browser support tables for various features, allowing you to see at a glance what is and what isn't supported in various versions of each browser.
HTML 5 is more an umbrella term for a variety of technologies than any one thing or framework. Really, any implementation you do should degrade gracefully-- and that is what makes the site browser compatible. Detect what the browser supports, and then have alternatives that are legacy friendly.
Check out: http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/
And: http://diveintohtml5.ep.io/detect.html
Good luck.
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
MS is including it in the ASP.net MVC template projects
html5boilerplate won't help you.
As others have said html5 and css3 are very broad terms, there's no framework that implements all of the features provided by both of these. In fact they are not equally supported in browsers that say that they support them. And more, even W3C guys (who write the specs for html5 and css3) are not yet established on what features they will include or what steps will be required to implement them. You get the idea...
But.. if you narrow your requirements to some specific features, like video, audio tags, canvas drawing, nifty css effects, File API, or others, you CAN find frameworks that implement (or try to mimic) them with available technologies in cross-browser manner (more or less).
I currently work for a large company and I design for their high-traffic ecommerce website. We support tens-of-thousands of users across a variety of browsers. Our current browser stats point to most people using either Firefox 3+ and IE8. There are about 5% of users still on IE6.
Is it time to start coding for the future and impliment HTML5 across the site? Is it a responsible thing to do or should I wait a year for people to upgrade to better supporting browsers?
Thank you.
HTML5 isn't one specific thing. You can start using it even in browsers that have no idea what HTML5 is. If you just start using some of the extra tags or form types, they degrade perfectly into standard elements in older browsers. Video needs a Flash fallback anyway. The advanced scripting features all need fallbacks for non-supporting browsers anyway, or must only add non-essential functionality.
In short, sure, start using HTML5 techniques now to provide advantages for cutting-edge browsers, just make sure it all degrades nicely in older browsers.
IE8 doesnt support most of HTML5.
There are libraries you can use to make it more HTML5 aware; but for a large production site I think your better of waiting a year.
I would say that the 5% of users still on IE6 will probably remain on IE6. They either aren't interested in upgrading (perhaps they don't know about these things), or are restricted to IE6 by security policies in their workplace. In particular I've found that a number of our clients are not upgrading from IE6 because their IT teams consider it to be too big a change, or their existing software is not compatible with anything else.
Therefore, my advice is: go HTML5. With a bit of work you can work around IE6's deficiencies (look at Modernizr, CSS3PIE for ideas). And that way, the other 95% of customers get a better experience.
... what is "large"? Considering HTML5 is still considered work in progress, I'd vote no.
The name "HTML5" is tending to be used by most people at the moment to describe all the exciting new features in web browsers. Not all of these features are actually part of the HTML5 spec - for example, CSS and Javascript have new features which are being referred to under the HTML5 banner. I'm going to assume you mean all these features.
My answer would be to investigate which features you can implement, but remain backward-compatible. Many of the features of HTML5, CSS3, etc can be added to your site without making it un-usable for older browsers.
Some examples: (but do spend time researching for more)
New input types, such as <input type='date'> and <input type='number'>These give you new features in a modern browser, but old browsers will still show a normal input field.
More info: http://www.456bereastreet.com/archive/201004/html5_input_types/
Semantic HTML5 tags, such as <section>, <footer>, etc.
These give you additional semantic meaning to your HTML tags, which is good for SEO and other automated systems that look at your site. They are broadly backward-compatible, though in order to support them in IE6/7/8, you will need to include an IE hack such as HTML5Shiv. However, I would suggest using Modernizr, which includes the HTML5Shiv plus a stack of other useful functionality.
Some CSS3 features such as border-radius. IE doesn't know about this, but the result is that IE will have square corners and other browsers will have rounded corners. So nothing that breaks the site for IE users.
But if you really want to, IE can be made to support a number of CSS3 features, including border-radius, using tools such as CSS3Pie.
Instead of using SVG graphics directly, use a Javascript graphics library such as Raphael, which will draw SVG in browsers that support it, and fall back to VML for IE (which will even work in IE6).
Obviously stuff like the <video> or <canvas> tags aren't going to work in older browsers, but frankly, it'll take you long enough just implementing the features you can use straight away; by the time you're ready to take a step further, things will have moved on anyway.
More of my clients lately are asking me about HTML 5 and I'm trying to get a sense of what to tell them. How long until all the major browsers have standard support for it? How long until I leave HTML 4 behind and only code new projects in HTML 5? What are you telling your clients?
Are they asking about specific HTML5 features or HTML5 in general? At my company we haven't said anything to the clients, but we do set the HTML5 doctype as well as using some HTML5 markup - but only markup that works in non-HTML5 compliant browsers. HTML5 doesn't necessary mean you discard older browsers, it depends on which features you implement. You can still use audio and video tags, as long as you keep a flash fallback - as an example. HTML5 form tags are poorly implemented even in bleeding edge browsers, so using them are not an option.
I suggest you read Dive Into HTML5 to see how you can work with HTML5 today, but still support non-HTML5 browsers.
I'll throw in another link; Modernizr is a JavaScript library that come in handy if you want use bleeding edge HTML5 or CSS3 features, it detects support for HTML5 tags and some (all?) CSS3 properties.
You've already gotten some good answers, but I'll chime in as well. I wouldn't give your client a blanket "yes" or "no" on html5. I'd take a look at what all has changed and then break it down into sections based on how well it's supported.
The Doctype:
Nothing is stopping you from switching to the html5 DOCTYPE today. Even browsers that don't understand html5's new tags (most notably IE 6-8) will recognize <!DOCTYPE html> as a valid doctype and not switch into quirks mode. After declaring that your document is an html5 document, you're free to use (or not use) html5's new tags to your heart's content. Personally, I've started using the html5 doctype on websites -- even if I have no immediate plans to use html5's new features -- because there isn't any negative side effect, and as a bonus I don't have to try to remember the correct way to write a doctype and charset everytime I start a new page (which I have to do with html4/xhtml).
New (Layout) Tags:
Next, you have to figure out why your client is interested in using html5 in the first place. My guess is that they're interested because it sounds trendy and cutting edge. In reality, one of the biggest benefits of many new tags (such as <section>, <nav>, <footer>, <aside>, etc) is that they make your code much more readable than it would be if the page was filled with <div>s everywhere. This is a great advantage for the coder (and in the future it might help with accessibility), but right now, this change probably makes very little difference to the client.
New Features (Video and Audio):
Alternative, the client might have specific html5 features that they want their site to use. Two of the most popular are the <video> and <audio> tags. The great thing about these is that you can easily fallback to Flash, so you don't have anything to lose (as far as browser support goes) by using them.
Complex Features:
Other popular new features are <canvas>, geolocation, and local storage (not exactly html5, but related). For these, the fallbacks (if they exist) require a lot more work on your part. If your client really wants these features, you'll need to figure out which browsers they (or their customers and site visitors) are using, and what percent of their target audience they're willing to leave behind.
Conclusion
That got a little long-winded; long story short, I'd tell your client this:
"I'll gladly start using some html5 features immediately. Remember, though, that the specification is not finalized, and it will continue to change over the next 10 years. Around 50-60% of our clients may be using browsers that don't support some of html5's new features, so we'll need to do thorough analysis before adding certain complex features of html5."
If the clients are OK with using the browsers that support HTML 5 for their applications, then why not :)
If they don't want to use the browsers (and versions) that doesn't support HTML 5, then they can't have it, thats what I would say.
Edit:
OK let me put it this way. If they are asking for a suggestion, then ask them what browsers and versions are they comfortable with, if they fall into the area where HTML 5 is supported, then tell them that they can move to HTML 5, adding that its in a nascent state, but support is growing at a good pace.
How long until all the major browsers have standard support for it?
Never. If you look at HTML5 as a whole (which you shouldn't), no broser will ever support it. For each browser, there will always be dozens of features defined in HTML5 which the given browser does not implement.
How long until I leave HTML 4 behind and only code new projects in HTML 5?
The language hasn't changed. It's still HTML. So, you cannot say "I code in HTML 4" or "I code in HTML5". You code in HTML.
HTML5 introduces new features. For each feature, you decide independently if you want to use it in your projects. There is stuff defined in HTML5 that you can use today. On the other side, there is stuff defined in HMTL5 that currently isn't implemented in any browser. The point is, it depends on the given feature.
Another key question is: What browser(s) do the majority of your clients use? Since medium to large size companies tend to be very resistant to changing browsers, what they use now is what they're likely to use for the forseeable future.
For clients using mostly Firefox, the answer is that Firefox supports a good deal of HTML5 now (version 3.6), & even more in version 4 (2011). For clients using mostly IE, they'll have to wait until version 9 (2011).
I have just started web development after a few years. Mostly in the past I would specify a style-sheet dedicated to IE6. Now, Chrome and Safari seem to be rendering elements better, over FireFox.
What is standard procedure for external style-sheets these days? IE6 (STILL?) - IE8? FF even?
It would be greatly appreciated if anyone has advice specifically catered to marketplace development, ie XHTML / Wordpress development.
There is no specified number of stylesheets. Usually it is one for IE and one for rest of the browsers. Note that there exist solutions such as ie7.js or CSS3 Pie to make IE behave like standard-compliant browser.
I personally use 2 stylesheets. One core one, and one for IE6.
Most of the modern browsers simply ignore anything that they don't support, and dont have quite the sheer number of behaviours that require hacks.
Given that a stylesheet isn't required at all, the answer is none. I would still say you need only 1 though. (If you've created your css properly and used a proper doctype). Technically you shouldn't need to have browser specific styles at all. And for the few times you might, you can use Star Hacks for IE...
I think question you're asking relates back to the much bigger topic of how best to handle cross-browser issues.
It's a wide and varied topic, but to help you with you're specific question about CSS branching (forking)... you may be interested in the following article from "A List Apart"
"Stop Forking with CSS3" http://www.alistapart.com/articles/stop-forking-with-css3/
Cheers.