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.
Related
What does <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> this and other similar IE code lines mean in an HTML5 document?
If I have to make certain css features compatible to IE8 or lower version, does above mentioned code line or html class as mentioned within it helps?
If #2 answer is 'No', then should I use conditional IE stylesheet as mentioned in this article -- http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
If #3 answer is also 'No', then what should be done to make css features compatible in older IE versions. Any reference website / demo would be a great help!
This is a conditional IE statement. They are only read by IE. Any other browser will read them as any normal comment, note the <!-- and --> at the beginning and end of the statement respectively. IE has special code that recognizes this comment and uses whats inside the comment as regular HTML. In specific to your pasted code above, the IE conditional statement is applying a class of ie6 to the HTML tag. In this way you can provide IE only fall backs for certain elements by first referencing that class in your css selector. For example .ie6 #header {} will only apply to the header if the IE6 class is present, and that class will only be present in IE6 because of the conditional statement.
Following the same style as above, you would use this bit of code: <!-- [if IE 8]><html class="ie ie8" lang="en"><![endif]-->
You could use an IE stylesheet if you so choose, either way you would achieve essentially the same result. I personally would use the above method with the class on the HTML tag, and then a separate css file that is loaded normally called ie.css. Inside this file, you would have nothing but IE styles. Note that with this method the stylesheet does not need to be setup in a conditional IE statement. It's only real purpose in being a separated stylesheet is for organizational purposes. I would also only do this if you have a moderate to large amount of IE conditional code. If you have minimal IE fall-back code, simply include the code next to your the code it is fixing inside your master stylesheet.
You can also expand IE support to a certain extent using things like Modernizr and Selectivizr
All the examples you've discussed in the question are aimed at detecting whether the browser is IE (and the IE version), and then trying to deal with it from there.
Please note that this is not considered best practice.
If you need to handle browser differences and missing features, then the best way of dealing with it is to use a technique called feature detection, rather than browser detection.
What I recommend is to look up a library called Modernizr. This is almost certainly a better starting point for what you're trying to do than any of the ideas in your question.
For fixing specific browser features, The Modernizr team also provides a list of additional libraries called "polyfills". Work out which features you need to support, and look through the list to find a polyfill script that does what you need. Some of them are best loaded via Modernizr; others can be run on their own.
I'd avoid doing any browser or version detection, unless it's absolutely a last resort.
One thing to bear in mind when using polyfills: There are a lot of browser features that are missing in older IE versions. There are also polyfill scripts that will help you implement the majority of them. However, please don't think that you can simply include every single polyfill and turn old IE versions into a more modern browser.
The simple fact is that old IE versions are old and slow. Adding polyfills will make them slower. You should carefully consider each feature, and decide whether it's really necessary to polyfill it. Will the site still be usable without it? In many cases you will be better off simply letting old browsers work without certain features.
As #FDL pointed out, use a conditional stylesheet if you've got a moderate amount of styles to apply various versions of IE.
For minimal positioning tweaks, I use html classes (like ie8 or ie9) and just drop the modifications into my master stylesheet.
For example:
.filter-bar .item { float: left; vertical-align: top; }
.ie8 .filter-bar .item { position: relative; top: 2px; } /* fix a gap in IE8 */
1) It means if you have Internet Explorer version 7 and below, include this class inside the html tag
2) Yes, you can have css like this:
html.ie.ie6 .someClass {
color: red;
}
This will only get applied if IE is version 7 and below
3) You can do that too. Sometimes you need to combine both
4) N/A
I'm trying to use semantic tags on my page (http://toytic.com/class/html5_docStructure.html ). I expected them to behave like normal markup tags without any styling information (e.g. display block.
However when I look DOM structure in the IE7 debugger, I see that the tags are imidatly closed and all style attributes are ignored.
I know their are libraries like modinizer, but what I have read so far, they just use the CSS trick, where they set the following CSS attribute, so the browser interprets the semantic elements like normal divs:
header, nav, article, footer, section, aside, figure, figcaption {
display: block;
}
what am I missing?
Old versions of IE that do not understand the new tags in HTML5 require a little JavaScript trick, called a 'shiv', to enable them for display and styling. Setting the CSS to display: block alone will not do the trick.
The HTML5Shiv can be included by itself, or packaged with a wider library such as Modernizr (which you really should be using in any case).
HTMLShiv: http://code.google.com/p/html5shiv/
Modernizr: http://modernizr.com/
You have to use modernizr plugin to give the older browsers fallbacks for HTML5. Just embed it in your head tag script after downloading the minified version. You can also use HTML5 shiv.
I also recommend when you do websites, boot it up with initialzr. It'll give you all the dependencies you need.
Modernizr also uses something comparable to HTML5shiv which adds the elements to the DOM as well. Check out what happens in that JavaScript.
Same thing happened to me. Make sure that "html5shiv v3.6" is checked when you download Modernizr.
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.
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.