Skip to content

Commit bd48687

Browse files
fantasaifantasai
committed
[css-backgrounds-4] Add in a possible variant on background-position longhands (background-position-x/y). Still unsure how they will work out with logical keywords, so this is a very preliminary draft.
1 parent 7096764 commit bd48687

File tree

2 files changed

+1998
-610
lines changed

2 files changed

+1998
-610
lines changed

‎css-backgrounds-4/Overview.bs

Lines changed: 154 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ Editor: Elika J. Etemad, Invited Expert, http://fantasai.inkedblade.net/contact
1313
Editor: Lea Verou, Invited Expert, http://lea.verou.me/about/
1414
Abstract: This module contains the features of CSS relating to the borders and backgrounds of boxes on the page. It includes and extends the functionality of <a href="http://www.w3.org/TR/css3-background/">CSS Backgrounds and Borders Level&nbsp;3</a>. [[CSS3BG]] The main extensions compared to level&nbsp;3 are shaping ('corner-shape') and clipping borders ('border-clip'), logical background positions ('background-position'), and the ''extend'' ability of 'background-repeat'.
1515
Ignored Terms:
16+
Warning: Not Ready
1617
</pre>
1718

1819
<h2 id="intro">
@@ -28,10 +29,10 @@ Introduction</h2>
2829
Backgrounds</h2>
2930

3031
<h3 id="the-background-position">
31-
Background Positioning: the 'background-position' property</h3>
32+
Background Positioning: the 'background-position' shorthand property</h3>
3233

3334
<pre class='propdef'>
34-
Name: backround-position
35+
Name: background-position
3536
Value: <<position>>#
3637
Initial: top left
3738
Applies to: all
@@ -42,18 +43,157 @@ Background Positioning: the 'background-position' property</h3>
4243
</pre>
4344

4445
See [[CSS3BG]] for definition.
46+
4547
<p>Where
4648
<pre class=prod><dfn><var>&lt;position&gt;</var></dfn> = [
47-
[ left | center | right | top | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
49+
[ left | center | right | top | bottom | start | end | inline-start | inline-end | block-start | block-end | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
50+
|
51+
[ left | center | right | start | end | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
52+
[ top | center | bottom | start | end | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
4853
|
49-
[ left | center | right | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
50-
[ top | center | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
54+
[ center | [ left | right | start | end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
55+
[ center | [ top | bottom | start | end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
5156
|
52-
[ center | [ left | right ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
53-
[ center | [ top | bottom ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
54-
]</pre>
57+
[ center | [ inline-start | inline-end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
58+
[ center | [ block-start | block-end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] ]</pre>
59+
60+
If the value contains an ''inline-start'', ''inline-end'', ''block-start'', or ''block-end'' keyword,
61+
then the shorthand sets
62+
'background-position-inline' and 'background-position-block' to the specified values.
63+
64+
Otherwise
65+
the shorthand sets
66+
'background-position-x' and 'background-position-y' to the specified values.
67+
68+
Issue: Specify the value assignment in more detail.
69+
70+
Issue: Specify what happens to set of properties that are not set. Maybe they're just not set?
71+
72+
<table class=data>
73+
<caption>Examples of 'background-position' values and their longhand assignments</caption>
74+
<thead>
75+
<tr>
76+
<th>'background-position'
77+
<th>x
78+
<th>y
79+
<th>inline
80+
<th>block
81+
<tbody>
82+
<tr>
83+
<td>''center''
84+
<td>''center''
85+
<td>''center''
86+
<td>--
87+
<td>--
88+
<tr>
89+
<td>''block-start''
90+
<td>--
91+
<td>--
92+
<td>''center''
93+
<td>''start''
94+
<tr>
95+
<td>''start''
96+
<td>''start''
97+
<td>''center''
98+
<td>--
99+
<td>--
100+
<tbody>
101+
<tr>
102+
<td>''start end''
103+
<td>''start''
104+
<td>''end''
105+
<td>--
106+
<td>--
107+
<tr>
108+
<td>''block-start inline-end''
109+
<td>--
110+
<td>--
111+
<td>''start'' = ''0%''
112+
<td>''end'' = ''100%''
113+
<tbody>
114+
<tr>
115+
<td>''center end 30px''
116+
<td>''center'' = ''50%''
117+
<td>''end 30px''
118+
<td>--
119+
<td>--
120+
<tr>
121+
<td>''block-start 30px center''
122+
<td>--
123+
<td>--
124+
<td>''center''
125+
<td>''start 30px'' = ''30px''
126+
<tr>
127+
<td>''start 30px end''
128+
<td>''start 30px''
129+
<td>''end''
130+
<td>--
131+
<td>--
132+
</table>
133+
134+
Issue: Would it make more sense to use position-dependent unprefixed start/end keywords for the logical properties
135+
(which would make them less awkward, and therefore more equal to physical positions),
136+
and do something special for the axis-constrained horizontal-start/vertical-start values?
137+
E.g. call them start-x/start-y or x-start/y-start?
138+
139+
<h4 id="background-position-longhands">
140+
Background Positioning Longhands: the 'background-position-x', 'background-position-y', 'background-position-inline', and 'background-position-block' properties</h4>
141+
142+
Issue: This section is still being worked out. The tricky thing is making all the start/end keywords work sanely.
143+
144+
Issue: Initial values are incompatible.
145+
146+
<pre class='propdef'>
147+
Name: background-position-x
148+
Value: [ center | [ left | right | start | end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
149+
Initial: left
150+
Applies to: all
151+
Inherited: no
152+
Percentages: refer to width of background positioning area <em>minus</em> height of background image
153+
Media: visual
154+
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
155+
</pre>
156+
157+
This property specifies the background position's horizontal component.
158+
159+
<pre class='propdef'>
160+
Name: background-position-y
161+
Value: [ center | [ top | bottom | start | end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
162+
Initial: left
163+
Applies to: all
164+
Inherited: no
165+
Percentages: refer to height of background positioning area <em>minus</em> height of background image
166+
Media: visual
167+
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
168+
</pre>
169+
170+
This property specifies the background position's vertical component.
171+
172+
<pre class='propdef'>
173+
Name: background-position-inline
174+
Value: [ center | [ start | end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
175+
Initial: start
176+
Applies to: all
177+
Inherited: no
178+
Percentages: refer to inline-size of background positioning area <em>minus</em> inline-size of background image
179+
Media: visual
180+
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
181+
</pre>
182+
183+
This property specifies the background position's inline-axis component.
184+
185+
<pre class='propdef'>
186+
Name: background-position-block
187+
Value: [ center | [ start | end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
188+
Initial: start
189+
Applies to: all
190+
Inherited: no
191+
Percentages: refer to size of background positioning area <em>minus</em> size of background image
192+
Media: visual
193+
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
194+
</pre>
55195

56-
<p class="issue">Add logical keywords
196+
This property specifies the background position's block-axis component.
57197

58198
<h2 id="corners">
59199
Corners</h2>
@@ -176,7 +316,7 @@ Partial borders</h2>
176316
if you have dotted borders, you want whole dots always, not parts of dots.
177317
So it should be a drawing limit, not a clip.
178318

179-
<h3 id="partial-borders">
319+
<h3 id="border-limit">
180320
Partial Borders: the 'border-limit' property</h3>
181321

182322
<table class=propdef>
@@ -278,7 +418,7 @@ The 'border-clip' properties</h3>
278418
<td>visual
279419
<tr>
280420
<th>Computed&nbsp;value:
281-
<td>''normal'', or a list consisting of absolute lengths, or percentages as specified
421+
<td>''border-clip/normal'', or a list consisting of absolute lengths, or percentages as specified
282422
</table>
283423

284424
<p class=issue>Should these properties be simplified to only accept <code>normal | [ &lt;length&gt; | &lt;percentage&gt; ] +</code>?
@@ -288,7 +428,8 @@ The 'border-clip' properties</h3>
288428
the third part is visible, etc. Parts can be specified with lengths,
289429
percentages, or fractions (expressed by the ''fr'' unit, as per
290430
[[CSS3GRID]] or its <a href="http://dev.w3.org/csswg/css3-grid/">editor's
291-
edition</a>). The ''normal'' value means
431+
edition</a>).
432+
The ''border-clip/normal'' value means
292433
that the border is not split, but shown normally.
293434

294435
<p>'border-clip' is a shorthand property for the four individual properties.
@@ -556,7 +697,7 @@ Additions Since Level 3</h3>
556697
<li>multiple borders per element
557698
<li>logical border properties
558699
<li><a href="#partial-borders">Partial Borders</a> (make part of border shorthand as well!)
559-
<li><a href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0314.html">More 'border-radius' shorthands</a> for doing both corners on a side at once.
700+
<li><a href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0314.html">More <css>border-radius</css> shorthands</a> for doing both corners on a side at once.
560701
<li>Splitting horizontal / vertical spread radius for box-shadow, if we can come up with a sane syntax for it.
561702
</ul>
562703

0 commit comments

Comments
 (0)