Mon, 11 Nov 2013 17:37:09 +0800
[css-style-attr] Tweak names of grammar rules.
fantasai@1564 | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
fantasai@1564 | 2 | <html lang="en"> |
fantasai@1564 | 3 | <head> |
fantasai@1564 | 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
tantek@1958 | 5 | <title>CSS Style Attributes</title> |
tantek@9099 | 6 | <link rel=contents href="#contents"> |
tantek@9099 | 7 | <link rel=index href="#index"> |
fantasai@4173 | 8 | <link rel="stylesheet" type="text/css" href="../default.css"> |
tantek@9099 | 9 | <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon"> |
tantek@9099 | 10 | <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css"> |
peter@8357 | 11 | <script defer=defer |
rhauck@8736 | 12 | src="http://test.csswg.org/harness/annotate.js#css-style-attr-1_dev" |
peter@8357 | 13 | type="text/javascript"></script> |
fantasai@1563 | 14 | </head> |
fantasai@1563 | 15 | |
tantek@9099 | 16 | <body class="h-entry"> |
tantek@9099 | 17 | |
fantasai@1564 | 18 | <div class="head"> |
fantasai@1564 | 19 | <!--logo--> |
fantasai@1563 | 20 | |
tantek@9099 | 21 | <h1 class="p-name">CSS Style Attributes</h1> |
fantasai@1563 | 22 | |
tantek@9099 | 23 | <h2 class="no-num no-toc">[LONGSTATUS] <span class="dt-updated"><span class="value-title" title="[CDATE]">[DATE]</span></span></h2> |
fantasai@1564 | 24 | <dl> |
fantasai@1564 | 25 | <dt>This version:</dt> |
tantek@9099 | 26 | <dd><a class="u-url" href="[VERSION]">[VERSION]</a> |
tantek@9099 | 27 | |
fantasai@1564 | 28 | <dt>Latest version: |
tantek@9099 | 29 | <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a> |
tantek@9099 | 30 | |
tantek@9099 | 31 | <dt>Editor's draft: |
tantek@9099 | 32 | <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a> |
tantek@9099 | 33 | (<a href="https://dvcs.w3.org/hg/csswg/log/tip/[SHORTNAME]/Overview.src.html">change log</a>) |
tantek@9099 | 34 | |
fantasai@1564 | 35 | <dt>Previous version: |
simon@9379 | 36 | <dd><a href="http://www.w3.org/TR/2013/PR-css-style-attr-20131003/">http://www.w3.org/TR/2013/PR-css-style-attr-20131003/</a> |
tantek@9099 | 37 | |
tantek@9099 | 38 | <dt>Feedback: |
dbaron@7921 | 39 | <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-style-attr%5D%20feedback">www-style@w3.org</a> |
tantek@9099 | 40 | with subject line “<kbd>[[SHORTNAME]] <var>… message topic …</var></kbd>” |
fantasai@7857 | 41 | (<a rel="discussion" href="http://lists.w3.org/Archives/Public/www-style/">archives</a>) |
tantek@9099 | 42 | |
tantek@1911 | 43 | <dt>Editors: |
tantek@9099 | 44 | <dd class="p-author h-card vcard"> |
tantek@9099 | 45 | <a lang="tr" class="p-name fn u-url url" rel="author" |
tantek@9099 | 46 | href="http://tantek.com/">Tantek Çelik</a> |
tantek@9099 | 47 | (<a class="p-org org h-org" |
tantek@9099 | 48 | href="https://mozilla.org/">Mozilla</a>, |
tantek@9099 | 49 | and formerly at |
tantek@9099 | 50 | <a href="http://microsoft.com/">Microsoft Corporation</a>) |
tantek@9099 | 51 | <<a class="u-email email" |
tantek@1911 | 52 | href="mailto:tantek@cs.stanford.edu">tantek@cs.stanford.edu</a>> |
tantek@1911 | 53 | </dd> |
tantek@9099 | 54 | <dd class="p-author h-card vcard"> |
tantek@9099 | 55 | <a class="p-name fn n u-url url" rel="author" |
tantek@9099 | 56 | href="http://fantasai.inkedblade.net/contact"><span class="p-given-name given-name">Elika</span> |
tantek@9099 | 57 | <abbr class="p-additional-name additional-name">J.</abbr> |
tantek@9099 | 58 | <span class="p-family-name family-name">Etemad</span></a> |
tantek@9099 | 59 | (<a class="p-org org h-org" |
tantek@9099 | 60 | href="https://mozilla.org/">Mozilla</a>) |
tantek@1911 | 61 | </dd> |
fantasai@1564 | 62 | <dt>Previous Editors: |
tantek@1911 | 63 | <dd class="vcard"><a class="fn url" href="http://www.w3.org/People/Bos/">Bert Bos</a> (<a class="org" href="http://www.w3.org/">W3C</a>), <<a class="email" href="mailto:bert@w3.org">bert@w3.org</a>> |
tantek@1911 | 64 | </dd> |
tantek@1911 | 65 | <dd class="vcard"><span class="fn">Marc Attinasi</span> (<span class="org">AOL/Netscape</span>), <<a class="email" href="mailto:attinasi@netscape.com">attinasi@netscape.com</a>> |
tantek@1911 | 66 | </dd> |
rhauck@8599 | 67 | <dt>Test suite:</dt> |
rhauck@8599 | 68 | <dd> |
rhauck@8599 | 69 | <a href="http://test.csswg.org/suites/css-style-attr/nightly-unstable/">http://test.csswg.org/suites/css-style-attr/nightly-unstable/</a> |
rhauck@8599 | 70 | </dd> |
fantasai@1564 | 71 | </dl> |
fantasai@1564 | 72 | <!--begin-copyright--> |
fantasai@1564 | 73 | <p>[Here will be included the file "../copyright.inc"]</p> |
fantasai@1564 | 74 | <!--end-copyright--> |
fantasai@1563 | 75 | |
fantasai@1563 | 76 | <hr title="Separator for header"> |
fantasai@1563 | 77 | </div> |
fantasai@1563 | 78 | |
fantasai@1563 | 79 | <h2 class="no-num no-toc" id="abstract">Abstract</h2> |
fantasai@1563 | 80 | |
tantek@9099 | 81 | <p><span class="p-summary"> |
tantek@9099 | 82 | Markup languages such as HTML [[HTML401]] and SVG [[SVG11]] provide a style |
fantasai@1655 | 83 | attribute on most elements, to hold inline style information that applies |
tantek@9099 | 84 | to those elements. This |
fantasai@1624 | 85 | draft describes the syntax and interpretation of the CSS fragment that can |
tantek@1958 | 86 | be used in such style attributes. |
tantek@9099 | 87 | </span> |
fantasai@1563 | 88 | |
fantasai@1563 | 89 | <h2 class="no-num no-toc" id="status">Status of this document</h2> |
fantasai@1564 | 90 | <!--status--> |
fantasai@1953 | 91 | <p>For this specification to exit the CR stage, the following conditions |
fantasai@1953 | 92 | shall be met: |
fantasai@1953 | 93 | |
fantasai@1953 | 94 | <ol> |
fantasai@1953 | 95 | <li> |
fantasai@1953 | 96 | <p>There must be at least two interoperable implementations. For the |
fantasai@1953 | 97 | purposes of this criterion, we define the following terms:</p> |
fantasai@1953 | 98 | |
fantasai@1953 | 99 | <dl> |
fantasai@1953 | 100 | <dt>interoperable |
fantasai@1953 | 101 | |
fantasai@1953 | 102 | <dd> |
fantasai@1953 | 103 | <p>passing the respective test case(s) in the <a |
fantasai@1953 | 104 | href="http://www.w3.org/Style/CSS/Test/">CSS test suite</a>, or, if |
fantasai@1953 | 105 | the implementation is not a Web browser, an equivalent test. Every |
fantasai@1953 | 106 | relevant test in the test suite should have an equivalent test created |
fantasai@1953 | 107 | if such a user agent (UA) is to be used to claim interoperability. In |
fantasai@1953 | 108 | addition if such a UA is to be used to claim interoperability, then |
fantasai@1953 | 109 | there must one or more additional UAs which can also pass those |
fantasai@1953 | 110 | equivalent tests in the same way for the purpose of interoperability. |
fantasai@1953 | 111 | The equivalent tests must be made publicly available for the purposes |
fantasai@1953 | 112 | of peer review.</p> |
fantasai@1953 | 113 | |
fantasai@1953 | 114 | <dt>implementation |
fantasai@1953 | 115 | |
fantasai@1953 | 116 | <dd> |
fantasai@1953 | 117 | <p>a user agent which:</p> |
fantasai@1953 | 118 | |
fantasai@1953 | 119 | <ol> |
fantasai@1953 | 120 | <li>implements the specification. |
fantasai@1953 | 121 | |
fantasai@1953 | 122 | <li>is available (i.e. publicly downloadable or available through some |
fantasai@1953 | 123 | other public point of sale mechanism). This is the "show me" |
fantasai@1953 | 124 | requirement. |
fantasai@1953 | 125 | |
fantasai@1953 | 126 | <li>is shipped, or is a "nightly build" (i.e., a development version |
fantasai@1953 | 127 | for the next release), but is not experimental (i.e., a version |
fantasai@1953 | 128 | specifically designed to pass the test suite and not intended for |
fantasai@1953 | 129 | daily usage going forward). |
fantasai@1953 | 130 | </ol> |
fantasai@1953 | 131 | </dl> |
fantasai@1953 | 132 | |
fantasai@1953 | 133 | <li> |
fantasai@1953 | 134 | <p>A minimum of three months of the CR period must elapse. That |
tantek@1958 | 135 | is, this specification will not exit CR before (DATE OF PUBLICATION PLUS THREE MONTHS). When the |
fantasai@1953 | 136 | specification exits CR, an implementation report will be published. At |
fantasai@1953 | 137 | this point, no such report exists.</p> |
fantasai@1953 | 138 | </ol> |
fantasai@1617 | 139 | |
tantek@1958 | 140 | <p>A CSS Style Attributes <a href="http://www.w3.org/Style/CSS/Test/">Test |
fantasai@1617 | 141 | Suite</a> will be developed during the Candidate Recommendation phase of |
tantek@1958 | 142 | this CSS Style Attributes specification. |
fantasai@1563 | 143 | |
fantasai@1564 | 144 | <h2 class="no-num no-toc" id="contents">Table of contents</h2> |
fantasai@1564 | 145 | <!--toc--> |
fantasai@1563 | 146 | |
fantasai@1564 | 147 | <h2 id="intro">Introduction</h2> |
fantasai@1563 | 148 | |
tantek@1958 | 149 | <p>Some document formats have a <dfn>style attribute</dfn> to permit |
fantasai@1610 | 150 | the author to directly apply style information to specific elements |
tantek@1958 | 151 | in documents. If a document format defines a style attribute (whether named 'style' or something else) and the |
fantasai@1624 | 152 | attribute accepts CSS as its value, then this specification defines that |
tantek@1958 | 153 | <dfn>style attribute</dfn>’s syntax and interpretation. |
fantasai@1563 | 154 | |
fantasai@1564 | 155 | <div class="example"> |
fantasai@1564 | 156 | <p>The following example shows the use of the <code>style</code> attribute |
tantek@1911 | 157 | in HTML [[HTML401]]:</p> |
fantasai@1564 | 158 | <pre><p style="<em>color: #090; line-height: 1.2</em>">...</p></pre> |
fantasai@1564 | 159 | </div> |
fantasai@1563 | 160 | |
fantasai@1565 | 161 | <h2 id="conformance">Conformance</h2> |
fantasai@1565 | 162 | |
tantek@1958 | 163 | <p>A document or implementation cannot conform to CSS Style Attributes alone, but can claim conformance to CSS Style Attributes |
fantasai@1571 | 164 | if it satisfies the conformance requirements in this specification when |
tantek@1958 | 165 | implementing CSS together with style attribute handling as defined in a |
tantek@1958 | 166 | document language that has one or more CSS style attributes.</p> |
fantasai@1571 | 167 | |
tantek@1958 | 168 | <p>Conformance to CSS Style Attributes is defined for two |
fantasai@1610 | 169 | classes: |
fantasai@1571 | 170 | <dl> |
fantasai@1571 | 171 | <dt><dfn>document</dfn></dt> |
tantek@1958 | 172 | <dd>A document represented in a document language that defines a style |
fantasai@1571 | 173 | attribute for one or more of its elements. |
fantasai@1571 | 174 | <dt><dfn>interpreter</dfn></dt> |
fantasai@1571 | 175 | <dd>Someone or something that interprets the semantics of a document and |
fantasai@1571 | 176 | its associated style information. |
fantasai@1571 | 177 | (Most CSS <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">user |
fantasai@1571 | 178 | agents</a> fall under this category.)</dd> |
fantasai@1571 | 179 | </dl> |
fantasai@1571 | 180 | |
fantasai@1565 | 181 | <p>The conformance requirements are expressed with a combination of |
fantasai@1565 | 182 | descriptive assertions and RFC 2119 terminology. The key words "MUST", |
fantasai@1565 | 183 | "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", |
fantasai@1565 | 184 | "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this |
fantasai@1565 | 185 | document are to be interpreted as described in RFC 2119. |
fantasai@1565 | 186 | However, for readability, these words do not appear in all uppercase |
fantasai@1565 | 187 | letters in this specification. All of the text of this specification is |
fantasai@1565 | 188 | normative except sections explicitly marked as non-normative, examples, |
fantasai@1565 | 189 | and notes. [[!RFC2119]]</p> |
fantasai@1565 | 190 | |
fantasai@1565 | 191 | <p>Examples in this specification are introduced with the words "for example" |
fantasai@1565 | 192 | or are set apart from the normative text with <code>class="example"</code>, |
fantasai@1565 | 193 | like this: |
fantasai@1565 | 194 | |
fantasai@1565 | 195 | <div class="example"> |
fantasai@1565 | 196 | <p>This is an example of an informative example.</p> |
fantasai@1565 | 197 | </div> |
fantasai@1565 | 198 | |
fantasai@1565 | 199 | <p>Informative notes begin with the word "Note" and are set apart from the |
fantasai@1565 | 200 | normative text with <code>class="note"</code>, like this: |
fantasai@1565 | 201 | |
fantasai@1565 | 202 | <p class="note">Note, this is an informative note.</p> |
fantasai@1565 | 203 | |
fantasai@1610 | 204 | <h2 id="syntax">Syntax and Parsing</h2> |
fantasai@1610 | 205 | |
tantek@1958 | 206 | <p>The value of the style attribute must match the syntax of the contents of |
fantasai@1610 | 207 | a CSS <a href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">declaration |
fantasai@1915 | 208 | block</a> (excluding the delimiting braces), whose formal grammar is given |
fantasai@1915 | 209 | below in the terms and conventions of the |
fantasai@1616 | 210 | <a href="http://www.w3.org/TR/CSS21/syndata.html#syntax">CSS core grammar</a>: |
fantasai@1616 | 211 | |
fantasai@1616 | 212 | <pre> |
simon@9523 | 213 | style-attribute |
simon@9523 | 214 | : S* declaration-list |
fantasai@1616 | 215 | ; |
simon@9380 | 216 | |
simon@9523 | 217 | declaration-list |
simon@9523 | 218 | : declaration [ ';' S* declaration-list ]? |
simon@9523 | 219 | | at-rule declaration-list |
simon@9380 | 220 | | /* empty */ |
simon@9380 | 221 | ; |
fantasai@1616 | 222 | </pre> |
fantasai@1616 | 223 | |
fantasai@1616 | 224 | <p class="note">Note that following the CSS2.1 convention, comment tokens |
fantasai@1616 | 225 | are not shown in the rule above. |
fantasai@1616 | 226 | |
tantek@1958 | 227 | <p>The interpreter must parse the style attribute's value using the |
fantasai@1610 | 228 | same forward-compatible parsing rules that apply to parsing declaration block |
simon@9380 | 229 | contents in a normal CSS style sheet (see |
fantasai@1610 | 230 | <a href="http://www.w3.org/TR/CSS21/syndata.html">chapter 4 of the CSS2.1 |
simon@9380 | 231 | specification</a> [[!CSS21]]), |
simon@9380 | 232 | with the following addition: when the UA expects the start of a declaration or at-rule |
simon@9380 | 233 | (i.e., an IDENT token or an ATKEYWORD token) but finds an unexpected token instead, |
simon@9380 | 234 | that token is considered to be the first token of a malformed declaration. |
simon@9380 | 235 | I.e., the rule for malformed declarations, rather than malformed statements, |
simon@9380 | 236 | is used to determine which tokens to ignore in that case. |
fantasai@1610 | 237 | |
fantasai@1610 | 238 | <p class="note">Note that because there is no open brace delimiting the |
tantek@1958 | 239 | declaration list in the CSS style attribute syntax, a close brace |
tantek@1958 | 240 | (<code>}</code>) in the style attribute's value does not terminate the |
fantasai@1610 | 241 | style data: it is merely an invalid token.</p> |
fantasai@1610 | 242 | |
simon@9380 | 243 | <div class="note"> |
simon@9380 | 244 | <p>Although the grammar allows it, |
simon@9380 | 245 | no at-rule valid in style attributes is define at the moment. |
simon@9380 | 246 | The forward-compatible parsing rules are such that a declaration following an at-rule |
simon@9380 | 247 | is not ignored: |
simon@9380 | 248 | <pre><span style="@unsupported { splines: reticulating } color: green"></pre> |
simon@9380 | 249 | </div> |
simon@9380 | 250 | |
fantasai@1610 | 251 | <h2 id="interpret">Cascading and Interpretation</h2> |
fantasai@1610 | 252 | |
tantek@1958 | 253 | <p>The declarations in a style attribute apply to the element to which |
fantasai@1656 | 254 | the attribute belongs. In the cascade, these declarations are considered |
fantasai@1656 | 255 | to have author origin and a specificity higher than any selector. |
fantasai@1656 | 256 | CSS2.1 <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">defines</a> |
tantek@1958 | 257 | how style sheets and style attributes are cascaded together. [[!CSS21]] |
tantek@1958 | 258 | Relative URLs in the style data must be resolved relative to the style attribute's element (or to the document if per-element resolution is not |
fantasai@1612 | 259 | defined) when the attribute's value is parsed<!-- so dynamic changes to |
fantasai@1612 | 260 | the base URL don't affect the CSS ~Hixie -->. |
fantasai@1610 | 261 | |
tantek@1958 | 262 | <p>Aside from the differences in cascading, the declarations in a style |
fantasai@1610 | 263 | attribute must be interpreted exactly as if they were given in a CSS |
fantasai@1610 | 264 | style rule that applies to the element. |
fantasai@1610 | 265 | |
fantasai@1610 | 266 | <p>The CSS Working Group strongly recommends that document languages do |
tantek@1958 | 267 | not allow multiple CSS style attributes on a single element. If a document |
tantek@1958 | 268 | language allows multiple CSS style attributes, each must be parsed |
fantasai@1610 | 269 | independently and treated as a separate style rule, the ordering of which |
fantasai@1610 | 270 | should be defined by the document language, else is undefined. |
fantasai@1610 | 271 | |
simon@9380 | 272 | <h2 id="changes">Changes</h2> |
simon@9380 | 273 | |
simon@9380 | 274 | Changes since the <a href="http://www.w3.org/TR/2013/PR-css-style-attr-20131003/">2013-10-03 Proposed Recommendation</a> are: |
simon@9380 | 275 | |
simon@9380 | 276 | <ul> |
simon@9380 | 277 | <li>Parse at-rules in declaration lists to allow future extension. |
simon@9380 | 278 | </ul> |
simon@9380 | 279 | |
fantasai@1564 | 280 | <h2 id="ack">Acknowledgments</h2> |
fantasai@1563 | 281 | |
tantek@1912 | 282 | <p>Thanks to feedback from <span class="vcard"><span class="fn">Daniel Glazman</span></span>, <span class="vcard"><span class="fn">Ian Hickson</span></span>, <span class="vcard"><span class="fn n"><span class="given-name">Eric</span> <abbr class="additional-name">A.</abbr> <span class="family-name">Meyer</span></span></span>, |
tantek@1912 | 283 | <span class="vcard"><span class="fn">Björn Höhrmann</span></span>. |
tantek@1912 | 284 | </p> |
fantasai@1563 | 285 | |
fantasai@1564 | 286 | <h2 id="references">References |
fantasai@1563 | 287 | |
fantasai@1564 | 288 | <h3 class="no-num" id="normative-references">Normative references</h3> |
fantasai@1563 | 289 | |
fantasai@1564 | 290 | <!--begin-normative--> |
fantasai@1564 | 291 | <p>[Here will be inserted the file "normative.inc"]</p> |
fantasai@1564 | 292 | <!--end-normative--> |
fantasai@1563 | 293 | |
fantasai@1564 | 294 | <h3 class="no-num" id="informative-references">Informative references</h3> |
fantasai@1563 | 295 | |
fantasai@1564 | 296 | <!--begin-informative--> |
fantasai@1564 | 297 | <p>[Here will be inserted the file "informative.inc"]</p> |
fantasai@1564 | 298 | <!--end-informative--> |
fantasai@1563 | 299 | |
fantasai@1563 | 300 | </body> |
fantasai@1563 | 301 | </html> |
fantasai@1563 | 302 | <!-- Keep this comment at the end of the file |
fantasai@1563 | 303 | Local variables: |
fantasai@1563 | 304 | mode: sgml |
fantasai@1563 | 305 | sgml-declaration:"~/SGML/HTML4.decl" |
fantasai@1563 | 306 | sgml-default-doctype-name:"html" |
fantasai@1563 | 307 | sgml-minimize-attributes:t |
fantasai@1563 | 308 | sgml-nofill-elements:("pre" "style" "br") |
fantasai@1563 | 309 | End: |
fantasai@1563 | 310 | --> |