Is there anything in the CSS spec that allows a percentage property to be relative to a specific element/property?

Question

I want to be able to define what each property that allows a percentage is relative to.

According to the current W3 CSS Spec:

Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element, a property for an ancestor element, or a value of the formatting context (e.g., the width of a containing block). When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property.

I want to define what value an element's percentage should be based. I want to reference:

1. The ancestor element the property's percentage is based on.
2. The property of the specified element the property's percentage is based on.

I have many times had problems with the percentage value of the properties line-height (which is based on font-size) and padding & margin (which is based on width even for padding-top & padding-bottom/margin-top & margin-bottom). I understand that currently there is no way to do what I'm talking about, but I've searched through the CSS spec for anything related to this and I have come up empty handed.

Is there anything in the current spec (that I was unable to find) that allows what I'm trying to do? If there's nothing in the spec, are there:

1. Any discussions/ideas about this concept?
2. Is what I'm thinking of not possible for some reason?

---

It seems to me that it should be possible as a property the same way transition is.

syntax: <single-relative-property> || [none | this | parent] || <single-relation-property>

Example

.text{line-height:100%;relative:line-height height;} This element's line-height is 100% of it's own height.

.text{padding:5% 0;relative:padding-top parent height, padding-bottom parent height;} This element's padding-top & padding-bottom are both 5% of it's parent's height.

---

Please note, I know that there are work arounds for some of these things. I also know all of this can be done with javascript. I'm more curious if it was ever talked about/mentioned anywhere, and if not why? Because this seems like it could be something helpful.

I also understand that in a flexbox layout the padding & margin properties are based on their percentages respectfully which is awesome. But that is not what I'm looking for.

Answer 1

When the spec says...

Each property that allows percentages also defines the value to which the percentage refers.

... this definition is given by the spec, and then a conforming user agent implements the calculation according to the spec. The spec does not make any reference to user-defined percentage calculations. If I were to hazard a guess, it's probably because it's altering how a built-in CSS unit fundamentally works could potentially open developers up to a plethora of complications.

The calc() function, introduced here in the same spec that you link to, by itself does not allow you to specify a CSS property, either of the same element or some other element, which means for example you can't do something like this:

.text {
    height: 100px;
    line-height: calc(100% * height);
}

However, there's a newly-published draft called CSS Custom Properties for Cascading Variables, which allows authors to specify custom property values and use them in arbitrary rulesets in a stylesheet. And while the module itself doesn't discuss a way for users to define how percentages should be calculated, it does discuss using cascading variables with calc().

This is very promising: since you're already able to perform multiplication and division with calc(), you can fully emulate percentage calculations by multiplying by a decimal number instead of a percentage (or just use the cascaded value as is for 100%). You can even force properties that don't normally accept percentages, such as border-width, to have their values calculated based on some other property using this method.

Here's an example, with an interactive proof-of-concept that works in Firefox 31 and later, where the current draft is implemented as of this writing:

.text {
    --h: 50px;
    height: var(--h);

    /* 100% of height, given by --h
       Line height percentages are normally based on font size */
    line-height: var(--h);

    /* 20% of height, given by --h
       Border properties do not normally accept percentages */
    border-width: calc(0.2 * var(--h));
    border-style: solid;
}

The only caveat is that, because var() only works with custom properties, you need to

1. declare the value in its own custom property, and then
2. any property that depends on this value must access the custom property through var().

But the fact that it works is in itself very, very promising and we can only hope that this new module will continue to be developed and be more widely implemented.