@@ -41,50 +41,46 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 April 2012</h2>
4141 < dl >
4242 < dt > This version:
4343
44- < dd > < a class =replaceme
45- href ="http://www.w3.org/TR/2012/ED-cssN-FIXME-20120420/ "> http://www.w3.org/TR/2012/ED-cssN-FIXME-20120420/</ a >
46-
47-
48- < dt > Latest version:
49-
50- < dd > < a
51- href ="http://www.w3.org/TR/cssN-FIXME/ "> http://www.w3.org/TR/cssN-FIXME/</ a >
44+ < dd > < a
45+ href ="http://dev.w3.org/csswg/css3-syntax/ "> http://dev.w3.org/csswg/css3-syntax/</ a >
46+ <!--
47+ <dt>Latest version:
48+ <dd>
49+ <a href="http://www.w3.org/TR/css3-syntax/">http://www.w3.org/TR/css3-syntax/</a>
50+ -->
5251
5352
5453 < dt > Editor's draft:
5554
56- < dd > < a
57- href ="http://dev.w3.org/csswg/cssN-FIXME / "> http://dev.w3.org/csswg/cssN-FIXME /</ a >
55+ < dd > < a
56+ href ="http://dev.w3.org/csswg/css3-syntax / "> http://dev.w3.org/csswg/css3-syntax /</ a >
5857
5958
6059 < dt > Previous version:
6160
62- < dd > < a href ="http://www.w3.org/PreviousVersionURI ">
63- http://www.w3.org/PreviousVersionURI</ a >
61+ < dd > < a
62+ href ="http://www.w3.org/TR/2003/WD-css3-syntax-20030813/ "> http://www.w3.org/TR/2003/WD-css3-syntax-20030813/</ a >
63+
6464
6565 < dt > Issue Tracking:
6666
67- < dd > < a
68- href ="http ://www.w3.org/Style/CSS/Tracker/products/FIXME " > http://www.w3.org/Style/ CSS/Tracker/products/FIXME </ a >
69-
67+ < dd > < a
68+ href ="https ://www.w3.org/Bugs/Public/buglist.cgi?product= CSS&component=Syntax " > W3C
69+ Bugzilla </ a >
7070
7171 < dt > Feedback:
7272
73- < dd > < a
73+ < dd > < a
7474 href ="http://lists.w3.org/Archives/Public/www-style/ "> www-style@w3.org</ a >
75- with subject line “< kbd > [cssN-FIXME ] < var > … message topic
75+ with subject line “< kbd > [css3-syntax ] < var > … message topic
7676 …</ var > </ kbd > ”
7777
7878 < dt > Editors:
7979
8080 < dd class ="h-card vcard "> < a class ="p-name fn u-url url "
81- href ="[editor1 personal URL (opt.)] " rel =author > [editor1 name]</ a > ,
82- < span class ="p-org org "> [affiliation (opt.)]</ span > , < span
83- class ="u-email email "> [email address (opt.)]</ span >
84-
85- < dd class ="h-card vcard "> < span class ="p-name fn "> [editor2 name]</ span > ,
86- < span class ="p-org org "> [affiliation (opt.)]</ span > , < span
87- class ="u-email email "> [email address (opt.)]</ span >
81+ href ="http://www.xanthir.com/ " rel =author > Tab Atkins Jr.</ a > (< span
82+ class ="p-org org "> Google, Inc.</ span > ), < span
83+ class ="u-email email "> jackalmage@gmail.com</ span >
8884 </ dl >
8985 <!--begin-copyright-->
9086 < p class =copyright > < a
@@ -126,12 +122,12 @@ <h2 class="no-num no-toc" id=status>Status of this document</h2>
126122 < p > The (< a
127123 href ="http://lists.w3.org/Archives/Public/www-style/ "> archived</ a > ) public
128124 mailing list < a
129- href ="mailto:www-style@w3.org?Subject=%5BcssN-FIXME %5D%20PUT%20SUBJECT%20HERE ">
125+ href ="mailto:www-style@w3.org?Subject=%5Bcss3-syntax %5D%20PUT%20SUBJECT%20HERE ">
130126 www-style@w3.org</ a > (see < a
131127 href ="http://www.w3.org/Mail/Request "> instructions</ a > ) is preferred for
132128 discussion of this specification. When sending e-mail, please put the text
133- “cssN-FIXME ” in the subject, preferably like this:
134- “[<!----> cssN-FIXME <!----> ] < em > …summary of
129+ “css3-syntax ” in the subject, preferably like this:
130+ “[<!----> css3-syntax <!----> ] < em > …summary of
135131 comment…</ em > ”
136132
137133 < p > This document was produced by the < a href ="/Style/CSS/members "> CSS
@@ -329,7 +325,104 @@ <h3 id=placement><span class=secno>1.1. </span> Module interactions</h3>
329325 < h2 id =syntax-description > < span class =secno > 2. </ span > Description of CSS's
330326 Syntax</ h2 >
331327
332- < p > ...
328+ < p > < em > This section is not normative.</ em >
329+
330+ < p > A CSS document is a series of < a href ="#rule "> < i > rules</ i > </ a > , which
331+ apply CSS properties to elements in the source document, and < a
332+ href ="#at-rules "> < i > at-rules</ i > </ a > , which define special processing
333+ rules or values for the CSS document.
334+
335+ < p > A < dfn id =rule > rule</ dfn > starts with a selector (defined by the < a
336+ href ="http://www.w3.org/TR/selectors/ "> Selectors specification</ a > ), then
337+ has a {}-wrapped block containing a sequence of declarations. The selector
338+ specifies which elements the declarations will apply to. Each declaration
339+ has a property name, followed by a colon and the property value, and
340+ finished with a semicolon.
341+
342+ < div class =example >
343+ < p > A typical rule might look something like this:
344+
345+ < pre >
346+ p > a {
347+ color: blue;
348+ text-decoration: underline;
349+ }</ pre >
350+
351+ < p > In the above rule, "< code > p > a</ code > " is the selector, which, if the
352+ source document is HTML, selects any < code > <a> </ code > elements that
353+ are children of a < code > <p> </ code > element.
354+
355+ < p > "< code > color: blue;</ code > " is a declaration specifying that, for the
356+ elements that match the selector, their ‘< code
357+ class =property > color</ code > ’ property should have the value
358+ ‘< code class =css > blue</ code > ’. Similiarly, their ‘< code
359+ class =property > text-decoration</ code > ’ property should have the
360+ value ‘< code class =css > underline</ code > ’.
361+ </ div >
362+
363+ < p > < dfn id =at-rules title =at-rule > At-rules</ dfn > are all different, but
364+ they have a basic structure in common. They start with an "@" character
365+ followed by their name. Some < a href ="#at-rules "> < i > at-rules</ i > </ a > are
366+ simple statements, with their name followed by more CSS values to specify
367+ their behavior, and finally ended by a semicolon. Others are blocks; they
368+ can have CSS values following their name, but they end with a {}-wrapped
369+ block, similar to a < a href ="#rule "> < i > rule</ i > </ a > . Even the contents of
370+ these blocks are specific to the given < a
371+ href ="#at-rules "> < i > at-rule</ i > </ a > : sometimes they contain a sequence of
372+ declarations, like a < a href ="#rule "> < i > rule</ i > </ a > ; other times, they
373+ may contain additional blocks, or at-rules, or other structures
374+ altogether.
375+
376+ < div class =example >
377+ < p > Here are several examples of < a href ="#at-rules "> < i > at-rules</ i > </ a >
378+ that illustrate the varied syntax they may contain.
379+
380+ < pre > @import "my-styles.css";</ pre >
381+
382+ < p > The ‘< code class =css > @import</ code > ’ < a
383+ href ="#at-rules "> < i > at-rule</ i > </ a > is a simple statement. After its
384+ name, it takes a single string or ‘< code
385+ class =css > url()</ code > ’ function to indicate the stylesheet that it
386+ should import.
387+
388+ < pre >
389+ @page :left {
390+ margin-left: 4cm;
391+ margin-right: 3cm;
392+ }</ pre >
393+
394+ < p > The ‘< code class =css > @page</ code > ’ < a
395+ href ="#at-rules "> < i > at-rule</ i > </ a > consists of an optional page selector
396+ (the ":left" pseudoclass), followed by a block of properties that apply
397+ to the page when printed. In this way, it's very similar to a normal < a
398+ href ="#rule "> < i > rule</ i > </ a > , except that its properties don't apply to
399+ any "element", but rather the page itself.
400+
401+ < pre >
402+ @media print {
403+ body { font-size: 10pt }
404+ }</ pre >
405+
406+ < p > The ‘< code class =css > @media</ code > ’ < a
407+ href ="#at-rules "> < i > at-rule</ i > </ a > begins with a media type and a list
408+ of optional media queries. Its block contains entire rules, which are
409+ only applied when the ‘< code class =css > @media</ code > ’s
410+ conditions are fulfilled.
411+ </ div >
412+
413+ < p > Property names and < a href ="#at-rules "> < i > at-rule</ i > </ a > names are
414+ always < b > identifiers</ b > , which have to start with a letter or a hyphen
415+ followed by a letter, and then can contain letters, numbers, hyphens, or
416+ underscores. You can include any character at all, even ones that CSS uses
417+ in its syntax, by escaping it with a backslash (\) or by using a
418+ hexadecimal escape.
419+
420+ < p > The syntax of selectors is defined in the < a
421+ href ="http://www.w3.org/TR/selectors/ "> Selectors spec</ a > . Similarly, the
422+ syntax of the wide variety of CSS values is defined in the < a
423+ href ="http://www.w3.org/TR/css3-values/ "> Values & Units spec</ a > . The
424+ special syntaxes of individual < a href ="#at-rules "> < i > at-rules</ i > </ a > can
425+ be found in the specs that define them.
333426
334427 < h2 id =parsing > < span class =secno > 3. </ span > Parsing</ h2 >
335428
@@ -2154,6 +2247,8 @@ <h2 class=no-num id=index> Index</h2>
21542247 < li > At-keyword state, < a href ="#at-keyword-state0 "
21552248 title ="At-keyword state "> < strong > 3.4.9.</ strong > </ a >
21562249
2250+ < li > at-rule, < a href ="#at-rules " title =at-rule > < strong > 2.</ strong > </ a >
2251+
21572252 < li > authoring tool, < a href ="#authoring-tool "
21582253 title ="authoring tool "> < strong > 4.2.</ strong > </ a >
21592254
@@ -2232,6 +2327,8 @@ <h2 class=no-num id=index> Index</h2>
22322327 < li > renderer, < a href ="#renderer " title =renderer > < strong > 4.2.</ strong > </ a >
22332328
22342329
2330+ < li > rule, < a href ="#rule " title =rule > < strong > 2.</ strong > </ a >
2331+
22352332 < li > Sci-notation state, < a href ="#sci-notation-state0 "
22362333 title ="Sci-notation state "> < strong > 3.4.18.</ strong > </ a >
22372334
0 commit comments