1
00:00:00,000 --> 00:00:05,990
As you learn CSS, you'll often see examples of code with some very curious syntax.

2
00:00:06,000 --> 00:00:11,990
In front of the CSS properties, you'll often see a prefix, or a series of prefixes,

3
00:00:12,000 --> 00:00:14,990
that looks something like this. So, what are those?

4
00:00:15,000 --> 00:00:19,990
Those are vendor prefixes, and they can seem a little confusing the first

5
00:00:20,000 --> 00:00:20,990
time you run into them,

6
00:00:21,000 --> 00:00:24,990
especially since they seem to set the same rule multiple times.

7
00:00:25,000 --> 00:00:29,990
Vendor prefixes allow browser manufacturers to add support for proprietary

8
00:00:30,000 --> 00:00:33,990
features or features that are still in development.

9
00:00:34,000 --> 00:00:37,990
You might have noticed, for example, that the prefixes all correspond with a

10
00:00:38,000 --> 00:00:39,990
browser or browser developer.

11
00:00:40,000 --> 00:00:43,990
And typically, each vendor prefix includes an abbreviation representing the

12
00:00:44,000 --> 00:00:48,990
browser manufacturer, which is surrounded on the side by a dash and followed by

13
00:00:49,000 --> 00:00:50,990
the property that they are going to support.

14
00:00:51,000 --> 00:00:53,990
And here's a list of some of the more common vendor prefixes.

15
00:00:54,000 --> 00:00:58,990
We have Microsoft, Mozilla, Opera, Konqueror, and WebKit.

16
00:00:59,000 --> 00:01:02,990
Now, at first glance, it may seem like vendor prefixes tend to confuse things,

17
00:01:03,000 --> 00:01:07,990
but in reality they are very important part of the evolution of CSS.

18
00:01:08,000 --> 00:01:10,990
Remember, CSS is still a work in progress.

19
00:01:11,000 --> 00:01:14,990
Many of the new features are still being standardized and refined.

20
00:01:15,000 --> 00:01:18,990
During this process, browser developers may choose to implement these features

21
00:01:19,000 --> 00:01:19,990
a little bit early.

22
00:01:20,000 --> 00:01:22,990
Now, this could be the result of them wanting to experiment with the best

23
00:01:23,000 --> 00:01:27,990
implementation method or a desire to drive a feature forward to improve the

24
00:01:28,000 --> 00:01:29,990
browser's capabilities.

25
00:01:30,000 --> 00:01:32,990
This means that we've reached a point where modern browsers will offer support

26
00:01:33,000 --> 00:01:37,990
for features that may see significant changes in how those features are

27
00:01:38,000 --> 00:01:40,990
supported or implemented down the line.

28
00:01:41,000 --> 00:01:44,990
Now, this actually a good thing for designers, as we get to start using these new

29
00:01:45,000 --> 00:01:47,990
features much earlier than we would have in the past.

30
00:01:48,000 --> 00:01:52,990
This early adoption also creates a very dangerous situation, where the same code

31
00:01:53,000 --> 00:01:56,990
could behave differently between browsers or even between the later versions of

32
00:01:57,000 --> 00:02:00,990
the same browser based on those implementation changes.

33
00:02:01,000 --> 00:02:05,990
This is why we need vendor prefixes. By using them, browser developers can support

34
00:02:06,000 --> 00:02:09,990
implementations that are experimental without breaking valid syntax.

35
00:02:10,000 --> 00:02:14,990
Once implementations have been solidified or the property specification is

36
00:02:15,000 --> 00:02:17,990
finished, the prefix can then be safely dropped.

37
00:02:18,000 --> 00:02:21,990
This will keep older code from failing if the implementation of the property

38
00:02:22,000 --> 00:02:23,990
changes between now and then.

39
00:02:24,000 --> 00:02:26,990
To give you an example of this, I want to talk about the history of browser

40
00:02:27,000 --> 00:02:29,990
support for CSS gradients.

41
00:02:30,000 --> 00:02:33,990
Mozilla and WebKit both started supporting gradients while the syntax was still

42
00:02:34,000 --> 00:02:39,990
being developed. At first, WebKit and Mozilla decided to take different approaches

43
00:02:40,000 --> 00:02:40,990
to the syntax of gradients,

44
00:02:41,000 --> 00:02:44,990
meaning that to create the same gradient in both the browsers you had to know

45
00:02:45,000 --> 00:02:47,990
the differences in syntax between them.

46
00:02:48,000 --> 00:02:53,990
As of early 2011, WebKit changed its syntax to more closely match the shape the

47
00:02:54,000 --> 00:02:58,990
syntax was taking in the specification, which put its syntax in line with how

48
00:02:59,000 --> 00:03:00,990
Mozilla was developing it.

49
00:03:01,000 --> 00:03:06,990
Now this can lead to extremely convoluted code, such as this example.

50
00:03:07,000 --> 00:03:11,990
If I want to create a simple black-to-white gradient that works across multiple browsers,

51
00:03:12,000 --> 00:03:17,990
I'll need this line as a fallback for unsupported devices, this for support in

52
00:03:18,000 --> 00:03:25,990
older WebKit browsers, this for support in Firefox, this for support in recent

53
00:03:26,000 --> 00:03:31,990
WebKit browsers, this line for support in Opera, and this one for Internet

54
00:03:32,000 --> 00:03:37,990
Explorer, and I'll also need to include these filters if I want to support older

55
00:03:38,000 --> 00:03:38,990
versions of Internet Explorer.

56
00:03:39,000 --> 00:03:41,990
Now finally, I'll add this code

57
00:03:42,000 --> 00:03:45,990
that's based on the specification for when user agents decide to go ahead

58
00:03:46,000 --> 00:03:46,990
and drop the prefix.

59
00:03:47,000 --> 00:03:53,990
On the surface, this seems like a huge pain, but imagine if we didn't have those prefixes.

60
00:03:54,000 --> 00:03:57,990
It would mean that as browsers begin to implement these features, our syntax

61
00:03:58,000 --> 00:04:01,990
would break in the some browsers and not in others, or be rendered differently

62
00:04:02,000 --> 00:04:04,990
depending upon which browser our viewers were using.

63
00:04:05,000 --> 00:04:09,990
By using vendor prefixes, we get to decide which features we want to add without

64
00:04:10,000 --> 00:04:11,990
breaking our design.

65
00:04:12,000 --> 00:04:14,990
Now, essentially they give designers a bit of a trade-off.

66
00:04:15,000 --> 00:04:18,990
There prefixes allow us to use properties before they're finalized, but they

67
00:04:19,000 --> 00:04:22,990
also result in a fair amount of additional code and the steeper learning curve

68
00:04:23,000 --> 00:04:24,990
in terms of mastering the syntax.

69
00:04:25,000 --> 00:04:29,990
Basically, if you're interested in using many of the CSS3 modules now,

70
00:04:30,000 --> 00:04:33,990
you'll need to learn these prefixes and when to use them.

71
00:04:34,000 --> 00:04:36,990
A little bit later on, I'll introduce you some online tools that can

72
00:04:37,000 --> 00:04:41,990
make generating the syntax and keeping track of their changes a little easier.

73
00:04:42,000 --> 00:04:45,990
Just don't lose sight of the fact that, as a designer, the responsibility for keeping

74
00:04:46,000 --> 00:04:56,000
up with those changes lies with you.