- From: Alan Gresley <alan@css-class.com>
- Date: Fri, 06 Jun 2008 13:17:04 +1000
- To: Andrew Fedoniouk <news@terrainformatica.com>
- CC: "Gao, Ming (ICS Industry Alliance, San Diego)" <ming.gao@hp.com>, "www-style@w3.org" <www-style@w3.org>
Andrew Fedoniouk wrote: > > Gao, Ming (ICS Industry Alliance, San Diego) wrote: >> Meeting: Cascading Style Sheets (CSS) Working Group Weekly Teleconference >> >> Date: June 4, 2008 >> Time: 09:06am to 10:00am PDT > .... > >> issue #4 >> -------- >> daniel: next, positioning from corners >> fantasai: the current approach might be a bit awkward. >> .... an alternative approach would require a different syntax. >> >> <fantasai> background-postion: 10px 20px; >> fantasai: designer tend to prefer to do this positioning from bottom >> right. >> <fantasai> background-position: bottom 10px right 20px; >> fantasai: my proposal is to use keyword and distance >> .... from the edge of the element >> >> daniel/fantasai: would like to hear what authors want to say >> jason: never really have a case to do it from left or right; >> .... could be because I can't do it in the past >> >> <fantasai> fantasai: question is whether to create a syntax for this, >> or to wait >> for calc() >> fantasai: people really want to do from bottom right >> jason: agree; what is the syntax to write it from right to left? >> >> fantasai: I am posting some notes to show the syntax >> <fantasai> background-position: bottom 10px right 20px; >> <fantasai> background-position: start 10px center; >> >> jason: just looking at these syntax, it is hard to understand (what >> they do, from authors' point of view); >> .... maybe easy for computer to understand >> >> peter: Q: do you mean 10 px from righ edge of the box ? >> >> fantasaI: could be right edge from the right edge(?) >> > ..... > > I propose to add following attributes: > > background-position-left > background-position-top > background-position-right > background-position-bottom > > so existing 'background-position' will be just a shortcut form of > defining 'background-position-left' and 'background-position-top' > > If both background-position-left and background-position-right are > defined for background-repeat:no-repeat images background-position-right > wins. > Same rule for background-position-top/bottom. > > For background-repeat:stretch (do not remember exact value) images > background-position-left/top/right/bottom define correspondent offsets > from padding edge. > > -- > Andrew Fedoniouk. > > http://terrainformatica.com Thinking of possible use cases. I don't see how you can introduce new 'background-position' properties and also allow for progressive enhancement. In a comma separated value string for the 'background' property the new values for offsetting against the box edges, 'right' and 'bottom' must be overruled. div { width: 100px; height: 100px; background: url(a.jpg) 0 0 no-repeat, url(b.jpg) 50px 0 no-repeat, url(c.jpg) 50px 50px no-repeat, url(d.jpg) 0 50px no-repeat; background: url(topLeft.jpg) 0 0 no-repeat, url(topRight.jpg) right 0 top 0 no-repeat, url(bottomRight.jpg) right 0 bottom 0, url(bottomLeft.jpg) left 0 bottom 0 no-repeat; } And the possible incorrect positioning values given by an author for the later 'background' declaration. background: url(topLeft.jpg) 0 0 no-repeat, url(topRight.jpg) right 0 0 no-repeat, url(bottomRight.jpg) right 0 bottom 0, url(bottomLeft.jpg) 0 bottom 0 no-repeat; by not declaring the top offset for the topRight.jpg and the left offset for the bottomLeft.jpg. By adding the below properties which I do support: > background-position-left > background-position-top > background-position-right > background-position-bottom What is the shortcut proposed for the above properties? It would make sense to have it simplified in the 'background-position' property such as with my proposal [1] for background positioning (ltr direction). background-position: 0 0 0 0; and positioning from the bottom right corner would be. background-position: auto auto 0 0; and a missing value is disallowed. background-position: 0 0 0; /* Invalid value */ [1] http://lists.w3.org/Archives/Public/www-style/2008May/0250.html Alan
Received on Friday, 6 June 2008 03:18:09 UTC