I googled in here, and tried to print only the div's i want.
used this,
#media print
{
#top_area { display: none; }
#left_area { display: none; }
#buttom_area { display: none; }
#contents_area { display: block; }
}
and it works fine in chrome and over IE9.
But the problem is under IE8.
It just immediately shutdowns the browser :(
Any good solution?
Internet Explorer versions before IE9 do not support media queries.
If you're using the #media print directive to provide a print stylesheet to modern browsers, you can take advantage of Internet Explorer's conditional comments to target specific versions of IE and deliver a print stylesheet to them. You will, of course, need to have a separate print.css for these versions of IE to consume.
For example, in your HTML's <head>:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<![endif]-->
This code snippet says, "if I am a version of Internet Explorer BEFORE IE9, use this print stylesheet". Versions of IE9 and up will not use this stylesheet.
This way, modern browsers that understand the #media directive get the benefit of not having an additional http request for the print stylesheet, while providing a fallback for browsers that do not support #media.
Windows Internet Explorer 9 introduces support for media queries. That is why it is not working for you in IE 8
This is not supported in IE8. Possible workarounds are suggested at IE8 support for CSS Media Query. Hope this helps. :-)
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 have been trying to solve this for 2 hours now but no luck. The less code snippet works fine in all browsers except IE8. I checked IE8 supports :after and :before
I'm using standard IE8 doctype, using HTML5 shiv and also not running this in compatibility mode?
#media print {
.app-header .large-header {
.logo span,
h1,
.action-links {
display: none;
}
.logo:before {
content: url('images/logo.png');
position:absolute;
top:0;
left:0;
width:150px;
height:28px;
}
}
}
UPDATE
Issue is that IE8 doesn't support printing content url. The workaround is to use an image instead.
IE8 does not support media queries this: #media print {} is not supported.
create a separate css for IE8 and in the HTML put a conditional like this:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->
See for yourself https://msdn.microsoft.com/en-us/library/ms530813(v=VS.85).aspx
Dynamic HTML (DHTML) expressions can be used in place of the preceding
value(s). As of Windows Internet Explorer 8, expressions are not
supported in IE8 Standards mode. For more information, see About
Dynamic Properties.
I don't know about your markup but is it an option to remove the background image of the logo and use an actual <img> tag for it?
That way you would not need to change a lot of styles for printing pages. You should also keep in mind that there are a lot of printers out there, which disable background-imagery and background-colors by default!
I am wanting to use a separate CSS sheet on my web-page for Chrome & Safari, than the one used for all other borwser types. I have previously used conditional comments when doing this for IE, such as:
<!--[if !IE]><link rel="stylesheet" type="text/css" href="style.css"><!--<![endif]-->
<!--[if IE]><link rel="stylesheet" type="text/css" href="style2.css"><![endif]-->
but I am wanting the above to work for Chrome & Safari instead. Is this possible?
Conditional comments only work in IE.
This is a creative way to address this problem. I learned it from here
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* CSS Statements that only apply on webkit-based browsers (Chrome, Safari, etc.) */
}
Mozilla has a vendor specific one as well.
#media screen and (min--moz-device-pixel-ratio:0) {
/* Firefox browser based CSS goes here */
}
I have seen that the code I have is broken in IE. I tried it on IE9 and 8 and it works after writing some additional CSS to my pages.
Unfortunately I found that my IE hack is not working for version 10 that was launched recently. I go with http://www.impressivewebs.com/ie10-css-hacks/ but it's not working for now. I am testing it on windows 7 IE10.
For old IE I have written code like this
<!--[if IE]>
<link rel="stylesheet" href="assets/ie.css">
<![endif]-->
Do someone have any trick for IE10. I have seen that IE10 work fine if I add this to my stylesheet. Now I want to know how to add Ie.css in IE10 browser.
Remember that IE10 is no longer support IE comments.
using Ie.css my code work in all browser except version 10.
In CSS, this condition works for me:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
}
In JS, the same, it works for me:
<!--[if !IE]><!--<script>
if (/*#cc_on!#*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
.ie10 .example {
/* IE10-only styles go here */
}
Source: http://www.impressivewebs.com/ie10-css-hacks/
I know it is not the correct thing to do to code specific CSS for specific Browsers or OS's but in a site I am building there are certain elements which do not render well in specific browsers. For example certain elements are not supported in IE8 or look weird in small iphone display.
Therefore my question is - using just CSS is it possible to identify the users browser and os and allow me to code different display option?
Dank u wel.
Sadly I dont believe it possible with just pure css for each system.
However you can use combination of css and js to see system.
See here: http://rafael.adm.br/css_browser_selector/
You cannot sniff OS or browsers with CSS but you can use #media queries to target different screen sizes, for example:
#media screen and (max-width: 1000px) { ... }
Above is for small desktop and laptop screens.
#media screen and (max-width: 700px) { ... }
Above is for the iPad and VERY small desktop/laptop screens.
#media screen and (max-device-width: 480px) { ... }
Above is for iPhone 3GS- and mobile devices in general.
However, the new iPhone 4 with Steve Jobs's all-singing all-dancing "retina" display means that it has a pixel ratio of 2-1 meaning 1 pixel actually appears to the browser as 2x2 pixels making its resolution (960x640 - meaning it will trigger the iPad layout rather than the mobile device layout) so this requires ANOTHER media query (only so far supported by webkit):
#media screen and (-webkit-min-device-pixel-ratio: 2) { ... }
To target different browsers you need to use HTML if statements:
<!--[if IE]>
According to the conditional comment this is Internet Explorer
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->
Then just link your CSS stylesheet inside these conditionals
To target devices depending on screen size, use CSS media queries:
#media screen and (max-device-width: 10cm) {/* Small screen, like iphone */ }
You can target IE versions with conditional comments:
<!--[if lt IE 9]>
<style>/* IE5,6,7,8 */</style>
<![endif]-->
You'll want to use conditional comments to serve IE-specific stylesheets and media queries to handle the mobile browsers.
<!--[if IE 8]>
... load stylesheets, JS or whatever here.
<![endif]-->
For media queries, see http://www.w3.org/TR/css3-mediaqueries/ and... well, http://www.google.com/search?q=media+queries+css3.
You could always use the CSS hacks outlined here: http://www.quirksmode.org/css/condcom.html
Well, there are browser CSS hacks which exploit known bugs in CSS parser engines, but it’s not recommended to use these unless you know what you’re doing.
Example:
selector { property: value; } /* regular, valid CSS */
selector { *property: value; } /* will only work in IE7 and older IEs */
selector { _property: value; } /* will only work in IE6 and older IEs */
For distinguishing between the different media types (print, screen, mobile, etc.) have a look at the CSS Media Type rules. For browser specific hacks, have a look at this article.
It is not possible to identify a browser or OS with CSS. It is for presentation only. You can target browsers with CSS hacks, but this will only serve the CSS to the browser, not detect it.
You can use JS to detect the browser like the CSS browser selector plugin does.
I would do it via server side (php or whatever you're using). What you do is you put the browser/os specific css in a separate file and load it if that browser is detected (which you can detect via server side scripting with a simple if statement)
Change CSS for specific OS:
I wrote this function that recognize if your OS is XP or different and puts specific CSS as consequence.
function changeStyle() {
var css = document.createElement('link');
css.rel="stylesheet";
css.type = 'text/css';
if (navigator.appVersion.indexOf("Windows NT 5.1")!=-1){ /* if is windowsXP */
css.href = 'styleXP.css';
} else {
css.href = 'style7.css';
}
document.getElementsByTagName("head")[0].appendChild(css);
return false;
}