I often see people suggesting I include the HTML5 shiv JS script to make HTML5 work in Internet Explorer but I can't find a clear explanation for the most common use cases this will cover.
Might someone give common scenarios of why one would need this JS script?
Also, does it need to be in the <head> or can I put it with the rest of my JS at the bottom of the <body> tag such that it doesn't block the UI thread?
Internet Explorer prior to version 9 refuses to apply any CSS styling to HTML elements it does not recognise, this includes the new elements brought in by HTML5. By creating the elements through the JavaScript DOM it suddenly and magically realises that the elements should indeed be styled.
You can write a naive and simple script that loops over an array of HTML5 tag names you want calling document.createElement(tagName). This may work for you in most cases, however, printing HTML5 pages in IE and adding HTML5 content through innerHTML will cause you further problems at which point it would be an idea to switch to the shiv.
HTML5 shiv can, to my best knowledge, be placed in the head or after the body tag if you prefer. I would recommend using conditional comments so that only IE loads it.
Related
It appears that
document.createElement('iframe');
automatically creates head and body tags.
I've tested this in Firefox,Chrome and IE9+.
Is this the standard or other browsers might not react like this.
I'm asking this because I wanna know if I need to check if those tags are created before inserting some elements in them. If I can avoid the check condition I'll be more than happy because I want to keep my js code as light as I can.
As far as I now, it's not standard, but supported by all common browsers. The standard only defines that there is a HTML tag, so
document.documentElement
is supported.
You can check for:
document.documentElement.children.length > 0
I have heard that HTML5 uses some sort of javascript within... Does CSS3 also does that, I don't think the transitions can work otherwise..
Reason of asking, I don't want any javascript in my CSS part.. I am trying to build a pure css library like pureio and bootstrap, they both contain javascript also although..
HTML5 doesn't have any javascript within as such.
Some new elements when implemented by the browser may however have some of the HTML5 features rendered using JS or at least provide a JS API as per specification.
Like any other HTML version prior that, otherwise we wouldn't be able to bind events or control HTML elements via Javascript.
And for CSS no, of course not there is no JS dependencies. How would CSS work when JS is disabled?
And remember browsers have access to the all computer power. It wouldn't make a lot of sense to ignore that and do everything in Javascript.
I'm having issues with IE8 not styling certain HTML5 elements with Backbone.js (0.9.1); the issue only arrises when using an HTML5 tagName for a View, and then appending the view's element.
I'm using modernizr and have the appropriate display:block css, and I can add other HTML5 elements using jQuery's html(), append(), etc, so this makes me think it is a Backbone specific issue.
At this point I'm debating between working around this and just never using HTML5 tagNames, or no longer using Backbone, neither of which is ideal. Any suggestions?
Here's the simplest example of the issue:
$(function(){
var test = Backbone.View.extend({ tagName: 'section' });
var section = new(test);
$('body').append(section.el);
});
Edit:
For some reason rolling back from Modernizr 2.5 to 2.0 fixed the issue for Views with HTML5 tagNames, but now I have to use innerShiv when appending template content into elements. Not sure why it didn't like 2.5, but it works for now.
Going to look into it further and see if I can narrow down why this is happening, and see if a better solution can be found.
From my experience with using tag names that aren't standard in non-modern browser (I'm looking at you, IE), you must use declare your own namespace and use your "custom" tag along with your namespace.
Windows Internet Explorer's support for custom tags on an HTML page
requires that a namespace be defined for the tag. Otherwise, the
custom tag is treated as an unknown tag when the document is parsed.
You can find the source article here in MSDN
Of course, declaring your own namespace is already non-trivial when it comes to writing html. In fact, it's unheard-of before I encounter this same problem. Needless to say, the implications is that you'd have tags that look like <namespace:section>.
Your solution would be to either stay away from the new and fancy HTML5 html tags if you are to support IE8, or you should customize your code to use different tag for IE8.
An alternate solution which I remember reading was to use classes with the same name as the new tags you intend to employ. For example, treat <div class="section"> the same as you would treat <section>.
I am building a web application which is supposed to be (on the development level) highly standardized.
To accomplish this i want to use custom namespace tags which in the sourse code appear as they do, but are modified by javascript depending on what they are.
For example:
<script type="text/javascript">
<!--
alert($('sy\\:icon').attr('location'));
//-->
</script>
<sy:icon id="icon1" location="/path/to/icon"></sy:icon>
Now i have tested this and it does work. What would happen in this example is the entire tag would be replaced by javascript with one or more tags and styles which are valid in html.
My only concern is how different browsers of various versions would respond to an invalid tag, even though it is about to be immediately replaced.
For the record, i am aware that using something like a <div> with a specific class for reference is the normal approach, however using a custom tag would both save space in the source code, and look a lot nicer in my opinion, im just concerned with the implications, if any.
You should declare your custom namespace in the <html> tag as described here. That blog author notes that it's cross-compatible between the various browsers, with IE support back to IE7, so you should be fine.
i am using jQuery to dynamically add content
$("#articles").prepend('<article><header><p>info</p><h2>You are using Internet Explorer</h2></header><p>It is recommended that you use a modern browser like Firefox, Chrome or install Google Chrome Frame to experience better performance and advanced HTML5 and CSS3 features.</p></article>');
but the HTML i got was
notice the />
jQuery is using innerHTML, which doesn't always work with HTML5 elements even when the normal ‘shiv’ is in use. You would need another extra workaround hack, eg this.
I really don't think the proposed new HTML5 elements are ready for real-world use. They get you no practical gain yet, aren't even finalised, and cause a bunch of problems (working around which can be fragile and cost performance).
They don't really add anything semantic to your warning markup, and you're only ever showing it to IE anyway—the browser that can handle them least well of all.