csswg/css3-hierarchies Overview.html,NONE,1.1 Overview.src.html,NONE,1.1 from Tab Atkins Jr.. via cvs-syncmail on 2011-10-18 (public-css-commits@w3.org from October 2011)

From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
Date: Tue, 18 Oct 2011 23:24:15 +0000
To: public-css-commits@w3.org
Message-Id: <E1RGJ15-0003nY-Vh@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-hierarchies
In directory hutz:/tmp/cvs-serv14559

Added Files:
	Overview.html Overview.src.html 
Log Message:
Initial commit of the Hierarchies spec.

--- NEW FILE: Overview.html ---
<!DOCTYPE html>

<html lang=en>
 <head profile="http://www.w3.org/2006/03/hcard"><meta
  content="text/html; charset=UTF-8" http-equiv=Content-Type>

  <title>CSS Hierarchies Module Level 3</title>
  <link href="./Overview.src_files/default.css" rel=stylesheet
  type="text/css">
  <link href="./Overview.src_files/W3C-ED.css" rel=stylesheet
  type="text/css">

  <style type="text/css">
    /* delete this block when you've cleared out all the .replaceme elements */
    .replaceme {
      border: solid red;
      padding: 0 0.5em;
      margin: 0 0.1em;
      background: yellow;
      color: green;
    }
    .replaceme:before {
       content: "FIXME(";
       color: black;
    }
    .replaceme:after {
       content: ")";
       color: black;
    }
  </style>

 <body>
  <div class=head> <!--begin-logo-->
   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

   <h1>CSS Hierarchies Module Level 3</h1>

   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 18 October
    2011</h2>

   <dl>
    <dt>This version:

    <dd><a
     href="http://dev.w3.org/csswg/css-module/http://www.w3.org/TR/2011/ED-css3-Hierarchies-20111018/">http://www.w3.org/TR/2011/ED-css3-Hierarchies-20111018/</a>
     

    <dt>Latest version:

    <dd><a
     href="http://www.w3.org/TR/css3-Hierarchies/">http://www.w3.org/TR/css3-Hierarchies/</a>
     

    <dt>Editor's draft:

    <dd><a
     href="http://dev.w3.org/csswg/css3-Hierarchies/">http://dev.w3.org/csswg/css3-Hierarchies/</a>
     

    <dt>Previous version:

    <dd><a href="http://www.w3.org/PreviousVersionURI">
     http://www.w3.org/PreviousVersionURI</a>

    <dt>Editors:

    <dd class=vcard><span class=fn>[editor1 name]</span>, <span
     class=org>[affiliation (opt.)]</span>, <span class=email>[email address
     (opt.)]</span>

    <dd class=vcard><span class=fn>[editor2 name]</span>, <span
     class=org>[affiliation (opt.)]</span>, <span class=email>[email address
     (opt.)]</span>
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=license>Copyright</a> &copy; 2011 <a
    href="http://www.w3.org/"><acronym
    title="World Wide Web Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
    href="http://www.csail.mit.edu/"><acronym
    title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
    href="http://www.ercim.eu/"><acronym
    title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
    <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>

  <h2 class="no-num no-toc" id=abstract>Abstract</h2>

  <p>CSS is a language for describing the rendering of structured documents
   (such as HTML and XML) on screen, on paper, in speech, etc. This module
   contains the features of CSS level&nbsp;3 relating to the hierarchical
   nesting of style rules. It includes and extends the functionality of CSS
   level&nbsp;2 <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, which builds on CSS
   level&nbsp;1 <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>.
   The main extension compared to level&nbsp;2 is the ability to nest a style
   rule within another rule, allowing greater modularisation and readibility
   of CSS documents.

  <h2 class="no-num no-toc" id=status>Status of this document</h2>
  <!--begin-status-->

  <p>This is a public copy of the editors' draft. It is provided for
   discussion only and may change at any moment. Its publication here does
   not imply endorsement of its contents by W3C. Don't cite this document
   other than as work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a
   href="mailto:www-style@w3.org?Subject=%5Bcss3-Hierarchies%5D%20PUT%20SUBJECT%20HERE">
   www-style@w3.org</a> (see <a
   href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
   discussion of this specification. When sending e-mail, please put the text
   &#8220;css3-Hierarchies&#8221; in the subject, preferably like this:
   &#8220;[<!---->css3-Hierarchies<!---->] <em>&hellip;summary of
   comment&hellip;</em>&#8221;

  <p>This document was produced by the <a href="/Style/CSS/members">CSS
   Working Group</a> (part of the <a href="/Style/">Style Activity</a>).

  <p>This document was produced by a group operating under the <a
   href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
   Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
   rel=disclosure>public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
   W3C Patent Policy</a>.</p>
  <!--end-status-->

  <p>The following features are at risk: …

  <h2 class="no-num no-toc" id=contents>Table of contents</h2>
  <!--begin-toc-->

  <ul class=toc>
   <li><a href="#intro"><span class=secno>1. </span> Introduction</a>
    <ul class=toc>
     <li><a href="#placement"><span class=secno>1.1. </span> Module
      Interactions</a>

     <li><a href="#values"><span class=secno>1.2. </span> Values</a>

     <li><a href="#motivation"><span class=secno>1.3. </span> Motivation</a>
    </ul>

   <li><a href="#selector-and"><span class=secno>2. </span> the &amp;
    Selector</a>

   <li><a href="#Grammar"><span class=secno>3. </span> Grammar
    modifications</a>
    <ul class=toc>
     <li><a href="#css-2-grammar"><span class=secno>3.1. </span> Core CSS
      Grammar</a>

     <li><a href="#css-4-selectors-grammar"><span class=secno>3.2. </span>
      CSS4 Selectors Grammar</a>

     <li><a href="#css-4-selectors-lexical-scanner"><span class=secno>3.3.
      </span> CSS4 Selectors Lexical Scanner</a>
    </ul>

   <li><a href="#conformance"><span class=secno>4. </span> Conformance</a>
    <ul class=toc>
     <li><a href="#conventions"><span class=secno>4.1. </span> Document
      Conventions</a>

     <li><a href="#conformance-classes"><span class=secno>4.2. </span>
      Conformance Classes</a>

     <li><a href="#partial"><span class=secno>4.3. </span> Partial
      Implementations</a>

     <li><a href="#experimental"><span class=secno>4.4. </span> Experimental
      Implementations</a>

     <li><a href="#testing"><span class=secno>4.5. </span>Non-Experimental
      Implementations</a>

     <li><a href="#cr-exit-criteria"><span class=secno>4.6. </span> CR Exit
      Criteria</a>
    </ul>

   <li class=no-num><a href="#acknowledgments">Acknowledgments</a>

   <li class=no-num><a href="#references">References</a>
    <ul class=toc>
     <li class=no-num><a href="#normative-references">Normative
      references</a>

     <li class=no-num><a href="#other-references">Other references</a>
    </ul>

   <li class=no-num><a href="#index">Index</a>
  </ul>
  <!--end-toc-->

  <h2 id=intro><span class=secno>1. </span> Introduction</h2>

  <p><em>This section is not normative.</em>

  <p>CSS beyond level 2 is a set of modules, divided up to allow the
   specifications to develop incrementally, along with their implementations.
   This specification is one of those modules.

  <p>This module describes support for nesting a style rule within another
   style rule, causing the inner rule to adopt the selector of the outer rule
   as a selector prefix. This feature allows related styles to be aggregated
   into a single structure within the CSS document, improving readability and
   maintainability.

  <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>

  <p>This module introduces new parser rules that extend the <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> parser model. This module
   introduces new parser rules that extend the [[CSS4SELECTORS]] module.

  <h3 id=values><span class=secno>1.2. </span> Values</h3>

  <p>This specification follows the <a
   href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
   definition conventions</a> from <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
   this specification are defined in CSS Level&nbsp;2 Revision&nbsp;1 <a
   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
   modules may expand the definitions of these value types: for example <a
   href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
   when combined with this module, expands the definition of the
   &lt;color&gt; value type as used in this specification.

  <p>In addition to the property-specific values listed in their definitions,
   all properties defined in this specification also accept the <a
   href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
   keyword as their property value. For readability it has not been repeated
   explicitly.

  <h3 id=motivation><span class=secno>1.3. </span> Motivation</h3>

  <p>CSS Rules for even moderately complicated web pages include lots of
   duplication for the purpose of styling related content. For example, here
   is a portion of the CSS markup for one version of the <a href="#CSS3COLOR"
   rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a> module:

  <pre class=example>
table.colortable td {text-align:center }
table.colortable td.c { text-transform:uppercase }
table.colortable td:first-child, table.colortable td:first-child+td { border:1px solid black }
table.colortable th {text-align:center; background:black; color:white }

table.tprofile th.title {background:gray; color:white}
table.tprofile th { width:29%;padding:2px }
table.tprofile td { width:71%;padding:2px }

table.hslexample { background: #808080; padding:1em; margin:0; float:left; }
table.hslexample td,table.hslexample th { font-size:smaller;width:3em }
</pre>

  <p>Hierarchies allow the grouping of related style rules, like this:

  <pre class=example>
table {
  &.colortable {
    & td {text-align:center }
    &.c { text-transform:uppercase }
    & td:first-child, & td:first-child+td { border:1px solid black }
    & th {text-align:center; background:black; color:white }

  &.tprofile {
    & th {
      width:29%;padding:2px;
      &.title {background:gray; color:white}
    }
    & td { width:71%;padding:2px }
  }

  &.hslexample { 
    background: #808080; padding:1em; margin:0; float:left;
    & td, & th { font-size:smaller;width:3em }
  }
}
</pre>

  <p>Besides removing duplication, the grouping of related rules improves
   readability and maintainability of the resulting CSS.

  <h2 id=selector-and><span class=secno>2. </span> the &amp; Selector</h2>

  <p>This specification provides a mechanism that allows for the nesting of
   style rules within other style rules. A nested style rule can used
   anywhere that a declaration can be used.

  <p>In order to accomplish nesting, this specification defines a new simple
   selector called the nesting selector, represented in selectors by the
   &lsquo;<code class=css>&amp;</code>&rsquo; character. All complex
   selectors in the selector lists of nested rule sets must start with the
   nesting selector. The nesting selector represents the elements matches by
   the parent rule set's selector list.

  <p>The following two examples produce an equivalent result on all pages:

  <pre class=example>
div {
  & .keyword {color: red;}
  &:hover {background-color: rgb(200, 255, 255);}
}
</pre>

  <pre class=example>
div .keyword {color:red;}

div:hover {background-color: rgb(200, 255, 255);}
</pre>

  <p>The following two examples provide an equivalent result on all pages:

  <pre class=example>
div, p {
  & .keyword, & .constant {color: red;}
}
</pre>

  <pre class=example>
div .keyword {color:red;}
div .constant {color:red;}
p .keyword {color:red;}
p .constant {color:red;}
</pre>

  <p>Multiple style rules can be embedded within a style rule. Style rules
   can be embedded arbitrarily deeply. Embedded style rules and properties
   can co-exist.

  <p>The following two examples are equivalent:

  <pre class=example>
div, p {
  & .keyword {color: green;} 
  font-size: 10px;
  & .constant {
    color: red;
    &:hover:after { content: " [" attr(value) "]";}
    background-color: green;
  }
}
</pre>

  <pre class=example>
div, p {font-size: 10px;}
div .keyword, p .keyword {color: green;}
div .constant, p .constant {color: red; background-color: green;}
div .constant:hover:after, p .constant:hover:after {content: " [" attr(value) "]";}
</pre>

  <h2 id=Grammar><span class=secno>3. </span> Grammar modifications</h2>

  <h3 id=css-2-grammar><span class=secno>3.1. </span> Core CSS Grammar</h3>

  <p>The following modifications are required to the <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> grammar as defined in Section
   4.1.1.

  <p>The ruleset rule is changed to:

  <pre>ruleset : selectors_group? ruleset-body</pre>

  <p>The following rules are added:

  <pre>
ruleset-body           : '{' S* ruleitem? [ ';' S* ruleitem? ]* '}' S*
ruleitem               : declaration | nested-ruleset
nested-ruleset         : nested-selectors-group ruleset-body
</pre>

  <h3 id=css-4-selectors-grammar><span class=secno>3.2. </span> CSS4
   Selectors Grammar</h3>

  <p>The following modifications are required to the [[!CSS4SELECTORS]]
   grammar as defined in Section 16.1.

  <p>The following rules are added:

  <pre>
nested-selectors-group   : nested-selector [ COMMA S* nested-selector ]
nested-selector          : nested-compound-selector [ combinator compound-selector ]*
nested-compound-selector : NEST [ HASH | class | attrib | pseudo | negation ]*
</pre>

  <h3 id=css-4-selectors-lexical-scanner><span class=secno>3.3. </span> CSS4
   Selectors Lexical Scanner</h3>

  <p>The following modifications are required to the [[!CSS4SELECTORS]]
   lexical scanner as defined in Section 16.2.

  <p>Immediately below:

  <pre>
"-->"            return CDC;
</pre>

  <p>the following rule is inserted:

  <pre>
"&"              return NEST;
</pre>

  <h2 id=conformance><span class=secno>4. </span> Conformance</h2>

  <h3 id=conventions><span class=secno>4.1. </span> Document Conventions</h3>

  <p>Conformance requirements are expressed with a combination of descriptive
   assertions and RFC 2119 terminology. The key words “MUST”, “MUST
   NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
   “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
   normative parts of this document are to be interpreted as described in RFC
   2119. However, for readability, these words do not appear in all uppercase
   letters in this specification.

  <p>All of the text of this specification is normative except sections
   explicitly marked as non-normative, examples, and notes. <a
   href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>

  <p>Examples in this specification are introduced with the words “for
   example” or are set apart from the normative text with
   <code>class="example"</code>, like this:

  <div class=example>
   <p>This is an example of an informative example.</p>
  </div>

  <p>Informative notes begin with the word “Note” and are set apart from
   the normative text with <code>class="note"</code>, like this:

  <p class=note>Note, this is an informative note.

  <h3 id=conformance-classes><span class=secno>4.2. </span> Conformance
   Classes</h3>

  <p>Conformance to <var class=replaceme>CSS TEMPLATE Module</var> is defined
   for three conformance classes:

  <dl>
   <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
    sheet</dfn>

   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
    style sheet</a>.

   <dt><dfn id=renderer>renderer</dfn>

   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
    that interprets the semantics of a style sheet and renders documents that
    use them.

   <dt><dfn id=authoring-tool>authoring tool</dfn>

   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
    that writes a style sheet.
  </dl>

  <p>A style sheet is conformant to <var class=replaceme>CSS TEMPLATE
   Module</var> if all of its declarations that use properties defined in
   this module have values that are valid according to the generic CSS
   grammar and the individual grammars of each property as given in this
   module.

  <p>A renderer is conformant to <var class=replaceme>CSS TEMPLATE
   Module</var> if, in addition to interpreting the style sheet as defined by
   the appropriate specifications, it supports all the features defined by
   <var class=replaceme>CSS TEMPLATE Module</var> by parsing them correctly
   and rendering the document accordingly. However, the inability of a UA to
   correctly render a document due to limitations of the device does not make
   the UA non-conformant. (For example, a UA is not required to render color
   on a monochrome monitor.)

  <p>An authoring tool is conformant to <var class=replaceme>CSS TEMPLATE
   Module</var> if it writes style sheets that are syntactically correct
   according to the generic CSS grammar and the individual grammars of each
   feature in this module, and meet all other conformance requirements of
   style sheets as described in this module.

  <h3 id=partial><span class=secno>4.3. </span> Partial Implementations</h3>

  <p>So that authors can exploit the forward-compatible parsing rules to
   assign fallback values, CSS renderers <strong>must</strong> treat as
   invalid (and <a
   href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
   appropriate</a>) any at-rules, properties, property values, keywords, and
   other syntactic constructs for which they have no usable level of support.
   In particular, user agents <strong>must not</strong> selectively ignore
   unsupported component values and honor supported values in a single
   multi-value property declaration: if any value is considered invalid (as
   unsupported values must be), CSS requires that the entire declaration be
   ignored.

  <h3 id=experimental><span class=secno>4.4. </span> Experimental
   Implementations</h3>

  <p>To avoid clashes with future CSS features, the CSS2.1 specification
   reserves a <a
   href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
   syntax</a> for proprietary and experimental extensions to CSS.

  <p>Prior to a specification reaching the Candidate Recommendation stage in
   the W3C process, all implementations of a CSS feature are considered
   experimental. The CSS Working Group recommends that implementations use a
   vendor-prefixed syntax for such features, including those in W3C Working
   Drafts. This avoids incompatibilities with future changes in the draft.

  <h3 id=testing><span class=secno>4.5. </span>Non-Experimental
   Implementations</h3>

  <p>Once a specification reaches the Candidate Recommendation stage,
   non-experimental implementations are possible, and implementors should
   release an unprefixed implementation of any CR-level feature they can
   demonstrate to be correctly implemented according to spec.

  <p>To establish and maintain the interoperability of CSS across
   implementations, the CSS Working Group requests that non-experimental CSS
   renderers submit an implementation report (and, if necessary, the
   testcases used for that implementation report) to the W3C before releasing
   an unprefixed implementation of any CSS features. Testcases submitted to
   W3C are subject to review and correction by the CSS Working Group.

  <p>Further information on submitting testcases and implementation reports
   can be found from on the CSS Working Group's website at <a
   href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
   Questions should be directed to the <a
   href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
   mailing list.

  <h3 id=cr-exit-criteria><span class=secno>4.6. </span> CR Exit Criteria</h3>

  <p class=issue>[Change or remove the following CR exit criteria if the spec
   is not a module, but, e.g., a Note or a profile. This text was <a
   href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on
   2008-06-04.</a>]

  <p> For this specification to be advanced to Proposed Recommendation, there
   must be at least two independent, interoperable implementations of each
   feature. Each feature may be implemented by a different set of products,
   there is no requirement that all features be implemented by a single
   product. For the purposes of this criterion, we define the following
   terms:

  <dl>
   <dt>independent

   <dd>each implementation must be developed by a different party and cannot
    share, reuse, or derive from code used by another qualifying
    implementation. Sections of code that have no bearing on the
    implementation of this specification are exempt from this requirement.

   <dt>interoperable

   <dd>passing the respective test case(s) in the official CSS test suite,
    or, if the implementation is not a Web browser, an equivalent test. Every
    relevant test in the test suite should have an equivalent test created if
    such a user agent (UA) is to be used to claim interoperability. In
    addition if such a UA is to be used to claim interoperability, then there
    must one or more additional UAs which can also pass those equivalent
    tests in the same way for the purpose of interoperability. The equivalent
    tests must be made publicly available for the purposes of peer review.

   <dt>implementation

   <dd>a user agent which:
    <ol class=inline>
     <li>implements the specification.

     <li>is available to the general public. The implementation may be a
      shipping product or other publicly available version (i.e., beta
      version, preview release, or “nightly build”). Non-shipping product
      releases must have implemented the feature(s) for a period of at least
      one month in order to demonstrate stability.

     <li>is not experimental (i.e., a version specifically designed to pass
      the test suite and is not intended for normal usage going forward).
    </ol>
  </dl>

  <p>The specification will remain Candidate Recommendation for at least six
   months.

  <h2 class=no-num id=acknowledgments>Acknowledgments</h2>

  <p><var class=replaceme>[acknowledgments]</var>

  <h2 class=no-num id=references>References</h2>

  <h3 class=no-num id=normative-references>Normative references</h3>
  <!--begin-normative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS21>[CSS21]

   <dd>Bert Bos; et al. <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
    Sheets Level 2 Revision 1 (CSS&#160;2.1) Specification.</cite></a> 7 June
    2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
    </dd>
   <!---->

   <dt id=RFC2119>[RFC2119]

   <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
    words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
    RFC 2119. URL: <a
    href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
    </dd>
   <!---->
  </dl>
  <!--end-normative-->

  <h3 class=no-num id=other-references>Other references</h3>
  <!--begin-informative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS1>[CSS1]

   <dd>H&#229;kon Wium Lie; Bert Bos. <a
    href="http://www.w3.org/TR/2008/REC-CSS1-20080411"><cite>Cascading Style
    Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C
    Recommendation. URL: <a
    href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a>
    </dd>
   <!---->

   <dt id=CSS3COLOR>[CSS3COLOR]

   <dd>Tantek &#199;elik; Chris Lilley; L. David Baron. <a
    href="http://www.w3.org/TR/2011/REC-css3-color-20110607/"><cite>CSS Color
    Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-css3-color-20110607/">http://www.w3.org/TR/2011/REC-css3-color-20110607/</a>
    </dd>
   <!---->
  </dl>
  <!--end-informative-->

  <h2 class=no-num id=index>Index</h2>
  <!--begin-index-->

  <ul class=indexlist>
   <li>authoring tool, <a href="#authoring-tool"
    title="authoring tool"><strong>4.2.</strong></a>

   <li>renderer, <a href="#renderer" title=renderer><strong>4.2.</strong></a>
    

   <li>style sheet
    <ul>
     <li>as conformance class, <a href="#style-sheet"
      title="style sheet, as conformance class"><strong>4.2.</strong></a>
    </ul>
  </ul>
  <!--end-index-->
  <!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
sgml-omittag:nil
sgml-shorttag:nil
sgml-namecase-general:t
sgml-general-insert-case:lower
sgml-always-quote-attributes:t
sgml-indent-step:nil
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
-->

--- NEW FILE: Overview.src.html ---
<!DOCTYPE html>
<html lang="en"><head profile="http://www.w3.org/2006/03/hcard"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <title>CSS Hierarchies Module Level 3</title>
  <link rel="stylesheet" type="text/css" href="./Overview.src_files/default.css">
  <link rel="stylesheet" type="text/css" href="./Overview.src_files/W3C-[STATUS].css">
  <style type="text/css">
    /* delete this block when you've cleared out all the .replaceme elements */
    .replaceme {
      border: solid red;
      padding: 0 0.5em;
      margin: 0 0.1em;
      background: yellow;
      color: green;
    }
    .replaceme:before {
       content: "FIXME(";
       color: black;
    }
    .replaceme:after {
       content: ")";
       color: black;
    }
  </style>
</head>

<body><div class="head">
<!--logo-->

<h1>CSS Hierarchies Module Level 3</h1>

<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
<dl>
  <dt>This version:
    </dt><dd><a href="http://dev.w3.org/csswg/css-module/[VERSION]">http://www.w3.org/TR/[YEAR]/ED-css3-Hierarchies-[CDATE]/</a>

  </dd><dt>Latest version:
    </dt><dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a>

  </dd><dt>Editor's draft:
    </dt><dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>

  </dd><dt>Previous version:
    </dt><dd><a href="http://www.w3.org/PreviousVersionURI">
    http://www.w3.org/PreviousVersionURI</a>

  </dd><dt>Editors:
    </dt><dd class="vcard"><span class="fn">[editor1 name]</span>,
      <span class="org">[affiliation (opt.)]</span>,
      <span class="email">[email address (opt.)]</span>
    </dd><dd class="vcard"><span class="fn">[editor2 name]</span>,
      <span class="org">[affiliation (opt.)]</span>,
      <span class="email">[email address (opt.)]</span>
</dd></dl>

<!--copyright-->

<hr title="Separator for header">
</div>

<h2 class="no-num no-toc" id="abstract">Abstract</h2>

  <p>CSS is a language for describing the rendering of structured documents
  (such as HTML and XML) on screen, on paper,  in speech, etc. This module
  contains the features of CSS level&nbsp;3 relating to the hierarchical nesting of style rules.
  It includes and extends the functionality of CSS level&nbsp;2 [[!CSS21]],
  which builds on CSS level&nbsp;1 [[CSS1]].
  The main extension compared to level&nbsp;2 is the ability to nest a style rule within another rule, 
  allowing greater modularisation and readibility of CSS documents.

</p><h2 class="no-num no-toc" id="status">Status of this document</h2>

<!--status-->

<p>The following features are at risk: …

</p><h2 class="no-num no-toc" id="contents">Table of contents</h2>

<!--toc-->

<h2 id="intro">
Introduction</h2>

  <p><em>This section is not normative.</em>

  </p><p>CSS beyond level 2 is a set of modules, divided up to allow the specifications to develop incrementally, along with their implementations. This specification is one of those modules.

  </p><p>This module describes support for nesting a style rule within another style rule, causing the inner rule to adopt the selector of the outer rule as a selector prefix. This feature allows related styles to be aggregated into a single structure within the CSS document, improving readability and maintainability.

</p><h3 id="placement">
Module Interactions</h3>

  <p>This module introduces new parser rules that extend the [[!CSS21]] parser model. This module introduces new parser rules that extend the [[CSS4SELECTORS]] module.</p>

</p><h3 id="values">
Values</h3>

  <p>This specification follows the
  <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
  definition conventions</a> from [[!CSS21]]. Value types not defined in
  this specification are defined in CSS Level&nbsp;2 Revision&nbsp;1 [[!CSS21]].
  Other CSS modules may expand the definitions of these value types: for
  example [[CSS3COLOR]], when combined with this module, expands the
  definition of the &lt;color&gt; value type as used in this specification.</p>
  
  <p>In addition to the property-specific values listed in their definitions,
  all properties defined in this specification also accept the
  <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
  keyword as their property value. For readability it has not been repeated
  explicitly.

<h3 id="motivation">
Motivation</h3>

<p>CSS Rules for even moderately complicated web pages include lots of duplication for the purpose of styling related content. For example, here is a portion of the CSS markup for one version of the [[CSS3COLOR]] module:

</p><pre class="example">
table.colortable td {text-align:center }
table.colortable td.c { text-transform:uppercase }
table.colortable td:first-child, table.colortable td:first-child+td { border:1px solid black }
table.colortable th {text-align:center; background:black; color:white }

table.tprofile th.title {background:gray; color:white}
table.tprofile th { width:29%;padding:2px }
table.tprofile td { width:71%;padding:2px }

table.hslexample { background: #808080; padding:1em; margin:0; float:left; }
table.hslexample td,table.hslexample th { font-size:smaller;width:3em }
</pre>

<p>Hierarchies allow the grouping of related style rules, like this:

</p><pre class="example">
table {
  &.colortable {
    & td {text-align:center }
    &.c { text-transform:uppercase }
    & td:first-child, & td:first-child+td { border:1px solid black }
    & th {text-align:center; background:black; color:white }

  &.tprofile {
    & th {
      width:29%;padding:2px;
      &.title {background:gray; color:white}
    }
    & td { width:71%;padding:2px }
  }

  &.hslexample { 
    background: #808080; padding:1em; margin:0; float:left;
    & td, & th { font-size:smaller;width:3em }
  }
}
</pre>

<p>Besides removing duplication, the grouping of related rules improves readability and maintainability of the resulting CSS.

</p><h2 id="selector-and">
the &amp; Selector</h2>

<p>This specification provides a mechanism that allows for the nesting of style rules within other style rules. A nested style rule can used anywhere that a declaration can be used.</p>

<p>In order to accomplish nesting, this specification defines a new simple selector called the nesting selector, represented in selectors by the '&amp;' character. All complex selectors in the selector lists of nested rule sets must start with the nesting selector. The nesting selector represents the elements matches by the parent rule set's selector list.

</p><p>The following two examples produce an equivalent result on all pages:

</p><pre class="example">
div {
  & .keyword {color: red;}
  &:hover {background-color: rgb(200, 255, 255);}
}
</pre>

<pre class="example">
div .keyword {color:red;}

div:hover {background-color: rgb(200, 255, 255);}
</pre>

The following two examples provide an equivalent result on all pages:

</p><pre class="example">
div, p {
  & .keyword, & .constant {color: red;}
}
</pre>

<pre class="example">
div .keyword {color:red;}
div .constant {color:red;}
p .keyword {color:red;}
p .constant {color:red;}
</pre>

<p>Multiple style rules can be embedded within a style rule. Style rules can be embedded arbitrarily deeply. Embedded style rules and properties can co-exist.</p>

<p>The following two examples are equivalent:</p>

<pre class="example">
div, p {
  & .keyword {color: green;} 
  font-size: 10px;
  & .constant {
    color: red;
    &:hover:after { content: " [" attr(value) "]";}
    background-color: green;
  }
}
</pre>

<pre class="example">
div, p {font-size: 10px;}
div .keyword, p .keyword {color: green;}
div .constant, p .constant {color: red; background-color: green;}
div .constant:hover:after, p .constant:hover:after {content: " [" attr(value) "]";}
</pre>

<h2 id="Grammar">
Grammar modifications</h2>

<h3 id="css-2-grammar">
Core CSS Grammar</h3>

<p>The following modifications are required to the [[!CSS21]] grammar as defined in Section 4.1.1.</p>

<p>The ruleset rule is changed to:</p>

<pre>ruleset : selectors_group? ruleset-body</pre>

<p>The following rules are added:</p>

<pre>
ruleset-body           : '{' S* ruleitem? [ ';' S* ruleitem? ]* '}' S*
ruleitem               : declaration | nested-ruleset
nested-ruleset         : nested-selectors-group ruleset-body
</pre>

<h3 id="css-4-selectors-grammar">
CSS4 Selectors Grammar</h3>

<p>The following modifications are required to the [[!CSS4SELECTORS]] grammar as defined in Section 16.1.</p>

<p>The following rules are added:</p>

<pre>
nested-selectors-group   : nested-selector [ COMMA S* nested-selector ]
nested-selector          : nested-compound-selector [ combinator compound-selector ]*
nested-compound-selector : NEST [ HASH | class | attrib | pseudo | negation ]*
</pre>

<h3 id="css-4-selectors-lexical-scanner">
CSS4 Selectors Lexical Scanner</h3>

<p>The following modifications are required to the [[!CSS4SELECTORS]] lexical scanner as defined in Section 16.2.</p>

<p>Immediately below:</p>

<pre>
"-->"            return CDC;
</pre>

<p>the following rule is inserted:</p>

<pre>
"&"              return NEST;
</pre>

</p><h2 id="conformance">
Conformance</h2>

<h3 id="conventions">
Document Conventions</h3>

  <p>Conformance requirements are expressed with a combination of
  descriptive assertions and RFC 2119 terminology. The key words “MUST”,
  “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
  “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
  document are to be interpreted as described in RFC 2119.
  However, for readability, these words do not appear in all uppercase
  letters in this specification.
  
  </p><p>All of the text of this specification is normative except sections
  explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
  
  <p>Examples in this specification are introduced with the words “for example”
  or are set apart from the normative text with <code>class="example"</code>,
  like this:
  
  </p><div class="example">
    <p>This is an example of an informative example.</p>
  </div>
  
  <p>Informative notes begin with the word “Note” and are set apart from the
  normative text with <code>class="note"</code>, like this:
  
  </p><p class="note">Note, this is an informative note.</p>

<h3 id="conformance-classes">
Conformance Classes</h3>

  <p>Conformance to <var class="replaceme">CSS TEMPLATE Module</var>
  is defined for three conformance classes:
  </p><dl>
    <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
      </dt><dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
      style sheet</a>.
    </dd><dt><dfn>renderer</dfn></dt>
      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
      that interprets the semantics of a style sheet and renders
      documents that use them.
    </dd><dt><dfn id="authoring-tool">authoring tool</dfn></dt>
      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
      that writes a style sheet.
  </dd></dl>
  
  <p>A style sheet is conformant to <var class="replaceme">CSS TEMPLATE Module</var>
  if all of its declarations that use properties defined in this module
  have values that are valid according to the generic CSS grammar and the
  individual grammars of each property as given in this module.
  
  </p><p>A renderer is conformant to <var class="replaceme">CSS TEMPLATE Module</var>
  if, in addition to interpreting the style sheet as defined by the
  appropriate specifications, it supports all the features defined
  by <var class="replaceme">CSS TEMPLATE Module</var> by parsing them correctly
  and rendering the document accordingly. However, the inability of a
  UA to correctly render a document due to limitations of the device
  does not make the UA non-conformant. (For example, a UA is not
  required to render color on a monochrome monitor.)
  
  </p><p>An authoring tool is conformant to <var class="replaceme">CSS TEMPLATE Module</var>
  if it writes style sheets that are syntactically correct according to the
  generic CSS grammar and the individual grammars of each feature in
  this module, and meet all other conformance requirements of style sheets
  as described in this module.

</p><h3 id="partial">
Partial Implementations</h3>

  <p>So that authors can exploit the forward-compatible parsing rules to
  assign fallback values, CSS renderers <strong>must</strong>
  treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
  as appropriate</a>) any at-rules, properties, property values, keywords,
  and other syntactic constructs for which they have no usable level of
  support. In particular, user agents <strong>must not</strong> selectively
  ignore unsupported component values and honor supported values in a single
  multi-value property declaration: if any value is considered invalid
  (as unsupported values must be), CSS requires that the entire declaration
  be ignored.</p>
  
<h3 id="experimental">
Experimental Implementations</h3>

  <p>To avoid clashes with future CSS features, the CSS2.1 specification
  reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
  syntax</a> for proprietary and experimental extensions to CSS.
  
  </p><p>Prior to a specification reaching the Candidate Recommendation stage
  in the W3C process, all implementations of a CSS feature are considered
  experimental. The CSS Working Group recommends that implementations
  use a vendor-prefixed syntax for such features, including those in
  W3C Working Drafts. This avoids incompatibilities with future changes
  in the draft.
  </p>
 
<h3 id="testing">Non-Experimental Implementations</h3>

  <p>Once a specification reaches the Candidate Recommendation stage,
  non-experimental implementations are possible, and implementors should
  release an unprefixed implementation of any CR-level feature they
  can demonstrate to be correctly implemented according to spec.
  
  </p><p>To establish and maintain the interoperability of CSS across
  implementations, the CSS Working Group requests that non-experimental
  CSS renderers submit an implementation report (and, if necessary, the
  testcases used for that implementation report) to the W3C before
  releasing an unprefixed implementation of any CSS features. Testcases
  submitted to W3C are subject to review and correction by the CSS
  Working Group.
  
  </p><p>Further information on submitting testcases and implementation reports
  can be found from on the CSS Working Group's website at
  <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
  Questions should be directed to the
  <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
  mailing list.

</p><h3 id="cr-exit-criteria">
CR Exit Criteria</h3>

  <p class="issue">[Change or remove the following CR exit criteria if
  the spec is not a module, but, e.g., a Note or a profile. This text was <a href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p>

  <p>
  For this specification to be advanced to Proposed Recommendation,
  there must be at least two independent, interoperable implementations
  of each feature. Each feature may be implemented by a different set of
  products, there is no requirement that all features be implemented by
  a single product. For the purposes of this criterion, we define the
  following terms:
  
  </p><dl>
    <dt>independent </dt><dd>each implementation must be developed by a
    different party and cannot share, reuse, or derive from code
    used by another qualifying implementation. Sections of code that
    have no bearing on the implementation of this specification are
    exempt from this requirement.
  
    </dd><dt>interoperable </dt><dd>passing the respective test case(s) in the
    official CSS test suite, or, if the implementation is not a Web
    browser, an equivalent test. Every relevant test in the test
    suite should have an equivalent test created if such a user
    agent (UA) is to be used to claim interoperability. In addition
    if such a UA is to be used to claim interoperability, then there
    must one or more additional UAs which can also pass those
    equivalent tests in the same way for the purpose of
    interoperability. The equivalent tests must be made publicly
    available for the purposes of peer review.
  
    </dd><dt>implementation </dt><dd>a user agent which:
  
    <ol class="inline">
      <li>implements the specification.
  
      </li><li>is available to the general public. The implementation may
      be a shipping product or other publicly available version
      (i.e., beta version, preview release, or “nightly build”). 
      Non-shipping product releases must have implemented the
      feature(s) for a period of at least one month in order to
      demonstrate stability.
  
      </li><li>is not experimental (i.e., a version specifically designed
      to pass the test suite and is not intended for normal usage
      going forward).
    </li></ol>
  </dd></dl>
  
  <p>The specification will remain Candidate Recommendation for at least
  six months.

</p><h2 class="no-num" id="acknowledgments">Acknowledgments</h2>

  <p><var class="replaceme">[acknowledgments]</var></p>

<h2 class="no-num" id="references">References</h2>


<h3 class="no-num" id="normative-references">Normative references</h3>
<!--normative-->

<h3 class="no-num" id="other-references">Other references</h3>
<!--informative-->

<h2 class="no-num" id="index">Index</h2>
<!--index-->


<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
sgml-omittag:nil
sgml-shorttag:nil
sgml-namecase-general:t
sgml-general-insert-case:lower
sgml-always-quote-attributes:t
sgml-indent-step:nil
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
-->
 
</body></html>
Received on Tuesday, 18 October 2011 23:24:23 UTC