[css-color] Add text-emphasis-color example for currentcolor.

Author: tabatkins

css-color/Overview.html

@@ -74,9 +74,9 @@ <h2 id="contents" class="no-num no-toc no-ref">Table of contents</h2>
 Introduction</a></li><li><a href="#the-color-property"><span class="secno">2 </span>
 Foreground color: the <span data-autolink="property" class="property" title="color">color</span> property</a></li><li><a href="#color-type"><span class="secno">3 </span>
 The <span data-autolink="link" class="production"><var>&lt;color&gt;</var></span> type</a><ul class="toc"><li><a href="#the-rgba-function"><span class="secno">3.1 </span>
-The <span data-autolink="maybe" class="css">rgb()</span> and <span data-autolink="maybe" class="css">rgba()</span> notations</a></li><li><a href="#hex-notation"><span class="secno">3.2 </span>
-The RGB hex notation</a></li><li><a href="#the-hsl-notation"><span class="secno">3.3 </span>
-HSL colors: the <span data-autolink="maybe" class="css">hsl()</span> and <span data-autolink="maybe" class="css">hsla()</span> notations</a><ul class="toc"><li><a href="#hsl-to-rgb"><span class="secno">3.3.1 </span>
+The RGB functional notations: <span data-autolink="maybe" class="css">rgb()</span> and <span data-autolink="maybe" class="css">rgba()</span></a></li><li><a href="#hex-notation"><span class="secno">3.2 </span>
+The RGB hexadecimal notations: <span data-autolink="maybe" class="css">#RRGGBB</span></a></li><li><a href="#the-hsl-notation"><span class="secno">3.3 </span>
+The HSL functional notations: <span data-autolink="maybe" class="css">hsl()</span> and <span data-autolink="maybe" class="css">hsla()</span></a><ul class="toc"><li><a href="#hsl-to-rgb"><span class="secno">3.3.1 </span>
 Converting HSL colors to RGB colors</a></li><li><a href="#hsl-examples"><span class="secno">3.3.2 </span>
 Examples of HSL colors</a></li></ul></li><li><a href="#named-colors"><span class="secno">3.4 </span>
 Named Colors</a><ul class="toc"><li><a href="#transparent-color"><span class="secno">3.4.1 </span>
@@ -88,7 +88,9 @@ <h2 id="contents" class="no-num no-toc no-ref">Table of contents</h2>
 Color Management: the <span data-autolink="property" class="property" title="color-correction">color-correction</span> property</a></li><li><a href="#sample"><span class="secno">6 </span>
 Sample style sheet for (X)HTML</a></li><li><a href="#system-colors">
 Appendix A: Deprecated CSS System Colors</a></li><li><a href="#acknowledgments">
-Acknowledgments</a></li><li><a href="#conformance">
+Acknowledgments</a></li><li><a href="#changes"><span class="secno">7 </span>
+Changes</a><ul class="toc"><li><a href="#changes-from-3"><span class="secno">7.1 </span>
+Changes from Colors 3</a></li></ul></li><li><a href="#conformance">
 Conformance</a><ul class="toc"><li><a href="#conventions">
 Document conventions</a></li><li><a href="#conformance-classes">
 Conformance classes</a></li><li><a href="#partial">
@@ -194,7 +196,7 @@ <h2 id="color-type" data-level="3"><span class="secno">3 </span>
 	or the long list of named colors defined by CSS.
 
 </p><h3 id="the-rgba-function" data-level="3.1"><span class="secno">3.1 </span>
-The <a data-autolink="maybe" class="css" href="#rgb-function">rgb()</a> and <a data-autolink="maybe" class="css" href="#rgba-function">rgba()</a> notations</h3>
+The RGB functional notations: <a data-autolink="maybe" class="css" href="#rgb-function">rgb()</a> and <a data-autolink="maybe" class="css" href="#rgba-function">rgba()</a></h3>
 
 <p>	The <a data-autolink="maybe" class="css" href="#rgb-function">rgb()</a> function defines an RGB color by specifying the red, green, and blue channels directly.
 	Its syntax is:
@@ -240,7 +242,7 @@ <h2 id="color-type" data-level="3"><span class="secno">3 </span>
 	but are clamped to the ranges defined here at computed-value time.
 
 </p><h3 id="hex-notation" data-level="3.2"><span class="secno">3.2 </span>
-The RGB hex notation</h3>
+The RGB hexadecimal notations: <a data-autolink="maybe" class="css">#RRGGBB</a></h3>
 
 <p>	The CSS <dfn data-export="" id="hex-color">hex color</dfn> notation allows a color to be specified by giving the channels as hexadecimal numbers,
 	which is similar to how colors are often written directly in computer code.
@@ -312,7 +314,7 @@ <h2 id="color-type" data-level="3"><span class="secno">3 </span>
 	</dd></dl>
 
 <h3 id="the-hsl-notation" data-level="3.3"><span class="secno">3.3 </span>
-HSL colors: the <a data-autolink="maybe" class="css" href="#hsl-function">hsl()</a> and <a data-autolink="maybe" class="css" href="#hsla-function">hsla()</a> notations</h3>
+The HSL functional notations: <a data-autolink="maybe" class="css" href="#hsl-function">hsl()</a> and <a data-autolink="maybe" class="css" href="#hsla-function">hsla()</a></h3>
 
 <p>	The RGB system for specifying colors,
 	while convenient for machines and graphic libraries,
@@ -783,7 +785,7 @@ <h3 id="named-colors" data-level="3.4"><span class="secno">3.4 </span>
 </p><p>	16 of CSS's named colors come from HTML originally:
 	aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
 	Nearly all of the rest
-	(save two special values, <a data-autolink="maybe" class="css" href="#transparent">transparent</a> and <a data-autolink="maybe" class="css" href="#currentcolor">currentColor</a>)
+	(save two special values, <a data-autolink="maybe" class="css" href="#transparent">transparent</a> and <a data-autolink="maybe" class="css" href="#currentcolor">currentcolor</a>)
 	come from one version of the X11 color system,
 	used in Unix-derived systems to specify colors for the console.
 
@@ -810,7 +812,7 @@ <h3 id="named-colors" data-level="3.4"><span class="secno">3.4 </span>
 <p>	The keyword <dfn data-export="" id="currentcolor"><a data-autolink="maybe" class="css" href="#currentcolor">currentcolor</a></dfn> takes its value from the value of the <a data-autolink="property" class="property" title="color" href="#color">color</a> property on the same element.
 	This happens at <strong>used-value time</strong>,
 	which means that if the value is inherited,
-	it's inherited as <a data-autolink="maybe" class="css" href="#currentcolor">currentColor</a>,
+	it's inherited as <a data-autolink="maybe" class="css" href="#currentcolor">currentcolor</a>,
 	not as the value of the <a data-autolink="property" class="property" title="color" href="#color">color</a> property,
 	so descendants will use their <em>own</em> <a data-autolink="property" class="property" title="color" href="#color">color</a> property to resolve it.
 
@@ -834,9 +836,20 @@ <h3 id="named-colors" data-level="3.4"><span class="secno">3.4 </span>
 </pre>	</div>
 
 	<div class="example">
-		Here is a more complex example illustrating the inheritance behavior of <a data-autolink="maybe" class="css" href="#currentcolor">currentcolor</a>:
-
-		<p class="issue">Find an inheriting property that takes a <a data-autolink="link" class="production" href="#color-production"><var>&lt;color&gt;</var></a>.
+		For example, the <a data-autolink="property" class="property" title="text-emphasis-color">text-emphasis-color</a> property <a data-autolink="biblio" U00022="" data-biblio-type="informative" title="CSS3-TEXT-DECOR" href="#css3-text-decor">[CSS3-TEXT-DECOR]</a>,
+		whose initial value is <a data-autolink="maybe" class="css" href="#currentcolor">currentcolor</a>,
+		by default matches the text color
+		even as the <a data-autolink="property" class="property" title="color" href="#color">color</a> property changes across elements.
+
+		<pre>  &lt;p&gt;&lt;em&gt;Some &lt;strong&gt;really&lt;/strong&gt; emphasized text.&lt;/em&gt;
+  &lt;style&gt;
+  p { color: black; }
+  em { text-emphasis: dot; }
+  strong { color: red; }
+  &lt;/style&gt;
+</pre>
+<p>		In the above example, the emphasis marks would be black over the text "Some" and "emphasized text",
+		but red over the text "really".
 	</p></div>
 
 <p class="note">	Note: Multi-word keywords in CSS usually separate their component words with hyphens.
@@ -1100,7 +1113,25 @@ <h2 class="no-num no-ref" id="acknowledgments">
  Thanks especially to the feedback from Marc Attinasi, Bert Bos, Joe Clark, fantasai, Patrick Garies, Tony Graham, Ian Hickson, Susan Lesch, Alex LeDonne, Cameron McCormack, Krzysztof Maczy&#324;ski, Chris Moschini, Chris Murphy, Christoph P&#228;per, David Perrell, Jacob Refstrup, Dave Singer, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler, David Woolley, Boris Zbarsky, Steve Zilles, the XSL FO subgroup of the XSL working group, and all the rest of the <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
 
 </p><p>And thanks to Chris Lilley for being the resident CSS Color expert.
-</p><h2 class="no-ref no-num" id="conformance">
+
+</p><h2 id="changes" data-level="7"><span class="secno">7 </span>
+Changes</h2>
+
+<h3 id="changes-from-3" data-level="7.1"><span class="secno">7.1 </span>
+Changes from Colors 3</h3>
+
+<p>	</p><ul>
+		<li><a data-autolink="maybe" class="css" href="#rgb-function">rgb()</a> and <a data-autolink="maybe" class="css" href="#rgba-function">rgba()</a> functions now accept <a data-autolink="link" class="production"><var>&lt;number&gt;</var></a> rather than <a data-autolink="link" class="production"><var>&lt;integer&gt;</var></a>.
+
+		</li><li><a data-autolink="maybe" class="css" href="#hsl-function">hsl()</a> and <a data-autolink="maybe" class="css" href="#hsla-function">hsla()</a> functions now accept <a data-autolink="link" class="production"><var>&lt;angle&gt;</var></a> as well as <a data-autolink="link" class="production"><var>&lt;number&gt;</var></a> for hues.
+
+		</li><li>All uses of <a data-autolink="link" class="production" href="#alpha-value-production"><var>&lt;alpha-value&gt;</var></a> now accept <a data-autolink="link" class="production"><var>&lt;percentage&gt;</var></a> as well as <a data-autolink="link" class="production"><var>&lt;number&gt;</var></a>.
+
+		</li><li>4 and 8-digit hex colors have been added, to specify transparency.
+
+		</li><li>The <a data-autolink="property" class="property" title="color-correction" href="#color-correction">color-correction</a> property has been pulled in from the unpublished Color Correction proposal.
+	</li></ul>
+<h2 class="no-ref no-num" id="conformance">
 Conformance</h2>
 
 <h3 class="no-ref" id="conventions">
@@ -1225,11 +1256,11 @@ <h3 class="no-ref" id="testing">
 
 <h3 id="normative" class="no-num no-ref">
 Normative References</h3>
-<div data-fill-with="normative-references"><dl><dt id="rfc2119" title="RFC2119">[RFC2119]</dt><dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt">Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a></dd><dt id="css21" title="CSS21">[CSS21]</dt><dd>Bert Bos; et al. <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</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="srgb" title="SRGB">[SRGB]</dt><dd>???. <a href="http://www.iec.ch/nr1899.htm%20">Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB</a>. as amended by Amendment A1:2003.  URL: <a href="http://www.iec.ch/nr1899.htm%20">http://www.iec.ch/nr1899.htm </a></dd><dt id="svg11" title="SVG11">[SVG11]</dt><dd>Erik Dahlstr&#246;m; et al. <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>. 16 August 2011. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a></dd></dl></div>
+<div data-fill-with="normative-references"><dl><dt id="srgb" title="SRGB">[SRGB]</dt><dd>???. <a href="http://www.iec.ch/nr1899.htm%20">Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB</a>. as amended by Amendment A1:2003.  URL: <a href="http://www.iec.ch/nr1899.htm%20">http://www.iec.ch/nr1899.htm </a></dd><dt id="rfc2119" title="RFC2119">[RFC2119]</dt><dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt">Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a></dd><dt id="css21" title="CSS21">[CSS21]</dt><dd>Bert Bos; et al. <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</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="svg11" title="SVG11">[SVG11]</dt><dd>Erik Dahlstr&#246;m; et al. <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>. 16 August 2011. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a></dd></dl></div>
 
 <h3 id="informative" class="no-num no-ref">
 Informative References</h3>
-<div data-fill-with="informative-references"><dl><dt id="colorimetry" title="COLORIMETRY">[COLORIMETRY]</dt><dd>???. <a href="None">Colorimetry, Third Edition</a>. ISBN 978-3-901906-33-6 URL: <a href="None">None</a></dd><dt id="css3color" title="CSS3COLOR">[CSS3COLOR]</dt><dd>Tantek &#199;elik; Chris Lilley; L. David Baron. <a href="http://www.w3.org/TR/2011/REC-css3-color-20110607">CSS Color Module Level 3</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><dt id="wcag20" title="WCAG20">[WCAG20]</dt><dd>Ben Caldwell; et al. <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">Web Content Accessibility Guidelines (WCAG) 2.0</a>. 11 December 2008. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">http://www.w3.org/TR/2008/REC-WCAG20-20081211/</a></dd><dt id="css1" title="CSS1">[CSS1]</dt><dd>H&#229;kon Wium Lie; Bert Bos. <a href="http://www.w3.org/TR/2008/REC-CSS1-20080411">Cascading Style Sheets (CSS1) Level 1 Specification</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></dl></div>
+<div data-fill-with="informative-references"><dl><dt id="css3color" title="CSS3COLOR">[CSS3COLOR]</dt><dd>Tantek &#199;elik; Chris Lilley; L. David Baron. <a href="http://www.w3.org/TR/2011/REC-css3-color-20110607">CSS Color Module Level 3</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><dt id="css1" title="CSS1">[CSS1]</dt><dd>H&#229;kon Wium Lie; Bert Bos. <a href="http://www.w3.org/TR/2008/REC-CSS1-20080411">Cascading Style Sheets (CSS1) Level 1 Specification</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="colorimetry" title="COLORIMETRY">[COLORIMETRY]</dt><dd>???. <a href="None">Colorimetry, Third Edition</a>. ISBN 978-3-901906-33-6 URL: <a href="None">None</a></dd><dt id="wcag20" title="WCAG20">[WCAG20]</dt><dd>Ben Caldwell; et al. <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">Web Content Accessibility Guidelines (WCAG) 2.0</a>. 11 December 2008. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">http://www.w3.org/TR/2008/REC-WCAG20-20081211/</a></dd><dt id="css3-text-decor" title="CSS3-TEXT-DECOR">[CSS3-TEXT-DECOR]</dt><dd>Elika J. Etemad; Koji Ishii. <a href="http://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/">CSS Text Decoration Module Level 3</a>. 3 January 2013. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/">http://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/</a></dd></dl></div>
 
 <h2 id="index" class="no-num no-ref">
 Index</h2>