1
00:00:00,000 --> 00:00:05,990
As a web author, reading through a W3C specification can be a very tedious task.

2
00:00:06,000 --> 00:00:08,990
If you've ever wondered why that is, there is actually a really

3
00:00:09,000 --> 00:00:11,990
simple explanation for it.

4
00:00:12,000 --> 00:00:15,990
Specifications are written for implementers, not authors.

5
00:00:16,000 --> 00:00:19,990
In the case of CSS, it means that specifications describe, in detail, how

6
00:00:20,000 --> 00:00:24,990
browser manufacturers or other user agents should implement the syntax

7
00:00:25,000 --> 00:00:25,990
contained within the spec.

8
00:00:26,000 --> 00:00:31,990
Now often this will feature detailed parsing information, error handling, and syntax rules.

9
00:00:32,000 --> 00:00:35,990
The very nature of these documents creates a fundamental disconnect between a

10
00:00:36,000 --> 00:00:39,990
W3C specification and most web authors,

11
00:00:40,000 --> 00:00:44,990
so I want to take a moment and go through a CSS specification with you, discuss

12
00:00:45,000 --> 00:00:48,990
its structure and how it's organized, examine the areas that authors should be

13
00:00:49,000 --> 00:00:52,990
concerned with and the areas that you can maybe safely ignore, and discuss how

14
00:00:53,000 --> 00:00:57,990
to read the syntax that tells you how to properly format your CSS.

15
00:00:58,000 --> 00:01:02,990
So I want to take you on a tour of the CSS Fonts Module Level 3 specification.

16
00:01:03,000 --> 00:01:07,990
And if you want to follow along with me, feel free to go to w3.org and search

17
00:01:08,000 --> 00:01:11,990
for and find this specification and open it up, although the structure that I am

18
00:01:12,000 --> 00:01:14,990
going to be talking about, the syntax rules that I am going to be talking about,

19
00:01:15,000 --> 00:01:17,990
are really true for every single CSS specification.

20
00:01:18,000 --> 00:01:21,990
So even though we're using this one, it really doesn't matter which one that we use.

21
00:01:22,000 --> 00:01:24,990
Now we talked a little bit about the structure of specifications in the previous

22
00:01:25,000 --> 00:01:28,990
movie, but just as a way to sort of refresh your memory, remember at the top of

23
00:01:29,000 --> 00:01:31,990
each specification, you're going to find an abstract.

24
00:01:32,000 --> 00:01:34,990
The abstract basically talks about the purpose of the specification,

25
00:01:35,000 --> 00:01:38,990
what's contained within it, why it exists, and what its focus is.

26
00:01:39,000 --> 00:01:40,990
You are also going to get a status of this document.

27
00:01:41,000 --> 00:01:44,990
It's going to give you a little snapshot of where it is within the process,

28
00:01:45,000 --> 00:01:47,990
what's currently being worked on, and what its next steps are.

29
00:01:48,000 --> 00:01:51,990
That's typically followed by either a couple of more sections or a table of contents.

30
00:01:52,000 --> 00:01:54,990
You can typically read through the TOC, get a really good idea as to what's

31
00:01:55,000 --> 00:01:58,990
going on within the specification, how it's structured, and typically you can

32
00:01:59,000 --> 00:02:00,990
focus exactly on what you're looking for.

33
00:02:01,000 --> 00:02:04,990
Now towards the bottom of the document--and I am going to let the TOC help us with this--

34
00:02:05,000 --> 00:02:08,990
you're going to typically find a few appendices, maybe some changes,

35
00:02:09,000 --> 00:02:12,990
definitely some references, and some indexes. And I'll talk about the indexes in just a moment,

36
00:02:13,000 --> 00:02:16,990
but I want to turn your attention to these References first, and this word in

37
00:02:17,000 --> 00:02:19,990
particular, Normative References.

38
00:02:20,000 --> 00:02:24,990
You're going to find that word, normative, all over CSS specifications and you

39
00:02:25,000 --> 00:02:27,990
might be wondering exactly what it means if you've never run into it before.

40
00:02:28,000 --> 00:02:30,990
That's actually a really nice clue for you.

41
00:02:31,000 --> 00:02:34,990
If you see Normative, in terms of describing a section to say, like, for example,

42
00:02:35,000 --> 00:02:35,990
this section is normative,

43
00:02:36,000 --> 00:02:40,990
that essentially means that that section is written for implementers and has

44
00:02:41,000 --> 00:02:44,990
detailed information as to how certain parts of the specification are supposed

45
00:02:45,000 --> 00:02:46,990
to be implemented within the user agent.

46
00:02:47,000 --> 00:02:50,990
As an author, if you see that word, that's a nice clue to you that you can sort

47
00:02:51,000 --> 00:02:52,990
of skim through, or ignore, that section.

48
00:02:53,000 --> 00:02:54,990
Now I don't mean to say it's not important.

49
00:02:55,000 --> 00:02:55,990
That's not what I'm saying here.

50
00:02:56,000 --> 00:02:59,990
What I'm saying is as an author, you're after the meat of the syntax:

51
00:03:00,000 --> 00:03:01,990
what can I do with this, how do I write it?

52
00:03:02,000 --> 00:03:05,990
You're not after, how should I parse through malformed code?

53
00:03:06,000 --> 00:03:09,990
That's really for the implementers, and the word normative is often a really good

54
00:03:10,000 --> 00:03:12,990
clue to you that this section is not written exactly for you.

55
00:03:13,000 --> 00:03:15,990
Still good reading, still a smart idea to skim through it, but maybe not

56
00:03:16,000 --> 00:03:18,990
something that you want to focus on quite as much.

57
00:03:19,000 --> 00:03:20,990
Now the indexes, I want to talk about those too.

58
00:03:21,000 --> 00:03:24,990
Indexes are great because not only do you get a normal index where you can go

59
00:03:25,000 --> 00:03:28,990
look for a specific thing, click, and jump to that, but typically, most CSS

60
00:03:29,000 --> 00:03:32,990
specifications will also have a property index.

61
00:03:33,000 --> 00:03:36,990
These property indexes are great because they're going to go and give you a nice

62
00:03:37,000 --> 00:03:40,990
sort of overview, or snapshot, of all the properties that are contained within

63
00:03:41,000 --> 00:03:42,990
this specific specification.

64
00:03:43,000 --> 00:03:45,990
They're going to give you the property, the values that's acceptable for those

65
00:03:46,000 --> 00:03:50,990
properties, the initial value, what they apply to, so a really nice summary of

66
00:03:51,000 --> 00:03:53,990
all the properties within the specification.

67
00:03:54,000 --> 00:03:56,990
And often, if you're just looking for a specific property, this might be the best

68
00:03:57,000 --> 00:03:57,990
place to start looking.

69
00:03:58,000 --> 00:04:01,990
So I am going to go back up to the TOC, and I want to talk about the way that

70
00:04:02,000 --> 00:04:05,990
the properties themselves are written out and structured, and what you can glean

71
00:04:06,000 --> 00:04:06,990
from them as an author.

72
00:04:07,000 --> 00:04:10,990
And I am going to start at the top section in the Fonts module, which is the

73
00:04:11,000 --> 00:04:11,990
Basic font properties.

74
00:04:12,000 --> 00:04:14,990
I am just going to jump down to that section.

75
00:04:15,000 --> 00:04:18,990
Okay, so the first property that I see is the font-family property.

76
00:04:19,000 --> 00:04:22,990
Now some properties are described in a huge amount of detail, while as others

77
00:04:23,000 --> 00:04:24,990
only get maybe one or two paragraphs.

78
00:04:25,000 --> 00:04:28,990
The font-family property is described in a large amount of detail.

79
00:04:29,000 --> 00:04:30,990
If I scroll through this, you can see what I'm talking about.

80
00:04:31,000 --> 00:04:34,990
There's a lot of information that's being given to us here.

81
00:04:35,000 --> 00:04:35,990
So this is a really good one to start with.

82
00:04:36,000 --> 00:04:39,990
They're not all that detailed, but it's nice to know that on occasion they do go

83
00:04:40,000 --> 00:04:40,990
into that amount of detail.

84
00:04:41,000 --> 00:04:44,990
Now the first thing I want to show you is this little snapshot right here, which

85
00:04:45,000 --> 00:04:47,990
is actually the same information that we just saw in the property index--

86
00:04:48,000 --> 00:04:50,990
value, what it applies to, that sort of thing.

87
00:04:51,000 --> 00:04:52,990
There is some really good information here.

88
00:04:53,000 --> 00:04:56,990
First off, I want to show you one that a lot of people typically ignore, which is Media.

89
00:04:57,000 --> 00:04:59,990
Here it says font-family applies to visual media.

90
00:05:00,000 --> 00:05:03,990
Now that's really helpful to know, because if I'm writing a style sheet, for

91
00:05:04,000 --> 00:05:06,990
example, for a screen reader, for an assistive device like that, I know that

92
00:05:07,000 --> 00:05:09,990
that's not a visual device, so I know font-family isn't the property that that

93
00:05:10,000 --> 00:05:11,990
particular device is going to respond to.

94
00:05:12,000 --> 00:05:15,990
So I can safely sort of ignore setting font-family on anything, whereas for

95
00:05:16,000 --> 00:05:19,990
a visual like screen or projection, I definitely want to pay attention to this property.

96
00:05:20,000 --> 00:05:22,990
We also see that it can apply to all elements, so there's not a single element

97
00:05:23,000 --> 00:05:24,990
within HTML that we can't write font-family for.

98
00:05:25,000 --> 00:05:26,990
The values are inherited.

99
00:05:27,000 --> 00:05:29,990
So there's a lot of information I can glean from just looking at this little snapshot.

100
00:05:30,000 --> 00:05:33,990
Now the thing that probably confuses the most people when they initially start

101
00:05:34,000 --> 00:05:37,990
trying to read CSS specifications are the actual values themselves.

102
00:05:38,000 --> 00:05:41,990
I mean this looks like gibberish, but it's describing to you exactly how to

103
00:05:42,000 --> 00:05:43,990
write the font-family syntax.

104
00:05:44,000 --> 00:05:48,990
Now this is actually something called BNF, which is the Backus Normal Form notation,

105
00:05:49,000 --> 00:05:53,990
and it's simply a way to represent the grammar of computer languages.

106
00:05:54,000 --> 00:05:56,990
So obviously, for humans it can be a little confusing to read.

107
00:05:57,000 --> 00:05:58,990
Now the more that you're exposed to this syntax and the more that you see the

108
00:05:59,000 --> 00:06:03,990
resulting CSS syntax that comes from it, the easier it is to read BNF.

109
00:06:04,000 --> 00:06:06,990
But I am going to give you just a couple of pointers here to help you along the

110
00:06:07,000 --> 00:06:08,990
way, and we're going to go ahead and use font-family to help us do this.

111
00:06:09,000 --> 00:06:11,990
Okay, the first thing that you're going to notice are these brackets.

112
00:06:12,000 --> 00:06:15,990
We can see, for example, that brackets contain this entire first section.

113
00:06:16,000 --> 00:06:17,990
Well, brackets actually do two things for us.

114
00:06:18,000 --> 00:06:20,990
Number one, they help group content, so they are sort of grouping all this

115
00:06:21,000 --> 00:06:22,990
together as a single choice.

116
00:06:23,000 --> 00:06:25,990
They also tell you that certain things are optional.

117
00:06:26,000 --> 00:06:29,990
So a bracket is either grouping something together, telling you that something

118
00:06:30,000 --> 00:06:31,990
is optional, or it may be both.

119
00:06:32,000 --> 00:06:35,990
So in this case, for example, notice that we also have a grouping of

120
00:06:36,000 --> 00:06:38,990
family-name or generic-family.

121
00:06:39,000 --> 00:06:41,990
And this sort of pipe character, this vertical line that we see there,

122
00:06:42,000 --> 00:06:42,990
that serves as an or.

123
00:06:43,000 --> 00:06:48,990
So when we see that, we could say okay, family-name or generic-family, which is

124
00:06:49,000 --> 00:06:50,990
followed by a family-name or a generic-family.

125
00:06:51,000 --> 00:06:52,990
We also see this comma.

126
00:06:53,000 --> 00:06:55,990
That lets us know that if we're going to use more than one of those, we're going

127
00:06:56,000 --> 00:06:56,990
to separate those with a comma.

128
00:06:57,000 --> 00:07:02,990
So we could do a family-name, family-name. We can do family-name, generic-family.

129
00:07:03,000 --> 00:07:06,990
And then we also see that we have this little asterisk right there.

130
00:07:07,000 --> 00:07:09,990
And whenever you have a group in brackets followed by another symbol, that

131
00:07:10,000 --> 00:07:14,990
symbol is typically telling you something. Asterisk, for example, indicates that

132
00:07:15,000 --> 00:07:18,990
from that following group, you could list zero or more.

133
00:07:19,000 --> 00:07:21,990
If there was a question mark, for example, you could use one or none from

134
00:07:22,000 --> 00:07:22,990
the following group.

135
00:07:23,000 --> 00:07:27,990
So there's always a nice little indicator as to how many of those items.

136
00:07:28,000 --> 00:07:30,990
In this case, you can use as many as you want, so you could have five family

137
00:07:31,000 --> 00:07:34,990
names in a row if you wanted to, or two family names, or one; it's totally up to

138
00:07:35,000 --> 00:07:36,990
you as to how many you want to use;

139
00:07:37,000 --> 00:07:39,990
or you could use the keyword inherit. So there's that little "or" again.

140
00:07:40,000 --> 00:07:45,990
So it's like you could either use values from this group, or you could use the value inherit.

141
00:07:46,000 --> 00:07:46,990
Okay. One more thing too.

142
00:07:47,000 --> 00:07:50,990
Whenever you see these little greater than or less than brackets, that typically

143
00:07:51,000 --> 00:07:54,990
means that whatever is inside here is a computed value.

144
00:07:55,000 --> 00:07:55,990
Now, that could be a length.

145
00:07:56,000 --> 00:07:59,990
So whenever you see these little bracket notations, sort of less than and

146
00:08:00,000 --> 00:08:00,990
greater than brackets,

147
00:08:01,000 --> 00:08:03,990
that means that whatever is inside of that is a computed value, meaning you

148
00:08:04,000 --> 00:08:05,990
don't actually use family name;

149
00:08:06,000 --> 00:08:08,990
you would figure out what family name you're going for.

150
00:08:09,000 --> 00:08:12,990
Now typically, typically, most properties are going to explain these computed

151
00:08:13,000 --> 00:08:15,990
values in more detail a little bit later on.

152
00:08:16,000 --> 00:08:20,990
So if I was to scroll down, for example, I could see that indeed family-name and

153
00:08:21,000 --> 00:08:24,990
generic-family are described in more detail a little bit later on, and I could

154
00:08:25,000 --> 00:08:27,990
indeed see that family-name and generic- family are described in more detail and

155
00:08:28,000 --> 00:08:30,990
I get more information about exactly what they are looking for there.

156
00:08:31,000 --> 00:08:35,990
Now another thing that I get after I sort of slog through all of this stuff here

157
00:08:36,000 --> 00:08:38,990
is I get nice examples of code.

158
00:08:39,000 --> 00:08:43,990
So I can see that in this case here's a family name, comma, another family

159
00:08:44,000 --> 00:08:45,990
name, comma, a generic family.

160
00:08:46,000 --> 00:08:49,990
So I can see exactly what this is telling me up here.

161
00:08:50,000 --> 00:08:53,990
I can use one of these, one of these, and I can string them together using commas.

162
00:08:54,000 --> 00:08:56,990
And this tells me I can use as many of those as I want.

163
00:08:57,000 --> 00:09:01,990
Now, specifications don't always do this, but in the case of this property, we

164
00:09:02,000 --> 00:09:02,990
also get to see code.

165
00:09:03,000 --> 00:09:05,990
We also get to see examples of invalid code that's being written.

166
00:09:06,000 --> 00:09:09,990
So pay attention to both the good examples that they show you, and if they ever

167
00:09:10,000 --> 00:09:11,990
show you invalid code, take a look at that as well.

168
00:09:12,000 --> 00:09:15,990
It's really going to help you write your syntax properly.

169
00:09:16,000 --> 00:09:20,990
Now value notation isn't always this complex, and it's not always that simple.

170
00:09:21,000 --> 00:09:24,990
If I were to scroll down, for example, and go down to, say, font-weight, I can see

171
00:09:25,000 --> 00:09:26,990
this is very simple.

172
00:09:27,000 --> 00:09:31,990
So I have these keywords separated by an or, these values separate by ors, or

173
00:09:32,000 --> 00:09:34,990
inherit. So I can use one of those values, it's an either/or.

174
00:09:35,000 --> 00:09:38,990
And then a little bit later on it explains to me what exactly all these numbers mean.

175
00:09:39,000 --> 00:09:40,990
Now it can also be a lot more complex.

176
00:09:41,000 --> 00:09:44,990
If I go back to the TOC and I go down to the Shorthand font notation, you can

177
00:09:45,000 --> 00:09:48,990
see this is a lot more complex than what we had before.

178
00:09:49,000 --> 00:09:50,990
There are a couple of things we haven't seen here before, for example, these

179
00:09:51,000 --> 00:09:52,990
little double pipes.

180
00:09:53,000 --> 00:09:56,990
These little double vertical lines indicate that each value is possible and

181
00:09:57,000 --> 00:10:00,990
that if you use more than one of these values, you're going to separate them

182
00:10:01,000 --> 00:10:02,990
with whitespace instead of a comma.

183
00:10:03,000 --> 00:10:05,990
So these are little things that you're going to pick up on the more you look

184
00:10:06,000 --> 00:10:09,990
at this notation and the more that you look at the code that results from this notation.

185
00:10:10,000 --> 00:10:13,990
Now as I mentioned to you before, there are always sections that you can kind of

186
00:10:14,000 --> 00:10:17,990
safely ignore when you're reading through the specification, because they're

187
00:10:18,000 --> 00:10:18,990
written primarily for implementers.

188
00:10:19,000 --> 00:10:24,990
If I go back to the TOC, I can go to the section of the Font matching algorithm.

189
00:10:25,000 --> 00:10:27,990
I would definitely encourage you to read through these sections, because

190
00:10:28,000 --> 00:10:31,990
they're going to help you understand how these properties are implemented within the browser.

191
00:10:32,000 --> 00:10:35,990
But after reading through the first couple of lines of this, it's pretty obvious

192
00:10:36,000 --> 00:10:39,990
that this isn't telling an author how to write styles within a style sheet;

193
00:10:40,000 --> 00:10:44,990
it's telling a manufacturer or an implementer how exactly to implement the code

194
00:10:45,000 --> 00:10:46,990
within the user agent.

195
00:10:47,000 --> 00:10:50,990
So this isn't as useful to authors as it is, obviously, to implementers.

196
00:10:51,000 --> 00:10:54,990
So I would recommend that when you run into one of these sections, sort of skim through it.

197
00:10:55,000 --> 00:10:57,990
If it has some really good meaty information about how browsers are going to

198
00:10:58,000 --> 00:10:58,990
be implementing it,

199
00:10:59,000 --> 00:11:01,990
it's just going to set you apart from most authors and you're going to know

200
00:11:02,000 --> 00:11:03,990
more about the process.

201
00:11:04,000 --> 00:11:06,990
But overall, you can safely sort of skim through those sections and maybe not

202
00:11:07,000 --> 00:11:08,990
read through them quite as thoroughly.

203
00:11:09,000 --> 00:11:11,990
Now there's one more thing that I want to point out about the specifications.

204
00:11:12,000 --> 00:11:12,990
They are living documents.

205
00:11:13,000 --> 00:11:16,990
Unless they are a published recommendation, they are being revised.

206
00:11:17,000 --> 00:11:18,990
And if you scroll through this one, you're occasionally going to see these

207
00:11:19,000 --> 00:11:21,990
little red notes that says Issue.

208
00:11:22,000 --> 00:11:24,990
Sometimes they'll be questions, sometimes they'll actually mention people by

209
00:11:25,000 --> 00:11:28,990
name, but they're basically showing you sort of issues that are still

210
00:11:29,000 --> 00:11:34,990
outstanding with the specification, and the next version or next few versions

211
00:11:35,000 --> 00:11:37,990
should be addressing these concerns.

212
00:11:38,000 --> 00:11:40,990
What's nice about that as an author is you can sort of read through those and

213
00:11:41,000 --> 00:11:44,990
get a feel for parts of the specification that maybe aren't quite as solid and

214
00:11:45,000 --> 00:11:46,990
aren't quite as resolved.

215
00:11:47,000 --> 00:11:48,990
You could sort of get an idea as to what's coming down the pipe.

216
00:11:49,000 --> 00:11:52,990
For example, as an author, I am very excited about OpenType features being

217
00:11:53,000 --> 00:11:55,990
available in browsers, but I know from reading this that there's still some

218
00:11:56,000 --> 00:11:57,990
questions on how that works.

219
00:11:58,000 --> 00:12:01,990
And also, if you're reading through these, you may have an opinion on this as an author.

220
00:12:02,000 --> 00:12:05,990
You may have a specific opinion on how you think browsers ought to implement that.

221
00:12:06,000 --> 00:12:09,990
Well, you can join the W3C's mailing list and you can add your voice to the

222
00:12:10,000 --> 00:12:12,990
chorus and make your opinions known on how these ought to be implemented.

223
00:12:13,000 --> 00:12:14,990
It's a very, very public process.

224
00:12:15,000 --> 00:12:17,990
That's one of the things I really love about reading through the specifications

225
00:12:18,000 --> 00:12:19,990
is being a part of that process.

226
00:12:20,000 --> 00:12:21,990
I know it didn't feel like it probably, but that's actually a really brief

227
00:12:22,000 --> 00:12:26,990
overview of how to make sense of the CSS specification from an author's point of view.

228
00:12:27,000 --> 00:12:29,990
If you really want to dig into CSS and learn it from the ground up,

229
00:12:30,000 --> 00:12:33,990
there's actually no better way to do that than spending time in the

230
00:12:34,000 --> 00:12:35,990
specifications themselves.

231
00:12:36,000 --> 00:12:38,990
I wasn't able to cover all of the syntax or formatting that you're going to

232
00:12:39,000 --> 00:12:42,990
encounter when reading these specifications, but you should have a pretty good

233
00:12:43,000 --> 00:12:45,990
idea of how to find your way around a spec, the areas that you can sort of skim

234
00:12:46,000 --> 00:12:49,990
over, what to pay attention to, and more importantly, how to read the syntax to

235
00:12:50,000 --> 00:12:52,990
make sure that you're going to format your rules properly.

236
00:12:53,000 --> 00:12:56,990
If something doesn't really seem to make a whole lot of sense, just be sure to

237
00:12:57,000 --> 00:12:58,990
examine the provided examples really carefully,

238
00:12:59,000 --> 00:13:01,990
and usually they're going to help you understand what's acceptable for a

239
00:13:02,000 --> 00:13:03,990
property and sort of how it works.

240
00:13:04,000 --> 00:13:06,990
So just don't be intimidated by the CSS specifications.

241
00:13:07,000 --> 00:13:09,990
The more time that you're going to spend reading them, the more that you're

242
00:13:10,000 --> 00:13:20,000
going to get out of them.