CSS规范中是否有任何内容允许百分比属性相对于特定元素/属性？ [英] Is there anything in the CSS spec that allows a percentage property to be relative to a specific element/property?

问题描述

我想要能够定义允许百分比相对于的每个属性。

根据当前的W3 CSS Spec ：

百分比值总是相对于另一个值，例如长度。 允许百分比的每个属性也定义了百分比所指的值。该值可以是同一元素的另一个属性，祖先元素的属性或格式上下文的值例如，包含块的宽度）。当为根元素的属性设置百分比值，并且百分比被定义为引用某些属性的继承值时，结果值是该属性的初始值的百分比乘以。

我想定义一个元素的百分比应该基于什么值。我想引用：

1. 属性的百分比基于的祖先元素。


2. 属性。

我有很多次对属性的百分比值有问题 line-height （基于 font-size ）和 padding & margin （ width 即使对于 padding-top & padding -bottom / margin-top & margin-bottom ）。我理解，目前没有办法做我在说什么，但我已经搜索了CSS规范与此相关的任何事情，我是空手而来。

当前规范中有什么（我找不到），允许我想要做什么？如果规格中没有任何内容，是否有：

1. 任何有关此概念的讨论/想法？


2. 我想是因为某种原因不可能吗？

---

对我来说，应该可以作为一个属性，以同样的方式 transition 。

语法：< single-relative-property> || [none |这个|父] || < single-relation-property>

示例

.text {line-height：100％; relative：line-height height;} 这个元素的 line-height

.text {padding：5％0; relative：padding-top parent height，padding-bottom parent height;} 这个元素的 padding-top ; padding-bottom 都是父级 height 的 5％



---

请注意，我知道这些事情有一些工作。我也知道所有这一切都可以用javascript来完成。我更好奇，如果它曾经谈论过/提到任何地方，如果不是为什么？因为这似乎可能是有帮助的。

我也理解在弹出框布局 padding & margin 属性是基于他们的百分比，这是真棒。但这不是我想要的。

解决方案

。

允许百分比的每个属性也定义百分比所指的值。

...此定义由规范给出，然后符合的用户代理根据规范实现计算。规格没有提及用户定义的百分比计算。如果我是一个猜测，这可能是因为它改变了一个内置的CSS单元基本上如何工作，可能会打开开发人员的许多并发症。

code> calc（）函数，介绍了这里在你链接到的同一规范，本身不允许你指定一个CSS属性，相同的元素或一些其他元素，这意味着例如你不能这样做： / p>

  .text {
 height：100px; 
 line-height：calc（100％* height）;但是，有一个新发布的草稿名为    //www.w3.org/TR/css-variables-1rel =noreferrer> Cascading变量的CSS自定义属性，允许作者指定自定义属性值，并在样式表中的任意规则集中使用它们。虽然模块本身没有讨论为用户定义如何计算百分比的方法，但它讨论了使用 calc（）的级联变量。
 
 
 
这是非常有前途的：因为你已经能够用 calc（）执行乘法和除法，你可以完全模拟百分比计算通过乘以十进制数而不是百分比（或者仅使用级联值作为100％）。您甚至可以强制通常不接受百分比的属性，例如 border-width ，以使用此方法基于某些其他属性计算其值。
 
 
 
以下是一个示例，其中包含互动概念验证在Firefox 31和更高版本中工作，其中当前草稿是这样写的：
  .text {
 --h：50px; 
 height：var（ -  h）; 
 
 / * 100％的高度，由--h 
给出行高度百分比通常基于字体大小* / 
 line-height：var（ -  h）; 
 
 / * 20％的高度，由--h 
给定边框属性通常不接受百分比* / 
 border-width：calc（0.2 * var ））; 
 border-style：solid; 
} 
  
唯一的注意事项是，因为 var 仅适用于自定义属性，您需要
 
 
声明自己的自定义属性中的值， / li> 
 
依赖此值的任何属性都必须通过 var（）访问自定义属性。
 
 
 
 
 
但是它的工作原理本身就是非常，很有前途，我们只能希望这个新模块继续发展并得到更广泛的实施。
 
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:

The ancestor element the property's percentage is based on.
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:

Any discussions/ideas about this concept?
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.
解决方案
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

declare the value in its 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 in itself very, very promising and we can only hope that this new module will continue to be developed and be more widely implemented.

                        
这篇关于CSS规范中是否有任何内容允许百分比属性相对于特定元素/属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！