CSS3 Proposal – Width/Height % Behavior Change

[repost-link]

Under current CSS rules, specifying width or height (or their respective min-‘s) by percentage is relatively easy, yet it’s unnecessarily limited. I say this because when you specify a width using a percentage, you only have control over one of the three things you are specifying. Lets take a look at a simple example:

HTML:

<div id="container">
    <div id="content">
        Content
    </div>
</div>

CSS:

#container {
    width:400px;
    height:200px;
}
#content {
    width:100%;
    height:100px;
}

Content is inside Container, and Container is Content’s parent. Content has a width of 100%. What exactly does that mean though? It means that Content’s width should be equal to 100% of it’s parent’s width. That is three separate values, but under current CSS rules, we only can change the first. The second is locked into Parent, and the third is locked into being the same as the value being specified.

Imagine for a moment if the user wanted to make a flexible grid of squares, for a mobile phone. A container, set to 100% width of the screen, and then inside of it, three squares, each 28%, with margin-left of 4%.

HTML:

<div id="container">
    <div id="content">
        Content
    </div>
    <div id="content">
        Content
    </div>
    <div id="content">
        Content
    </div>
</div>

CSS:

#container {
    width:400px;
    height:200px;
}
#content {
    width:28%;
    height:28%;
    margin-left:4%;
    float:left;
}

Height and width are both set to 28%. But the panels aren’t square. This is because you want both width and height to be 28% of the parent’s width, and right now height is set to 28% of the parent’s height. Unfortunately, there is no way to change this as of now. So here’s the proposal:

Format:

height: percent pointer style;

Example:

height: 28% auto height;
         ↑    ↑    ↑
    Percent   |    |
              |    |
          Pointer  |
                   |
                 Style

Percent could be anything that is currently accepted as a value. Pointer would refer to a location. A value of auto would default to the element’s parent, but instead you could put any value CSS pointer, such as an id or a class, as long as it’s unique. Leaving it blank would default to auto, of course. Finally, Style would refer to the pointee’s style that we want to pull from. This could be any numerical style. It would default to the same style that it is being declared inside of, for example the Style portion of a height declaration would default to height if left blank. But it could be set to width.

So for our example, the new CSS would be:

CSS:

#container {
    width:400px;
    height:200px;
}
#content {
    width:28% auto auto;
    height:28% auto width;
    margin-left:4%;
    float:left;
}

This would mean that both the height and width of the #content boxes would be 28% of #container‘s width, and end up as nice neat squares.

Backwards Compatibility

This would be 100% fully backwards compatible. Anything left blank is considered auto, and a declaration in which Pointer and Style are set to auto should behave the exact same as the current default.

I’m not sure how one goes about submitting a new rule proposal to be added to CSS, so if anyone knows, please comment and let me know. Also, if you have concerns or suggestions about the proposal, please let me know as well.