CODEWITHSUNDEEP
htmlcsscross-browsercompatibility
teutara
teutara

Reputation: 635

Is there an easy way to generate a CSS file that is compatible with all (or most) browsers?

I am in a collaborative work of generating a website for disabled people, mostly will run on limited number of educational centers-offices that will donate tablets and old-notebooks to attendants. I am telling you this because i want to give you an idea about the possible users and different OS and browsers. I want to generate CSS code that will be compatible with all possible browsers; older and newer browsers.. I am writing from scratch and i build it by visiting http://browsershots.org/ each time to see if there is any compatibility issues, but it takes time. Also i use http://jigsaw.w3.org/css-validator/ but again too many manual work..

What i would like know is: do you happen to know any tool that you feed your CSS file that is compatible with, say IE at the beginning, and hands you the extended version of the CSS file that covers many of the compatibility issues?

Any help is greatly appreciated..

Upvotes: 1

Views: 1303

Answers (3)

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

Reputation: 2804

Netbeans IDE has a feature which helps you to construct CSS from simple tick boxes and drop downs. I haven't confirmed the validity against W3 yet though, but the code generated looks good.

Also a useful resource to check use is http://www.w3schools.com/cssref/default.asp. It does take time to reference the properties you wish to use, but it is always worth confirming their compatibly if your going to experiment with layouts, and a must if using CSS3.

W3 Schools gives a clear indication of which browser supports a stated property. See example image below which is shows the compatibility for box-pack.

W3 Schools Browser Support

Upvotes: 1

sp00m
sp00m

Reputation: 48817

I'm not sure such a tool exists. That said, there are some advices to write cross-browser CSS:

  1. Use a reset stylesheet (e.g. http://meyerweb.com/eric/tools/css/reset/);

  2. Use IE conditionnal comments such as <!--[if IE]><![endif]-->;

  3. Practice a continuous coding: open few browsers (e.g. IE, FF, Chrome) and check the run-of-river display they provide;

  4. Use IETester to check IE5.5+ rendering, depending of the IE versions you want to cover;

  5. Use absolute positions and specify widths and heights (especially when using floating elements) whenever you can;

  6. If you want to try CSS3, use PIE;

  7. Try to write pure, simple CSS, avoid exotic layouts.

Upvotes: 1

SajjadHashmi
SajjadHashmi

Reputation: 3695

In simple words there is no easy way to generate one CSS for all browsers.

For details, It highly depends a lot of over how extensively are you using the CSS, what version of CSS is that etc plus there are many places where different browser renders same CSS property in different ways, so its not really simple enough for all the situations.

But, for a little help, with the time passing there are different tools and scripts that can make your task of achieving CSS compatibility for all browser easier, I would recommend you go through the following tools they can be useful to you while trying to maintain your CSS.

Some CSS-preprocessor/helpers to help you in maintaining your CSS throughout:

Upvotes: 1

Related Questions