Skip to content

Commit d2f4e13

Browse files
tabatkinstabatkins
committed
[css-color] Per WG resolution, specify that the background of the root element *must* be transparent. Move the white recommendation to the canvas.
1 parent d7db6ea commit d2f4e13

2 files changed

Lines changed: 79 additions & 60 deletions

File tree

‎css-color/Overview.bs‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2404,21 +2404,27 @@ Preserving Colors in Different-Capability Devices: the 'color-adjust' property</
24042404
</dl>
24052405

24062406
<h2 id="sample">
2407-
Sample style sheet for (X)HTML</h2>
2407+
Default Style Rules</h2>
24082408

2409-
This appendix is informative, not normative. This style sheet could be used by an implementation as part of its default styling of HTML4, XHTML1, XHTML1.1, XHTML Basic, and other XHTML Family documents.
2409+
The following stylesheet is informative, not normative. This style sheet could be used by an implementation as part of its default styling of HTML4, XHTML1, XHTML1.1, XHTML Basic, and other XHTML Family documents.
24102410

24112411
<pre class="lang-css">
24122412
html {
24132413
color: black;
2414-
background: white;
24152414
}
24162415

24172416
/* traditional desktop user agent colors for hyperlinks */
24182417
:link { color: blue; }
24192418
:visited { color: purple; }
24202419
</pre>
24212420

2421+
The default background of the root element must be ''transparent''.
2422+
The default color of the canvas (the surface on which the document is painted)
2423+
is UA-dependent,
2424+
but is recommended to be ''white'',
2425+
especially if the above 'color' rules are used.
2426+
2427+
24222428

24232429
<h2 id="system-colors" class="no-num">
24242430
Appendix A: Deprecated CSS System Colors</h2>

‎css-color/Overview.html‎

Lines changed: 70 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -82,14 +82,21 @@
8282
</p>
8383
<h1 class="p-name no-ref" id=title>CSS Color Module Level 4</h1>
8484
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
85-
<span class=dt-updated><span class=value-title title=20140621>21 June 2014</span></span></span></h2>
86-
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-color/>http://dev.w3.org/csswg/css-color/</a>
87-
<dt>Feedback:</dt>
88-
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-color%5D%20feedback">www-style@w3.org</a>
85+
<span class=dt-updated><span class=value-title title=20140626>26 June 2014</span></span></span></h2>
86+
<div data-fill-with=spec-metadata><dl>
87+
<dt>This version:
88+
<dd><a class=u-url href=http://dev.w3.org/csswg/css-color/>http://dev.w3.org/csswg/css-color/</a>
89+
<dt>Feedback:
90+
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-color%5D%20feedback">www-style@w3.org</a>
8991
with subject line
90-
“<kbd>[css-color] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)<dt>Editors:
91-
<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://xanthir.com/contact>Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:chris@w3.org>Chris Lilley</a> (<span class="p-org org">W3C</span>)<dt>Former Editors:
92-
<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:dbaron@dbaron.org>L. David Baron</a> (<span class="p-org org">Mozilla Corporation</span>)</dl></div>
92+
“<kbd>[css-color] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)
93+
<dt>Editors:
94+
<dd><dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://xanthir.com/contact>Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)
95+
<dd><dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:chris@w3.org>Chris Lilley</a> (<span class="p-org org">W3C</span>)
96+
<dt>Former Editors:
97+
<dd><dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:dbaron@dbaron.org>L. David Baron</a> (<span class="p-org org">Mozilla Corporation</span>)
98+
</dl>
99+
</div>
93100
<div data-fill-with=warning></div>
94101
<p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2014 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</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.
95102
</p>
@@ -136,64 +143,64 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=status><span class=c
136143

137144
<h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of Contents</span></h2>
138145
<div data-fill-with=table-of-contents><ul class=toc>
139-
<li><a href=#introduction><span class=secno>1</span> Introduction</a>
140-
<li><a href=#the-color-property><span class=secno>2</span> Foreground Color: the <span class=property data-link-type=propdesc title=color>color</span> property</a>
141-
<li><a href=#color-type><span class=secno>3</span> Representing Colors: the <span class=production data-link-type=type title="<color>">&lt;color&gt;</span> type</a>
146+
<li><a href=#introduction><span class=secno>1</span> Introduction</a>
147+
<li><a href=#the-color-property><span class=secno>2</span> Foreground Color: the <span>color</span> property</a>
148+
<li><a href=#color-type><span class=secno>3</span> Representing Colors: the <span>&lt;color&gt;</span> type</a>
142149
<ul class=toc>
143-
<li><a href=#notes><span class=secno>3.1</span> Notes On Using Colors</a></ul>
144-
<li><a href=#numeric-rgb><span class=secno>4</span> RGB Colors</a>
150+
<li><a href=#notes><span class=secno>3.1</span> Notes On Using Colors</a></ul>
151+
<li><a href=#numeric-rgb><span class=secno>4</span> RGB Colors</a>
145152
<ul class=toc>
146-
<li><a href=#rgb-functions><span class=secno>4.1</span> The RGB functions: <span class=css data-link-type=maybe title=rgb()>rgb()</span> and <span class=css data-link-type=maybe title=rgba()>rgba()</span></a>
147-
<li><a href=#hex-notation><span class=secno>4.2</span> The RGB hexadecimal notations: <span class=css data-link-type=maybe title=#rrggbb>#RRGGBB</span></a></ul>
148-
<li><a href=#named-colors><span class=secno>5</span> Named Colors</a>
153+
<li><a href=#rgb-functions><span class=secno>4.1</span> The RGB functions: <span>rgb()</span> and <span>rgba()</span></a>
154+
<li><a href=#hex-notation><span class=secno>4.2</span> The RGB hexadecimal notations: <span class=css data-link-type=maybe title=#rrggbb>#RRGGBB</span></a></ul>
155+
<li><a href=#named-colors><span class=secno>5</span> Named Colors</a>
149156
<ul class=toc>
150-
<li><a href=#transparent-color><span class=secno>5.1</span> The <span class=css data-link-type=maybe title=transparent>transparent</span> keyword</a>
151-
<li><a href=#currentcolor-color><span class=secno>5.2</span> The <span class=css data-link-type=maybe title=currentcolor>currentcolor</span> keyword</a>
152-
<li><a href=#simple-hues><span class=secno>5.3</span> Simple Named Hues: the <span class=production data-link-type=type title="<named-hue>">&lt;named-hue&gt;</span> term</a>
157+
<li><a href=#transparent-color><span class=secno>5.1</span> The <span>transparent</span> keyword</a>
158+
<li><a href=#currentcolor-color><span class=secno>5.2</span> The <span>currentcolor</span> keyword</a>
159+
<li><a href=#simple-hues><span class=secno>5.3</span> Simple Named Hues: the <span>&lt;named-hue&gt;</span> term</a>
153160
<ul class=toc>
154-
<li><a href=#named-hue-examples><span class=secno>5.3.1</span> Examples of Simple Named Hues</a></ul></ul>
155-
<li><a href=#the-hsl-notation><span class=secno>6</span> HSL Colors: <span class=css data-link-type=maybe title=hsl()>hsl()</span> and <span class=css data-link-type=maybe title=hsla()>hsla()</span> functions</a>
161+
<li><a href=#named-hue-examples><span class=secno>5.3.1</span> Examples of Simple Named Hues</a></ul></ul>
162+
<li><a href=#the-hsl-notation><span class=secno>6</span> HSL Colors: <span>hsl()</span> and <span>hsla()</span> functions</a>
156163
<ul class=toc>
157-
<li><a href=#hsl-to-rgb><span class=secno>6.1</span> Converting HSL colors to RGB colors</a>
158-
<li><a href=#hsl-examples><span class=secno>6.2</span> Examples of HSL colors</a></ul>
159-
<li><a href=#the-hwb-notation><span class=secno>7</span> HWB Colors: <span class=css data-link-type=maybe title=hwb()>hwb()</span> function</a>
164+
<li><a href=#hsl-to-rgb><span class=secno>6.1</span> Converting HSL colors to RGB colors</a>
165+
<li><a href=#hsl-examples><span class=secno>6.2</span> Examples of HSL colors</a></ul>
166+
<li><a href=#the-hwb-notation><span class=secno>7</span> HWB Colors: <span>hwb()</span> function</a>
160167
<ul class=toc>
161-
<li><a href=#hwb-to-rgb><span class=secno>7.1</span> Converting HWB colors to RGB colors</a>
162-
<li><a href=#hwb-examples><span class=secno>7.2</span> Examples of HWB Colors</a></ul>
163-
<li><a href=#grays><span class=secno>8</span> Specifying Grays: the <span class=css data-link-type=maybe title=gray()>gray()</span> functional notation</a>
164-
<li><a href=#cmyk-colors><span class=secno>9</span> CMYK Colors: the <span class=css data-link-type=maybe title=device-cmyk()>device-cmyk()</span> function</a>
165-
<li><a href=#modifying-colors><span class=secno>10</span> Modifying Colors: the <span class=css data-link-type=maybe title=color()>color()</span> function</a>
168+
<li><a href=#hwb-to-rgb><span class=secno>7.1</span> Converting HWB colors to RGB colors</a>
169+
<li><a href=#hwb-examples><span class=secno>7.2</span> Examples of HWB Colors</a></ul>
170+
<li><a href=#grays><span class=secno>8</span> Specifying Grays: the <span>gray()</span> functional notation</a>
171+
<li><a href=#cmyk-colors><span class=secno>9</span> CMYK Colors: the <span>device-cmyk()</span> function</a>
172+
<li><a href=#modifying-colors><span class=secno>10</span> Modifying Colors: the <span>color()</span> function</a>
166173
<ul class=toc>
167-
<li><a href=#rgba-adjusters><span class=secno>10.1</span> RGBA Adjustment</a>
168-
<li><a href=#hsl-hwb-adjusters><span class=secno>10.2</span> HSL/HWB Adjustment</a>
169-
<li><a href=#tint-shade-adjusters><span class=secno>10.3</span> Tints and Shades: the <span class=css data-link-type=maybe title=tint>tint</span> and <span class=css data-link-type=maybe title=shade>shade</span> adjusters</a>
170-
<li><a href=#blend-adjuster><span class=secno>10.4</span> Color Blending: the <span class=css data-link-type=maybe title=blend>blend</span> and <span class=css data-link-type=maybe title=blenda>blenda</span> adjusters</a>
171-
<li><a href=#contrast-adjuster><span class=secno>10.5</span> Guaranteeing Adequate Contrast: the <span class=css data-link-type=maybe title=contrast>contrast</span> adjuster</a></ul>
172-
<li><a href=#transparency><span class=secno>11</span> Transparency: the <span class=property data-link-type=propdesc title=opacity>opacity</span> property</a>
174+
<li><a href=#rgba-adjusters><span class=secno>10.1</span> RGBA Adjustment</a>
175+
<li><a href=#hsl-hwb-adjusters><span class=secno>10.2</span> HSL/HWB Adjustment</a>
176+
<li><a href=#tint-shade-adjusters><span class=secno>10.3</span> Tints and Shades: the <span class=css data-link-type=maybe title=tint>tint</span> and <span class=css data-link-type=maybe title=shade>shade</span> adjusters</a>
177+
<li><a href=#blend-adjuster><span class=secno>10.4</span> Color Blending: the <span class=css data-link-type=maybe title=blend>blend</span> and <span class=css data-link-type=maybe title=blenda>blenda</span> adjusters</a>
178+
<li><a href=#contrast-adjuster><span class=secno>10.5</span> Guaranteeing Adequate Contrast: the <span class=css data-link-type=maybe title=contrast>contrast</span> adjuster</a></ul>
179+
<li><a href=#transparency><span class=secno>11</span> Transparency: the <span>opacity</span> property</a>
173180
<ul class=toc>
174-
<li><a href=#alpha><span class=secno>11.1</span> Simple alpha compositing</a></ul>
175-
<li><a href=#color-management><span class=secno>12</span> Color Management: the <span class=property data-link-type=propdesc title=color-correction>color-correction</span> property</a>
176-
<li><a href=#color-adjust><span class=secno>13</span> Preserving Colors in Different-Capability Devices: the <span class=property data-link-type=propdesc title=color-adjust>color-adjust</span> property</a>
177-
<li><a href=#sample><span class=secno>14</span> Sample style sheet for (X)HTML</a>
178-
<li><a href=#system-colors><span class=secno></span> Appendix A: Deprecated CSS System Colors</a>
179-
<li><a href=#acknowledgments><span class=secno></span> Acknowledgments</a>
180-
<li><a href=#changes><span class=secno></span> Changes</a>
181+
<li><a href=#alpha><span class=secno>11.1</span> Simple alpha compositing</a></ul>
182+
<li><a href=#color-management><span class=secno>12</span> Color Management: the <span>color-correction</span> property</a>
183+
<li><a href=#color-adjust><span class=secno>13</span> Preserving Colors in Different-Capability Devices: the <span>color-adjust</span> property</a>
184+
<li><a href=#sample><span class=secno>14</span> Default Style Rules</a>
185+
<li><a href=#system-colors><span class=secno></span> Appendix A: Deprecated CSS System Colors</a>
186+
<li><a href=#acknowledgments><span class=secno></span> Acknowledgments</a>
187+
<li><a href=#changes><span class=secno></span> Changes</a>
181188
<ul class=toc>
182-
<li><a href=#changes-from-3><span class=secno></span> Changes from Colors 3</a></ul>
183-
<li><a href=#conformance><span class=secno></span> Conformance</a>
189+
<li><a href=#changes-from-3><span class=secno></span> Changes from Colors 3</a></ul>
190+
<li><a href=#conformance><span class=secno></span> Conformance</a>
184191
<ul class=toc>
185-
<li><a href=#conventions><span class=secno></span> Document conventions</a>
186-
<li><a href=#conformance-classes><span class=secno></span> Conformance classes</a>
187-
<li><a href=#partial><span class=secno></span> Partial implementations</a>
188-
<li><a href=#experimental><span class=secno></span> Experimental implementations</a>
189-
<li><a href=#testing><span class=secno></span> Non-experimental implementations</a></ul>
190-
<li><a href=#references><span class=secno></span> References</a>
192+
<li><a href=#conventions><span class=secno></span> Document conventions</a>
193+
<li><a href=#conformance-classes><span class=secno></span> Conformance classes</a>
194+
<li><a href=#partial><span class=secno></span> Partial implementations</a>
195+
<li><a href=#experimental><span class=secno></span> Experimental implementations</a>
196+
<li><a href=#testing><span class=secno></span> Non-experimental implementations</a></ul>
197+
<li><a href=#references><span class=secno></span> References</a>
191198
<ul class=toc>
192-
<li><a href=#normative><span class=secno></span> Normative References</a>
193-
<li><a href=#informative><span class=secno></span> Informative References</a></ul>
194-
<li><a href=#index><span class=secno></span> Index</a>
195-
<li><a href=#property-index><span class=secno></span> Property index</a>
196-
<li><a href=#issues-index><span class=secno></span>Issues Index</a></ul></div>
199+
<li><a href=#normative><span class=secno></span> Normative References</a>
200+
<li><a href=#informative><span class=secno></span> Informative References</a></ul>
201+
<li><a href=#index><span class=secno></span> Index</a>
202+
<li><a href=#property-index><span class=secno></span> Property index</a>
203+
<li><a href=#issues-index><span class=secno></span> Issues Index</a></ul></div>
197204

198205

199206

@@ -2508,20 +2515,26 @@ <h2 class="heading settled heading" data-level=13 id=color-adjust><span class=se
25082515
</dl>
25092516

25102517
<h2 class="heading settled heading" data-level=14 id=sample><span class=secno>14 </span><span class=content>
2511-
Sample style sheet for (X)HTML</span><a class=self-link href=#sample></a></h2>
2518+
Default Style Rules</span><a class=self-link href=#sample></a></h2>
25122519

2513-
<p>This appendix is informative, not normative. This style sheet could be used by an implementation as part of its default styling of HTML4, XHTML1, XHTML1.1, XHTML Basic, and other XHTML Family documents.</p>
2520+
<p>The following stylesheet is informative, not normative. This style sheet could be used by an implementation as part of its default styling of HTML4, XHTML1, XHTML1.1, XHTML Basic, and other XHTML Family documents.</p>
25142521

25152522
<pre class=lang-css>html {
25162523
color: black;
2517-
background: white;
25182524
}
25192525

25202526
/* traditional desktop user agent colors for hyperlinks */
25212527
:link { color: blue; }
25222528
:visited { color: purple; }
25232529
</pre>
25242530

2531+
<p>The default background of the root element must be <a class=css data-link-type=maybe href=#valuedef-transparent title=transparent>transparent</a>.
2532+
The default color of the canvas (the surface on which the document is painted)
2533+
is UA-dependent,
2534+
but is recommended to be <a class=css data-link-type=maybe href=#valuedef-white title=white>white</a>,
2535+
especially if the above <a class=property data-link-type=propdesc href=#propdef-color title=color>color</a> rules are used.</p>
2536+
2537+
25252538

25262539
<h2 class="no-num heading settled heading" id=system-colors><span class=content>
25272540
Appendix A: Deprecated CSS System Colors</span><a class=self-link href=#system-colors></a></h2>

0 commit comments

Comments
 (0)