What are the rules for portable CSS?

Question

I'm new to CSS, what are the rules for submission to make sure CSS looks the same in other browsers? (I am using Firefox).

PS Are there any specific rules for IE7?

Answer 1

You cannot always be sure.

But you can use css reset. All standard CSS browser settings will be reset, and then you will have a clean start.

http://meyerweb.com/eric/tools/css/reset/

Answer 2

On this website you will find all the necessary information, study http://www.quirksmode.org/ Peter-Paul Koch and do not use special selectors, such as the prefix -moz- or -webkit -

Finally, no, not quite sure, unfortunately. Testing, testing and other testing is the only solution.

Answer 3

I think the place to start is here: http://html5boilerplate.com/ (read CSS comment). It normalizes CSS behavior in different browsers. (I would not recommend using Reset).

Consult http://na.isobar.com/standards/ for the best examples of the best interfaces.

There are some rules to make your stuff work in IE 6 and 7 (these are the only ones that can cause serious problems):

• When something doesn't work in IE6 / 7, try setting the scale to: 1 before trying anything else.

• z-index is a bit trickier in older IE

• make yout sites for IE first, then do fancy things for another browser (CSS3), this will save you a lot of problems.

• Do not paste more than 32 CSS files into your html file (no joke;) http://acidmartin.wordpress.com/2008/11/25/the-32-external-css-files-limitation-of-internet-explorer-and -more / )

• Consult http://www.quirksmode.org/ to develop sensitivity to what works where

• try to avoid MS filters in your CSS ... (can make your site very slow and may lead to unexpected behavior with JS animations)

Answer 4

You ask a fairly broad question here, but a few recommendations to follow will be as follows:

• Make sure it’s standardized CSS and HTML. If it has a vendor prefix of -moz-, -webkit-, or -o (or more), it may not match exactly as you plan.

• Make sure he checks! Put this through the W3 validation service to see any errors in your code.

• Consider using CSS reset, for example Eric Meyer reset . This will reset all your elements 0padding, margin, etc.

  Or use Normalize (as Meo points out), like the HTML5 Boilerplate .

• Learn how to use IE Conditional Comments . For the most part, "real" browsers (Chrome, Firefox, Opera) will display HTML as it should. Having multiple versions of IE, you will need to provide different codes for each version (do not support IE6), and this is the best way to do this.

There is probably much more to add, but the best is experience.

Good luck

Answer 5

Prior to IE 9, IE never seemed to adhere to any rules at all as CSS goes, but almost all other browsers follow these W3 standards:

CSS Reference , W3 Review , W3 CSS Validator

In theory, if you stick to this, everything should work, but in reality this is not entirely true. This is certainly a step in the right direction, but the rest of nitty gritty is simply explored through effort, error, and experience.

Answer 6

This website will give you a good start.

http://htmlhelp.com/reference/css/structure.html