Skip to content

Commit 7060d10

Browse files
authored
[css-backgrounds-4] Added background-tbd property as a shorthand for background layers (w3c#9084)
The name of the property is still under discussion, so to avoid implementations, it got named `background-tbd` for now.
1 parent 798ba91 commit 7060d10

File tree

1 file changed

+57
-0
lines changed

1 file changed

+57
-0
lines changed

css-backgrounds-4/Overview.bs

+57
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,62 @@ Painting Area: the 'background-clip' property</h3>
185185
</dd>
186186
</dl>
187187

188+
<h3 id='background-layers'>
189+
Background Image Layers: the 'background-tbd' shorthand property</h3>
190+
191+
<pre class="propdef">
192+
Name: background-tbd
193+
Value: <<bg-layer>>#
194+
Initial: see individual properties
195+
Applies to: all elements
196+
Inherited: no
197+
Percentages: see individual properties
198+
Computed value: see individual properties
199+
Animation type: see individual properties
200+
</pre>
201+
202+
<p>The 'background-tbd' property is a [=shorthand property=]
203+
that sets all the same properties as the 'background' shorthand
204+
except for 'background-color',
205+
allowing authors to easily declare and position background images
206+
while letting 'background-color' cascade through independently.
207+
208+
Issue:
209+
The name of this property is discussed in
210+
<a href="https://github.com/w3c/csswg-drafts/issues/9083">issue 9083</a>.
211+
212+
<div class="example" id="background-layer-example">
213+
This example sets two background layers later in the cascade.
214+
By using 'background-tbd', the previously set 'background-color'
215+
won't be overridden.
216+
217+
<pre class="lang-css">
218+
p {
219+
background-color: green;
220+
}
221+
222+
p {
223+
background-tbd:
224+
url(a.png) top left,
225+
url(b.png) top left no-repeat;
226+
}
227+
</pre>
228+
</div>
229+
230+
<div class="invalid example" id="invalid-background-layer-example">
231+
This example tries to set the background color in addition to
232+
the background image. But for that to work,
233+
'background' needs to be used instead of 'background-tbd'.
234+
So the 'background-tbd' declaration will be dropped.
235+
236+
<pre class="lang-css">
237+
p {
238+
background: url(pass.png) green; /* valid */
239+
background-tbd: url(fail.png) red; /* invalid */
240+
}
241+
</pre>
242+
</div>
243+
188244
Issue: Should a <a href="https://lists.w3.org/Archives/Public/www-style/2011Sep/0331.html">'background-repeat: extend'</a> be added?
189245

190246
<h2 id="changes">
@@ -196,6 +252,7 @@ Additions since [[CSS3BG]]</h3>
196252
* turned 'background-position' into a shorthand and added physical and logical longhands
197253
* added logical keywords to <<bg-position>>
198254
* added 'background-clip'
255+
* added 'background-tbd'
199256

200257
<h2 id="acknowledgments">Acknowledgments</h2>
201258

0 commit comments

Comments
 (0)