W3C home > Mailing lists > Public > www-style@w3.org > September 2010

RE: [css3-values] dropping min()/max() on calc()

From: Sylvain Galineau <sylvaing@microsoft.com>
Date: Mon, 13 Sep 2010 21:57:49 +0000
To: François REMY <fremycompany_pub@yahoo.fr>, "Daniel Glazman" <daniel.glazman@disruptive-innovations.com>, "L. David Baron" <dbaron@dbaron.org>
CC: "www-style@w3.org" <www-style@w3.org>
Message-ID: <045A765940533D4CA4933A4A7E32597E27D03521@TK5EX14MBXC111.redmond.corp.microsoft.com>
Thanks !

> -----Original Message-----
> From: François REMY [mailto:fremycompany_pub@yahoo.fr]
> Sent: Monday, September 13, 2010 11:39 AM
> To: Sylvain Galineau; Daniel Glazman; L. David Baron
> Cc: www-style@w3.org
> Subject: Re: [css3-values] dropping min()/max() on calc()
> 
> I don't pretend to have all or even the most useful use-cases,
> but here are some things I've collected about my own use-cases
> for calc (the numbers I typed here are purely fictionnal) :
> 
> 
> * Most common use-case :
> -------------------------------------
> max-width: calc(50%-48px);

This one, I definitely understand.

> 
> 
> * Another use-cases :
> -------------------------------------
> 
> // Calculating the width of a 'progress' element dynamicly
> 
> width: calc(100% * (attr(value) - attr(min)) / (attr(max) - attr(min))

The calc()/attr() combo is a cool idea.

> // Ensuring a fixed element will be visible
> 
> position: fixed;
> height: 25px; width: 300px;
> top: calc(min(500px, 1vh-25px));
> left: calc(min(30px, 1wh-300px));

Except for the min(), conceptually similar to your first use-case.

> // Emulate the behavior of a "DesignMode" element having a minimal
> // height to be able to click into it. Could be done using min-width.
> 
> height: calc(max(1.2em, 23px));

Yes, I think min-height works too here.


> // Do computation on variables (in this sample, we could work-around
> // using the CSS box-sizing property, but we may use that in another
> // context, where this property is not appliable)
> 
> @variables {
>    Padding: 5px;
>    Border: 2px;
>    InnerWidth: 200px;
>    CssBoxModelWidth: calc(InnerWidth - 2*Padding - 2*Border);
> }

Yes calc() and variables is interesting but I am not considering 
scenarios that depend on features for which we don't even have a module...
I'm especially interested in the use-cases enabled by calc() that would
benefit a CSS2.1 browser.
Received on Monday, 13 September 2010 21:58:29 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:31 GMT