For media queries, does this work well in IE8?
<!--[if lt IE 9]>
<script src="css3-mediaqueries.js"></script>
<![endif]-->
I don't have any machine or VM with IE8 to test it. I have tested it in IE9 using IE8 compatibility mode. It seems to work until I refresh the page. Then the media queries don't work anymore.
The JS file is from Google http://code.google.com/p/css3-mediaqueries-js/ and enables media query functionality for older browsers.
Yes, it works on IE8. But the best approach would be to provide a fallback for all browsers that don't support mediaqueries.
To achieve it, you need Modernizr with MQ test and yepnope:
http://modernizr.com/download/#-shiv-mq-cssclasses-teststyles-load
(this bundle also comes with html5shiv, useful if you're using HTML5)
After including it in your <head> section, test mqs and load the fallback conditionally:
Modernizr.load([
{ test : Modernizr.mediaqueries , nope :'css3-mediaqueries.js' }
]);
Related
I have been driving myself nuts trying to get comment conditionals to work and I'm not having any luck can someone explain what I'm doing wrong?
Here is my code:
<!--[if IE 10]>
IE IS VERSION 10<br />
<![endif]-->
<!--[if !IE]><!-->
Browser is not IE
<!--<![endif]-->
<!--[if lt IE 9]>
IE IS LESS THAN VERSION 9<br />
<![endif]-->
What is happening is frustratingly inconsistant. When I load the page with the above code in IE8 it get the message "IE IS LESS THAN VERSION 9" Great right? No because when I load the SAME PAGE in IE10 I get the message "Browser is not IE"
Why does it think that IE10 is not an IE browser?! I've been crawling page after page but there doesn't seem to be any thing wrong with my code from what I've found.
CSS Solution:
If you want to apply only CSS base on browser then you can try:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* Put your IE-only styles here. Works for IS 10 & IE 11*/
}
JavaScript Solution:
IE 10 does not support conditional statements.
Conditional statements in Internet Explorer 10.. It will treat conditional comments as regular HTML comments, and ignored entirely.
Use a feature detection library such as Modernizr instead of browser detection.
found a solution on impressivewebs in this comment:
Here is Demo to test
The solution is:
if (Function('/*#cc_on return document.documentMode===10#*/')()) {
alert('IE 10');
} else {
alert('Not IE 10');
}
It
doesn’t need conditional comments;
works even if comment stripping compression/processing;
no ie10 class added in Internet Explorer 11;
more likely to work as intended with Internet Explorer 11 running in Internet Explorer 10 compatibility mode;
doesn’t need standalone script tag (can just be added to other JavaScript code in the head).
doesn't need jQuery to test
I'm surprised that no one has added in a css-only solution. If you just want to use css, then use a statement like this:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* Put your IE-only styles here. Works for IS 10 & IE 11*/
}
This way you don't have to rely on jquery, or any html markup. Just post it in the css and you are good to go.
Now, is it a hack? Likely. This depends on using the microsoft high-contrast tag, but since no other browser uses the ms tag then you should be good to go.
Finally, check out these pages for more info:
Blog Post
MS Site on the contrast tag
IE 10, 11 and upward no longer support conditional comments.
See this answer: https://stackoverflow.com/a/22187600/1498739
Try add the following meta tag near the top of the page to opt into Internet Explorer 9 behavior:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
This is because conditional comments has been removed in Internet Explorer 10 standards and quirks modes for improved interoperability and compliance with HTML5. This means that Conditional Comments are now treated as regular comments, just like in other browsers. This change can impact pages written exclusively for Windows Internet Explorer or pages that use browser sniffing to alter their behavior in Internet Explorer.
IE 10 dropped conditional comments.
You can do something similar in javascript like this:
if ($.browser.msie && $.browser.version === 10) {
// stuff here (like adding an IE10 class to the body or html tag
}
I am wondering how IE8 and below react to media queries in CSS.
I'm not looking for a solution for IE8 to render them. I'm just wondering if IE will just ignore them, or if IE will try to parse them.
Background story: we are building a responsive site, but since IE8 and below is rarely to be used on a smaller screen device, we hope IE just ignores media queries. This way IE8 (and below) users always see the "regular sized" version of the site, which is fine.
In short, you're exactly right.
IE8 does not support media queries, and will not parse any CSS contained within them.
Therefore, if you want to support IE8 in a responsive site, you should make sure that your default CSS which you want IE8 to use is outside of any media queries.
So the short answer is that what you said in the question is pretty much exactly right.
There are other considerations of course: IE8 isn't the only browser not to know about media queries; some older Android devices and other old phones may also not support them. If you need to support those devices, you may need to consider how to handle it. Fortunately there really aren't that many people browsing the web using those devices, so you can generally ignore them unless you have a specific need.
You also have the option of using a polyfill script like Respond.js, which adds support for media queries to older browsers like IE8. Note that this is a javascript library, so it will only run after the page has loaded, so there may be some delay and screen redrawing involved, which isn't pretty, but it is being used by a lot of sites and with good results, so you may want to consider it.
i.e 8 does not support media queries, but these poly fills which makes media queries support to i.e 8 and i.e 7. In fact its a good option to use else you need to show "regular sized" version of the site? its possible through some hacks i.e conditional comments of css link file and the way you write css code for i.e older browsers, try to override the styles with high css specificity.
note: if you are using html5 add another polyfill Html5shiv hosted by google.
use html5 and media queries like this:
<!--[if lt IE 9><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<script src="js/respond.min.js"></script>
<![endif]-->
Check for polyfills respondjs --- http://responsejs.com/ and css3 media queries --
https://code.google.com/p/css3-mediaqueries-js/
In order to use "regular sized" version.
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
learn some specs and tips,tricks log on http://www.pointmycode.com/
Using the Zen starter theme for Drupal 7, I've created this site: www.nettango.com. Everything seems to work fine and I've been figuring things out as issues come up. However, I've been trying to get IE8 to respect the responsive styles. Here's what I've done:
Site Settings:
Checked - Add Respond.js JavaScript to add basic CSS3 media query support to IE 6-8.
Checked - Add HTML5 shim JavaScript to add support to IE 6-8.
Checked - Add meta tags to support responsive design on mobile devices.
Which calls this into action:
<script src="/themes/zen/js/html5-respond.js"></script>
The script is being loaded, but it doesn't obey my mediaqueries.
After that, I replaced Zen's script with these:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Which had the same effect - nothing.
Here's a sample from my css file to show how the mediaqueries are setup:
#media screen and (max-width:1100px) {
html{font-size: 83%;}
#header {background:blue;}
}
Feel free to inspect the www.nettango.com site files. I've spent the majority of my day trying to solve this and have had no luck.
Thanks in advance for any help.
This is most likely because you are trying to use css3-mediaqueries while in development mode. Drupal 7 uses the #import rule for stylesheets in non-CSS aggregation mode.
From the css3-mediaqueires.js project summary:
Note: Doesn't work on #import'ed stylesheets...
Hence, css3-mediaqueries.js will only take effect when CSS aggregation is turned on (in production).
Appears the mediaqueries work on the live server, but not on our local server. Strange. Not sure why that is.
I also noticed you have to set firesass to false in your config.rb file. It wont work in IE8 if Firesass is enabled.
I'm creating a site using the Twitter Bootstrap, but I've discovered that the media queries don't work on anything below IE9 (unfortunately my target browser). This deeming the whole reason I'm using the bootstrap (for the responsive scaling grid) pretty useless.
I was considering the implementation of Andy Clarke's 320 and up responsive boilerplate within the bootstrap for the general better overall support on the IE side of things. (Or similar boilerplates)
Has anyone come across any examples of this being done online or on Github? (without the likes of SASS, HAML etc or being specifically created for a CMS). I have an idea of how I'm going to do it, but I'm not sure if it's a waste of time and I'd like to see if both tools can be pulled together successfully.
#fitzilla... I couldn't figure out how to add an additional comments, so I hope you find this.
I just checked my website in both IE7 & IE8 mode and both work. Do a view source on the initial page - you will see an additional hack for IE7 & IE8...
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Then check your includes against mine and see if they match. I believe the bootstrap-responsive has to be after the regular bootstrap css file.
In order for media queries to function in older browsers (IE7 and 8) you need to include a polyfill such as the respond.js in the body of your document to support those techniques. Just noticed that the 320andup framework uses the same polyfill so you can easily include it in your bootstrap project.
Here is a test page that you can use to test the queries on IE7 and 8:
http://chrisjacob.github.com/Respond/
Respond.js will make Bootstrap work for both IE7 & IE8 - at least using the developer tools (F12) of IE9. On my test site (http://ReactiveWebDesign.Net I include respond.js just before jQuery... the first included .js file
How many external IE Conditional Style-sheets do you use for Internet Explorer in your web projects?
See this page before to answer : http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
I usually have one for IE6, and one for IE7. I haven't had the need for an IE8 specific stylesheet, and having a separate stylesheet for all versions of IE isn't really practical.
<!--[if IE]>
global css for all IE's
<![endif]-->
<!--[if IE 7]>
css for specific version
<![endif]-->
yes you have two files but it's ok for me =) usually you just test global one, does this works nice in both versions, if not, then just put it in specific version css =)
btw with this script http://code.google.com/p/ie7-js/ I usually have no issues in ie7