HTML and CSS Reference
In-Depth Information
A PREFIXED
NIGHTMARE?
I've put the prefixed properties in my example in the order they are in for two reasons. First, it looks
aesthetically pleasing to have the widest prefix first and the narrowest last.
Second, at the time of this writing, a number of non-WebKit browser makers were discussing adding
support for
-webkit-
prefixed versions of some properties, as well as their own prefixed versions. By putting
-webkit- first, you can make sure that if this happens, such browsers will end up using their own prefixed
version if it is present, not
-webkit-
, because the others all appear afterwards in the cascade.
Using the correct prefixed property will always be better and more accurate than relying on faked
-webkit-
support, especially considering that in some cases you might feed the different browsers different property
values because of varying support. For example, at the time of this writing Opera does not yet support 3D
transforms, so you could provide Opera with this 2D transform that would work:
-webkit-transform: rotate3D(1,0,0,10deg) translateX(300px);
-o-transform: translateX(300px);
Why are other browsers considering adding
-webkit-
support? Because so many developers have been har-
boring an ill-conceived idea that WebKit is the only browser engine worth supporting. So they were using
lots of CSS3 features only with the
-webkit-
prefix, thereby making those features arbitrarily fail in other
browsers that support them. As far as users are concerned, it is the browsers that are at fault. The aver-
age site visitors don't know any better, and neither should they be expected to. Messy as it is, non-WebKit
browsers adding
-webkit-
support is a somewhat desperate potential measure to try to fix this browser
support mess to some degree.
To s u m u p, i it m a y s To u in d in i g h it m a r i s h h a v i in g it To i in c l u d e i v e d i f e r e in it v e r s i To in s To f it h e s a m e p r To p e r it y i in s u c h
situations. Quite a few people think that you shouldn't use vendor prefixes at all in production projects,
and that they are only for testing purposes (this is the W3C's official stance too). But don't let that stop you.
As you'll discover throughout this topic, it is easy in most cases to retain an acceptable user experience in
browsers that don't support those properties, as long as you give it a bit of forethought!
If you want to use prefixed CSS3 features, please do so responsibly and use all the different prefixes for all
supporting browsers. And don't make your sites dependent on a particular feature that doesn't have cross-
browser support!
This
transition
shorthand property tells the browser to smoothly transition
every property that changes when the link's state changes over a duration of 1 sec-
ond (see Chapter 5 for more details). In this case it is just the background color that
changes. The aspect to focus on in this code is the fact that there are five copies
of the
transition
property. The first four include vendor prefixes. At the time of
