Developping for all browsers, then fighting for IE compatibility is a well know step in all web developement process.
Not being a web integrator, do you know any generic compatibility stylesheet that are good to include for IE ( In my case I'm only concerned about IE7, but I'll let the question open for all version )
normalize.css is a good reset that addresses a lot of cross-browser issues.
http://necolas.github.com/normalize.css/
Twitter Bootstrap is good if you want pre-made components. It is IE compatible.
If you decide to use Bootstrap, its reset is actually adapted from normalize.css (so you won't need both)
HTML5 Boilerplate may also help with some best-practice markup if you're getting started from scratch:
https://github.com/h5bp/html5-boilerplate
In particular, I'd recommend using the HTML5BP conditional comments to target specific IE versions, like this:
<!--[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]-->
That means in your CSS you can address IE version specific issues with classes:
.lt-ie8 .awesome-component { ... }
Finally, I would recommend AGAINST using javascript polyfills like CSS3PIE. In my experience they just cause more hassle than they're worth, adding unnecessary markup.
Learn a bit about graceful degradation / progressive enhancement.
Another answer mentioned IE7.js which I believe is fine, though I can't remember how useful it is. You'll definitely need to shim missing JS functions (if you're using js) such as Array.indexOf in IE <= 8. I just found this ECMAScript5 shim which looks pretty good:
https://github.com/kriskowal/es5-shim
I generally use Eric Meyer's CSS reset (http://meyerweb.com/eric/tools/css/reset/) which is a good simple starting point.
You may also wish to consider using ie7js (http://code.google.com/p/ie7-js/), which uses JavaScript to get different versions of IE to behave better.
Related
I am designing a responsive website. My CSS file starts with a block for the mobile layout, followed by a media query for the notepad layout and another media query for the desktop layout. I would like to make some concessions for IE8, which does not support media queries. SO, as currently structured, when my site is viewed in IE8, it reverts to the mobile layout, which is the first CSS block encountered in the style sheet. Not a good look for a desktop monitor, which I would expect the IE8 user to be.
Is it possible to insert some code in the CSS sheet that says "If you are an old IE browser, go to the desktop block for the layout?" OR, "Skip the mobile layouts"? ALternatively, I can create a separate IE CSS sheet, using conditional comments in the source code to call it up. If that's the way to go.
Will the extra style sheet be a drag on the load time for my page? (There's a limit to how far I'll go to accommodate people still on IE8!)
I like the way html5 boilerplate handles conditionals. It attaches ie classes to the html tag like so:
<!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]-->
<head>
It makes it pretty easy to target what you want after that. Paul Irish talks about it. I would probably just stick with one large css file rather than have multiple, unless it's only one page of my site or I want to punish ie users.
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 have a problem with HTML 5 on my blog. I have made some small tiny changes to the default Twentyeleven theme and they site now blows up on IE6, IE7 and IE8.
Since I've started looking under the hood I've been thinking of re-skinning the site myself in HTML 4 Strict doctype.
Taken from the current markup: isn't all this a whole bunch of nonsense?
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if lt IE 9]>
<script src="http://www.example.com/wp-content/themes/twentyeleven/js/html5.js" type="text/javascript"></script>
<![endif]-->
All this conditional formatting, for what? If the world isn't ready for it, why use HTML 5 at all?
Is there ANY technical reason to do that? Is my site ever going to validate if I take the HTML 4 route? Will I have to override the output of all plugins I'm using?
Looking forward to your comments.
There is no definitive answer to this question. It depends on the users (specifically, which browsers they are running) and requirements of the site.
Some sites need bleeding-edge technology or rapid design changes, both situations with which HTML5/CSS3 can help. Other sites are very simple and stable, and HTML5 is entirely optional.
There's no need to use HTML5 just because you can - if you can do everything you want to do in HTML4, use that.
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
Is it typo? Closing conditional comment tag missed. Add this code after yours
<![endif]-->
Maybe it will help.
Second. If you have different opening html tag for dfferent versions of IE, how do show this tag for other browsers? Conditional comments are understood only by IE.
More information more help.
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!