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
Related
Currently I am working on a webpage and need to set a style only for IE. I am using a conditional comment:
<!--[if IE]>
<link rel="Stylesheet" href="../../IEstyles.css" rel="Stylesheet" />
<![endif]-->
Is this the best way of doing this or would using javascript be the best practice?
That's nearly the best practice. You should probably instead be checking for [if lt IE 9], because IE 9 supports CSS pretty well, but definitely don't use browser-sniffing JavaScript. That's almost always the worst solution to a problem.
Html5Boilerplate is the site for best practices and here's what they suggest:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
This allows you to keep one stylesheet and just prepend any of the above classes to target a specific conditional hack.
Not everyone has JavaScript enabled - HTML comments are supported in every mainstream browser that I know of.
As this is just a stylesheet, and therefore a UI concern, I would avoid javascript and just use the conditional comments to target IE. This then also gets around the issue of people who have javascript disabled, should you try and do some kind of browser sniffing.
Use Conditional Comments. They prevent other browsers from having to download/run any scripts, yet have the benefit of always working for IE users.
Using the conditional would be the best idea, as you have no guarantee that the visitor won't have javascript disabled, or scripting disabled. Where as this will only work in IE browsers, other browsers will ignore it, where as all browsers will process Javascript, whether it's for IE or not.
Javascript can be disabled, so I'd say conditional comments are the best way to serve IE-specific CSS.
I've finished making my website, but then I loaded it up in IE8. Big problems! For instance, a bunch of my div and span elements seem to be transparent (they should have coloured backgrounds), and floating elements don't work.
When I was developing my site, I had hoped I would just be able to ignore the older internet explorers - ie9 is standards compliant, and eventually everyone will end up using that. However, Microsoft are not releasing IE9 for XP, but people are going to be using that operating system for a long time still, I think. As such, I need to support IE8.
Does there exist a comprehensive list of all the things that IE8/ do wrong? Not something like Quirksmode.org, but a guide to the common issues with layout in IE8, and the hacks needed to fix them?
EDIT: The transparent elements thing seems to be somehow related to my use of css3pie.
You could try using conditional classes to target specific fixes for specific versions of IE. This is from Paul Irish's HTML5 Boilerplate:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
With these comments you can specify something like:
.ie7 #container {margin-left:-1px;}
And it would only change your #container margin on IE7.
If those don't work, post some of your code and people might be able to point out some incompatibilities.
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!
I want to uses some css attibutes only for IE 6,7,8 in a css file. is it possible?
Is it possible to target specific version of IE for each attribute.
somthing like this:
.mystyle {
top:5px
top:-30px //only if ie6
top:-5px //only if ie8
}
i know about <![If lt IE7]> tags but, i dont want to create one more css file.
This script is tiny, and filled with awesome: http://rafael.adm.br/css_browser_selector/
It will put classes on the HTML element that correspond to the user's browser. That will let you do things like this:
.ie7 .mystyle { top:5px;}
.ie8 .mystyle { top:-30px;}
I wouldn't create a new external javascript file just for this script. Its so small that I usually just add it to the top of my existing external javascript file.
there are a number of hacks you can use in your stylesheets themselves but this is generally considered bad practise. Here is an example
Why don't you want to use multiple stylesheets?
inspired by Stephen's post you could do this (stolen from html5 boilerplate by paul irish):
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
Final edit
should explain. If you add this to the html you will conditionally set an IE overriding class. The final line renders no class if browser is greater than IE9 (none) or not IE
You can use IE hacks, which will achieve what you're looking for. However, it's not advised to do that; long term maintenance will become difficult.
The conditional comments solution is the easiest and cleanest solution, and it's supported by MS. You should use them.
I'm using the proprietry MS 'filter' property to try and create a non ugly equivalent to css3 text-shadow and box-shadow;
I was actually doing really well until I hit this problem. It looks like when I apply a filter to a div inside another div which also has a filter the filter effects end up being combined on the child object.
I've tried using filter:none; to do a reset but no joy. I've also tried different variations on the syntax, ie "-ms-filter: 'progid:...Glow()'", "filter: progid:...Glow()", "filter: Glow()", etc..
Testing in IE8
There is boolean attribute enabled, for which you can set false or true
http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx
Example:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
The -ms-filter property is a non-standard, browser-specific CSS entry and as such requires that its parameter is enclosed with quotation marks. So -ms-filter: "none" will work just fine.
try this:
filter: -;
I've had some success by positioning the children absolute or relative. This didn't seem to work earlier though so it may break again once I get more complicated
I think once a parent has a filter applied all of it's children essentially become directx surfaces internally. You can still select text but it lags. I think text selection is a hack which makes each letter a seperate surface. It's a shitty mess which goes a long way to explaining why the browser in general and filters in particular are so buggy.
If you're using HTML5 you may want to go down the route of using
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8 oldie"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="gtie9 modern">
<!--<![endif]-->
and in your CSS use something like:
.ie9 .element {filter: none; }
Have you tried to enable/disable the filter(s)?
I've found the best way is display:inline-block (applying white-space:nowrap to the container). But it seems to work bad with IE7 and lower