I was wondering this while I was learning some front-end web development. But does anyone understand what the point of the menu tag is for html if the tag is not supported in all major browsers? When I was inspecting some web page I saw its use then looked on the w3schools website for more info about it, and it states that there its not supported in any browsers.
In this specific case:
The menu element was introduced in HTML 3.2, did not see wide take up from browser authors, was deprecated in HTML 4 and removed in HTML 5.
It has no place on the modern web.
In more general terms:
Most features of web standards have limited support from browsers when they are first introduced. Often their effects can be replicated in browsers that do not support them using CSS and/or JavaScript.
Sometimes take up of a feature is so poor that it gets removed from the standards again (although modern approaches to writing standards mean they will tend to live in a draft state until it is clear if the support is going to be good enough).
It is up to the page author to decide when there is sufficient client support for a feature for it to be worth using, and how much effort they wish to go to in order to make it work in older browsers.
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).
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).
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.
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).