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!
Related
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 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 need an IE9 CSS hack to be able to set the background-position property differently for IE9.
I have tried with several different ones that didn't work and from what I read somewhere, the background property is not possible to "hack" at least the same way as the other.
I basically need this to only apply to IE9:
#ABB_ABContent .subnav li.selected { background-position: center 17px; }
Any suggestions?
If you can't find anything else, there's always conditional comments:
<!--[if IE 9]>
IE9-specific code goes here
<![endif]-->
This would have to live in your HTML code, rather than your stylesheet, but you could use it to include an additional CSS file for IE9.
Alternatively, you may want to look up the Modernizr library. This is a small Javascript tool which you add to your site, which detects what features your browser supports, and allows you to write your CSS to target specific features (or their absence). If there's something about IE9 that it doesn't support which you're trying to work around, this may be the best solution.
I'm still puzzled as to what problem you're trying to solve though.
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="your path" />
<![endif]-->
My site uses data uri:s to reduce the number of HTTP requests to my site. The problem is that data uri:s don't work in IE7, a browser that we have to support (No, we don't need IE6). I've followed Stoyan's guide and actually gotten it to work, but after a recent Microsoft security update (KB2544893, as descibed in a comment on the original article) the fallback seems to have stopped working.
The comment referenced above suggests I should try sending the MSHTML file with Content-Type message/rfc822, but I can't get this to work either, and I've tried multiple different ways over a course of several hours.
So my question is this: Can you get the technique described by Stoyan to work somehow? I would really appreciate a working example to convince me that it truly is possible.
Personally I would use conditional styles. In your main markup - start it as follows:
<!DOCTYPE html>
<!--[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]-->
In your css you can now do:
.myClass {
background-image: url(/*DATAURI GOES HERE*/);
}
and
.ie7 .myClass {
background-image: url(fallback-image.png);
}
UPDATE
Further to the comments below, if you're concerned around IE7 performance - a reliable approach would be to make your IE7 fallback image a sprite.
That way you're only making 1 additional HTTP call for IE7 users:
.ie7 .myClass {
background-image: url(fallback-sprite.png);
background-position: 150px 15px;
}
I got in contact with Stoyan Stefanov (the original author of the technique), and he fixed his original example so it now works. Simply adding "message/rfc822" as content-type was all that's needed.
Fixed example: http://www.phpied.com/files/datasprites/testhover2.html
I asked him to post a comment here so I could award the points, but he didn't want to.
http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ here's your solution i think
in ASP.NET application, how to design the pages in such a way that they are displayed properly in both IE6 and IE8 browsers? I would like to minimise the CSS work that I need to do if there are any general guidelines to follow which will work in both browsers. I may still need to tweak here and there, but I want to reduce bulk of the work. Please let me know if there are any such guidelines.
Thanks in advance.
I have been coding a recent project and used the ie7.js script from http://code.google.com/p/ie7-js/. It works marvels at fixing IE 6 to a reasonable level. Then use this block to declare your body. (This part was ripped from html5boilerplate).
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
You can how polish up any stray css my using the respective id like this...
#ie6 .element{
//special stuff for ie6
}
The ie7.js script should save you quite a bit of time though.
If you add the following line to your section it will force compatibility mode and help minimize the amount of CSS you need to write:
<meta http-equiv="X-UA-Compatible" content="IE=100" />
However, you probably won't get it perfect without writing custom CSS rules.
Start by making sure that basic layout of your page is working cross-browser. This can be quite trick, but the good news is that other people already did the heavy lifting for you. Just google for "one column", "three column", "holy grail" or whatever layout your are aiming for and you will find plenty of articles describing how to achieve it in any browser you want.
Starting for there, my suggestion is to code for IE8 and add hacks for IE6 when required. This should keep the hacks at a minimum since CSS that works in IE8 usually also works for Chrome, Firefox and the other decent browser.
Don't try to make your site pixel perfect across all browser, this will only drive you insane. Let your website "degrade gracefully" on the older browser. IE6 users won't care if the site don't have rounded corners or gradients anyway.
Using javascript to simulate modern CSS features in older browser is also a good idea. But I don't recommend using the ieX.js scripts. These scripts require too much CPU to run and can make your site unresponsive if your HTML is heavy.