As always, there is something that works in FF but does not work correctly in IE. So my question is the following: is there a way to insert class properties in css that are recognized only by Internet Explorer 8.
.style1, .style2 .style3 {
height: 20px;
}
I want the height property to be visible only for Internet Explorer (I use version 8) because the height appears properly in FF, but if I would insert the height: 20px for both browsers then in FF it would be too much, so I only need this in IE.
Is there a way to do it?
As pointed out by others, conditional stylesheets are commonly used to target specific versions of IE.
I have recently moved over to a more efficient and tidy way of managing conditional styles which cuts down on the number of separate stylesheets and allows you to put your conditional styles into your main stylesheet. For example, you could achieve what you are trying to do like so:
In your web page(s):
<!--[if lt IE 7]> <body class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <body class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <body class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <body class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <body class="ie"> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
In your stylesheet:
.ie8 .style1, .ie8 .style2 .i8 .style3 {
height: 20px;
}
Paul Irish and others have plenty documentation and test cases for this method. Here's a good starting point: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Not directly in the css, no. But you can use conditional comments in your html page to load css stylesheets only if the browser is IE, or a specific version of IE:
<!--[if ie]>
<link rel="stylesheet" type="text/css" href="path/to/ie-stylesheet.css" />
<![end if]-->
You can also target this to specific versions of IE, with:
IE 8 only
<!--[if ie 8]>
<link rel="stylesheet" type="text/css" href="path/to/ie-stylesheet.css" />
<![end if]-->
IE versions greater than IE 7
<!--[if gt ie 7]>
<link rel="stylesheet" type="text/css" href="path/to/ie-stylesheet.css" />
<![end if]-->
IE versions greater than, or equal to, IE 7
<!--[if gte ie 7]>
<link rel="stylesheet" type="text/css" href="path/to/ie-stylesheet.css" />
<![end if]-->
IE versions less than 8
<!--[if lt ie 8]>
<link rel="stylesheet" type="text/css" href="path/to/ie-stylesheet.css" />
<![end if]-->
IE versions less than, or equal to, 8
<!--[if lte ie]>
<link rel="stylesheet" type="text/css" href="path/to/ie-stylesheet.css" />
<![end if]-->
This is what IE Conditional Comments are there for :)
To make some style work only in IE, you would do:
<!--[if IE]>
<style type="text/css">
/* styles for the IE */
</style>
<![endif]-->
Or you can create a seperate stylesheet for IE and import like this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iecss.css" />
<![endif]-->
Conditional comments only work in
Explorer on Windows, and are thus
excellently suited to give special
instructions meant only for Explorer
on Windows. They are supported from
Explorer 5 onwards, and it is even
possible to distinguish between 5.0,
5.5 and 6.0.
More inforamtion
Are you looking for this?
How to create IE-Only StyleSheet
Related
How to write the sintax on the css property like:
.example{
/*all the browsers except IE*/
font-size:100%;
/*that's on all the IE syntax I need to add like a condition*/
font-size:200%
}
That's a simple code I know, that's only to test it, but not on the html, on each property in a class, id or tag on the css.
In ie6 it's:
#test{ _color: blue}
in ie6 and ie7:
#test{ *color: blue}
ie6, ie7 and ie8:
#test{ *color: blue\9}
But how to difference between all IE and the other browsers?
Anyone can help?
Use conditional stylesheets
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Target IE 7 ONLY
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Target ALL VERSIONS of IE less than IE10
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Target everything EXCEPT IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Since IE10 ignores conditional comments you can try this solution.
Learn more about it here.
unfortunately, I have to develop a site that is supported on IE7.
we know that IE7 does not support box-sizing:border-box; this is making me to specify width for every element separately in IE7 stylesheet.
I want to write some logic in my grid.less, so that the width will be calculated accordingly for ie7..
just like below
.grid{
width:/*width for modern browsers */;
*width:/*calculate width for ie7 */;
}
please help or point me to any resource.... thank you
LESS does not have a function to allow you to target specific browsers.
The standard method for doing this is with separate style sheets:
<link rel="stylesheet" type="text/css" media="screen" href="css/grid.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie7-grid.css" />
< ![endif]-->
But instead you can use a method like the following from Paul Irish:
html...
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
LESS...
.grid{
width:/*width for modern browsers */;
.ie7 & {
width:/*calculate width for ie7 */;
}
}
...which should result in css like...
.grid{
width:/*width for modern browsers */;
}
.ie7 .grid{
width:/*calculate width for ie7 */;
}
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
As a follow up to this question, how do I prevent Internet Explorer from loading multiple style sheets, (since I want Firefox and Chrome to load one, and IE to load the other?) Is it the order in which the references are placed, or same file names but in different folders, do I need to do an if else type of statement, or what?
For example, will IE load both given this:
<!--[if IE]>
<link href="/Content/SiteIE.css" rel="stylesheet" type="text/css">
<![endif]-->
<link href="/Content/Site.css" rel="stylesheet" type="text/css">
The complete syntax is:
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->
Source: http://www.quirksmode.org/css/condcom.html
yes it will load both. But what i do sometimes is to make the IE specific rules have a higher specificity such that it take a higher order over other ones meant for other browsers
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.