CHAPTER 1 ■ CSS3 FundAmEnTAlS
■ Note On June 6, 2012 the W3C finalized the specification for transitions, animations, and transforms and agreed
to let all browser vendors support them without vendor prefixes. Internet Explorer 10 is the first browser to do so,
with other browsers expected to follow suit shortly. Older browser versions will still require vendor prefixes.
Vendor Prefixing Issues
While the vendor prefixing system works, it does have several issues. Exceptions and edge cases can be difficult
to track and remember. For example, the best current solution to implement hyphenation for paragraphs in all
browsers is as follows:
p { −ms-word-break: break-all; word-break: break-all; word-break: break-word;
-moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; hyphenate: auto; }
As you can see, some of the preceding CSS declaration uses vendor prefixes, but the property names and
values do not match the W3C proposal at the end, and different browsers use other properties.
Additionally, some browser vendors have tended to hold on to their proprietary prefixes and have not
deprecated them after standards were agreed to, requiring developers to maintain legacy prefixed CSS code.
Finally, lazy developers have tended to implement just one or two vendor prefixes, ignoring other browsers
that offer equal support under their own version of the spec. For example, many developers will include -moz and
-webbkit prefixed properties in their stylesheets, but forget to add -ms or -o. For this reason, some
browsers—most notably, recent versions of Opera—have the capacity to recognize other vendor prefixes.
In the case of Opera, this means some -webkit prefixed properties.
■ Note Because a complete CSS declaration that includes every vendor prefix can be very long, code examples in
this book will often use just the final expected specification. In most cases you should not limit prefixed properties to
just the examples you see here if you wish to gain complete backward compatibility in all browsers.
CSS3 Browser Support
CSS3 Transforms are fully supported by the following browser versions, with vendor prefixing:
• Internet Explorer 9 (IE10 does not require prefixes)• Firefox 3.5 and above• Chrome 4 and above• Safari 3.1 and above• Opera 10.5 and above• iOS Safari 3.2 and above• Opera Mobile 11• Android 2.1 and above