Introducing CSS3 5
With all that said, let’s pretend we have a new property called monkeys
(I’ve always wanted a monkeys property), which accepts only a single value.
Using this book’s syntax, I would introduce it like this:
E { monkeys: value; }
And when it came to providing a practical example of it, I might show it
with a valid value—say, a number value—like this:
E { monkeys: 12; }
Vendor Prefixes
When a module is still under active review, as much of CSS3 is, a lot is sub-
ject to change; a property’s syntax may be revised, or a property may be
dropped entirely. On occasion, even the wording of the draft itself is per-
haps a little nebulous and open to interpretation.
At the same time, browsers need to implement these features so we can
see how they work in practice. But consider the difficulties that would occur
if two separate browsers implemented the same property but interpreted it
inconsistently: The result of your code would appear differently—perhaps
radically so—in each of the browsers. To prevent this from happening, each
of the browser vendors began to prefix a short code to the beginning of
experimental properties. Let’s imagine our much-desired monkeys property
has been newly defined in a specification, and that all of the major browser
vendors have decided to implement it to see how it works. In this case, you
would use the following code:
E {
-moz-monkeys: value; /* Firefox */
-ms-monkeys: value; /* Internet Explorer */
-webkit-monkeys: value; /* Chrome/Safari */
}
The amount of repetition may seem somewhat unnecessary, but the
repetition is for our own good; the last thing you want is for all the browsers
to implement the monkeys property differently, leading to total chaos.
Although well-intentioned, the use of vendor prefixes has led to many
problems—developers used them in their production websites but did not
remove them later when the browser implementation had changed. This, in
turn, meant that browser vendors have to continue to support experimental
features forever to avoid breakages on websites that use them. Because of
this, Chrome and Firefox are now backing away from using prefixed prop-
erties, preferring instead to implement new features that are disabled, by
default, and must be opted into by developers until they are stable enough
for widespread use. That said, plenty of prefixed properties are still out
there, and I’ll note in the book when you must use them.
