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.
Related
<!DOCTYPE html> specifies the page as html 5. But, when I used <center>, it can still center the content. Why <center> can still work in html 5 as I read from http://www.w3schools.com/tags/ that <center> is supposed to not work?
The tag is obsolete since HTML4. But it is still supported in some browsers even now. MDN advices to not use it
Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
Use css text-align: center instead.
It's not part of the specs anymore but it's up to the browser whether or not they still support the tag. Most browsers will to make sure older code still works.
But, since it is deprecated you should not use it in new code. Go with CSS to get your stuff centered.
Browsers may still support it and at some point they will not. Take at look at this page to see if you can use or should use an html element, css property and more: http://caniuse.com/#search=center
Since HTML4, <center>, and other presentation tags (such as <blink>) has been deprecated from HTML specs, and removed in HTML5 specs.
Those tags should be replaced by other content tags (the most abstract one being <div>) in addition to CSS for the styling they did provide.
But since those tags don't lead to any security issue, (contrary to <frame>) they may still be supported by browsers for compatibility issues.
Even if today, google's main page still uses it, you should prefer to use an other content tag with proper CSS styling.
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.
<!DOCTYPE html> specifies the page as html 5. But, when I used <center>, it can still center the content. Why <center> can still work in html 5 as I read from http://www.w3schools.com/tags/ that <center> is supposed to not work?
The tag is obsolete since HTML4. But it is still supported in some browsers even now. MDN advices to not use it
Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
Use css text-align: center instead.
It's not part of the specs anymore but it's up to the browser whether or not they still support the tag. Most browsers will to make sure older code still works.
But, since it is deprecated you should not use it in new code. Go with CSS to get your stuff centered.
Browsers may still support it and at some point they will not. Take at look at this page to see if you can use or should use an html element, css property and more: http://caniuse.com/#search=center
Since HTML4, <center>, and other presentation tags (such as <blink>) has been deprecated from HTML specs, and removed in HTML5 specs.
Those tags should be replaced by other content tags (the most abstract one being <div>) in addition to CSS for the styling they did provide.
But since those tags don't lead to any security issue, (contrary to <frame>) they may still be supported by browsers for compatibility issues.
Even if today, google's main page still uses it, you should prefer to use an other content tag with proper CSS styling.
I have in my project some html5 tags as header , footer, etc... Some of them are added dynamically with jQuery .clone(...) . The problem is that IE<8 doesn't style those html5 tags added dynamically. I am using Modernizr and html5shiv but the problem still there. Does anyone know how to fix that? I've been thinking in remove all the html5 tags from my markup but I don't like the idea...
Thanks!
The problem may be that your shiv code is being added after your styles. You'll need to arrange your javascript to download and execute the shiv, or Modernizer, before anything else.
This was probably due to html5shiv not supporting html5 tags added to the document dynamically. Initially innerShiv was created to address this issue. See: the article about inner shiv. These days this patch is already integrated to html5shiv so you may simply need to update the html5shiv library that you are using.
I'm building a responsive design with HTML5.
At first I used Modernizr and the CSS reset of HTML5 Boilerplate, but of course the html5 elements' classes and ids were not recognized by IE<9.
What I need most therefore is full support for html5 elements, and preferably a good display fallback for images with "max-width", without using CSS hacks.
Which of these options should I follow?
Include html5shiv and ie9.js with conditional comments
Include only ie9.js for all browsers
Forget about ie9.js
Thanks a lot!
html5shiv and ie9.js does completely different things. html5shiv resolves a bug in older versions of Internet Explorer where arbitrary elements (such as those introduced by HTML5, which the browsers predate) are not stylable by CSS. ie9.js attempts to fix certain rendering bugs in older versions of IE and add support for newer CSS3 features. The question of which one to include comes down to what you mean by:
full support for html5 elements
Do you need to use these elements and support older versions of IE? Then you'll need html5shiv. Do you need to use CSS3 properties and selectors? Then you'll want ie9.js. Including ie9.js solely to add support for max-width however is not a good idea.
And one more thing:
Include only ie9.js for all browsers
should never be an option - doing this will only adversely affect your page's performance on other browsers.
Modernizr includes the shiv code to add the new tags to IE<9. Make sure you add the link to it in the head section, before other javascript links/code.
Just start from the index.html and other files file provided in HTML5BoilerPlate and add your code in.