1
00:00:00,000 --> 00:00:03,990
As I mentioned earlier, knowing what's in the specification is only half of the

2
00:00:04,000 --> 00:00:05,990
process of understanding CSS.

3
00:00:06,000 --> 00:00:10,990
You see, browsers haven't implemented everything in the specifications,

4
00:00:11,000 --> 00:00:14,990
and some of the things that are implemented aren't implemented consistently.

5
00:00:15,000 --> 00:00:18,990
Remember, CSS is a constantly evolving language,

6
00:00:19,000 --> 00:00:22,990
and the price of that flexibility means that as an author you have a

7
00:00:23,000 --> 00:00:26,990
responsibility to understand what works seamlessly across browsers, what you'll

8
00:00:27,000 --> 00:00:31,990
need to tweak, and what you'll need to keep an eye on for future support.

9
00:00:32,000 --> 00:00:33,990
So, how do you track browser support?

10
00:00:34,000 --> 00:00:37,990
Well, one way is simply test them yourself.

11
00:00:38,000 --> 00:00:42,990
Ideally, when designing web sites, you'll want to test in Safari, Chrome,

12
00:00:43,000 --> 00:00:43,990
Firefox, Opera, and Internet Explorer.

13
00:00:44,000 --> 00:00:49,990
Of course, in many cases, you'll need to test across multiple versions of those

14
00:00:50,000 --> 00:00:54,990
browsers as CSS support changes over the course of browser versions.

15
00:00:55,000 --> 00:00:58,990
Web authors can no longer ignore mobile devices either.

16
00:00:59,000 --> 00:01:02,990
Unfortunately, testing on mobile devices is considerably trickier than desktop

17
00:01:03,000 --> 00:01:06,990
testing, but there are online services that can help you see what your site

18
00:01:07,000 --> 00:01:08,990
looks like in a mobile space.

19
00:01:09,000 --> 00:01:13,990
Simply put, there is no substitute for testing your pages on as many browsers

20
00:01:14,000 --> 00:01:15,990
and devices as you can.

21
00:01:16,000 --> 00:01:18,990
The reality of course is that testing across a wide array of devices and

22
00:01:19,000 --> 00:01:21,990
browsers isn't always really feasible.

23
00:01:22,000 --> 00:01:25,990
You should work to build as wide a test suite as you can within your environment,

24
00:01:26,000 --> 00:01:30,990
but realistically, you're often going to need to rely on knowing what does work

25
00:01:31,000 --> 00:01:33,990
and what doesn't work in various browsers and various platforms.

26
00:01:34,000 --> 00:01:36,990
Now thankfully, there are a lot of online sites that can help you get a better

27
00:01:37,000 --> 00:01:40,990
understanding of what is and what isn't supported in various browsers,

28
00:01:41,000 --> 00:01:42,990
so let's go take a look at a couple of them.

29
00:01:43,000 --> 00:01:45,990
Now I want to start with caniuse.com.

30
00:01:46,000 --> 00:01:50,990
This is a great site for checking browser compatibility, especially as it lists

31
00:01:51,000 --> 00:01:55,990
not only desktop browsers, as we can see here, but also mobile browsers as well,

32
00:01:56,000 --> 00:01:56,990
which is really nice.

33
00:01:57,000 --> 00:01:59,990
Now, you can filter by different categories.

34
00:02:00,000 --> 00:02:02,990
So you can see right now, I'm just looking at CSS properties, but you can also

35
00:02:03,000 --> 00:02:06,990
look at HTML5, the JavaScript API, SVG.

36
00:02:07,000 --> 00:02:10,990
So there are a lot of things here that we can see what their support level is in

37
00:02:11,000 --> 00:02:12,990
current browsers, which is very nice.

38
00:02:13,000 --> 00:02:14,990
Now you're also going to see that a lot of these properties have links to

39
00:02:15,000 --> 00:02:18,990
external reference articles or examples as well, which is really nice.

40
00:02:19,000 --> 00:02:22,990
Now as you scroll through this, you're going to notice that the site is focusing

41
00:02:23,000 --> 00:02:27,990
more on CSS3 properties and some of the recent additions to CSS, but it's still

42
00:02:28,000 --> 00:02:31,990
a great reference and resource for you to start with, especially for some

43
00:02:32,000 --> 00:02:33,990
of the newer properties of CSS.

44
00:02:34,000 --> 00:02:39,990
Now another fantastic resource is Peter-Paul Koch's, or PPK as he is better known,

45
00:02:40,000 --> 00:02:41,990
his site quirksmode.org.

46
00:02:42,000 --> 00:02:46,990
This has by far the most comprehensive list of browser compatibility charts online.

47
00:02:47,000 --> 00:02:51,990
Now, the Compatibility Master Table which I'm showing you right now gives you a

48
00:02:52,000 --> 00:02:55,990
series of compatibility tests that you can then explore in more detail.

49
00:02:56,000 --> 00:02:59,990
For example, from here I can take a look at the CSS2 or CSS3

50
00:03:00,000 --> 00:03:00,990
compatibility table.

51
00:03:01,000 --> 00:03:04,990
So I'm just going to click over on CSS2 to show you this in a little bit more detail.

52
00:03:05,000 --> 00:03:08,990
From there, if I scroll down, notice that he has a ton of browsers that he tests

53
00:03:09,000 --> 00:03:11,990
against, IE 5.5 all the way though IE 9.

54
00:03:12,000 --> 00:03:15,990
It goes in Opera, Konqueror, although Konqueror, I don't think

55
00:03:16,000 --> 00:03:17,990
he has had a lot of testing going on there.

56
00:03:18,000 --> 00:03:20,990
But Firefox, Safari, Chrome. Some of the versions you're going to see here are a

57
00:03:21,000 --> 00:03:22,990
little behind of times.

58
00:03:23,000 --> 00:03:25,990
He doesn't keep this as updated as he used to, because he's got so much

59
00:03:26,000 --> 00:03:26,990
other stuff going on,

60
00:03:27,000 --> 00:03:28,990
but this is still a great place to start.

61
00:03:29,000 --> 00:03:32,990
So you'll notice, as I scroll through here, there's so many different properties,

62
00:03:33,000 --> 00:03:35,990
selectors, and declarations that he tests for.

63
00:03:36,000 --> 00:03:37,990
There's a lot going on here, and there's a lot of information that you can

64
00:03:38,000 --> 00:03:38,990
pull from this site.

65
00:03:39,000 --> 00:03:43,990
Now another great source of information is, as always, Wikipedia.

66
00:03:44,000 --> 00:03:47,990
And these guys have an awesome comparison of CSS support for different

67
00:03:48,000 --> 00:03:48,990
browser-rendering engines.

68
00:03:49,000 --> 00:03:52,990
So you wanted to look at the comparison of layout engines, Cascading Style Sheets page.

69
00:03:53,000 --> 00:03:55,990
You can just go to Wikipedia and search for that, and it will take you right to this.

70
00:03:56,000 --> 00:03:57,990
Now the trick here--I'm going to scroll down a little bit--

71
00:03:58,000 --> 00:04:02,990
the trick here is to realize that you're looking at rendering engines.

72
00:04:03,000 --> 00:04:05,990
Remember, we talked about rendering engines a little earlier and not

73
00:04:06,000 --> 00:04:06,990
actual browser versions.

74
00:04:07,000 --> 00:04:11,990
So you might have to do a little bit of digging to figure out things like which

75
00:04:12,000 --> 00:04:14,990
version of Chrome is driven by which version on the WebKit rendering engine.

76
00:04:15,000 --> 00:04:18,990
But once you have that, this list is amazingly thorough.

77
00:04:19,000 --> 00:04:23,990
I'm just going to do a real sort of brief scan through this, just so you can see

78
00:04:24,000 --> 00:04:30,990
how much information regarding CSS is covered here. It is incredible!

79
00:04:31,000 --> 00:04:34,990
The other really nice thing about this is that it includes nightly build support

80
00:04:35,000 --> 00:04:37,990
as well and experimental support, as you can see here.

81
00:04:38,000 --> 00:04:41,990
So there's a lot of information here that you can glean through, a lot of

82
00:04:42,000 --> 00:04:43,990
links and references that you can click on to go get a little bit more

83
00:04:44,000 --> 00:04:44,990
information about this.

84
00:04:45,000 --> 00:04:48,990
So when you're really digging in the details of it, and you don't mind sort of

85
00:04:49,000 --> 00:04:51,990
researching which version of rendering engine is driving which browser,

86
00:04:52,000 --> 00:04:55,990
this is a really good table to take a look at.

87
00:04:56,000 --> 00:04:58,990
Somewhat older, but I also really recommend checking out

88
00:04:59,000 --> 00:04:59,990
positioniseverything.net.

89
00:05:00,000 --> 00:05:02,990
If you've ever watched some of my older CSS titles, you'll know that I love this site.

90
00:05:03,000 --> 00:05:06,990
I went to it to almost all the time in some of my older CSS titles.

91
00:05:07,000 --> 00:05:11,990
So this site does consist of primarily older information, but it is absolutely

92
00:05:12,000 --> 00:05:16,990
still the go-to guide on browser bugs and ways around those browser bugs.

93
00:05:17,000 --> 00:05:19,990
And its primary focus, as you would imagine, is on Internet Explorer and some of

94
00:05:20,000 --> 00:05:21,990
those older versions of it.

95
00:05:22,000 --> 00:05:25,990
IE 6 isn't dead yet as of this recording; IE 7 is still being used a good bit;

96
00:05:26,000 --> 00:05:26,990
IE 8 is still being used a good bit;

97
00:05:27,000 --> 00:05:30,990
so you're still going to need to know how to solve some of those browser errors

98
00:05:31,000 --> 00:05:31,990
and those browser bugs.

99
00:05:32,000 --> 00:05:35,990
And if you're brand new to CSS, reading through these past articles is really

100
00:05:36,000 --> 00:05:38,990
going to give you a nice solid foundation into browser and standards

101
00:05:39,000 --> 00:05:39,990
development over time.

102
00:05:40,000 --> 00:05:43,990
So it'll give you good ideas to sort of how browsers have evolved over time and

103
00:05:44,000 --> 00:05:46,990
the level of standards support that they have.

104
00:05:47,000 --> 00:05:50,990
Finally, there is no better place to check for support than the actual

105
00:05:51,000 --> 00:05:51,990
browsers themselves.

106
00:05:52,000 --> 00:05:54,990
Now Mozilla, I can't say enough about their documents.

107
00:05:55,000 --> 00:05:59,990
They do such an awesome job of documenting not only browser support, but all

108
00:06:00,000 --> 00:06:01,990
sorts of things going on with their browsers.

109
00:06:02,000 --> 00:06:05,990
Check out their page on CSS support at the Mozilla Developer Network.

110
00:06:06,000 --> 00:06:10,990
So you can just go to the developer.mozilla.org and search for CSS Support.

111
00:06:11,000 --> 00:06:14,990
Now as I scroll through this, however, you can see how comprehensive this is.

112
00:06:15,000 --> 00:06:18,990
It starts with selectors, and it's just going to go right on down.

113
00:06:19,000 --> 00:06:22,990
It's going to tell you whether it's supported, which version it's supported in,

114
00:06:23,000 --> 00:06:26,990
and what specification--with a link to that specification, I might add--to

115
00:06:27,000 --> 00:06:27,990
help you out as well.

116
00:06:28,000 --> 00:06:30,990
And you can see from the length of this table the amount of information

117
00:06:31,000 --> 00:06:31,990
that's covered here.

118
00:06:32,000 --> 00:06:35,990
I think this is a great cheat sheet to come to and just find all the different

119
00:06:36,000 --> 00:06:40,990
CSS properties, values, and selectors in one great huge list.

120
00:06:41,000 --> 00:06:45,990
And the other really nice thing about this is if there is a bug in Mozilla's

121
00:06:46,000 --> 00:06:48,990
current implementation of that, it'll take you right to the bug tracker, so you

122
00:06:49,000 --> 00:06:53,990
can go to read about the bug, who filed it, what the errors are, and maybe see

123
00:06:54,000 --> 00:06:55,990
what the current status of that bug is as well.

124
00:06:56,000 --> 00:06:58,990
So this is a great resource for you.

125
00:06:59,000 --> 00:07:03,990
The Safari Developer Library also has a similar resource involving CSS support.

126
00:07:04,000 --> 00:07:07,990
And if I go to developer.apple.com and look though the Safari documentation,

127
00:07:08,000 --> 00:07:09,990
what you're looking for is the CSS reference.

128
00:07:10,000 --> 00:07:11,990
So that's what you want to search for.

129
00:07:12,000 --> 00:07:14,990
But here we are at the Introduction page, and we can see that we have an

130
00:07:15,000 --> 00:07:16,990
Explanation of Terms, which is we can go through the terminology.

131
00:07:17,000 --> 00:07:19,990
Supported CSS Properties, I'm just going to click on that.

132
00:07:20,000 --> 00:07:23,990
And it's going to go through those in detail, maybe not in a table format, the

133
00:07:24,000 --> 00:07:26,990
way Mozilla does it, but in a really nice sort of readable format.

134
00:07:27,000 --> 00:07:28,990
So this is a great resource too.

135
00:07:29,000 --> 00:07:32,990
It also contains links to related content, which is really going to help you

136
00:07:33,000 --> 00:07:36,990
sort of understand Safari's and WebKit's capabilities overall.

137
00:07:37,000 --> 00:07:40,990
Now Chrome doesn't have a detailed CSS resource page, at least not one that I

138
00:07:41,000 --> 00:07:43,990
could find, like Mozilla or Safari,

139
00:07:44,000 --> 00:07:46,990
but I do recommend reading The Chromium Blog.

140
00:07:47,000 --> 00:07:50,990
It's a great way to keep up with what's going on with Chrome. Any changes to

141
00:07:51,000 --> 00:07:53,990
implementations are going to be written about here, and it's also giving to keep

142
00:07:54,000 --> 00:07:54,990
you informed on support issues,

143
00:07:55,000 --> 00:07:56,990
so this is a great blog to kind of read.

144
00:07:57,000 --> 00:08:00,990
Now for the most part, since Chrome is a WebKit-based browser, the

145
00:08:01,000 --> 00:08:02,990
reference information that I was just showing you on Safari's site will

146
00:08:03,000 --> 00:08:04,990
also apply to Chrome.

147
00:08:05,000 --> 00:08:10,990
Now just like Mozilla, I'm absolutely in love with Opera's documentation.

148
00:08:11,000 --> 00:08:17,990
So if I go to opera.com/docs/specs, I'm going to see all of the rendering

149
00:08:18,000 --> 00:08:21,990
engines, the past versions of the Opera's Presto rendering engine here, and their

150
00:08:22,000 --> 00:08:23,990
support for web specifications, which is really cool.

151
00:08:24,000 --> 00:08:28,990
So if I go to the latest one, Opera Presto, say 2.9, and click on that, notice

152
00:08:29,000 --> 00:08:33,990
that I get a full list of properties here that are supported and what level of support.

153
00:08:34,000 --> 00:08:38,990
So if I just go to say CSS Properties, I see I get a really detailed table

154
00:08:39,000 --> 00:08:43,990
here of all the different properties, the accepted values for it, a nice description of it--

155
00:08:44,000 --> 00:08:47,990
this is a nice teaching tool as well--and then whether that is supported within Opera.

156
00:08:48,000 --> 00:08:50,990
And if you scroll down though here, you can see, they will really tell you when

157
00:08:51,000 --> 00:08:54,990
they've got partial support, when something is fully supported, or whether

158
00:08:55,000 --> 00:08:57,990
something is not supported, although they don't have anything here within the

159
00:08:58,000 --> 00:09:00,990
properties that currently is not supported.

160
00:09:01,000 --> 00:09:06,990
Now not to be left out, Microsoft has a really detailed CSS reference as well

161
00:09:07,000 --> 00:09:07,990
for Internet Explorer.

162
00:09:08,000 --> 00:09:09,990
This is a little harder to find.

163
00:09:10,000 --> 00:09:14,990
You're going to want to msdn.microsoft.com and go into the Library section and

164
00:09:15,000 --> 00:09:16,990
search for CSS Compatibility.

165
00:09:17,000 --> 00:09:21,990
Now it's worth the search though, because what you're going to get here is an

166
00:09:22,000 --> 00:09:25,990
extremely detailed table that's a lot like the Mozilla's table.

167
00:09:26,000 --> 00:09:28,990
And it's going to give you all the way from Internet Explorer 5 through

168
00:09:29,000 --> 00:09:30,990
Internet Explorer 9.

169
00:09:31,000 --> 00:09:32,990
And I would imagine in the very near future you're going to Internet Explorer

170
00:09:33,000 --> 00:09:35,990
10 up there as well.

171
00:09:36,000 --> 00:09:39,990
It's going to show you what's supported, whether it has partial support, full support.

172
00:09:40,000 --> 00:09:44,990
This is a great place to go learn about what Internet Explorer supports and what

173
00:09:45,000 --> 00:09:50,990
it doesn't support, so I recommend definitely reading through this as well. Okay.

174
00:09:51,000 --> 00:09:53,990
Now, hopefully those are enough resources to get you started.

175
00:09:54,000 --> 00:09:56,990
I would imagine you can at least get started with those, right?

176
00:09:57,000 --> 00:10:00,990
I realize that probably after watching through all these CSS specification

177
00:10:01,000 --> 00:10:06,990
movies and support movies in this chapter, you might be a little overwhelmed. My advice: don't be.

178
00:10:07,000 --> 00:10:11,990
You don't have to know all of this at once to start writing and using CSS.

179
00:10:12,000 --> 00:10:15,990
The good news is that most modern browsers fully support CSS 2.1,

180
00:10:16,000 --> 00:10:20,990
so you can usually write valid CSS based on the 2.1 specification, and

181
00:10:21,000 --> 00:10:25,990
be reasonably confident that your designs are going to function well across browsers.

182
00:10:26,000 --> 00:10:30,990
However, don't let that particular comfort level keep you from learning these details.

183
00:10:31,000 --> 00:10:33,990
Simply make reading through the specifications and becoming familiar with

184
00:10:34,000 --> 00:10:38,990
browser support levels are part of the process of you learning CSS.

185
00:10:39,000 --> 00:10:42,990
You'll find that you grasp concepts a little quicker, write more efficient CSS,

186
00:10:43,000 --> 00:10:53,000
and create designs that work more consistently across browsers and platforms.