Introducing CSS—the Language of Web Design - Beginning CSS3 - page 8

This might look like a waste of time and effort because the values for the browser-specific versions are identical
to the standard property. However, some browsers implemented CSS3 gradients and flexible box layout before the
specifications stabilized, and they used different syntax to define the values. Using prefixes like this ensures that
incorrect syntax in one browser doesn't affect the way your pages look in other browsers. As noted earlier, browsers
ignore properties that they don't recognize. So, Firefox ignores properties prefixed with -ms- , -o- , and -webkit- .
The other browsers do likewise, applying only their own prefix. By placing the version without a prefix last, the
normal rules of the cascade ensure that all browsers implement the standard property as soon as it's supported.
The CSS3 support tables at caniuse.com (see Figure 1-2 ) indicate which properties and browser versions
require these browser-specific prefixes.

■ If the syntax changes, you should normally update only the value for the standard property. The prefixed
value will be used by browsers that implemented an earlier syntax. When a CSS property finally stabilizes, you can
drop the browser-specific prefixes unless your target browsers still need them.

Tip

Formatting CSS for Ease of Maintenance
Browsers don't care how you format your style rules. As long as you separate each property from its value by a
colon, put a semicolon after the value, and surround declaration blocks with curly braces, the browser ignores
any whitespace in your style sheet. However, a consistent layout makes your CSS easier to maintain.
Figure 1-4 uses whitespace to make the rule easier to read, but the following is just as valid:
p{margin-left:40px;}

Spreading everything out even more like this is also acceptable:

p {
margin-left : 40px ;
}

However, the following will not work because spaces are not permitted in property names or values:

p {
margin - left : 40 px;
}

■ Although CSS ignores whitespace in style declarations, you cannot put spaces in property names. nor
can there be any whitespace in the value between a number and the unit of measurement. Accidentally putting a
space between 40 and px renders the rule invalid and prevents it from working.

Caution

Adding Comments to Your CSS
Style sheets can run to hundreds of lines, so it's often a good idea to add comments to your style sheets to remind
you what a particular rule or set of rules is for. Anything between /* and */ is treated as a comment in CSS and is
ignored by the browser. For example:
/* This is a CSS comment */

Comments can be spread over more than one line like this: