Is there anything in the CSS spec that allows a percent property to relate to a specific element / property?

Question

I want to determine what each property that allows percentage is relative.

According to the current W3 CSS specification :

Percentage values ​​always refer to another value, for example, to length. Each property that allows percentages also defines a value that the percentage points to. The value may be the value of another property for the same element, a property for the ancestor element, or a formatting context value (for example, the width of the containing block). When a percentage value is set for a property of a root element, and a percentage is defined as referring to the inherited value of a property, the resulting value is a percentage value times the initial value of this property.

I want to determine what value should be based on the percentage of an element. I want to reference:

• The parent element on which the percentage of the property is based.
• The property of the specified element contains the percentage of the property.

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

Is there anything in the current specification (which I could not find) that allows what I'm trying to do? If there is nothing in the specification, there is:

• Any discussions / ideas on this concept?
• For some reason, I think of impossibility?

---

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

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

Example

.text{line-height:100%;relative:line-height height;} This line-height element has 100% its own height .

.text{padding:5% 0;relative:padding-top parent height, padding-bottom parent height;} This padding-top and padding-bottom is 5% this parent height .

---

Please note: I know that for some of these things there is work. I also know that all this can be done using javascript. I'm more curious if this has ever been talked about / mentioned anywhere, and if not why? Because it seems that it could be something useful.

I also understand that in the flexbox layout, the padding and margin properties are based on their percentages respectfully , which is awesome. But that is not what I am looking for.

Answer 1

When the specification says ...

Each property that allows percentages also defines a value that the percentage points to.

... this definition is given by the specification, and then the corresponding user agent implements the calculation in accordance with the specification. The specification makes no reference to user percentage calculations. If I am at risk of guesswork, probably because it has changed how the CSS inline works, it could potentially open developers to many complications.

The calc() function, introduced here in the same spec you refer to, by itself does not allow you to specify a CSS property of either one element or another element, which means, for example, that you cannot do something like this :

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

However, there is a recently published project called CSS Custom Properties for cascading variables that allows authors to specify their own property values ​​and use them in arbitrary rule sets in the stylesheet. Although the module itself does not discuss how users can determine the percentage, it discusses the use of cascading variables using calc() .

This is very promising: since you can already do the multiplication and division with calc() , you can fully emulate the percentage calculations by multiplying by a decimal number instead of a percentage (or just use a cascading value, as for 100%). You can even force properties that usually do not accept percentages, such as border-width , so that their values ​​are calculated based on some other property using this method.

Here is an example with an interactive proof of concept that works in Firefox 31 and later, where the current project is being implemented with this email:

 .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 since var() only works with custom properties, you need to

• declare a value in your own custom property and then
• any property that depends on this value must access the custom property through var() .

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