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. */ }
Related
I am trying to set up some css selectors, and I need to set up several that I want to be ignored in IE8 (actually any IE < IE9, but that's ok).
Which selector can I safely use knowing that all browsers (including IE9) support the selector but IE8 fails?
In other words, I am looking to do something like
.someselectorthatfailsinie .mystyle { stuff for new browsers }
EDIT: What I am trying to do with CSS is target and style checkboxes and radio buttons. While IE8 supports SOME of this treatment -- the custom box -- it does not support the input[type=checkbox]:checked + label:before necessary for the pseudo checkboxes to work.
Therefore I wanted to "hide" the entire css effort from IE8, and let it show the default unstyled checkboxes.
There's so many things that ie doesn't handle, I generally do this:
.no-boxshadow .classname {border:1px solid #ddd}
Go to http://caniuse.com/ to see what IE 8 doesn't handle.
The problem with VenomVendor's answer is that .noie .mystyle is relying on javascript to be enabled to use it for the majority of browsers, which are modern. That's a lot of work. Just design your site for modern browsers then use feature detection to address older browsers.
It would be better to add a conditional statement and just target ie8 or ie9, my html looks like this, based on Boilerplate and avoids putting IE in compatibility mode. IE10 and above doesn't recognize conditional comments.
<!--[if IE ]><![endif]-->
<!doctype html>
<!--[if IE 8 ]> <html class="no-js lt-ie9 ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js lt-ie10 ie9" lang="en"> <![endif]-->
<!--[if (gte IE 10)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
Then if I want to get ie8, I can do this:
.ie8 .class {styles for ie8}
or IE 8 and under
.lt-ie9 .class {styles for less than ie 9}
add noie class for browsers higher than IE8 & other broswers.
<!DOCTYPE html>
<!--[if lt IE 8]><html lang="en" class="no-js dumbie"><![endif]-->
<!--[if (gt IE 8)|!(IE)]><!-->
<html class="no-js noie" lang="en">
<!--<![endif]-->
<head>
.noie .mystyle { stuff for new browsers }
To answer the original question, IE8 does not support the canvas element. Modernizr will add the canvas class to the <html> tag for modern browsers, and alternatively, it will add the no-canvas class for IE8 and below. Therefore, you could do this to target modern browsers:
.canvas .my-checkbox-style { /* CSS for modern browsers, but not IE8 or lower */ }
Alternatively, you could do this to target IE8 and lower:
.no-canvas .my-checkbox-style { /* CSS for IE8 or lower */ }
However, there are a couple of things worth further mention here...
Browsers will not honor CSS selectors and properties they do not support.
If the intention is to truly hide your modern browser CSS from IE8 entirely, you need to serve up separate stylesheets altogether via conditional statements, like this:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if gt IE 8]>
<link rel="stylesheet" type="text/css" href="ie9-and-up.css" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="non-ie-browsers.css" />
<!--<![endif]-->
Architecturally speaking, presuming modern browsers are the 'first class citizens' in your styling objectives, your stylesheets should be written from their modern perspective as a norm. This will make your overall development process easier, as well as uncluttered with classes that unnecessarily target 'modern' browsers. Target IE8 and below with the no-canvas class, and over-ride the modern browser CSS therein, to return the IE8 checkboxes to their default state. You can then easily prune this self-contained over-ride from your CSS codebase when the time comes to drop IE8 support.
I've written a Codepen example to illustrate the use of canvas and no-canvas.
I've found that ES5 array methods work for detecting IE8 and lower. I happened to use the forEach in my code.
http://caniuse.com/#search=ECMAScript%205
Using Modernizr you can check .no-es5array or .es5array in CSS and Modernizr.es5array in JS.
https://modernizr.com/download?es5array-dontmin-setclasses&q=es5array
I have a CSS-created form that is great in all browsers, screen sizes, etc. except IE 8. It is not important enough to keep messing with it, and I want to just hide it for users of IE 8. Is there a simple CSS attribute I can add?
You could add a class to the html if ie 8 like :
<!--[if IE 8]><html class="ie8"><![endif]-->
and then style it based on that.
Using conditional comments you can simply add a line of CSS to hide whatever element you need out of the way. Something like this should work:
<!--[if IE 8]>
<style>
#id {
display:none;
}
</style>
<![endif]-->
So, with Mozilla and WebKit I have a half-decent solution replacing the arrow on the select box using appearance: none; and having a parent element.
In IE for the most part I disabled this feature. For IE10 I can't actually disable it since my conditional comments don't actually work.
Here is my markup:
<!--[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)]> <html class="ie10plus"> <![endif]-->
<!--[if !(IE)]><!--> <html> <!--<![endif]-->
The class ie10plus doesn't actually make it's way to the markup.
I also feel like there might be a legitimate way to replace the arrow in IE. I am not opposed to actually fixing the problem. appearance: none; however does not work. So what can I do here?
Avoid browser-sniffing and conditional comments (which aren't supported as of Internet Explorer 10), and instead take a more standard approach. With this particular issue you should be targeting the ::-ms-expand pseudo element:
select::-ms-expand {
display: none;
}
But!, If we want to add width, we can not do so as:
display:none
So
select::-ms-expand {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* Good browsers :) */
opacity:0;
}
Internet Explorer 10 doesn't support conditional comments, so you'll have to do something else. One solution is to sniff the user agent with JavaScript and add the class yourself:
<script>
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
document.documentElement.className += " ie10";
}
</script>
You should probably add this in the <head> so that you don't have a flash of unstyled content, but that might not be a problem.
Also, if you're using jQuery, you might want to do something like this:
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
$("html").addClass("ie10");
}
If you want to check for IE10 or above, copy-paste the getInternetExplorerVersion function from this Microsoft page and then change the if to something like this:
if (getInternetExplorerVersion() >= 10) {
// whatever implementation you choose
}
I had an issue with a hidden drop down arrow on the site on IE 10 and 11 that I am working which uses Zurb Foundation. There was a line on the _form.scss which had
select::-ms-expand {
display: none;
}
I removed it and the dropdown arrow started showing normally on all broswers. Thank You Jonathan for your answer here. This helped me after searching a lot for a solution.
still not sure what you are trying to accomplish, but this will detect and add a class for ie10:
<!--[if !IE]><!--<script>
if (/*#cc_on!#*/false) {
document.documentElement.className+=' ie10plus';
}
</script>!--<![endif]-->
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{ }
I have the following CSS that i have "hacked" with PHP because it doesn't align properly in IE7. Is there a better way to do this without resorting to PHP?
#Menu
{
width: 100%;
height: 32px;
padding-top: <?php if(preg_match('/msie/i', $_SERVER['HTTP_USER_AGENT'])){echo '22px';}else{echo '40px';}?>;
padding-left: 13px;
}
I want to avoid using conditional comments and having to maintain multiple css files.
Whoa. Yeah, don't do that. You'll want o look at using "conditional comments" to include the css you want. Your first commenter bendewey has shown how you can target IE7 easily. There are other types of conditional comments as well which will allow you to target other versions of IE.
Here they are:
<!--[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
<![endif]-->
If you plan on doing a lot of adjustments for different versions of IE, you might plan ahead and use the "body class" trick. It looks kind of ugly in the markup, but it's a proven technique and sometimes it beats having lots of style sheets and style tags.
Here it is:
<!--[if !IE]>--><body><!--<![endif]-->
<!--[if IE 6]><body class="ie6"><![endif]-->
<!--[if IE 7]><body class="ie7"><![endif]-->
<!--[if IE 8]><body class="ie8"><![endif]-->
And in your style sheet, you'd just reset any style you want by tacking on a class to the selector. Like this:
#some_div {
margin-top:30px;
}
.ie6 #some_div {
margin-top:40px;
}
.ie7 #some_div {
margin-top:50px;
}
Hopefully that makes sense. Either way, it's conditional comments you'll want to use instead of PHP.
This method still uses some conditional comments, but at least your not evaluating your code via PHP. In order to be of more assistance I would need to see a full code sample.
<style type="text/css">
#Menu {
width: 100%;
height: 32px;
padding-top: 40px;
padding-left: 13px;
}
</style>
<!--[if IE]>
<style type="text/css">
#Menu {
padding-top: 22px;
}
</style>
<![endif]-->
It's really hard to tell what's going on here without a demo page, but could it be that another element on the page is bumping it down an extra 18 pixels? Could it be that there is some default margin on the element? I can't think of anything else being the problem with the CSS you've given. Could the child elements be a different size in IE and other browsers?
Typically when I see dev's doing this sort of thing, it is because they don't understand what is going on. Then they end up with 3 separate copies of essentially the same, HUGE CSS file; and a lot of headaches.
IE conditional comments in a safe step in the right direction; especialyl that browser sniffing in your php example is doomed to fail as the user agent string is not guaranteed.
My best recommandation to you is to take the time once to read through the very boring W3C CSS documentation, if only the chapter about DISPLAY BLOCK and INLINE modes. Once you read that, 90% of your css layout problems will be solved. The rest is getting used to the most common IE6 bug, which is the infmaous "layout" mode.
#some_div {
_margin-top:40px; //Only works on IE6
*margin-top:30px; //Only works on IE7-IE6
margin-top:20px\9; //Only works on IE8-IE7-IE6
margin-top:10px; //Works on all others
}