Is it a good idea to put all conditional CSS rules in one conditional stylesheet instead of making multiple stylesheets for different versions of IE?
Example:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Content of all-ie-only.css:
selector {
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}
Using IE underscore/asterisk hacks see: http://webstandardstips.com/2008/11/18/css-hacks-for-ie-only-style-rules/
The advantage I see in this technique is that you have just one style sheet in your server which may be easier to maintain.
The disadvantage is that users will need to download the whole file which may be 3 times bigger hence taking more time to download and to process.
Appart from that, I think there's no other issues with it.
Yes, it's fine. I think it becomes a question of how many items the file has to hold. If you're just overriding 1/ 2/ 3 things, the single file makes much more sense. At some arbitrary point (10 things? 100 lines of code), I'd say the trade-off swings the other way and it's simpler to maintain the three files.
What if IE 10 comes along and invalidates some of these hacks? I think this approach defeats the purpose of using IE conditional comments in place of hacks, that being more of a future-proof implementation.
Plus is there any advantage, besides slightly easier maintenance, and negligible HTML file size savings? As LuckyShot mentioned, it's already a detriment for IE users which will have to download a larger browser-specific file.
this is right to use this for all IE Version. but when you use this then you will find that, this is not w3c valid. Generally IE create problem.Safari, Chrome , and Firefox will run these good.I think this is better idea to use one Css for all IE version.
As long as it works and its valid, then it doesn't really matter whether its in 1 file or 3, its just personal preference.
Personally, I prefer to have a seperate sheet for each IE version (if needed), as I find it easier to organise.
Like I said, if its W3C complient (god, don't we just love them), then its all good.
Related
I know this could boil down to a philosophical issue, so I don't mean to start a discussion on the topic. But I'm looking for the (or a couple of them) best way to resolve most issues of CSS styling in Internet Explorer 6.
I'm aware of this article on forabeautifulweb.com, and it's recommendation to just feed IE6 users a universal plain IE6 stylesheet with just some basic styling better than the browser defaults. For my application this is not the best.
I'm also aware of the concept of "fixing" IE6's CSS support via Javascript, and I'm sort of a fan of this idea. But I don't know what (if any) the best one is - I know there's several floating around in the wild. This article by Eric Meyer mentions one, but this was written almost 2 years ago, so is there a more standard script to use for this purpose now?
Can anybody point me to one or two such scripts that have been proven to be effective for updating some of IE6's handling of CSS to behave more like a modern browser?
UPDATE: to all the people answering who are trying to convince me not to use JS to fix the problem - I am plugging my ears and humming. :)
Seriously, I'm not asking whether or not to use JS for this. We've already decided we don't need to support IE6 and it is not worth the time for us to try to "debug" our stylesheets just for IE6. This decision is based on our audience and on our site stats for IE6 usage.
As far as all the comments about "what if the user doesn't have JS enabled?" Well in that case a lot of stuff on our site is not going to look right anyway, so that is somewhat of a mute point.
I've already implemented the IE7.js that Gordon suggested, and that is quite sufficient for us to get by in IE6, with very little drawback.
Thank you all just the same for your input.
You can use this library if you want to do it with JavaScript:
IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
There is also CSS3Pie, which adds CSS3 support to browsers:
PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.
Also have a look at Progressive Enhancement and Graceful Degradation for a design philosophy.
Please don't use JavaScript to fix the problem, just add some rules to a stylesheet to fix them...
<link rel="stylesheet" type="text/css" href="normal.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
In the ie6.css, you just have rules that fudge the styles to work in IE6, you still use your normal stylesheet alongside it, so your site looks the same in IE6 and normal world.
From personal experiance, ie6 can be fixed within a few lines of CSS and a fair bit of inspecting with firebug/developers toolbar.. without the need for conditional comments.
majority of the problems I come accross are padding / margin based and it is down to me not using the best method first time round.
I also find that overflow:hidden fixes its fair share of ie6 bugs too.
i suggest, get ie6 open with the developers toolbar and try and find where the problem lies, and think of a better way to code that section.
Thats just me personally, I use conditional comments as a LAST resort.
Dean Edwards’ ie7.js script (linked by Gordon) is still the state of the art in this area.
As to what’s the best approach, it depends. Dean Edwards’ script fixes a lot of IE CSS bugs, and allows you to use selectors like the multiple class selector and the child selector that aren’t supported at all in IE 6.
If you’re happy that the IE 6 users in your target audience tend to have JavaScript turned on, a library like Dean’s can save you a bunch of time, and allow you to trim down your code by using the selectors that IE 6 doesn’t support.
However, you’ll likely still need an IE 6 stylesheet to deal with issues that Dean’s library doesn’t fix.
The best solution may be to wait for Microsoft to stop supporting IE 6 (like they did with Mac IE 5), because if Microsoft don’t support it, it’s hardly fair for people to expect you to. We‘re currently hoping for 2014 on that score.
Generally, you don't need javascript. You can use plain old CSS. It helps to have a good knowledge of hasLayout though.
More often than not, you can fix IE6 and 7's issues by giving the problem element layout. To do that, give it a fixed height or width, or use the proprietary zoom.
My favoured method of targeting specific versions of IE browser is to use conditional comments to add a <div> as a direct child of <body> which lets me know which version of IE I'm in (like so). That way, I can target IE6 directly:
.IE6 div.fubar {
zoom: 1;
}
The other thing to remember is that it's almost impossible to achieve pixel parity across IE6/7/8/Firefox/Safari/Chrome/Opera, so if some things don't look quite right in a browser that's nearly ten years old, you don't always need to worry about it.
Position is everything has some useful tips on IE bugs, too.
Don't use javascript if you can avoid it - you are not guaranteed that your users have JS activated (as already mentioned) and you actually don't need it.
To get rid of many problems of different interpretations from browsers (not just IE) user a css-reset stylesheet. There are many floating around.
Even better yet, use a CSS framework which will remove many many problems between different browsers and will come with many helpful classes to solve standard issues.
I for one love YAML (http://www.yaml.de/en/home.html), then there's Blueprint (http://www.blueprintcss.org/) and probably a few others. Believe me - once you used a CSS Framework you will never want to go back.
jQuery and its plugins work best for IE6 issues. Give it a try!
If a site is looking the same in all required browsers, is it okay if my CSS is not valid?
Specifically, the CSS is not valid because:
I'm using vendor specific properties,
I'm using IE 6 and 7 hacks,
I'm using browser specific hacks
What benefits do I get if I make my CSS fully valid?
The pros are simple --
Your site is more likely to render in multiple browsers in a uniform manner if you follow standards, and your code will be more machine readable.
Browser specific hacks are sometimes fine, but beware that you may have to maintain them as later browsers come out that don't support them.
(from below:) If you don't use fully CSS compliant code, you'll have to remember which bits are intentionally non-compliant every time you verify your code through a CSS parser/verifier.
It will illustrate any obscure bugs you've most likely missed, which have effect on things you won't have tested.
One thing you can do is have a special stylesheet for specific browsers. For example, for IE specific code, you can use special IE-only conditional comments to include the CSS. Here's an example to show a sheet called iestylesheet.css for IE 6 only:
<!--[if IE 6]> <link href="iestylesheet.css" type="text/css" rel="stylesheet" /> <![endif]-->
And obviously, the most important reason to use compliant CSS is that without doing so, you don't get that nifty W3C CSS compliant icon to put on your site. :-)
If you keep your CSS fully valid, you can easily use the validator to check your CSS files for errors. (Because anything invalid will be a mistake.)
If you’ve got some intentional invalidity, you need to remember which bits of invalidity are intentional, and which aren’t. Future developers who work on the code will also need to work out which invalid bits are intentional.
So commenting intentional invalidity is a good idea.
I want to have a particular CSS style different for IE6. Basically I am using CSS sprites with a PNG file. But for IE6 I want to use the .gif version.
I dont want to use the <!-- if lte IE6 statement. I want to include it within my CSS file itself.
How do I do that?
Edit:
I need this because I want my users to include a single CSS file and not 4 lines of code. My users are absolute newbies. I don't want to confuse them. Plus the only change I want is to use .gif instead of the current .png.
Edit:
How does _background-image: sound? Is there anything wrong with that?
Alternatively, can I use a conditional statement inside a CSS file?
If you don't want to use conditional comments, then you can use the * html hack:
h1 {
color: green;
}
* html h1 {
color: red; /* this will only be applied by IE 6, 5.5, 5, and 4 */
}
Apparently you can put IE6 specific statements into a CSS by prefixing them with an underscore.
See http://vexxhost.com/blog/2007/03/01/only-css-hack-you%E2%80%99ll-ever-need-seriously/
As you obviously will have noticed from the answers you're getting, using conditional comments for this is so standard that people tell you to do that even when you've specifically said you don't want to.
But if you absolutely have to have the user agent determination made at the CSS file level, what I would do is write a PHP script that outputs the CSS (rather than HTML) and analyze the user agent in PHP. If the file has to be referred to as stylesheet.css or whatever, Apache rewrites or MultiViews can be used to make a PHP script available under that name.
Here's a pretty comprehensive list of unrecommended hacks:
http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
You said you don't want to use conditional statements, but they are very much the recommended and best way to go. The main reason is maintinability, CSS browser hacks are often hard for the next person, or you several months down the line, to understand. Having non-hacky CSS in a completely separate file makes it far easier to manage.
I would very much recommend you don't do user agent sniffing, it is open to lots of problems, for instance many browsers report themselves as IE even when they are not (default in Opera 7 I think). The User-Agent string is not to be trusted and should only be used as a last resort.
Use a conditional comment.
<!--[if IE 6]>
<link rel="stylesheet" href="/ie6.css">
<![endif]-->
edit: Now that Wellbog has fixed your question, no, there's no way to do that with pure valid CSS.
You could conceivably use PHP or another server-side language to detect IE6 from the user agent string and serve a different CSS file, but it's much better to just use the conditional commenting technique.
What's your reason for refusing to use the existing, working, non-hacky solution Microsoft provides?
Addressing all the browsers back to IE6 is quite challenging. Every browser supports different features of the specifications. Is there a guide on a safe subset of CSS which can be used across browsers (IE6,IE7,FF1,FF2,Safari,Opera)? That way I wouldn't have to test my style sheets in 6 different browsers after every small modification - and adjust to their irritating quirks.
Here is a valuable reference.
http://www.quirksmode.org/css/contents.html
Also, for IE and select other browsers - conditional comments.
http://msdn.microsoft.com/en-us/library/ms537512.aspx
I use them this way. I override any IE specifics.
<link rel="stylesheet" type="text/css" href="theme.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="theme-ie6.css" />
<![endif]-->
In my experience while some CSS attributes might be supported by all browsers they don't always behave the same. Even some of the most basic attributes, like margin/padding/float, can cause things to look different between IE and everything else.
Usually the overall site template is the most complex. The way I do things is once I get that template written, and the simple classes to be used by the actual content, test a few sample pages in all the browsers. Usually you won't throw any major wrenches in the system once you're just working on content (although I'll always do a paranoid check here and there).
Both links from Daniel and jleedev are valuable resources. Your best bet in many cases is to use a reset stylesheet (just one example) that will minimize the rendering differences between browsers.
Dean Edward's IE7 is a JavaScript include that will add many standard CSS functionality into IE6/7 (such as <abbr> and support for pseudo selectors).
I recommend developing for Firefox/Opera/W3 spec, then using conditional comments for IE6/7.
I have found a book called Pro CSS and HTML Design Patterns, which contains pre-tested snippets of reusable CSS. This is very close to what I actually needed.
Is there a list of 'good' clean CSS hacks, which are certain to be future-proof?
For example, zoom:1 is safe, as long as it's only served to IE, and you remember it's there. The very common hack of using child selectors is not safe because IE7 supports them. Using height:1% just feels dirty (but that might just be me).
I know of ie7-js, so IE6 bugs don't worry me much. Also, I'm not looking for a religious debate, just sources.
Thanks for the replies - I've selected the one with best sources as answer.
Thanks also for the suggestions to use separate CSS files, or not to worry about it. I entirely agree with you, and for me, those are givens. But when faced with a layout problem, I want a safe fix that will minimise the risk that I'll have to revisit the problem in $IE or $FF + 1. Sorry I didn't make that clearer.
For the majority of IE bugs I think you're best off using conditional comments around a link to a browser specific stylesheet. It tends to keep things pretty neat and it's quite self documenting.
This is a good place for well-documented and well-tested browser bugs and the hacks allow you to work around them:
http://www.positioniseverything.net/
I've used Peter-Paul Koch's "QuirksMode" website a lot for issues involving CSS and cross-browser compatibility. He tends to frown on browser-specific methods, but he does have a page on CSS Hacks.
Nicole Sullivan (AKA Stubbornella) who works for the Yahoo Performance team suggested in The 7 Habits for Exceptional Perf that you should use the CSS underscore hack to patch up IE6 bugs because:
Hacks should be few and far between.
If you will only have 5-6 hacks (which is already plenty) then it would not make sense placing those in an external file and thereby separating it from its context.
An extra file would lead to performance penalties (Yahoo Best Practices, Rule 1).
It should however be noted that this is not valid CSS.
There's no such thing as a good clean/acceptable [css] hack - always code to Standards, and then use browser+version specific stylesheets for any hacks required to make things work.
For example:
default.css
default.ie6-fix.css
default.ie7-fix.css
default.ff2-fix.css
etc
Then, when new version of a browser are released, copy the previous version's hacks and remove the bits that no longer apply (and add new bits, if necessary).
(Load individual stylesheets using Conditional Comments for IE, and user-agent sniffing for other browsers.)
Underscore-hack for IE6-stuff works quite well, eg.
min-height:50px;
_height:50px;
It doesn't require moving things out of context into new css-files, only IE6 gets them and they're easy to filter out if you should decide to stop supporting IE6. They're also very minimal and won't clutter your CSS that much.
Modifying your CSS for browser-specific support is never wrong - as long as you can easily contain it. As you'll notice, standards-compliant browsers, * cough * everything except MSIE, will never break with future releases. New W3C standards also don't break previous standards, they usually deprecate or extend previous standards at the most.
People have mentioned conditional comments which are great for handling IE. But you'll need a bit more for handling all browsers (mobile, gecko, webkit, opera, etc.). Usually you'll parse the incoming request headers to fetch the browser type and version from the User-Agent param. Based on that you can begin loading your CSS files.
I belive the way most of us do it is by:
First developing for one standards-compliant browser (let's take FF for example)
Once the CSS is complete you approach providig support for IE (this can be easily done with the conditional comments, as perviously mentioned)
First create a CSS file that will fine tune everything for IE6 and any other version below
Then create a CSS file that will handle everything for IE7
Lastly, create a CSS file that will handle everything for IE versions of IE8 and greater
Once IE9 comes out, make sure you set IE8+ handling to IE8 specific, and create a IE9+ CSS file with required fixes
Finally, create an additional CSS file for webkit fixes
If required, you can also create additional files to specifically target Chrome or Safari if required
Concerning browser specific CSS implementations, I usually group all of those in my main css file (you can easily do a search for those and replace them in one document if needed). So if something has to be transparent, I'd set both opacity and filters (MSIE) in the same block. Browsers just ignore implementations they don't support, so your safe. Specific implementations I'd tend to avoid are custom implementations (hey, I like the -moz box above the W3C one, but I just don't want to rely on it).
As it goes with CSS inheritance and overriding, you don't have to redefine all the CSS declarations and definitions in every CSS file. Each consecutively loaded CSS file should only contain the selector and specific definitions required for the fix, and nothing else.
What you end up with in the end is your (huge) main css file and others, containing a few lines each, for specific browser fixes - which sums up to something that's not that very hard to maintain and keep track of. It's a personal preference what browser your base css file will be based off, but usually you'll be targeting a browser that will create the least amount of issues for other browsers (so yes, developing for IE6 would be a very poor decision at that point).
As always, following good practices and being pragmatic and meticulous with selectors and specifics about each class and using frameworks will lead you down the path of goodness with seldom fixes required. Structuring your CSS files is a huge plus unless you want to end up with an unordered meaningless mess.
Centricle has a good list of CSS hacks and their compatibilities.
I don't think you'll find a list of hacks that will be future proof, as know one can tell what stupid thing will be implemented in IE next.
This article is a good summary of CSS hacks: http://www.webdevout.net/css-hacks
Here's a good list of filters that are very stable:
/* Opera */
.dude:read-only { color: green; }
/* IE6/IE7 */
#media,
{
.dude { color: silver;}
}
/* IE8 \0 */
#media all\0
{
.dude { color: brown; }
}
/* IE9 monochrome and \9 */
#media all and (monochrome: 0)
{
.dude { color: pink\9; }
}
/* Webkit */
* > /**/ .dude, x:-webkit-any-link { color:red; }
/*
* > /**/
/* hides from IE7; remove if unneeded */
/* Firefox */
#-moz-document url-prefix()
{
.dude { color: green; }
}
When defining rules, I find it good to allow natural degradation take place, for instance, in CSS3 there is support for RGBA Colour models, but there isn't in CSS2, so I find myself doing:
background-color: #FF0000;
background-color: rgba( 255,0,0, 50% );
So that when the later rule fails on older browsers which don't support it, it will degrade to the previously defined style.
I prefer the global conditional comment technique described by Hiroki Chalfant;
I find it helpful to keep my IE-targeted rules side-by-side with my standards-targeted rules in a single valid stylesheet.