Re: CSS3 Values and Units: Some proposals

On Tue, Mar 23, 2010 at 11:31 AM, Markus Ernst <derernst@gmx.ch> wrote:
> -------- Original-Nachricht --------
>> Datum: Fri, 19 Mar 2010 07:08:58 -0700
>> Von: "Tab Atkins Jr." <jackalmage@gmail.com>
>>
>> So, this is why concrete use-cases are useful, because then we can
>> evaluate precisely how existing solutions succeed or fail and judge
>> new solutions by how well and easily they solve the use-cases.  Do you
>> have some to share with us?  Anything you've used in your own design
>> where you needed things to be equal-height, or equal-width, or
>> whatnot, and couldn't get CSS to do what you needed?
>
> Here's an example for a simple 2-column layout I could not find how to do without a layout table:
> http://www.colorplast.ch/en/colorplast-ag/terms-and-conditions.html
>
> Sorry the code is not indented; my CMS removes whitespace. The main issue in this design is the background appearing between the columns and belwo the title.

Yup, that's a pretty trivial Template Layout.

> The more interesting case than equal-height is full-height-and-full-width. Here's a page I did some years ago. Today I would do some things different, specially use a strict doctype, but the page illustrates the crucial points quite well:
> http://www.cuervoysobrinos.com/en/cuervo-y-sobrinos/history.html
>
> The difficulty lies in the complex background:
> - head section background is supposed to extend to the full width of the viewport
> - navigation section background is supposed to extend to the full height of the viewport
>
> My favorite document structure would look something like:
> <body>
>  <div>[logo img]</div>
>  <div>[main contents]</div>
>  <div>[main navigation]</div>
>  <div>[search box an language navigation]</div>
> </body>

Also pretty easy.  Depending on exactly how you're wanting to set up
the background levels, you can do something like this:

body {
  display: "ab" /150px
           "cd" /* 150px *;
  height: 100%;
}

#header { position: a; }
#search { position: b; }
#nav { position: c; }
#main { position: d; }

This sets up a template where the first row is 150px high, the second
is the rest of the space.  Similarly, the first column is 150px wide,
the second is the rest of the space.  Then each box gets thrown into
the correct slot and you're done.  (You don't have to provide all
these height/width values; I gave them as an illustration.)

> I made a lot of tests, but was not able to achieve the expected results, mainly because the background of a non-table element set to width:100% will be cut cut away at 100% if scrolling is needed. So finally I gave up and made a layout table.
>
> I hope that this kind of layout will be easy to achieve once the Template layout module will be implemented.

Yup, anytime you're using a layout table, you can replace it using
Template Layout.  In some cases you can replace it with Table Layout
if you're willing to organize your code correctly.  For example, both
of the examples you've provided can be done with Table Layout too, l
it'll work in all modern browsers (IE7 and earlier won't, but you can
fall back with a float-based layout, or repair with javascript or
whatnot, using conditional comments).

> Anyway, I admit I am not very confident about the speed of CSS development, seeing drafts from 2002 being still in the WD state. Is there some info available on the schedule, when CSS3 is expected to be in recommendation state?

The progress of CSS drafts depends on several things.  One is the
actual effort expended by members of the group.  Another is feedback
from authors and engineers and such, so we know we're solving a
worthwhile problem and doing it right.  The final one is browsers
actually implementing experimental properties and giving feedback.

I'm not looking at the list right now, but generally, those drafts
that last got an update in 2002 or so have lost their editors.
Hopefully some of them will get picked up and dusted off by someone
else (I'll be doing that with a few of them over the next few months).

"CSS3", in general, isn't a thing.  After CSS2, we moved to a modular
development process, where we publish modules covering small, focused
topics rather than a grand unified spec covering everything.  There
will never be a such thing as "CSS3 in Rec state".  Instead, you'll
have "Backgrounds & Borders Level 3 in Rec state", etc.  Feel free to
track individual modules that you're interested in.

~TJ

Received on Tuesday, 23 March 2010 19:08:06 UTC