In order to keep my sites as fast as possible, I prefer loading .js scripts at the end of the document, just before the closing body tag, reserving css for the HEAD section. However, I've found that the html shiv code below apparently only works when instantiated in the HEAD section.
<!--[if lt IE 9]>
<script type="text/javascript"
src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
Anyone know of a workaround?
Google code is NOT a CDN. Don't link files in trunk.
Look at the response headers :
Cache expires after 3 minutes... it's the exact opposite of what we want from a CDN.
Please stop doing that.
Note
As João Cunha commented, you can find real CDN links on cdnjs.com: html5shiv. (respond.js can be found there as well)
Sample:
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<![endif]-->
The way the HTML5 shiv works requires you to put it in the <head> element. In fact, it says so in the project page:
To use this script, it must be included before the <body> element (i.e. in the <head>) but doesn't matter if it appears before or after the CSS - but for the sake of performance, it would make better sense to include the CSS first then this script.
This is so IE can recognize the HTML5 elements before it starts constructing the document body.
There is no workaround for this.
The lesson here is not to obsess over putting all your scripts at the end of the page. A CDN is pretty darn quick at serving stuff, so you shouldn't need to move this particular script.1
1 But as others have mentioned, since Google Code isn't actually a CDN, you should pick another source.
Related
We have a site that's running perfectly in all browsers except IE8.
What happens is that it falls into Quirks mode forcefully by the browser due to the reason unknown to me.
And yes, it breaks the site really bad.
What's more weird is that it adds somekind of JS on its own to the code (when checked through View Source.
This is what it's showing:-
<SCRIPT language="JavaScript">
<!--
document.cookie = "IV_JCT=%2Fapchannel-lop; path=/";
//-->
</SCRIPT>
<!DOCTYPE html>
<html lang="en">
<head profile="http://www.w3.org/1999/xhtml/vocab">
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
...
The <SCRIPT> in the start is not added by me and is being added by IE8.
I have tried the following
First line <!DOCTYPE html> and then right after <head>, I wrote <meta http-equiv="x-ua-compatible" content="IE=Edge"/>
Adding respond
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Nothing works.
Any idea how I can stop this and just force it to load with IE8 standard mode?
Thanks
The problem is that you're adding the script before the <!DOCTYPE>.
The doctype must be the very first thing on the page, otherwise IE will go into quirks mode. (even blank lines at the top of the page have been known to affect this)
Move your script somewhere else in the page, ideally inside the <head> element, and ensure that you have valid HTML markup, and the problem will resolve itself.
IE 8 will not mangle HTML like that. Something else must be responsible.
From AJAX techniques within a Tivoli Access Manager WebSEAL Environment:
Junction cookies
Issue
When you create a WebSEAL junction using the -j option to enable
junction cookies, special HTML code is inserted at the beginning or
end of the HTTP response that sets the correct cookie path in the
browser (the location determined by the -j option). Generally, the
returned page will look similar to that in Listing 11.
Listing 11. Example of junction cookie insertion
<SCRIPT>
document.cookie = "IV_JCT=%2Fjunction_name";
</SCRIPT>
<html>
<title>Example page </title>
<body>
Rest of the document...
.
.
.
That's a pretty specific bit of JavaScript (Debugging tip: When weird variable names show up in your code and you don't know where they came from: Type them into Google), so its a reasonable bet that this is what is responsible.
It doesn't sound like there is a work around, so your options seem to come down to:
Stop using IE 8. It is unsupported by Microsoft and no supported operating system that can run it can't be upgraded to a newer version of IE (they could also be upgraded to a non-IE browser).
Stop using WebSEAL (or at least WebSEAL junctions using the -j option) since it invalidates your HTML.
Is there a way in JAVASCRIPT (not jquery) to stop navigating a webpage in IE8 ?
( if i use jquery, a error appears : SCRIPT5009: jquery is not defined.).
In a company is still using IE8, They want to left behind little by little, so they need to send an ALERT when the user start navigating an specific webpage.
Note: Works perfectly in IE9 and Chrome
Regards
You can put scripts inside tags like this. These tags say run these scripts on versions of Internet Explorer that are below 9. So, you could write a script that posts a notice on your page about using outdated browsers.
<head>
<!--[if lt IE 9]>
<script src="outdated-browser-notification.js"></script>
<![endif]-->
</head>
We are building a website for a client but cant seem to find the bug which causes the images under the slider not to load.
There are some posts going around about the .load function not properly working in IE.
Does anyone have an idea?
http://mbx.web-flight.nl/
Greatly appreciated.
You're problem is Internet Explorer Quirks Mode. You must define a page header in such a way that IE will load the site in standards mode. Switch IE to standards mode manually and you will see the images load.
Try the following on the page to declare DOCTYPE.
<!DOCTYPE html>
Or try to Force IE to use the latest render mode
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Learn more about Quirks mode here: http://en.wikipedia.org/wiki/Quirks_mode
Ultimately the BEST solution is to address the problem at the server level if you have access to do so. See http://msdn.microsoft.com/en-us/library/jj676913%28v=vs.85%29.aspx To learn about configuring web servers to specify document modes.
This is what I see. Does anyone see the same as me. If not, I wonder if it is related to Quirks mode.
On IE 10 for me works fine, but in the IE 9 and lower not works.
This could be happens because the IE 9 don't have some elements of HTML5.
I think that you put this in your file will woks.
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
Made a test.
I hope help you.
Link for downloads files
https://code.google.com/p/html5shiv/
After allot of searching the bug had to do with the imagesLoaded function which was being used which is part of:
http://isotope.metafizzy.co/
IE does not seem to play nice with it so I made the carousel to initialize on window’s load event (jQuery(window).load) instead of “imagesLoaded”.
Should the reference to the Modernizr JavaScript file be in the head of the page? I always try and place all scripts on the bottom of the page and would like to preserve this. And if it needs to be in the head, why?
If you want Modernizr to download and execute as soon as possible to prevent a FOUC, put it in the <head>
From their installation guide:
Drop the script tags in the <head> of
your HTML. For best performance, you
should have them follow after your
stylesheet references. The reason we
recommend placing Modernizr in the
head is two-fold: the HTML5 Shiv (that
enables HTML5 elements in IE) must
execute before the <body>, and if
you’re using any of the CSS classes
that Modernizr adds, you’ll want to
prevent a FOUC.
I would argue no: every script you place in the <head> will block rendering and further script execution. The only thing Modernizr does which must happen in the <head> is the integrated html5shiv, which hacks HTML5 tag support into Internet Explorer 8 and earlier.
I was testing this yesterday and found this to be fairly significant – on the site I work on, which is already fairly well optimized, adding that single script to the head delayed my load-time by ~100ms in IE9, which doesn't even benefit from the shiv!
Since around 90% of my traffic comes from browsers which natively support HTML5 and I don't have core CSS which requires the modernizr classes to display correctly on the initial render, I'm using this approach which places the html5shiv into a conditional comment and loads modernizr without the integrated shim:
<html>
<head>
…
<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
…
<script src="modernizr.custom.min.js"></script>
</body>
</html>
Paul Irish is now suggesting that for > 75% of sites, there is no benefit to placing Modernizr in the head.
Move Modernizr to the bottom
It has more potential to introduce unexpected situations, however it's much better for the user to just have no scripts up in the head at all.
I bet >75% of sites dont need it in the head. I'd rather change this default and educate the 25% than watch as we slow down all these sites.
https://github.com/h5bp/html5-boilerplate/issues/1605
How about using IE conditionals in a slightly different way?
What does everyone think of this solution:
Within the <head></head> tags:
<!--[if lt IE 9 ]>
<script src="/path/to/modernizr.js"></script>
<![endif]-->
</head>
Before the end of the </body> tag:
<!--[if gt IE 8]><!-->
<script src="/path/to/modernizr.js"></script>
<!--<![endif]-->
</body>
This would result in Modernizr loading in the head for IE8 and below, and it will load before the body for any other browsers.
Open discussion on pros and cons welcome in the comments.
I can't seem to get modernizr to work on my website. I have added the javascript files into a folder and called to them. I've also added no-js to the html but still nothing.
When I view source, it doesn't populate the html like it should.
I'm not using it for css3 elements yet so I don't need any fallback styles, I just want to be able to use the more semantic tags like header, nav, footer etc...
This is my document code:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset=utf-8>
<title></title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<script type="text/javascript" src="/js/modernizr-1.7.min.js"></script>
Ran into this problem myself. Make sure you view the page during run-time. When you view the page source, js calls are not executed and it will not replace the no-js. If you are using Chrome then use their element inspector.
It is most likely a path issue. Try temporally replacing
<script type="text/javascript" src="/js/modernizr-1.7.min.js"></script>
With
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/modernizr/1.7/modernizr-1.7.min.js"></script>
Or it could be working, but it's not obvious. Keep in mind you don't see the Modernizr classes when you view the source, you need a tool like Firebug on FF or the Developer Tools on Chrome to actually inspect the post-javascript code.
An additional test would be doing something like...
.borderradius body {
background: #c00;
}
And if the background is red, then Modernizr is running.
You don't have any styles here but maybe you haven't defined your HTML5 elements as display: block? Modernizr doesn't do that by itself and so you still won't get the results you expect if you don't add that into your CSS.
For the record I had this issue too. After a long time testing I found that removing the 'Add CSS Classes' option from the custom build was causing it for me.