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/
Related
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
I have this code in my main CSS file but when I print preview it isn't hiding the contents.
#media print {
#nav,
#footer,
#flash { display:none; } }
When I add a linked print stylesheet it works as it should.
Any ideas?
Thanks.
What browser are you using? Its probably because the browser doesn't support this way of declaring print styles.
I would advice to stick to the best practice (if you can) and use
<link rel="stylesheet" media="print" href="print.css" type="text/css" />
More info here.
Just make sure you do not have the media="screen" attribute in your link to your stylesheet. That will cause it not to apply when printing.
either add 'print' to the attribute media="screen, print" or leave the attribute off completely
see http://lawrencenaman.com/optimisation/print-media-queries-not-working/
"The browser support for media queries is surprisingly decent. For the queries in this particular demo (utilizing min and max widths), current version of Firefox, Safari (including Mobile), Chrome, and Opera are all supporting it. Internet Explorer 9 will be supporting it, but 8 and below do not. If I wanted to deliver the best possible experience in IE 8 and below, I'd either fake it with JavaScript like I did in this article, or use an IE specific stylesheet and style it in the same style as the most common browser width according to analytics.
Note that milage may vary on individual types of queries. For example, the iPhone supports the width queries but does not support the orientation queries. The iPad supports both."
-- excerpted from http://css-tricks.com/css-media-queries/
I have designed a web portal, I have made that website good looking at Firefox browser,
But when I started testing with IE, some issues which works in IE 6 may not work in IE 8,
means back ward compatability is not there in the IE.
You can check my website at cricket scores
In this scenario, which IE version do you think to consider and make my website to work normal.
Edit
As per the below suggestions, I understand that need to create the separate CSS file
corresponding to each IE version like 6, 7,8, 9 and so on in future,
if the number of CSS files increases, wont that affect the performance and loading of the web page
please advice,
Unfortunatley IE does not render things the same as Firefox and is a common problem. The best way is to do IE Specific IF statements and have IE 8 Emulate IE 7. This does require a few additional CSS files, edited for each version. Below is the generic way to have it set up for IE/FF (belongs in head). Normally IE 6 & 7 are viewed the same so you do not need to have different CSS files for them.
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<link rel="stylesheet" href="/templates/dchirotemplate/css/style.css" type="text/css" />
<!--[if IE 6]><link rel="stylesheet" href="style_ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="style_ie7.css" type="text/css" media="screen" /><![endif]-->
You can view a site I created with this style sheet setup by going to http://www.decrescenzochiropractic.com
Tip 1: Don't even bother trying to make things look good on IE6. Make it work on IE6 if you must, but if you start trying to achieve perfection in IE6 you'll be in for a world of pain and frustration.
We have officially dropped support for IE6 on our new site; we're not even testing with it.
Tip 2: Look into using some javascript libraries that provide better cross-browser compatibility for IE. Here are some good ones:
Dean Edwards' IE7.js
CSS3Pie
Whatever:hover
Selectivzr
Modernizr
Also consider using jQuery or similar; this is a bigger jump than just compatibility, since it involves changing your coding style quite considerably, but it does provide very good cross-browser compatibility for most of its functionality.
You should use IE-only conditional comments, in the form
<!--[if IE 6]> <p>hello world of bugs!</p> <![endif]-->
This way you can load custom stylesheets, etc.
You should make your site work with all browsers.
A quick and dirty trick for IE 6 and 7 is also the star selector but don't overuse it:
body{
background-color: blue;
*background-color: red /* Only shown in IE */;
}
Fact is IE will be the most troublesome of browsers.
Traditionally, IE has not been compatible, period.
While most of the other browsers were working to be compatible with the standards coming out, MS was trying to be smarter and better than everyone else and doing their own thing. This has caused a lot of problems for many designers. A lot of design books have an entire chapter on dealing with IE's quirks.
Fortunately, it appears MS is finally starting to see the light. To Microsoft's credit, IE8 defaults to a mode that is more standards-compliant that IE7, breaking sites that targeted earlier versions of IE. And, from what I've read, they're as committed as ever to the standards with IE9.
So to answer your question, I'd try and be compatible with the later versions. That way, your site is likely to remain valid for longer. However, any good website designer will test on all the top browsers. I use IE, Chrome, Opera, and FireFox.
I think you are going about this all the wrong way.
Yes, you could create separate style sheets, and you may still have to. However, the markup on your page is absolutely atrocious. You are sending every browser that hits that page into quirks mode, and getting pages to look the same, or even function the same, between browsers when they are all in quirks mode is a chore in and of itself. Don't get me wrong, it can be done, but it takes quite a bit of duck tape and bailing wire.
You should really fix your markup, then assess your css. You can definitely make a page that looks like yours with a single style sheet, even in IE6.
I am getting rid of browser compatibilty issues.
so i come up with idea to load the only css according to browser.
So say if user uses IE then only styleIE.css get loaded if firefox styleFF get loaded and so on.
my question is it correct method if not what care should taken to avoid this compatibilty issues.
because when i solve issues for IE then it opens the new issue in a my stable version of FF
That is done frequently although you probably want to use a general CSS file with the shared styles and combine it with the browser dependent CSS file.
But in fact most CSS problems with different browsers can be solved without this trick and by just using the correct markup and styles...
Usually it's enough to create a stylesheet that looks well in normal browsers, and then make a IE-only supplemental stylesheet that fixes the incompatibilities and include it through conditional comments (although IE8+ is kind of OK and IE7 usually works):
<!--[if IE]>
<link rel="stylesheet" href="/ie_sheet.css" type="text/css">
<![endif]-->
Since IE6 is a horrible monster from the dawn of time, which needs its own specific hacks, you can include a different stylesheet for IE6 (and lower) and IE7 (and higher; not really needed most of the time):
<!--[if lte IE 6]>
<link rel="stylesheet" href="/ie6_sheet.css" type="text/css">
<![endif]-->
<!--[if gt IE 6]>
<link rel="stylesheet" href="/ie_newer_sheet.css" type="text/css">
<![endif]-->
Other browsers parse these as HTML comments and ignore them.
See also: a more detailed discussion of conditional comments.
I use a reset stylesheet, a normal stylesheet (i.e., for all standards-compliant browsers) then IE-specific stylesheets that reference the various versions of IE. The IE stylesheets only cover the items that IE has trouble with. I use the Microsoft conditional comments for including those stylesheets, so they are not read by other browsers.
It's not morally reprehensible, but it is less than ideal.You can solve cross-browser compatibility issues by learning a little more about what is going on.
http://hsivonen.iki.fi/doctype/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://www.positioniseverything.net/explorer.html
Yes, many websites do just that.
That works just fine, the only thing to keep in mind is that, everytime your user loads a page, now the browser has to run through all the conditionals. So as long as it's not excessive (one check for each version of every major browser), nobody will notice.
Now making changes to the css if you've got even just 3 or 4 versions will be a bit of a pain, but everything has it's cost.
I've seen people doing things like this in their HTML:
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
Does this work across all modern browsers and is there a list of browser types that will work with that kind of if statement?
Edit
Thanks Ross. Interesting to find out about gt, lt, gte, & lte.
This works across all browsers because anything except IE sees <!--IGNORED COMMENT-->. Only IE reads the comment if it contains a conditional clause. Have a look at this article
You can also specify which version of IE. For example:
<!--[if IE 8]>
<link rel="stylesheet type="text/css" href="ie8.css" />
<![endif]-->
If you can use Javascript, there are several options:
navigator.appName
navigator.appVersion
link
Or something more robust by using a library such as jQuery.
Finally, you could use the BrowserDetect object from QuirksMode.
Once you have the browser name and version, you can then insert HTML to link to a style sheet or include other tags.
Conditional comments are purely for IE (version 5 and later). The official Microsoft documentation is here. If you are going to use them the best strategy is to conditionally include external stylesheets or javascript files after your normal includes. This means that on IE your IE-specific code will override everything else. On any other browser the code will be treated as comments and ignored by the parser.
Further to Ross' answer, you can only target the Internet Explorer rendering engine with conditional comments; there is no similar construct for other browsers. For example, you can't write conditional comments that target Firefox, but are ignored by Internet Explorer.
The way I achieve the same effect as your example above is to sniff the user agent string. I then deliver a suitable CSS file for that browser. This isn't perfect because sometimes people change their user-agent string for compatibility.
The other way to target different browsers is to utilise browser specific hacks. These are particularly nasty because they usually rely on bugs in the browser and bugs are liable to be fixed!
User-agent sniffing is the best all-round solution in my opinion.