LebGeeks

rolf

Member

CSS's new relative units

Hello,

I was excited when I read about the new CSS relative units:

http://www.w3.org/TR/css3-values/#viewp … ve-lengths

And about the calc function which lets you use CSS calculated values (using these units):

http://dev.w3.org/csswg/css-values/#calc

When I looked closer, I saw that it did not bring much new stuff, but one unit sounded very interesting: vw - which stands for "Vieport Width" with it's sister, vh.

Actually after some experimentation, it turns out the Viewport is not the available browser area, but the screen area, as implemented in Chrome. Which means that if you have a screen resolution with a width of 1024, it will always be equal to that. vw will always be set to 1% of 1024, hence 10.24 px, no matter if the user has maximized the window, or has resized the browser window to only take up 1/2 of the screen!

I thought I could use it to find out the size of available browser area and do some positioning based on that.

What use is that?

The other units hardly bring anything new or useful... I was hoping maybe a relative unit based on the dimention of the container, or the element itself, but that is dreaming too much.

So it just seems that this is adding complexity to the CSS specifications, without having much real world use - while old problems still remain and still have to solved by shoddy JavaScript hacks.

Yet, maybe Chrome has got it's implementation wrong...
It seems that the Firefox concept of viewport is different...

Last edited by rolf (June 10 2013)

samer

Admin

Re: CSS's new relative units

I thought I could use it to find out the size of available browser area and do some positioning based on that.

You can do this with media queries. It's the functionality that makes responsive design possible.

/* this only applies to viewports biggers than 500px */
@media screen and (min-width:500px) { ... }

You combine that with pre-processors like LESS or SASS which provides calculated values. For example:

@the-border: 1px;

#header {
  border-left: @the-border;
  border-right: (@the-border * 2);
}

rolf

Member

Re: CSS's new relative units

I guess what I want, is to be able to use CSS selectors to produce values, and also to be able to reference values of parent container.
Something like that:

#header {
   height: 200px;
}

#content {
    /* this is not valid CSS, but I wish it would was */
    height: calc( parent.height - select("#header").height );
}

Which is something that I'd usually solve in JavaScript, with the current limitations of CSS:

function onResize() {
    document.getElementById("content").height = ( window.innerHeight - document.getElementById("header").clientHeight ) + "px";
}

I thought the relative units would bring something new in that direction, but it was a deception.

Last edited by rolf (June 11 2013)

rolf

Member

Re: CSS's new relative units

CSS variables (they're a spec) and preprocessors, like you described, can help, and will help keeping the CSS code more understandable by forcing the developer to keep his variables separated from the rest.
Nevertheless, as experimentation continues with new layouts, the limits of what is possible with that spec will surely be reached at some point in the near future.

Last edited by rolf (June 11 2013)