[css-cascade] Synchronize L3 and L4 and update changes lists.

Author: fantasai

css-cascade-3/Overview.bs

@@ -39,6 +39,18 @@ Introduction</h2>
 	The rules for finding the specified value for all properties on all elements in the document are described in this specification.
 	The rules for finding the specified values in the page context and its margin boxes are described in [[CSS3PAGE]].
 
+<h3 id="placement">
+Module Interactions</h3>
+
+	<em>This section is normative.</em>
+
+	This module replaces and extends
+	the rules for assigning property values, cascading, and inheritance defined in [[!CSS21]] chapter 6.
+
+	Other CSS modules may expand the definitions of some of the syntax and features defined here.
+	For example, the Media Queries Level 4 specification,
+	when combined with this module, expands the definition of
+	the <<media-query>> value type as used in this specification.
 
 <!--
  ███████  ████ ██     ██ ████████   ███████  ████████  ████████
@@ -85,14 +97,14 @@ Importing Style Sheets: the ''@import'' rule</h2>
 	states the conditions under which it applies.
 
 	If a <<string>> is provided,
-	it must be interpreted as a url with the same value.
+	it must be interpreted as a <<url>> with the same value.
 
 	<div class="example">
 		The following lines are equivalent in meaning
 		and illustrate both ''@import'' syntaxes
 		(one with ''url()'' and one with a bare string):
 
-		<pre>
+		<pre class='lang-css'>
 		@import "mystyle.css";
 		@import url("mystyle.css");
 		</pre>
@@ -113,7 +125,7 @@ Importing Style Sheets: the ''@import'' rule</h2>
 	<div class=example>
 		The following rules illustrate how ''@import'' rules can be made media-dependent:
 
-		<pre>
+		<pre class='lang-css'>
 		@import url("fineprint.css") print;
 		@import url("bluish.css") projection, tv;
 		@import url("narrow.css") handheld and (max-width: 400px);
@@ -130,7 +142,7 @@ Importing Style Sheets: the ''@import'' rule</h2>
 	it is perfectly appropriate for a UA to fetch a style sheet only once,
 	even though it's linked or imported multiple times.
 
-	The <a>origin</a> of an imported style sheet is the same as the <a>origin</a> of the style sheet that imported it.
+	The <a>origin</a> of an imported style sheet is the <a>origin</a> of the style sheet that imported it.
 
 	The <a>environment encoding</a> of an imported style sheet is the encoding of the style sheet that imported it. [[CSS3SYN]]
 
@@ -188,19 +200,20 @@ Shorthand Properties</h2>
 		is a <a>shorthand</a> property for setting <a property>font-style</a>, <a property>font-variant</a>, <a property>font-weight</a>, 'font-size', 'line-height', and <a property>font-family</a> all at once.
 		The multiple declarations of this example:
 
-		<pre>
-h1 {
-	font-weight: bold;
-	font-size: 12pt;
-	line-height: 14pt;
-	font-family: Helvetica;
-	font-variant: normal;
-	font-style: normal;
-}</pre>
+		<pre class='lang-css'>
+		h1 {
+			font-weight: bold;
+			font-size: 12pt;
+			line-height: 14pt;
+			font-family: Helvetica;
+			font-variant: normal;
+			font-style: normal;
+		}
+		</pre>
 
 		can therefore be rewritten as
 
-		<pre>h1 { font: bold 12pt/14pt Helvetica }</pre>
+		<pre class='lang-css'>h1 { font: bold 12pt/14pt Helvetica }</pre>
 
 		As more 'font' <a>sub-properties</a> are introduced into CSS,
 		the shorthand declaration resets those to their initial values as well.
@@ -236,7 +249,8 @@ Resetting All Properties: the 'all' property</h3>
 	Value: initial | inherit | unset
 	</pre>
 
-	The 'all' property is a <a>shorthand</a> that resets <em>all</em> CSS properties
+	The 'all' property is a <a>shorthand</a>
+	that resets <em>all</em> CSS properties
 	except 'direction' and 'unicode-bidi'.
 	It only accepts the <a href="https://www.w3.org/TR/css3-values/#common-keywords">CSS-wide keywords</a>.
 	It does not reset <a>custom properties</a> [[css-variables-1]].
@@ -670,7 +684,7 @@ Cascading</h2>
 			</ul>
 	</dl>
 
-	The <dfn>output of the cascade</dfn>
+	The <dfn export>output of the cascade</dfn>
 	is a (potentially empty) sorted list of <a>declared values</a> for each property on each element.
 
 
@@ -703,17 +717,17 @@ Cascading Origins</h3>
 			A user agent's default style sheet should present the elements of the document language
 			in ways that satisfy general presentation expectations for the document language
 			(e.g., for visual browsers, the EM element in HTML is presented using an italic font).
-			See e.g. the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints">HTML user agent style sheet</a>. [[HTML5]]
+			See e.g. the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints">HTML user agent style sheet</a>. [[HTML]]
 	</dl>
 
 	Extensions to CSS define the following additional <a>origins</a>:
 
 	<dl>
-		<dt id='cascade-origin-animation'>Animation
+		<dt><dfn export id='cascade-origin-animation'>Animation Origin</dfn>
 		<dd>
 			CSS Animations [[CSS3-ANIMATIONS]] generate “virtual” rules representing their effects when running.
 
-		<dt id='cascade-origin-transition'>Transition
+		<dt><dfn export id='cascade-origin-transition'>Transition Origin</dfn>
 		<dd>
 			Like CSS Animations, CSS Transitions [[CSS3-TRANSITIONS]] generate “virtual” rules representing their effects when running.
 	</dl>
@@ -733,7 +747,7 @@ Important Declarations: the ''!important'' annotation</h3>
 	in its value are the delimiter token ''!'' followed by the identifier token ''important''.
 
 	<div class='example'>
-		<pre>[hidden] { display: none !important; }</pre>
+		<pre class='lang-css'>[hidden] { display: none !important; }</pre>
 	</div>
 
 	An <a>important</a> declaration takes precedence over a normal declaration.
@@ -761,7 +775,7 @@ Important Declarations: the ''!important'' annotation</h3>
 		Also, the third author rule will lose to the second author rule since the second declaration is ''!important''.
 		This shows that ''!important'' declarations have a function also within author style sheets.
 
-		<pre>
+		<pre class='lang-css'>
 		/* From the user's style sheet */
 		p { text-indent: 1em !important }
 		p { font-style: italic !important }
@@ -876,14 +890,13 @@ Explicit Defaulting</h3>
 Resetting a Property: the ''initial'' keyword</h4>
 
 	If the <a>cascaded value</a> is the <dfn for=all>''initial''</dfn> keyword,
-	the property's <a>initial value</a> becomes its <a>specified value</a>.
+	the property's <a>specified value</a> is its <a>initial value</a>.
 
 <h4 id="inherit">
 Explicit Inheritance: the ''inherit'' keyword</h4>
 
 	If the <a>cascaded value</a> of a property is the <dfn for=all>''inherit''</dfn> keyword,
-	the <a>inherited value</a> becomes the property's <a lt="specified value">specified</a> and <a>computed values</a>.
-
+	the property's <a lt="specified value">specified</a> and <a>computed values</a> are the <a>inherited value</a>.
 <h4 id="inherit-initial">
 Erasing All Declarations: the ''unset'' keyword</h4>
 
@@ -911,20 +924,51 @@ Changes</h2>
 <h3 id="changes-2016">
 Changes Since the 19 May 2016 Candidate Recommendation</h3>
 
-	The following changes were made to this specification since the
+	The following non-trivial changes were made to this specification since the
 	<a href="https://www.w3.org/TR/2016/CR-css-cascade-3-20160519/">19 May 2016 Candidate Recommendation</a>:
 
-	* Clarified that <a>custom properties</a> are not reset by the 'all' shorthand.
-		(<a href="https://github.com/w3c/csswg-drafts/issues/2518">2518</a>)
+	<ul>
+		<li id="change-2016-custom-all">
+			Clarified that <a>custom properties</a> are not reset by the 'all' shorthand.
+			(<a href="https://github.com/w3c/csswg-drafts/issues/2518">2518</a>)
+			<blockquote>
+				<p>The 'all' property is a <a>shorthand</a> that resets <em>all</em> CSS properties
+				except 'direction' and 'unicode-bidi'.
+				&hellip;
+				<ins>It does not reset <a>custom properties</a> [[css-variables-1]].</ins>
+			</blockquote>
 
-	* Defined more precisely that imported stylesheets are interpreted separately from the importing stylesheet,
-		in terms of ordering of rules, etc.
+		<li id="change-2016-import">
+			Called out two exceptions in which importing a style sheet
+			is different from merely inserting its contents.
+			<blockquote>
+				<p>If an ''@import'' rule refers to a valid stylesheet,
+				user agents must treat the contents of the stylesheet as if they were written in place of the ''@import'' rule<ins>,
+				with two exceptions:</ins></p>
+
+				<ins><ul>
+					<li>If a feature
+						(such as the ''@namespace'' rule)
+						<em>explicitly</em> defines that it only applies to a particular stylesheet,
+						and not any imported ones,
+						then it doesn't apply to the imported stylesheet.
+
+					<li>If a feature relies on the relative ordering of two or more constructs in a stylesheet
+						(such as the requirement that ''@charset'' must not have any other content preceding it),
+						it only applies between constructs in the same stylesheet.
+				</ul></ins>
+			</blockquote>
 
-	* Removed any mention of scoped stylesheets,
-		as the feature was removed from HTML.
+		<li id="change-2016-scope">
+			Removed any mention of scoped stylesheets,
+			as the feature was removed from HTML.
+			(<a href="https://github.com/w3c/csswg-drafts/issues/637">Issue 637</a>)
 
-	* Removed any mention of the “override” origin,
-		originally defined by <a href="https://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/">DOM Level 2 Style</a>.
+		<li id="change-2016-override">
+			Removed any mention of the obsolete “override” origin,
+			originally defined by <a href="https://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/">DOM Level 2 Style</a>
+			and later abandoned.
+	</ul>
 
 	A <a href="https://drafts.csswg.org/css-cascade-3/issues-cr-2016">Disposition of Comments</a> is available.
 
@@ -967,7 +1011,7 @@ Changes Since the 3 October 2013 Candidate Recommendation</h3>
 
 
 <h3 id="changes-2">
-Additions to Level 2</h3>
+Additions Since Level 2</h3>
 
 	The following features have been added since
 	<a href="http://www.w3.org/TR/CSS2/cascade.html">Level 2</a>: