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/
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
}
As you can see on this live demo, I have a website with two stylesheets, one for our beloved IE and another one for the normal browsers, set like this on its header:
<link rel="stylesheet" type="text/css" href="stylelab.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_stylelab.css" />
<![endif]-->
Even though I have checked many times its spelling, it seems correct but if you open the link from IE (IE v11, in my case), normal Stylesheet is loaded instead IE one.
To check easily if the other CSS is loaded, in theory, when opening the link from any IE and executing the menu (bottom right button), it has blue background.
What is missing here?
IE stylesheet has the entire normal stylesheed PLUS the additional properties needed for it to work, maybe this is wrong and shoul only have the additional properties..?
Conditional comments are no longer supported
Support for 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.
See: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
IE stopped support for conditional comments as of IE10.
At this point a better solution is to target CSS based on features rather than vendors/browsers. Tools like modernizr can really help you with this.
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/
I'm using this great feature in LESS called nested media queries that allows me to keep styles related to each "module" in one place. My media queries are defined in a variables file as follows:
// Breakpoints
#breakpoint-medium: "600px";
....
// Queries
#mq-medium-and-up: ~"only screen and (min-width: #{breakpoint-medium})";
....
I can then use the media queries throughout my stylesheets in the following way:
.module {
background: green;
#media #mq-medium-and-up {
background: yellow;
}
}
I take a mobile first approach to my CSS where I work my way up from small screens (no media queries) to larger and larger breakpoints (using media queries). Obviously media queries aren't supported in IE <= 8, so I would like those browsers to fallback to having the "desktop styling".
In order to do so, I currently keep a separate less file (IE.less) where I redefine the media queries as follows:
#mq-medium-and-up: ~"all";
#mq-large-and-up: ~"all";
which results in a media rule that older versions of IE will understand
#media all ...
So far all is good. I now have a separate IE stylesheet containing the "desktop" styles. The problematic part of this is when it comes to how I should include these two separate stylesheets in order to prevent older IE versions from requesting both stylesheets (which are basically the same).
Currently I do it like this:
<link rel="stylesheet" href="site.css" />
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="ie.css" />
<![endif]-->
Would it be possible to prevent IE < 9 to download the site.css, but still make it visible to other browsers? My initial thought was to wrap the site.css file in another conditional comment using the NOT opeartor, but since IE10 has dropped the support for conditional comments I guess that is out of the question.
Any ideas?
Ok, so here's what I ended up with:
<!--[if (lte IE 8) & (!IEMobile)]>
<link rel="stylesheet" href="ie.css" />
<![endif]-->
<!--[if (IE 9)|(!IE)]><!-->
<link rel="stylesheet" href="site.css" />
<!--<![endif]-->
The ie.css is targeted at older versions of Internet Explorer (<= IE8).
The site.css is targeted at IE9 (which understands media queries), non-ie browsers, and browsers that don't support conditional comments - such as IE10. The "|(!IE)" part is actually not needed, but included for extra clarity. It might throw off one or another version of IEMobile - it would need some testing. Notice the slight variation in the second conditional comment, compared to the first one. This is the part that makes the content inside of it visible to non-ie browsers.
Further explanation of this type of cc can be found here: http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment
I'm having a strange problem that only occurs with IE9. I'm working on a web page that has a desktop layout, and a mobile layout. Same HTML, different CSS. The problem happens with the code below:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px)
All browsers, with the exception of IE9, show desktop site as needed. Mobile browsers correctly show the mobile layout. The problem with IE9 is that it also shows the mobile layout.
Now if I remove the words "only" and "screen" from the above code, IE9 then correctly displays the desktop site. The problem is, then the mobile browsers also display the desktop site. I've done some research on this, and haven't seen anything on this issue.
Thanks for reading,
John
Just in case anyone is crawling SO for an answer to this, the above two answers aren't solving the core problem which is answered here - CSS media query not working in IE 9
Basically inline CSS3 media queries DO work in IE9 but you have to disable Compatibilty mode -
<meta http-equiv="X-UA-Compatible" content="IE=9">
The above meta tag needs to be placed before any other meta tags otherwise IE9 will default to compatibility mode on and will subsequently not work.
From what I can tell, it comes down to IE9 not interpreting "min-device-width" and "max-device-width".
According to http://msdn.microsoft.com/library/ms530813.aspx it does not support those properties, only "min-width" and "max-width".
In addition, http://www.w3.org/TR/css3-mediaqueries/#error-handling states that the browser is supposed to ignore properties that it does not recognize. Not so with IE9 it seems.
Yes, use the #media (max-width: 860px) instead of max-device-width.
IE 9 just gave me a heart attack. The project media queries did not work.
Then after some minutes of googling, you have to include the CSS in the HTML.
Inline styles only!
What a drag these IE browsers are!
I usually add this to my projects and it's been working for me so far:
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
IE compatibility mode solves the issue.
Go to Compatibility View Settings and disable the option Display intranet sites in Compatibility View.