If you had to choose a browser (just one) to be the primarily supported browser for a company jumping into HTML5 (CSS3).. Which one would be your safest bet on the middle-long term?
Chrome, FireFox, Safari, IE?
I'm looking for an objective recommendation based on standards driven/compliant, developer tools, fast & correct feature implementations, memory footprint, etc.
UserBase/MarketShare would not be an issue because it would be on a closed environment in which we control the clients (which are basically big machines with a Web interface).
Thanks!
I would say a webkit based browser. That would be the best balance of speed/stability and HTML5/CSS3 features.
However I believe that Opera has the most implemented features.
Opera has always been in the lead, but they've also always had weird bugs. Right now, Chrome is in an interesting position: Google just bought an internet video protocol company (On2), and so they have the power to end the H.264 vs. Ogg Theora battle by releasing this great new codec they've bought as open source.
HTML5 itself isn't anything new: it's just new elements that display differently. Think of it like this: if HTML5 was the first to introduce the <blink> tag, developers would be a little iffy about it because you can just use CSS to set text-decoration:blink or use some Javascript to make the blinking happen.
With HTML5, things aren't that different. Most of the new elements are just extensions of <div>. For the ones that aren't (<video>, <audio>, <canvas>, etc.), there are either already strong implementations (pretty much across the board) or the implementations as complete as the HTML5 spec is.
Will there be a best browser for HTML5? Probably not. It's all just a matter of how the browsers position themselves (like I mentioned with Chrome above).
If you control the environment I would say pick one based on that has features your app can exploit to make your job easier. Otherwise, lower-common-denominator is a widely used approach for a small team.
I would say Gecko (firefox and friends) or webkit (safari, chrome and friends). I wouldn't go with IE nor Opera. Here is a HTML5/CSS3 comparison table that pretty much supports my views.
Safari’s pushing CSS animations and transitions, if they’re a big draw for you.
If you want to make a HTML5 app/site that focuses on one browser, then you might as well use HTML 4 and JavaScript. For the next many many years most HTML5 sites will have to function in non-HTML5 mode.
See HTML5 features as glacing on the cake, to add benefits to the browsers that can take advantage of it.
All the modern versions of browser support HTML 5. But recently launched internet explorer 9 specifically designed by keeping in mind future web technology needs and incorporated latest features that give rich and interactive web experience. Latest browser Internet explorer 9 has more support for Cascading Style Sheet than previous versions of Microsoft browser. It supports CSS3 and more emerging SVG2 markup standards. IE 9 includes new java script engine that designed to take advantage of multi core processor and give maximum performance.
Related
Features of HTML5 are no doubt very compelling but is it a good time to start development in HTML5 ?
I just have started development in HTML5 and realized at the time even not all HTML5 input types are supported by all browsers. It means it is not sure about basic stuff like input forms.
Please share how you are managing these things ? (Using HTML5 code with browsers currently supporting HTML5)
HTML 5 is still under development so you've got to be careful. Certain features, such as the more basic ones like <header> and <footer>, are less likely to change before the final release. The doctype decleration is unlikely to change. I wouldn't rely on the multimedia support as supported formats vary widely accross browsers.
The momentum behind HTML5 is strong and it is indeed a good time to get started if you have not already.
At the lowest level, you would need to write feature detection in your pages to see if the particular browser supports the HTML5 feature that you want to use.
I suggest the following:
Use sites like caniuse.com to determine the current support for a particular feature across browsers.
Use templates like HTML5 Boilerplate, which give you a structure for the HTML5 page that you can use , with support for various shims that bring in support for HTML5 features in older browsers.
If you prefer doing the detection yourself, use a library like Modernizr.
As with all cross-browser development, you can never rely on any support in the browser. If you target older browsers, then do not rely on HTML5 features. I haven't had problems with using the HTML5 doctype in older browsers, but specific features can be troublesome — e.g. you can use <header> elements, but IE won't let you style them in any way as it disregards header styles as invalid.
As long as you need to support old enough browsers, it will never be a good time to start using HTML5. The only thing that decides whether it's okay to use HTML5 is which browsers you want to support.
HTML5 is much easier then previous ones, It has developed allot in input fields, though its still under development and not complete yet.
You can check here http://html5test.com/ which browser supports HTML5 how much?
Currently, Chrome is the best that supports the HTML5 more than any other web browser.
-Thanks.
Take a look at the table in this wikipedia article. There is a lot of variability amongst browsers as to which parts of HTML5 are currently supported. This website tests your web browser to see which features it supports, so install a bunch of different browsers on your computer and test them for yourself.
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.
Planning to use HTML5 in a big project, I need to make an exact timeline for future changes.
Is there any source to tell me when a particular feature of HTML5 will be ready? Is there a roadmap for HTML5 support for each particular web engine?
Just for some more details, I’m working on a social/video sharing site. I want to use new features from CSS3 to HTML5 to JavaScript. Don’t tell me “You can use <video> right now” because I know that!!
Also consider the fact that it takes some time for all people to update their browsers to new ones
Yes:
When can I use...
I need to make an exact time-line for future changes.
So you want Microsoft, Apple, Mozilla, Opera and Google to tell you exactly when they’ll be done adding features to their browsers? Just e-mail them, I’m sure they’ll get right on that :)
Naw, interesting question. I don’t think any browser manufacturers commit to implementing specific features particularly far into the future. In the case of HTML5, the spec itself says that the spec won’t be done until there are two agreeing implementations, so it’s very much a matter of “wait until an implementation ships”.
In the case of WebKit and Firefox, they‘re open-source projects, which I imagine makes it more difficult to commit to far-future dates. Then again, I seem to remember Microsoft being a bit late with Vista, so it’s probably difficult to commit to dates for closed-source projects as well. If you could edit your question with the exact date when your social video sharing site will be finished, that’d be a good start.
A quick Google turns up:
Internet Explorer
Microsoft have got IE 9 in beta. This page claims to be some sort of roadmap: http://microsoft-journal.spaces.live.com/blog/cns!A33F7112F6C1D499!878.entry
There’s also their Internet Explorer Blog
Firefox
Mozilla announced their plans for 3.6 here: https://wiki.mozilla.org/Firefox/Namoroka
Couldn’t find a similar document for 4 (which was originally announced as 3.7), but robertc pointed to this document which details the HTML5 (and CSS3) features added in Firefox 4: https://developer.mozilla.org/en/Firefox_4_for_developers
WebKit (Safari and Chrome)
“Apple doesn’t comment on future products” — http://trac.webkit.org/wiki/FAQ
But the WebKit team do have a blog, Surfin’ Safari
Opera
Folks were apparently clamouring for a roadmap last year: http://dev.opera.com/forums/topic/294965
It all depends on your target audience. If it is South Korean middle aged businessmen with 99% IE6 penetration, you're not likely to be able to use anything fancy any time soon. If it's art directors working in advertising, you can probably already use whatever bleeding edge feature Webkit has implemented.
Check your logs, and use the site sAc linked.
They are only supported in new browsers. I think everyone here knows that. But if majority of users are still on older browsers that don't support CSS3/HTML5, shouldn't that push developers to use older scripting languages (ie:HTML4/CSS2).
They are both draft specifications which are partially supported (to various degrees) in current browsers.
shouldn't that push developers to use older scripting languages (ie:HTML4/CSS2).
Leaving aside neither of those being scripting languages…
Using draft features can provide a better experience in some browsers, while the fallback is still acceptable.
JavaScript can sometimes be used to support browsers which don't have native support for a feature (although usually with a performance hit for those browsers).
Building around draft features provides practical experience with how those features work (and helps determine if there needs to be more work on the design before the feature goes into a final specification).
Building JS based around draft features gives common ground for different developers to aim for when building scripts to achieve a specific task. This increases the interoperability and ability to switch third party scripts.
No, we as developers need to push forward. Tools like Google Chrome Frame and Explorer Canvas will allow us to push the edge without too much worry about the browsers that can't keep up.
As #Rob states most of HTML5 is just HTML4 with defined error handling. Assuming you are not using the new parts of HTML5, there are no disadvantages and several benefits to using the HTML5 doctype now, including a better spec and a better validator.
A lot of CSS3 (rounded corners, drop shadows, RGBa, #font-face…) can be used as progressive enhancement on top of CSS2.1 rules. Conveniently this is also the CSS3 that is most implemented.
I think this question points to either a misunderstanding of HTML5 & CSS3, or a misunderstanding of underpinning concepts like progressive enhancement, the web trifle/layer cake, and the cascade.
For further explanation, please refer to: Do websites need to look exactly the same in every browser
What HTML5 can you reasonably expect to be able to use reliably cross-browser in the early months of 2010?
As the article above states, there is ExplorerCanvas until IE supports the <canvas/> tag.
There is also svgweb until IE supports SVG.
And Microsoft announced CSS3 support in IE9. As IE is pushed through Windows Update, I'm not afraid of using CSS3 and HTML5 right now.
shouldn't that push developers to use
older scripting languages
(ie:HTML4/CSS2)?
If that's your only question, then your answer is yes. "Most" developers are still using HTML 4.01 and mostly CSS2 for the reasons you stated: they're well supported on today's popular browsers. :D
See these:
should I switch to html5?
support of CSS3 among common browsers (not very good yet..)
I'd say, use the broadly supported options now but make sure that your designs degrade 'gracefully' with browsers that don't support these new features as they will just ignore them.
HTML5 is mostly backwards compatible with HTML4.01, and the same browsers will still be able to handle HTML4.01 elements. Like all properties in CSS, developers will be aware and careful of how the CSS3 properties they use will affect users who can't see them (typically IE users).