How could I select IE7 with pure (valid) CSS?
If you don't want to use a conditional comment (outside the CSS, e.g. defining a separare <style> section), the only thing you can use is CSS Hacks. See here for a "IE7 only" hack.
IE does support conditional comments, an IE-specific HTML comment syntax. You can use them to include IE7-specific CSS, e.g.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
There’s no equivalent in CSS, unfortunately. But, as mentioned in other answers, there are some valid CSS hacks you can use to target CSS rules as just IE 7.
I personally prefer the conditional comment syntax as it’s a bit more explicit, but you can make the hacks explicit with comments.
If you don't want a separate stylesheet for IE hacks, here's another way doing it with using conditional comments:
<!--[if lt IE 7]><body class="ie6"><![endif]-->
<!--[if (gte IE 7)&(lt IE 8)]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><!--><body><!--<![endif]-->
...page content...
</body>
This give IE6, IE7 and [all other browsers] a different body element class. Now you can write rules like:
body.ie7 div.scroll { padding-bottom: 16px; }
are expressions valid? if so:
cssAttr: expression( /msie 7/i.test( navigator.userAgent ) ? '#ie7val' : '#0th3r1' );
I highly doubt they are though, and technically that's CSS, but it's really JavaScript in disguise!
IE7-Only css jack:
*:first-child+html{ }
Related
I have one line of CSS to change on a couple of classes on a Wordpress site to make it backward compatible to IE9 (it is currently on a localhost site in development).
The CSS i need to turn off is just one line and where I'll change the opacity from 0 to 1 so the headings show in older IE versions - the transforms etc won't be recognised so these won't be an issue.
If I use a conditional comment, because it's only one line of CSS - can I use the following:
<!--[if IE 9]>
<style>
span, .animate3, .animate4 {opacity: 1!important;}
</style>
<![endif]-->
I can't seem to find any info about using the style tag after a conditional comment. It would seem easier than setting up a stylesheet for one line of code?
Any help ideas would be awesome
Paul.
Yes, the way you set it up is correct and can be implemented in the <head> of the document.
As mentioned in the MSDN Compatibility documents about conditional comments:
<!--[if expression]> HTML <![endif]-->
is the way to write it. Any HTML element inside can be written, so <style> is valid to use.
<!--[if IE 9]><style>body { background-color: red; }</style> <![endif]-->
Read more about conditional comments at MSDN or at Quirksmode (with some better examples).
Is it possible to use different css selector for IE(any version of ie) and chrome? Its a normal top property which appears differently in both browser and needs to explicitly adjusted according to the browser
You cannot do this in CSS alone. You need what are called "conditional comments" like the following:
<!--[if IE 8]>
<p>This is IE 8</p>
<![endif]-->
These are added to your HTML and can be used in many ways. Two primary ways that I have used them are:
To link to a wholly different CSS style sheet
To change the class on the <html> or some other parent tag and use CSS rules to select any children of it
I realize that second description may sound a bit complex but it's actually pretty simple so here's an example:
<!DOCTYPE HTML>
<!--[if IE 8]>
<html lang="en-US" class="ie8">
<![endif]-->
<![if !IE]>
<html lang="en-US">
<![endif]>
...
<body>
<div class="someClass"></div>
</body>
...
Then, in your CSS, use a selector like: .ie8 .someClass
Welcome to the club! Anyways, although you can try to set browser specific css on elements, actually you cannot guarantee that it'll work exactly like you aimed. Because it depends on how those browsers handles these css classes, and there is nothing you can do about that. You may try to set different css classes for IE like this:
<!--[if lt IE 9]>
<html class="ie">
<![endif]-->
<!--[if (!IE) | (IE 9)]><!-->
<html>
<!--<![endif]-->
Notice that these are actually comment lines, but ie reads these lines and set the user-defined css class "ie" to html element (you may notice that Chrome and Firefox ignores these statements). you can then use this css, for example;
html.ie div{
top: 0;
}
It's really annoying to deal with these cross-browser ie bs, I know. hope this helps
What you want to achieve?
If you want to compensate browsers all differences you can use for eg. modernizr
If you want to add special css file for IE you can use Conditional comments They look like this:
< !--[if IE 9]>
< link rel="stylesheet" type="text/css" th:href="ie9.csss"/>
< ![endif]-->"
If you want to fix something in css selector you can use hack(HACK! means not recommended, avoid but if you really have to and you have gun next to your head etc...) which will make properties or css class understandable only for specific browser (google this there is to many of them) eg. http://code.tutsplus.com/tutorials/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters--net-10575
And last option learn CSS and find where you made mistake because probably some element is diffrent size and that caused 1-2 px difference with position top
I used special character '#' '_' and '\' for IE browser compatibility. But now my style sheet is fail in W3c validation because of using IE hack. Is there anyway for error less stylesheet with browser compatibility.
Now I am not able to remove these IE hack because of my HTML files are now in Java program development.
My hack are like this :
/* For IE8 */top:-15px;
/* For IE7 */#top:-10px;
/* For IE6 */_top:-1px;
Yeah, don't use invalid CSS hacks, they're super-fragile.
For the specific case of picking up IE, conditional comments are better. Most solutions put extra stylesheets in CCs, but if you don't want to do that you can do class-switching with CCs:
<!--[if IE 6]> <body class="ie6"> <![endif]-->
<!--[if IE 7]> <body class="ie7"> <![endif]-->
<!--[if gte IE 8]><!--> <body> <!--<![endif]-->
and then do all your styling in one place based on the class:
#something { top:-15px; }
body.ie7 #something { top:-10px; }
body.ie6 #something { top:-1px; }
(This is assuming that IE8 is “all right” and should be served the same rules as other browsers, hence the ‘downlevel-revealed’ CC that allows everyone else to see the classless <body>.)
Used the particular html page in conditional statement.
<!--[if IE ]>
<link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->
Your reference
http://reference.sitepoint.com/css/conditionalcomments
Factor your adaptions for IE out into separate style sheets, and include them via conditional comments, e.g. for the IE8 style sheet:
<!--[if IE 8]
<link rel='stylesheet' href='ie8.css' />
<![endif]-->
I would say don't worry too much about validation.
It is helpful to use when trying to figure out when something is broken, but not the goal of any Web site.
Instead of hacks within your css, why not use conditional comments?
<!--[if lt IE 8]>
//styles here
<![endif]-->
You can either place individual styles in there or a link to a stylesheet.
Either way, only IE less than 8 sees it.
http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
There is also a solution without the conditional comments, which allows you to store all CSS rules in one file.
* html selector { /* rules for IE6 */ }
*:first-child+html selector { /* rules for IE7 */ }
For IE8, you shouldn't need any CSS hacks; it's a browser with very good CSS 2.1 support. If you, despite this fact, do need one, you may try setting a value with no hack and then rewrite it using some CSS3 selector that won't be recognized by IE8.
selector { /* rules for IE8 */ }
html:root selector { /* rules for IE9, Firefox, Chrome, etc. */ }
I'm new with the conditional CSS. My question is, is it right to use it for dealing with cross-browsers issues?
For example:
#header
{
[if IE 7] width: 600px;
[if Webkit] width:300px;
}
Editor's note: OP is most likely using this: http://www.conditional-css.com/
Use conditional statements for the actual CSS files (or classes) but on the html.
Like this for example:
<!--[if lte IE 6]>
<link href="css/layoutIE6.css" rel="stylesheet" type="text/css" />
<![endif]-->
This is written on the html file, not the CSS file!
The format you posted I think doesn't actually work and I bet it doesn't validate so it is not standard.
It's become common to use variations of this technique for IE, I believe it was made popular by HTML5 Boilerplate [citation needed]:
<!--[if lt IE 7]> <html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us"> <!--<![endif]-->
Now you can target elements without IE hacks in your main CSS files like so:
.ie6 .header li {
/* some ie6 only styles here */
}
To me, this is a lot more maintainable than using separate stylesheets, but suffers the very mild setback of other browsers reading (but not applying) the IE styles.
If you are having trouble with Webkit, you are most likely doing something wrong. Not Absolutely, but it's very likely.
EDIT: Many browsers allow proprietary extensions that let you set rules that will only apply to that browser. Example:
-moz-property {}
-webkit-property {}
-o-property {/* Opera */}
Note that this does not mean you can apply any CSS property, you will have to see what is available.
Best reference I could find quickly: http://reference.sitepoint.com/css/vendorspecific
SO Editors, feel free to replace this link if there is a better reference
As to the validity of your statements, jackJoe's got a nice answer.
But, it's not generally good practice. It's a better idea to, as far as layout goes, get a good layout that works cross browser and not muck around with browser specific layout problems. Instead, worry about feature-specific issues.
There are definitely times when you just can't fix an IE6 issue and at which point you probably should apply some browser specific code so you don't give yourself a headache.
In general, though, that's just not even a good idea.
Side Note: Why in the name of Tim Berners-Lee are you still trying to support IE5?
No it's not,
You Can try these
For IE 7 & 8:
width: 600px\9;
For IE10 :
width:300px\0/;
For all browsers:
width: 600px;
But if you want it on all three browsers separately IE,GC,FF then use it like this
width:300px; width: 600px\9; width:300px\0/;
I Think this is what you were looking for!
For browsers < IE7, I want to use a certain style attribute, while for other browsers I'd like to use another. Can I do this using a single css file, or do I have to do if then logic to include an ie hack css file?
Here's an example how you can include an IE6-specific CSS to override specific CSS classes for IE 6 or lower:
<link rel="stylesheet" type="text/css" href="/css/screen.css" title="MySiteStyle" media="screen" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="/css/screen-ie6.css" title="MySiteStyle" media="screen" />
<![endif]-->
Alternatively, you can do it on per-element basis like this:
<!--[if (!IE) | (gt IE 6)]>
<div class="header">
<![endif]-->
<!--[if lte IE 6]>
<div class="ie6_header">
<![endif]-->
MSDN has some more details about IE Conditional Comments support.
Well you could use javascript to detect the browser and apply a class based on that. For example, see:
JQuery Attributes
You could use CSS hacks. But you shouldn't.
You could use conditional comments:
<!--[if lt IE 7]>
<style>
/*your style for IE <=6*/
</style>
<![endif]-->
<![if !IE | (gte IE 7)]>
<style>
/*your style for other browsers*/
</style>
<![endif]>
I've found it to be the cleanest solution for this kind of thing.
You can use CSS Expressions to some extent.
See http://gadgetopia.com/post/2774 for some examples. These don't get around conditional CSS attributes per se, but they do allow you to dynamically vary the values of CSS attributes.
on the jQuery tip check out this plugin:
http://jquery.thewikies.com/browser/
a plugin to do what ghills suggests, this is a nice clean way to go.
The following page will show you 6 CSS hacks specifically for IE7. You shouldn't use them, but they're the easiest way for getting the exact right look for your website.