On Thu, 16 Sep 2010 01:24:40 +0100, Keith Purtell
<keithpurt...@keithpurtell.com> wrote:
In my search for information about accommodating different browsers,
I've come across four recommended approaches:
1-Write a JavaScript to load separate style sheets.
2-Use JavaScript to write "local" css in the page header.
3-Use conditional comments to insert JavaScript or css into the header.
4-Write a single css style sheet that is cross-browser.
A typical example of a problem I'm trying to deal with is IE ignoring
max-width. I've found the least info about option 4; not sure it's
possible? PS I'm trying to accomplish this without server-side
functions. My cheap-o agreement with my hosting service limits me to
plain html and css documents.
Sites advocating these different approaches seem credible, so I'm left
with the problem of figuring out which is best. I'd rather ask you folks
than run tests that someone else has already performed.
- Keith Purtell
#1 + #2 will fail in a JavaScript disabled or non-capable browser.
JavaScript should sensibly be used to 'enhance' the user experience, not
to provide basic page functionality.
#3 is a common practice for providing modified stylesheet/s only to
versions of IE, and is a handy way of introducing a small piece of
JavaScript that will let IE6 make use of pseudo classes for hover.
A modified stylesheet for IE versions linked through a conditional comment
will not be seen or loaded by the other mainline browsers as the
conditional comment is a MS proprietary browser instruction.
IE version targeting can be specific to each browser version.
The sheet only needs to contain the 'variations/hacks' required providing
that the conditional comment follows the links to the main stylesheet.
If stylesheet validation is important to you, this method will allow your
main stylesheet to remain fully valid.
#4 Not as difficult as you seem to suspect, David has provided a couple of
the important 'hacks' to target IE. They will be ignored by other browsers
but may prevent validation of your stylesheet which isn't the end of the
world in many cases.
Much more important, in my opinion, is to write clean CSS that is focused
carefully on what you are aiming for in terms of style, i.e. don't throw
in rules for the kitchen sink if you don't have a kitchen sink on the site!
Test and design in a fully compliant browser, THEN pick up the pieces for
Internet Explorer.
IE 8 will be reasonably steady with CSS 2 / 2.1
IE 7 trips up here and there but is not too hard to push into shape.
IE 6 is far from dead (as most would wish), some things are fairly easy to
correct, or you could opt for just providing it with a basic style via
conditional comments.
CSS 3 is only possible in any of them with the help of JavaScript.
Best wishes
Duncan
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
