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 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 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;
}
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 :)