I'm running the full development version of Modernizr on my site, and while html5shiv is included in Modernizr, it doesn't seem to be running. If I add html5shiv as a separate script to the page, everything works great. The rest of Modernizr is working fine, too. Do I have to initialize the html5shiv in Modernizr somehow? The docs make it seem like it automatically runs.
Here's the code at the head of my page:
<script src="/assets_site/js/head.load.min.js"></script>
<script>
head.js(
{ modernizr: '/assets_site/js/modernizr.js' },
{ jquery: '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' },
{ placeholder: '/assets_site/js/jquery.placeholder.min.js' },
{ response: '/assets_site/js/jquery.response.min.js' }
);
</script>
And the separate html5shiv code that's been working where Modernizr hasn't:
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Dumb question, but I'm rather puzzled. Thanks.
2 things:
have you checked that the shiv is included in your
download? http://modernizr.com/download/
where in your document are
you loading modernizr.js? It may be necessary to load it in the head
rather than at the bottom of the page.
Ah, figured it out. The problem was that I'm a blockhead.
The html5shiv was loading fine in Modernizr, but I also had respond.js set to run inside that conditional IE snippet. When I removed the html5shiv script, I removed respond.js along with it, which caused the layout to go bonkers. I was completely ignoring the media queries part and assumed it was a html5 problem.
Mystery solved (though it's no mystery that I'm a blockhead).
Related
I'm testing my website on different browser and everything seems working perfectly fine until i test it on Internet Explorer (Browser Mode: IE8 and Document Mode: IE8 Standards) i have no idea actually on what's happening but when i switch to Document Mode: IE9 it will work :(..
Anyone experiencing this kind of issue? hopefully someone can give me some explanation or solution on this one thanks in advance guys
By the way i'm using wordpress on my website and i try to use the Respond.js plugin and still no luck :(
Use the below code which will include these JavaScripts for IE versions less than 9. Using the html5.js file you can also use HTML5 tags in IE8.
<!--[if lt IE 9]>
<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
IE8 doesn't understand media queries out of the box.
If you need this functionality in IE<9, one option is to use respond.js .
Another option is css3-mediaqueries-js
They are similar and I've had good success with both. Depending on the specifics of your site, sometimes one might work better than the other
Good luck!
I use Unsemantic for the first time, and I forgot to check my page on IE8. Here is the disaster : http://canapin.com/web/meteo/
Unsemantic is supposed to be IE8 compatible, but my page is messed up, and I can't figure out why.
Any idea? :(
As stated in its issue tracker, since IE8 doesn't support media queries, Unsemantic grid offers a fixed-width layout for it, through a separate css file inclusion:
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="./stylesheets/ie.css?1389034275" />
<![endif]-->
Note the conditional comment avoiding the separate css for mobile versions of IE (they are supposed to support media queries):
I suppose you can download the source of the separate css from here:
http://unsemantic.com/stylesheets/ie.css
So, if you accept to have an IE8 with fixed-width layout (and it seems very reasonable to me), you don't need a javascript fix ;)
Bye bye!
for IE8 and lower you have to include a shim, which comes with the Unsemantic files.
Include the following code in your head and you should be fine:
<!--[if lt IE 9]>
<script src="./assets/javascripts/html5.js"></script>
<![endif]-->
So, just point to the html5.js file and this should fix it. Let me know whether this worked for you.
Cheers, Marvin
I am trying to create a Hello World JS Metro app on Visual Studio 2011, using YUI3.
I´ve grabbed a local copy of YUI, added to a subfolder in the solution, and added a reference to yui-min.js on my default.html page:
<!-- TodoJS references -->
<link href="/css/default.css" rel="stylesheet">
<script src="/js/default.js"></script>
<script src="js/yui/build/yui/yui.js"></script>
and then at the bottom of the page I´ve added the following code:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
YUI().use("event", function () {
//some code will go here..
});
}, false);
</script>
When I run the code, I get a null ref error on YUI(). I do get intelissense working in Visual Studio (e.g YUI().add), so the reference seems to be OK, but YUI is not found on run time. Any tips?
I would try the steps outlined in How To: Create a Windows 8 Metro App with JS and YUI 3
I take it that you've got the issue fixed. However if you'd like to use the YUI components such as "calendar", "tabview" etc, you'll have to modify a few files that include innerHTML calls and wrap the added html content with toStaticHTML.
There were only a couple of files(dom-base.js, yui.js) that needed to be modified and most of the components worked fine(including the "datatable" and "charts" widgets), with the exception of the rich text editor. The nice thing about YUI is that it supports touch gestures for a majority of the components, for example panning "datatable" works correctly.
I know there is the conditional comments:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie9-only.css" />
<![endif]-->
to detect Internet Explorer 9, but what about Firefox 4? How do I load a style only for Firefox 4?
If you must detect the browser and version for FF4, the best answer is to use jQuery's browser() method.
However, I would agree with the comment by #Gareth McCaughan: if you find yourself having to do browser detection (for anything other than IE6/7 and possibly IE8), then it's very highly likely that you're doing something wrong. The fact that you're using it for IE9 in your question indicates that you're probably already getting it wrong.
All the modern browsers, including both IE9 and FF4 have excellent standards support, and a well-written page should render virtually identically in all of them.
If you do have something that renders differently in IE9 or Firefox 4 compared with other modern browsers, please specify what it is, because there may be a better solution than browser detection to get around it.
There is only one thing that I know of in FF4 which might need you to resort to this, and that's text-overflow:ellipsis, which is supported in all modern browsers except Firefox. See my earlier question on this topic here: text-overflow:ellipsis in Firefox 4? (and FF5)
You can't "detect" firefox in the same way. Conditional comments is IE only "feature". You have to detect it through user agent string on the backend. Or using javascript.
There are no conditional comments in FireFox to do this, if you really need to your best option would be to use jQuery (or similar) to load the relevant stylesheets.
$(document).ready(function() {
if ($.browser.mozilla && $.browser.version == '2.0') {
$('head').append($("<link>").attr({type: 'text/css', rel: 'stylesheet', href: 'css/firefox4-only.css'}));
}
});
I personally wouldn't recommend browser detection though, and you should be using web standards and feature detection if needed :)
Hi I'm editing a website that has been made compatable with internet explorer so it doesn't work in firefox.
Is there any way to add a firefox or mozilla stylesheet?
Thanks for you help
Judi
<!--[if FIREFOX]>
<link rel="stylesheet" type="text/css" href="/AEBP_Homepage_12887/css/firefox.css" />
<![endif]-->
You can't do anything as elegant as the Paul Irish solution for IE but you can create a FF specific set of definitions using:
#-moz-document url-prefix() { CSS BLOCK }
Before anyone starts jumping up and down screaming "THIS SHOULD NEVER HAVE TO HAPPEN UNLESS YOU DID SOMETHING WRONG" - it totally happens when we're talking about Firefox vs Chrome vs IE font rendering on a tightly constrained grid with a lot of left to right text justification.
You might also try out the CSS Browser selector:
http://rafael.adm.br/css_browser_selector/
This simple JS file allows you to append things like .gecko and .ff3 to your CSS.
* APPENDED - 2014 *
I want to actually append this because, two years later, the standard solution is to perform feature detection through modernizr.js instead of browser detection. "Firefox" is a very blunt instrument with all the versions hanging around the net. This answer still works, it's just not the recommended solution unless you very specifically need the browser, all versions, and nothing else.
One way to do this, with php is to look at the user agent and see what browser is it. This is what I use:
Ex:
if (preg_match('/Firefox|Chrome|Opera|Safari|MSIE 8.0/', $_SERVER['HTTP_USER_AGENT'])) {
link rel="stylesheet" href="one.css" type="text/css" media="screen"
}
else {
link rel="stylesheet" href="other.css" type="text/css" media="screen"
}
Also in the preg_match function you should enter the agents that you want.
Have in mind, if you don't know php, that the example I wrote needs editing and correct formatting.
No. The <!--[if IE]><![endif]--> syntax is Internet Explorer specific. It is a non-standard microsoft extension to CSS.
See conditional comments for more details.
No, conditional comments are entirely an Internet Explorer thing AFAIK.
However, you can create a conditional comment that IE will not parse and thus is for non-IE browsers only:
<![if !IE]>
<link rel="stylesheet" type="text/css" href="/AEBP_Homepage_12887/css/firefox.css" />
<![endif]>
this is however not valid HTML. There seem to be workarounds to make it valid. Check out the "Downlevel-Revealed conditional comment" paragraph in the Wikipedia article.