Re: [css3-gcpm] border-length

Håkon Wium Lie wrote:
> Also sprach Tab Atkins Jr.:
>
>  > >  border-parts: 1em auto 2em
>
>  > Man, I was all ready to suggest using negative numbers on border length to
>  > make it start from the middle rather than the corner, but this blows that
>  > out of the water.  Yes, border-parts is a substantially better proposal than
>  > border-length.
>
> Super, thanks!
>
>  > I'd suggest putting an example into the spec of something you can *only* do
>  > with border-part - right now you're just duplicating what border-length can
>  > do.  Just use the examples you've already come up with in your email, as
>  > they demonstrate the substantial power inherent in this.
>
> Right, here it is:
>
>   http://dev.w3.org/csswg/css3-gcpm/#border1
>
> (These urls are unstable, the draft changes quickly these days)
>
>  > Taking this idea slightly further, might this be a place to introduce flex
>  > units?  The auto keyword in this context is equivalent to 1fl, after all,
>  > and this would address the requests that a few other authors have.  I'd like
>  > to see a comprehensive Flex module at some point, though...
>
> So, you could say:
>
>   border-parts: 1em 1fl 1em 2fl 1em;
>
> and the first gap in the border would be half the size of the second one?
>
> It makes sense to me and I believe Philip Taylor will like it, too :)
>
> However, introducing a new unit is a pretty big deal. Where else would
> you use it?
>
>   
I am working on flex units proposal now and expect it to be available in 
some preliminary state in a month.
Basic idea is to be able to define something like this:

<ul id="three-columns">
   <li id="left">...</li>
   <li id="center">...</li>
   <li id="right">...</li>
</ul>

and styling:

ul#three-columns
{
    flow:horizontal; /* children are placed in single row horizontally */
}
ul#three-columns > li
{
    height: 1*; /* or 1fl,  all children have the same height - height 
of the row minus padding, borders */
    width: 100px;
}
ul#three-columns > li#center
{
    width: 1*; /* li#center is a "spring" - takes space left from 
li#left and li#right in the container */
}

If you have flex units in place then you will see this as:

+------+---------------------+------+
|      |                     |      |
|#left |  #center            |#right|
|      |                     |      |
|100px |   continer-width    |100px |
|      |     - 100px - 100px |      |
+------+---------------------+------+

Principle of the flex units is the same as the Multi-Lenght (Relative 
Units)
in HTML ( http://www.w3.org/TR/REC-html40/types.html#type-length )
This is almost the same flex principle that is used when you define
<frameset cols="100,*,100">...
'*' here is 1* or 1fl

--
Andrew Fedoniouk.

http://terrainformatica.com

Received on Wednesday, 15 October 2008 17:40:48 UTC