Re: width(<percent>) and height(<percent>) functions

While property-value() could be useful it will not help too much for aspect
ratio cases for example.

Like this one:

div.that-malevitch-masterpiece  {
  margin: auto;
  width: 50%; /* of its container */
  height: width(100%); /* that perfect square */
  background: black;
}

property-value() will not help you here.

On Wed, Mar 9, 2016 at 8:29 PM, Daniel F <danielzacharyfranklin@gmail.com>
wrote:

> On Wed, Mar 09, 2016 at 7:37 PM Andrew Fedoniouk <Andrew Fedoniouk > wrote:
>
> >If will have such functions then following scenarios will become feasible:
>
> >
>
> >To define aspect ratio:
>
> >
>
> >div { width: 100%;
>
> >       height: width(50%); /* 2:1 aspect ratio */ }
>
> >
>
> >To define line-height always match defined height:
>
> >
>
> >input {
>
> >   width: auto;
>
> >   height: 1.4em;
>
> >   line-height: height(100%);
>
> >}
>
> I agree something that enables this would be very useful.
>
> >width(<percent>) and height(<percent>) are non symmetrical in the sense
> that:
>
> >
>
> >width(<percent>), when used in height related properties ( e.g. height,
> line-height ), uses computed width of the element. Otherwise it gets
> calculated against defined width if it is defined in <length> or evaluated
> to 'auto'.
>
> >
>
> >and height(<percent>), if used not in height property, always calculated
> against declared height if it is given in <length> units. In all other
> cases it gets used as 'auto’.
>
> This seems too complex to me at first. Why not something more general?
> Such as
>
>
>     <div class=“a b”></div>
>
>
>     .a {font-size: 100px}
>
>     .b {
>
>         font-size: calc(property-value(font-size) * 2);
>
>         width: 100%;
>
>         height: property-value(width);
>
>     }
>
> >This will help to solve ugly "solutions" like this one for example:
>
> >
>
> >
> http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css
>
> >
>
> >
>
> >--
>
> >Andrew Fedoniouk.
>
> >
>
> >http://sciter.com
>
>


-- 
Andrew Fedoniouk.

http://sciter.com