Detect relevant font-size and containing block width

When styling fluids layouts and resizable text web pages, you must have always in mind the relevant fon开发者_如何转开发t-size (for em's units) and containing block width (percent units) of current styled elements. That's a loose of time to always have to be alert of which is the width of the parent element or if you have modified the font-size for the current element or one of its ancestors.

With Dynamic Stylesheets (like Sass or Less) is easy to implement mixins or functions that take care about the mathematical behind em's and percent calculations (simple divisions), so you can write the size in pixels and forget about the translation, but anyway you have to provide relevant font size and contaning block width as there is no way to auto-decect them, as far as I know.

Do you know if there is some class of utility to automatize that? Does some kind of effort have been done to achieve it in some way?

You can't use the calculated property values of the parent to set the properties of child in CSS. LESS or SASS don't change that. But sizes can be set relative to their parent (or the root when using rem units).

>No, I'm talking about styling any vertical space (line-height, padding-top, padding->bottom) in em units (so relative to relevant font size)

The relevant font size is the set font size of the parent. When you define the font size of the child element as 0.5em, its font size will be 50% smaller than the font size of its parent.

You can use Less / SASS to declare for instance the 0.5em as a variable. Which enable you to change and edit it on a single place.

less

@basefont: 1em;
@smallfont: 0.5em;

section {
font-size: @basefont;
article {
font-size: @smallfont; // or @basefont / 2;
}
}

footer {
font-size: @smallfont;
}

and any horizontal space (width, pagging-left, padding-right) in percent units (so relative >to the containing block width).

The percent units are already relative to the parent (containing block).