Functional notation of `rem` unit to refer to font-size of ancestor of specific level

Hello.

It would be nice to be able to set element's font-size based on font-size of one of its ancestor elements.

Currently, we have `rem` unit for similar purpose, but it's hardly binded to font-size of _root_ element (`HTML` element in case of HTML documents). This complicates creating modular/standalone blocks which needs to have font-size that does not depend on font-size of root element, but font-size of descendant elements of that standalone block should depend on font-size of latter.

We could extend `rem` unit with functional notation having one parameter meaning parent level:

    HTML {font-size: .8125em; }
    UL {font-size: 13px; }
    UL > LI {font-size: 0; }
    UL > LI > SPAN {font-size: 1rem(2); }

here 2 inside parentheses is level of ancestor to be used as reference element for font-size (`LI` here is first level, `UL` is second one). So `SPAN` element will have 13px font-size. We cannot use `rem` unit here since `UL` element has pixel font-size while `HTML` element has `em` font-size that depends on system/browser settings. We cannot use `em` unit either -- since font-size of direct-parent element (`LI`) is zero.

If reusing `rem` for this purpose will seem any problematic, it's OK to name it differently: for example, `pem` (parent em) or `aem` (ancestor em). What important here is the idea itself.

Thanks.

P.S. No, it's not a 1-april joke. ;-)

Received on Sunday, 1 April 2012 18:16:06 UTC