I want to use HTML5 because it supports in Iphone also and I really liked its capabilities but what can I do if it is not fully compatible with all browsers? Specially IE family. So is there a way by adding some js script e.t.c. so that HTML5 and its js api work normally in IE also as it works on other browsers like chrome, firefox and opera e.t.c.? So that I can use it without thinking of browser compatibility issues. There are also many game engines in html5 but what if this is not supported major IE browsers. Or can some one tell that how much advantage can I take of html5 without thinking of compatibility issues?
Thanks in advance
You can use http://html5boilerplate.com/ together with http://code.google.com/p/html5shiv/ and you're good to go.
For some other cool features, like video in old IE, you need to use workarounds like Flash for video and Javascript libs for canvas.
Simply put, if the markup is valid in HTML 4, change the Doctype and it will work as HTML 5.
If you want to use the new elements like <article> or <footer>, you will need to include a small javascript snippet in order to register those new types.
document.createElement("article");
document.createElement("footer");
This will make these new elements usable and stylable like an ordinary <div> element
Polyfills let you use new HTML5 apis on older browsers. The Modernizr project keeps a list of good ones: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Related
I want to lay out a website with html5 semantic markup. I'm wondering; if I use html5 and style the sections like I do with html4, will it still render properly? I don't want to use really up-to-date html5 stuff like canvas, I just want to future proof this site.
You can do this by using HTML5 Boilerplate.
It comes with Modernizr (which includes html5shiv), and a lot more as well.
html5boilerplate.com
You can definitely do this with the use of a shim - this will allow you to use all the HTML5 semantic tags and will convert them for older browsers. Check out html5shim here: http://code.google.com/p/html5shim/
and just include it in your code how they show:
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
Any HTML5 specific tags (such as <nav> or <header>) will be ignored by the browser. The raw tags won't appear on the page (you won't get the word <nav> appearing or etc), but they simply won't do anything. Note that any styles applied to them also won't work - I found this out the hard way. If you want to style a nav bar, then don't style the <nav> tag; style the <div> or similar tag inside it.
As for HTML5 'utilities' such as <video> or similar, you're better off using a Javascript library that detects the browsers capabilities and uses the appropriate code. Jplayer, for example, allows you to embed video and audio that uses HTML5 if available, and Flash if not, while still using the same HTML interface.
If you want a really show-off feature like a Canvas-powered system, then it's best not to use this for the main area of your site, and just add a little note saying "Please upgrade to a modern browser to view this properly" if you can detect it's not working (which is possible by using var check=document.createElement('canvas') then checking whether the value is undefined.
Making websites that appear correctly in IE is a big problem. Is there any java script library to fix all CSS and other issues associated with Internet Explorer (7, 8, 9) and make it work like Google Chrome, Firefox?
use a doctype to make the page render in standards mode instead of quirksmode
Check out what properties in CSS you can use and what browser supports them
If you plan to use HTML5/CSS3 tech, then you should check the property and what browser is currently implementing these new tech
You can reset the CSS using a CSS reset to start off from scratch in your styles
If you need a stable ground to build on for your page, consider using a "base" style framework like Blueprint CSS's typography and forms CSS.
Use a toolkit like jQuery, Mootools, Dojo etc. This will speed up your JS development. But NEVER let JS do styling and style fixes. That's the work of CSS.
Ofcourse, never assume your design works at all. You must test on all available browsers, on the current version, 2 versions back, and on betas.
One important thing to remember is that different browsers respond differently to errors. So make sure your HTML and your CSS pass the W3C validator error free. That will go a long way in ensuring your site will look the same on different browsers.
Also, don't use quirks mode. Different browsers have different quirks!
If you are referring to some of the CSS3 styles, then I would suggest you look into CSS3 PIE.
Short answer is no but you can check which properties are not supported in IE with caniuse.com
http://selectivizr.com/ or http://css3pie.com/ will help you but they both won't work if js is disabled.
Read this if you're using html5 http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/
And what Joseph said.
You could always check the results with http://browsershots.org/ but it's just a screenshot so it won't give you an idea for example of how things behave when you click/hover on them etc.
The short and simple answer is yes, you can target the older versions of IE using a combination of Modernizr and HTML5 Boilerplate. Modernizr is now included in the HTML5Boilerplate package.
For more details of an HTML5Boilerplate approach to this:
HTML5 Boilerplate, IE7 & 8
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.)
I want to create a webPage using HTML 5 which will use all the attractive features of HTML5 i.e. audio, video, autofocus, placeholder, required, email, url, number etc. and the webPage should also have support for the browsers which dont support HTML5 like IE or some versions of other popular browsers such as Chrome, Firefox, opera etc.
How do I start working on that, as You might guess that this is just for the experimental purpose and I am supposed to it asap... so please suggest me any help, site or blog or tutorial or example.. I have seen hhtml5Doctor.com and diveintohtml5.ep.io ... the sites are of great help...
Use progressive enhancement. The diveintohtml5 already tells you how: http://diveintohtml5.ep.io/detect.html
html5boilerplate is a good start, it includes modernizr/html5shiv for barebones support of the new elements.
Other things may need javascript/flash fallbacks.
You can make use of the fact that browsers will ignore tag that they don't understand. So, for example, you can have an audio tag and inside that put an object tag for a flash audio player. The HTML5 browser will understand the audio tag and do the right thing, and ignore the child content. An older browser will see the audio tag and throw it away beacuse it doesn't understand it, but will render the child contents of the tag instead (the flash player).
swfobject and Modernizer are really nice tools... u must give them a try... I would personally recommend swfObject due to very good support.
What are the features of HTML5 that can be reliably used today?
Microsoft has some cool HTML5 demos, but what part of it is classic EEE and what is them catching up?
Example of useful feature I found on SO: pushState.
Please give more thought than a page with comprehensive lists of tags and attributes of HTML5.
#Jan Zyka's http://slides.html5rocks.com answer is a great example. (Thank you!)
What are you actually using in production code today?
There is a site called When can I use... which lists a variety of HTML5, CSS3, and other modern web standards, and gives an indication of which browser versions support it.
Whether or not you can use a feature depends a lot on who your users are. If you're targeting cutting-edge web developers, then you can likely rely on them having much later versions of browsers than if you're targeting corporate accounting. So, you will need to decide which browser versions you must support, and do appropriate progressive enhancement or fallback to support older browsers while introducing newer features that they don't support.
Some HTML5, CSS3, and other features can be used in older browsers using "polyfills," which are implementations of missing features using JavaScript, Flash, proprietary features, and the like. For instance, you can use <canvas> elements in older versions of Internet Explorer by using ExplorerCanvas, which implements the HTML5 <canvas> element using JavaScript and Microsoft's proprietary VML. The "When can I use..." site lists polyfills for many features, so check the polyfills checkbox if you're willing to use polyfills.
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5_Canvas)
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5_Media)
http://caniuse.com/
https://developer.mozilla.org/en/HTML/HTML5 (what is implemented in Firefox)
List of HTML5 features that are implemented in IE8:
<meta charset="UTF-8">
the contenteditable attribute (making any HTML element editable)
the autocomplete attribute on form elements
the onhashchange event
drag and drop
data-* attributes
List of HTML5 features that are implemented in IE9 (additionally):
<canvas>
getElementsByClassName
<video> and <audio>
the new semantic elements(<section>, <article>, etc.)
inline SVG
Note: all of the above are implemented in the modern browsers.
Check out http://slides.html5rocks.com/. It's really nice and updated regularly.
But don't try it in IE8 otherwise you might be disappointed ;-)
This page on the Browserscope website lets you choose versions of the same or different browsers (both desktop & mobile) & see how they stack up in supporting HTML5 features.