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/
Related
I'm working on email and want to toggle section on browser specific. Please check the code below:
<!--Showing on Internet explorer-->
<table class="showing-on-ie-gmail">...</table>
<!--Showing on Chrome-->
<table class="showing-on-chrome-gmail">...</table>
Is there a way to achieve this?
Any help is really appreciate.
Thanks in advance!
Looks like you want to apply specific CSS class based on browser.
You can refer an examples below may help to identify IE and Chrome.
To identify Internet Explorer 9 and lower : You could use conditional comments to load an IE-specific style sheet for any version (or combination of versions) that you wanted to specifically target.like below using external style sheet.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
To identify Internet Explorer 10 & 11 : Create a media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
To identify Google Chrome (29+) :
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.chrome {
property: value;
}
}
References:
(1) How to target only IE (any version) within a stylesheet?
(2) CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge
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 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 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. :-)
I'm using the art sexy lightbox for my pictures presentation and also for html content in joomla. I'm using the Chrome and it works fine and displays everything as it should. The problem starts when i switch to ie8.
When i click on the image to xpand in the lightbox the image displays in the center of the page while the thole frame of the picture is on the left of the image.
I've tried playing with the artsexylightbox css file but couldnt get it to work in both browsers.
does anyone can say why is the difference? I suspect that the browsers treat the absolute,relative orders differently.
please help:(
You could tr to target WEbkit broswers only in your CSS to separate the behaviours of IE and Chrome (Safari ius a webkit browser too).
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit-specific CSS here (Chrome and Safari)*/
#artsexylightbox {
properties here
}
}
Or you could use Conditional Comments to set up a new CSS stlyesheet for IE:
<!--[if lt IE 9]>
<link href="path-to-file/IE.css" rel="Stylesheet" type="text/css"/>
<![endif]-->
Then use setup the properties that work for IE in the IE CSS, and the properties that work for Chrome/Safari in the normal CSS.
Note that even between FF and Chrome, there are a few differences in how they interpret CSS.
Hope that helps :)