Linking width and height (was: Responsive CSS3 Transitions)

Since your mail contain three issues, let's split it in three threads, one 
for each issue. This thread will be about issue 1.

It's indeed difficult to link the width and the height of an element in CSS. 
In fact, only replaced elements like images can do so (using the 'auto' 
keyword). A first workaround would be to use an image and its sizing 
algorithm.

    <div style="position: relative">
        <img src="16x9.png" style="width: 100%;" />
        <div style="position: absolute; top: 0px; left: 0px; bottom: 0px; 
right: 0px;">
            My content
        </div>
    </div>

The other option is to rely on 'font-size' or CSS Custom Properties but this 
hack has important issues, too (can't use percentages/auto).

    <div id="size-container" style="width: 1em; height: 0.5625em; font-size: 
500px;">
        <div id="font-container" style="font-size: 16px">
            My content
        </div>
    </div>

    <div id="size-container" style="width: 500px; height: calc(9 * 
self.width / 16)">
        My content
    </div>

Based on this reflection, it's clear that the %w and %h units would be way 
better. However, they would require the layout models and the box model to 
be rewritten. And it won't be easy...

    <table>
        <tr>
            <td style="height: 0.5w"></td>
            <td style="width: 0.5h"></td>
        </tr>
    </table>

Maybe an intermediate option would be allow these units only on 'display: 
block' and 'display: inline-block' elements (so: not in grids, tables and 
flexboxes) where the algorithm is straigtforward enough to make this 
possible.





-----Message d'origine----- 
From: Greg Houston
Sent: Monday, September 03, 2012 8:37 AM
To: W3C Style
Subject: Responsive CSS3 Transitions

Last night I was modifying Joe Lambert's Flux Slider to be responsive.
I ran into three issues I think could be related to in order to make
this sort of work faster and have better results.
http://greghoustondesign.com/sandbox/flux-slider/demo_transition_gallery.html

1. There doesn't seem to be a simple, elegant way to make a div keep
its aspect ratio when resized. Being able to set the width of an
element as a percentage of its height or set its height as a
percentage of its width would be great, and particularly so if all it
required was a simple short-hand:

.slider {
  width: 100%;
  height: 66.66666666%w;
}

or

.slider {
  height: 100%;
  width: 150%h;
}

I ended up using the technique found at the following link. It
requires using a couple wrapper divs, and though it works great it
definitely has a hackish feel to it:
http://files.brightcove.com/BCL_responsive-player-sample.html

2. If you slice up a div into smaller divs and add the same background
to each slice as the parent and reposition that background
appropriately, each background will still be the correct size to
rebuild the original image from the slices. That is, unless you have
resized the original container div and set the background-size to
something like "auto 100%". That new background-size in pixels will
not propagate down to the children, and so each child element now
requires additional math to set the size of the background in relation
to the size of the slice. It would be helpful if there was a CSS
toggle that would make the exact size of the parent background
propagate to the children.

background-size: auto 100% propagate; <-- not propagating "auto 100%",
but the actual pixel values this results in.

So if you have a parent div whose size is 300px x 240px with
background-size: auto 100% propagate; and place a div inside it whose
width is 50% and height is 50% and give it a background, its
background would have the same width and height as its parent.

3. I don't have a clear sense of what would be a good solution for
this next issue, but its the most problematic that I ran into, and
I've yet to come up with a workaround. It relates to halving the width
or height of an element that doesn't have an even height or width. If
you put two "halves" together where the whole dimension is an odd
number there will generally be a 1px slice that is missing. The
different UAs seem to relate to rounding differently and in my
particular use case I found Chrome to create more anomalies than
Firefox. It would first be nice to see the rounding method
standardized so at least these anomalies were consistent across
browsers. See John Resig's blog post below.  Then perhaps as we have
box-sizing now to offer different approaches to how to relate to the
layout of a box, it might be helpful to have some options as to how to
relate to that missing 1px. In my case being able to set a visible 1px
bleed on a particular side of an element might be a sufficient
workaround. Maybe that could just be a background option. The bleed,
like a shadow, wouldn't be part of the width regardless of box-model.
I don't know that this would be the best solution, but am just trying
to throw something out there.

background-bleed: 0 1px 0 0; <-- 1px of right side bleed

http://ejohn.org/blog/sub-pixel-problems-in-css/

Some of my initial tests:
http://greghoustondesign.com/sandbox/page-turn/

Received on Monday, 3 September 2012 09:52:41 UTC