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.
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.
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.
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 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.