Re: CSS3 Values and Units: Some proposals

> Datum: Wed, 17 Mar 2010 20:59:48 -0700
> Von: "Andrew Fedoniouk" <news@terrainformatica.com>

> > 1. Units that cover the maximum viewable or scrollable space
> >
> > There are the vw, vh and vm units in the draft. However, they do not 
> > solve problems such as backgrounds that are not continued when 
> > scrolling is necessary.
> >
> > I suggest to add 2 more units, they might be named "page width" and
> > "page height":
> > - pw: the viewport's width or maximum contents width, whichever is
> > greater
> > - ph: the viewport's height or maximum contents height, whichever is 
> > greater
> >
> > Use case: A navigation column with a background. If the contents 
> > extend the viewport, the background of the navigation column is 
> > supposed to be continued to the bottom of the page - just the same 
> > behaviour as in a HTML3 table layout with <table height="100%">.
> 
> If some element inside the document will have width:1.2pw; what would be
> its computed value?
> It appears that this will create indefinite recursive calculation loop.

I see that point. The same would apply for a construct such as 
<p style="height:1ph">Text</p>
<p>More text</p>

> > 2. A method to adjust the dimensions of elements
> >
> > I suggest to introduce a method to give some elements the same width 
> > or height, without knowing the appropriate value. This could be 
> > achieved by a function that looks for the computed dimensions of all 
> > elements covered by a selector, and gets the highest one.
> >
> > Use cases:
> > - Align labels and fields in a form without a table.
> > - Adjust several elements with position:absolute to each other, for 
> > example to achieve a multi-column layout
> >
> > For a part of a simple form:
> > <p><label class="aligned">Age:</label><input type="text"></p>
> > <p><label class="aligned">Preferred tea:</label><input 
> > type="text"></p>
> > .... the CSS could look like this:
> > label.aligned {
> >  width:max(width, .aligned);
> > }
> >
> > The function max() takes 2 arguments:
> > - the dimension to be looked for
> > - the selector that covers the group of elements whose dimension is
> > looked for
> 
> The same problem as above - recursive calculations.

I see, my concrete solution suggestions do not seem to be practicable. Anyway the problem is real - really basic things like making 2 columns extend to the same height need a lot of trickery. That does not seem to be a satisfactory for CSS as a whole. As the same thing is easy to achieve with a table layout, I assume that suitable algorithms would not be impossible.

Maybe it could work when I replace the max() function by an adjust() function without arguments. It just covers the selector(s) applied to the rule:

#contents, #navigation {
  height:adjust();
  min-height:100%;
}
label.aligned {
  width:adjust();
}

The algorithm for adjust() then would have to look something like:
- If the rule applies to less than 2 elements, ignore the declaration.
- Compute the width resp. height of every element covered by the rule.
- If recursion occurs, break, ignore the declaration, throw an error.
- After the values of all elements could be computed successfully, apply the highest value to every element.


(P.S. I apologize for the GMX signature appearing below. I usually write to mailing lists from my local mail client, but at www-style a software called openspf rejects all my messages, regardless of the SMTP configuration I use. So I am forced to use the webmail client.)
-- 
GMX DSL: Internet, Telefon und Entertainment für nur 19,99 EUR/mtl.!
http://portal.gmx.net/de/go/dsl02

Received on Thursday, 18 March 2010 14:33:13 UTC