I don't mean conditional comments embedded into the html. I am refering to the conditional code that can be put directly into the css file. Like:
*+html .myClass {} is for IE7
* html .myClass {} is for IE 6
what is the one for IE 8?
What are you trying to achieve? You shouldn't have to hack up your CSS for IE8. I don't think there is a conditional code for IE8 so if you absolutely need to have a style sheet for IE8, you might have to turn to conditional comment.
<!--[if IE 8]>
<link href="ie8css.css" rel="stylesheet" type="text/css" />
<![endif]-->
Conditional comment for the HTML tag, which will allow you to target .ie8 in your CSS:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
That is what's currently being used in html5boilerplate.
Also, be weary of the last few paragraphs in Paul's blog post. I agree that you should try to make it work without targeting specific browsers, it at all possible.
According to this site, you can do the following:
.selector {
property: value\0/;
}
There are several similar variants of this hack, but this is the easiest. It’s very easy to remember. Just add the \0/ at the end of a CSS rule.
Related
I'm on the hunt for a bulletproof workflow for select menus. I have conditional comments for ie 10+
<!--[if lt IE 7]> <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <html class="gt9"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
And Chrome does just fine when it comes to hiding/showing select arrows with:
-webkit-appearance: none;
However when it comes to Firefox:
-moz-appearance:none;
Works for versions 35+. This means that FF<35 will display both my custom background-image arrow and its default on select menus. So hiding the dropdown arrow for these legacy browsers is the final hurdle to a cross browser solution.
How do I target background-image for Firefox browsers older than version 35?
I know modernizer or other libraries may be able to do so but that's overkill to add a class name to < html> or a vendor specific pseudo element I don't know about. Thanks in advance.
You could use JavaScript to detect the version.
var frags = navigator.userAgent.split('/');
if ((frags[frags.length - 2].indexOf('Firefox') > -1) && (parseFloat(frags[frags.length - 1]) < 35)) {
alert('You are on Firefox version < 35')
}
Can any one help me , please.
how to apply the height css property on ie9 just and do I can use conditional css inside css file?
You can't do conditional css in the css file, but you can give each version of IE its own class. Just put this at the top of the HTML file:
<!doctype html>
<!--[if !IE]> <html class="not-ie" lang="en"> <![endif]-->
<!--[if lt IE 7]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie9"><![endif]-->
<!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]-->
Now all you need to do in your css file to target ie9 is this:
.ie9 div.whatever {
height: some value;
}
I don't have a conditional CSS solution that can be done within the same CSS file. However, if you're not adverse to it, you could create a second CSS file specifically for IE9, and use conditional comments to apply the CSS. For example:
<link type="text/css" href="style.css" rel="stylesheet" />
<!--[if IE 9]>
<link type="text/css" href="style-ie9.css" rel="stylesheet" />
<![endif]-->
In this example, you would put whatever changes to height into "style-ie9.css". That stylesheet would only be applied when the browser is detected to be Internet Explorer 9.
Let me know if you have any questions, and I'll be happy to help further. Also, here's a link for more information on conditional comments, if you want a better understanding of them.
CSS Hack
As long as you do not want to set font or background just for IE 9 a combined :root hack will help
.somebox {
regular
definitions
here
}
:root .somebox{height:100px \ ;}
Conditional HTML Comment
Putting this in your head section after linking of the regular css file(s) will overwrite definitions only when IE 9 is used:
<!--[if IE 9 ]>
<link href="css/ie9only.css" type="text/css" rel="stylesheet"/>
<![endif]-->
ie9only.css must contain the IE 9 specific rules, of course.
Similar approach but using style tag instead of linking external file:
<!--[if IE 9 ]>
<style>.somebox{height:100px;}</style>
<![endif]-->
I am wondering if there is a way to conditionally import CSS files for IE7/8 at the CSS level instead of using IE conditional comments.
I'd like to create a SASS solution for loading Google Fonts, but to make them work in IE7/8 requires that different styles be loaded separately. This however is undesired when not needed due to latency and Opera rendering issues.
I am unaware of another way of conditional loading IE specific styles. You've got two options but both use conditional comments.
Load a separate stylesheet
<!--[if lt IE 9]>
<style type="text/css" src="bacon-ie.css"> </style>
<![endif]-->
Add IE class names
<!--[if IE 7]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en">
<!--<![endif]-->
And then use them to add specific browser styles.
.ie7 .make-work {
zoom: 1;
}
I have style sheet file and would like to disable some css tags in it for IE7 and IE8 browsers, how to do that? I do not want to put these tabs in separated css file I would like to keep then in one file.
I'd recommend the approach taken by the HTML5 boilerplate, outlined here by Paul Irish. Basically, set up your document like this:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
You now have classes in place to accurately target only certain versions of IE. Your css will look like this:
.element { margin-bottom: 20px; }
.lt-ie8 .element { margin-bottom: 10px; }
You then avoid CSS hacks, and can keep everything in a single stylesheet.
As #Daniel states, this is not disabling styles, but over-riding them. If for some reason you want to send styles to only modern browsers and newer IE, you could add another class to the final html tag above, and use that.
If you try to have specific style-sheets only for IE it goes like this:
<!--[if IE 8]><link rel="stylesheet" href="css/ie8.css" type="text/css" media="screen"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen"><![endif]-->
<!--[if IE]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen"><![endif]-->
More about this here: How To Create an IE-Only Stylesheet
.element {
margin-bottom: 20px;
margin-bottom: 10px\9;
}
Info from here: http://www.impressivewebs.com/ie7-ie8-css-hacks/
You cannot disable them, but you can override them
I tried putting the IE conditional in a CSS file, but that didn't appear to work. Is there a construct for CSS so you can tell it to use this background color if the browser is IE? I also couldn't find anything on if then else conditionals, does it exist? Can someone provide an example.
The IE conditional(s) go in the HTML, and should be used to include an additional CSS file that will overwrite CSS as needed for IE hacks.
Example:
<head>
<style type="text/css">
#import url(/styles.css);
</style>
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
</head>
I've taken my cue from jQuery and use my conditional formatting to create container elements
<body class="center">
<!--[if IE 5]><div id="ie5" class="ie"><![endif]-->
<!--[if IE 6]><div id="ie6" class="ie"><![endif]-->
<!--[if IE 7]><div id="ie7" class="ie"><![endif]-->
<!--[if IE 8]><div id="ie8" class="ie"><![endif]-->
<div class="site text-left">
</div>
<!--[if IE]></div><![endif]-->
</body>
then I can put the conditional information in css like such
.site { width:500px; }
.ie .site { width:400px; }
#ie5 .site { width:300px; }
There's no such conditionals in CSS, but you can use the "Holly hack" if the differences between various versions of IE aren't significant:
div.class { /* whatever */ }
* html div.class { /* IE-only */ }
The [conditional comments](http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx) are HTML comments and thus cannot be used in a CSS context.
If you want to aim specific CSS rules just to IE, you have to use CSS hacks.
I would recommend to use something similar to the solution proposed by bendewey, but go for conditional classes around the html tag instead. As far as I know this was first mentioned in Paul Irish's Blog ( http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ )
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
and then in the css you use:
.box {background: blue;}
.ie7 .box {background: green;}
This has some advantages in comparison to the solution using an extra div. For the details check the post above.