Isn't HTML5 is supposed to work in IE9? It’s not working as expected for me.
Here is my HTML5 code:
<!DOCTYPE html>
<html>
<head><title>
Dripel - Welcome
</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>Welcome to Dripel</header>
<section id="main">
I am under development. Please check back later.
</section>
<footer>
</footer>
</body>
</html>
You can view it at http://www.dripel.com/.
In IE 9, the <header> and <section> elements are being displayed as inline. Note that I am not using any CSS at this time.
Any idea what’s going on?
According to Dive into HTML5, the final version of Internet Explorer 9 won’t have this problem.
So I reckon you’re seeing this because IE9 is still in beta. You’re right, you shouldn’t see this when it’s released.
It’s probably worth including the explicit display: block for HTML5 elements anyway. You (usually) never know when someone’s going to look at your code in a pre-HTML5 browser.
This is true for other browsers too, not just IE. The same behavior can also be observed for Firefox 3.6.
Since HTML5 is only a working draft, the browser vendors have not yet created a default stylesheet for these elements, so by default elements are displayed inline.
Use a reset stylesheet that gives these elements display: block if you want to use them, like:
article, aside, footer, header, hgroup, nav, section {
display: block;
}
Copied from Chrome's User Agent CSS :)
If you want more info, well then - read the beta release notes on HTML5. Nowhere does it explicitly state that IE9 "support" those HTML5 element. Your concept of support is also ill-defined here - what do you mean support? A UA stylesheet like the one above? Support for generic unspecified elements? (A feature which IE9 have, so you don't need a small script to create the elements prior to using them.)
The HTML5 specs only talks about the semantics of each of these elements, and nothing on how browsers should display them. So do you expect a browser that "support" HTML5 do?
IE 9 supports some of HTML5. So do all of the other browsers. HTML5 is not yet finished, and IE 9 is not yet finished, and no browsers supports all of HTML5. For instance, no browsers that I know of support <style scoped> or <iframe seamless> yet.
I wouldn't expect any browser to support all of HTML5 in one release. HTML5 has a lot of new functionality, and it is still in a state of flux. Browsers are implementing features one at a time, sometimes with prefixes to avoid incompatibility later, sometimes in beta or development versions so that the design can be tested out before a wider release. It's not possible to write a perfect spec all in one go, and then have everyone implement it all in one go; instead, features are implemented experimentally, the spec is written around them, things are fixed, the spec is updated, and so on, until everyone is happy that it's all pretty good and is implemented in compatible ways between different browsers. It will be quite a while yet before all of that happens for all of HTML5.
Related
I found out that I need to make use of Respond.js if I want to make Bootstrap work in IE8. Once included, everything looks well, except one thing. It seems like HTML5 elements style won't adjust (even when editing with inline-code when using developer tool in IE11 (with emulation on IE8) within my local html file, but when I do the same on a Bootstrap example, it seems to work perfectly fine though).
Changing the HTML from:
<footer>...</footer>
To
<footer style="BACKGROUND-COLOR: tomato">...</footer>
works within the example page (while editing within the browser), but does not work when I open my local file and do the same thing.
Why can I add styling to a footer on the HTML5 elements within the example page but not on my local file? Am I missing some file or do I need to do something differently? How can I make my <footer> styling work?
One suggestion I would do is making it just a <div> element with a class .footer but this is not the way it looks like within the Bootstrap example, so I do not know if this is the right way to fix the problem I am experiencing.
HTML5 has a whole bunch of new elements for adding semantic meaning to your pages. For instance, nav signifies a navigational menu.
Since IE8 doesn’t know anything about these, it won’t recognize styles applied to them via CSS. Fortunately, there is an easy way to fix this by simply appending missing elements to the DOM of the page:
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->
Obviously you don’t have to define every HTML5 element in existence, just the ones you actually use. By the way, this code uses conditional comments, a feature introduced by Microsoft to specifically support differences in browser versions.
Another important thing to point out is that HTML5 elements are displayed as block by default, but IE8 doesn’t know that either. To mitigate this issue you could either specify display: block; when styling specific elements or do it wholesale in your CSS:
header, nav, section, article, aside, footer {
display:block;
}
Note that if you’re using an HTML5 aware reset stylesheet (like this one), this is probably already taken care of for you.
Other way to use js liberaries
There are work-arounds in the form of the html5shiv and Modernizr polyfill scripts. Use one of these libraries to add support for HTML5 tags to old IE versions.
I am building a web app for use on PCs. What are the HTML5 tags to stay away from to prevent compatibility issues with Browsers like IE8 and above?
Note: Most questions are 1-3 years old on this subject.
You asked what HTML5 tags to stay away from.
Well Some of the tags from HTML5 from my knowledge were made for semantic reasons. like the following for example.
<article> <section> <aside> <nav> <header> <footer> ..ect
These are almost fine to work with, and just require a bit of CSS eg. display: block; to work normally in most browsers, though in older browsers ie. Internet Explorer you are required to create a element in Javascript in order for it to be compatible.
Here is an example.
document.createElement('article');
Would set the <article> element up for use in older Internet Explorer.
For more advanced HTML5 tags that require Javascript functionality to work are some like the following.
<audio> <video> <source> <track> <embed> And most importantly <canvas>
These elements are harder to support/shiv in older browsers. Although I have included a link to cross browser polyfills at the bottom, although I haven't personally investigated them.
So I would say that any element that doesn't require Javascript functionality are perfectly fine to use with a tiny bit of cross browser support code.
If your targeting >IE8 then you should be fine if you use a shiv.
What do I call older browsers? < IE9
Browser support for HTML5 tags today is.
<section>, <article>, <aside>, <header>, <footer>,
<nav>, <figure>, <figcaption>, <time>, <mark>
Are not supported by Internet Explorer less than 8 but can be fixed like this.
CSS:
section, article, aside, header, footer, nav, figure, figcaption{
display: block;
}
time, mark {
display: inline-block;
}
Javascript:
var elements = ['section', 'article', 'aside', 'header', 'footer', 'nav', 'figure', 'figcaption', 'time', 'mark'];
for( var i = 0; i < elements.length; i++ ) {
document.createElement(elements[i]);
}
And <audio> <video> <canvas> are not supported in < IE 9
The <embed> element has partial support in > IE8
You should also look into this tag.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
This meta tag tells Internet Explorer to display the page in highest IE mode available, instead of going into compatibility mode and rendering the page as IE7 or 8 would do. More info on that Here.
HTML5 Helper Links
For a Kick Start you can check out HTML5 BoilerPlate
For browser compatibility support tables you can check out - http://caniuse.com/
HTML5 Shiv - https://github.com/afarkas/html5shiv
List of HTML5 Polyfills - https://github.com/Modernizr/Modernizr/wiki/...
Update
As mentioned in a comment
Be careful with the meta tag X-UA-Compatible. If you use something like html5 boilerplate that has conditional comments surrounding the element (this also happens with the html5 doctype IIRC), you may run into problems with IE9 forcing itself into IE7 standards mode even with the tag. IE strikes again
You may want to look into this, I have nothing to back this up at the moment.
Generally, there are issues.
I've been told that your question is worded to ask about HTML 5 tags but it is also useful
to look at the new features in light of any Javascript you might find or write.
In practice, the recommended method is to test for the existence of the feature
rather than a specific browser. The Modernizr script may be helpful in this regard, but there are also reports of undetectable features in HTML5.
Some features like local storage go back to IE8.
Others, like FileReader, require IE10/Firefox21/Chrome27
For current information, try http://caniuse.com
Write HTML 5 like you normally would and use Shims to ensure compatibility with older browsers. You only need to be careful with Javascript APIs really, because those are hardly shim-able. If you're trying to stick to baseline HTML 4 for compatibility, there's no point in using HTML 5.
For a quick comparison of what tags are available in what browsers, and what level of support for each tag, html5test.com is a great resource.
You are looking for an HTML5 compatability matrix
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
Also, for the best cross browser compatibility, i suggest you use this reset.css created by Eric Meyer.
http://meyerweb.com/eric/tools/css/reset/
This makes the elements that differ from a browser to another, to behave the same in all browsers.
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.
I have read a lot about adding HTML5.js for IE7/8 support. Even though the documentation says that adding html5.js just causes IE7/8 to not ignore HTML5 tags and apply the styles.
I am really confused as to what it does, like does it have any impact on CSS3 styles working on IE OR it just causes CSS to be applied to HTML5 elements.
Could i please get to to see an easy example with/without HTML5.js on IE.
html5.js works by creating polyfills via JavaScript that specifically enforce certain rules of html5 elements in browsers that do not support them. but even after the js turns them "on", you are still going to have to target them via css to enforce styles. check out this fiddle in any browser that doesn't support html5, then uncomment out the script element and view it again. you'll see what i'm talking about http://jsfiddle.net/TR8z5/
If I recall correctly, without html5.js, older web browsers will just ignore tags it doesn't recognize, essentially showing nothing. With html5.js, older browsers will recognize html5 tags and will therefore be able to render and apply CSS.
Nope, I guess not.
CSS3 will not work on older browsers, no matter what you do.
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