Any solution for reducing browser compatibility problem while writing css style.
views:
152answers:
5
+5
A:
These three are the main points you need to do yourself:
- Write correct markup - make sure it validates
- Make sure your markup is in standards mode
- Write correct CSS - make sure it validates
In addition, you can do some of the following to reduce the amount of headache:
- You can use a CSS framework, like Blueprint, 960.gs, YUI CSS library, etc.
- For Internet Explorer -related issues, there is ie7.js and ie8.js
Jani Hartikainen
2009-09-13 17:45:04
I'd argue about the CSS validation... Triggering hasLayout under IE with zoom is a life-saver!
Alexander Gyoshev
2009-09-13 17:51:54
True, but you should always start with valid CSS. After it works in FF, Opera, Safari, you can then concentrate on creating styles that make it work in IE.
Jani Hartikainen
2009-09-13 17:53:27
You're right, though it's harder to isolate problems when you have more markup :) Anyway, +1 :)
Alexander Gyoshev
2009-09-13 18:04:29
A:
Well, as of now there is nothing like fixall() which will make all browsers compatible...however, you can reduce compatibility problems by using the correct doctype. Read thisarticle on using doctypes. Also, validate your markup.
Edit: You can go to Browser shots to see screenshots of your web design in different browsers.
Learner
2009-09-13 17:47:25
A:
Simple -- test, test, test.
First thing, you should have at least these browsers on your computer: FireFox3.5B , InternetExplorer7 (+ optional Safari 3, Google Chrome 2 Beta and Opera).
Now for a more definite answer:
- avoid css3 styling like "opacity" et cetera as CSS3 is not a standard yet. Instead use Javascript libraries like jQuery to apply those effects selectively
- avoid png transparency like the plague... instead use dithered gif transparency (this is now somewhat old, as it now works on IE7+)
- Test and test and test
Aviral Dasgupta
2009-09-13 17:47:28
Wouldn't consider Opera optional. Opacity works just fine as long as you remember to add IE-specific properties for it, as does PNG transparency
Jani Hartikainen
2009-09-13 17:50:24
Not in that context, but FireFox and IE consist of the largest userbase. Also if it works in Firefox and IE , it should work in those...
Aviral Dasgupta
2009-09-13 17:55:24
Adding IE specific properties to the CSS invalidates it and makes it harder to work with styles when using javascript.
Aviral Dasgupta
2009-09-13 17:56:56
+1
A:
- Know how HTML and CSS work
- Test in all browsers you target
You may also want to use a CSS reset file to start on the common ground.
Developer Art
2009-09-13 17:48:44
A:
Discipline!
- Validate your HTML. Use a correct DOCTYPE.
- Use standards, hack the bugs.
- Be descriptive, or use a reset stylesheet.
Alexander Gyoshev
2009-09-13 17:50:46
I'd argue that `css` and `html` hacks shouldn't be used. In any case, use conditional comments. Also, I don't really see the need of a reset stylesheet. I always override the styling of the `html` elements that I use. And leave the rest alone. Less bytes through the wire ;)
voyager
2009-09-13 18:03:05
I myself don't use a reset stylesheet, though it's an option - that's what I meant about being descriptive. They mess up any content that you didn't have on the page while developing :P And conditional comments, while unobtrusive, are still a hack ;)
Alexander Gyoshev
2009-09-13 18:06:45
@Alexander Conditional comments are a **supported** hack - they work as the makers of IE intended. True CSS hacks rely on bugs in a brwoser's CSS parser, and are thus potentially breakable when they fix said bugs.
ceejayoz
2009-09-13 18:16:56