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.
Related
I have researched a lot regarding why my JSTree is renderering really badly in IE8, while working perfectly in Chrome. At least one of the problems is IE8's lack of support for the css-property background-size. I am using custom icons to represent folders and files. Each line in the tree structure has a height of 24px in IE8 , when it is 40 in chrome. The latter browser calculates the line height, by automatically wrapping around the icon size, using background-size: auto;. IE8 does not.
I've tried to implement lots of different solutions to make up for IE8's lacking functionality, like:
How do I make background-size work in IE?
IE 8: background-size fix
and the linked-to https://github.com/louisremi/background-size-polyfill
However, due to the complexity of the jstree, and it's default css-files, I am having a really hard time implementing any of these solutions into the existing code, as I am lacking the experience to fully understand the structure of the default.css.
What would be the correct course of action to make this work? I've also searched for compatible .css files for IE8, but found nothing.
An answer which confirms my fears of having to create my own .css from scratch, and understanding it completely, would also be very welcome. However, I would love a second opinion, before I invest the time to do that.
EDIT:
These are screenshots from my current situation:
Chrome has nice spacing, and visible chevron/arrows/expanding icons. Also, the font works.
IE8 has no auto-size, which makes the height 24px instead of 40px. Ive tried manually setting them to 40, but no luck. The lack of visual finesse does not bother me too much, but the lack of the arrow expanding icons are vital to my application's usability.
Working edits of the current theme, will be accepted as an answer. So will link to alternative themes that are compliant with IE8. Or anything that helps me understand how to fix the problem myself.
The best way is create a separate style sheet for IE8
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->
there are many other things like in page like you need to add meta tag
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
and one more thing please post some of your code in a fiddle so that we can better trace the actual cause of problem.
Update:
also check after adding this fix..
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
I hope this will add something positive.
Update:
After checking jsTree Demo I can conclude one more problem the jQuery Version.
If you are using jQuery v1.10.1 or later. that jQuery does not have support from older browsers like IE8 for that one must use v.1.9.1 which is the last version which supports IE8.
Try respond.js which made your ie8 browser to compatible for css3 pseudo elements and other stuff.
https://github.com/scottjehl/Respond/tree/master/src
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!
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.
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 have designed many web-templates. But (except my first one) I've never used browser detection scripts to load corresponding CSS.
I am not sure whether it is a good technique, or just an alternative way (to struggle with a single CSS to satisfy all the browsers)?
It depends on how complex your layout is.
On the whole, there are a set of "problem features" with some browsers, such as the browser not following the border-box model and assigning margin, border and padding values incorrectly.
Many designs aren't affected by the problems and look very similar in all browsers, but if you have a part of your design that has a touch point on one of the issues, it is probably better to extract the "fixes" into a separate stylesheet, rather than pollute your standard CSS with hacks.
You should find that you have
1 Stylesheet for "standards compliant browsers"
and
1 Stylesheet to cater for any issues with the others
If you have more than this, you're creating trouble for yourself and are juat adding to the number of http requests for the page.
Most commonly people use conditional comments in Internet Explorer to load a separate stylesheet for just IE, and a default one for all the others.
More info on MSDN
The best option is to use a css which is compatible for each (major) browser.
So the question is; do you really need browser-specific-css?
If you really need it; you can use:
<!--[if IE 7]> <link rel="stylesheet" ....> <![endif]-->
From my experience I would always try to avoid to really fall into the specific-browser-CSS-trap. Try using CSS-reset-methods and from a fresh start build for a defined set of current browsers. I would rather try to make little changes to the designed layout to get it working as so much time can be saved by that (if it's possible in the project or the designer is cooperative).
Another aspect where it would make sense is an approach like the one Andy Clarke talks about in his nice book (Website http://www.transcendingcss.com/). Use latest tags and all options that make your code and CSS simpler, shorter, more semantic - even if it results in explicitely different look and feels for, e.g. Firefox and IE.