CSS规范中是否有允许百分比属性与特定元素/属性相关的内容？

Question

我希望能够定义允许百分比相对于每个属性的内容.

根据目前的W3 CSS规范:

百分比值始终相对于另一个值,例如长度.允许百分比的每个属性还定义百分比所引用的值.该值可以是同一元素的另一个属性的值,祖先元素的属性或格式化上下文的值(例如,包含块的宽度).当为根元素的属性设置百分比值并且百分比被定义为引用某个属性的继承值时,结果值是该属性的初始值的百分比倍.

我想定义元素百分比应该基于什么值.我想参考:

1. 属性百分比所依据的祖先元素.
2. 属性百分比所基于的指定元素的属性.

我有很多次问题的属性的百分比值line-height(基于font-size)和padding&margin(基于width偶数padding-top&padding-bottom/ margin-top和margin-bottom).我知道目前没有办法做我正在谈论的事情,但我已经通过CSS规范搜索了与此相关的任何内容,我已经空手而归.

当前规范中有什么(我无法找到)允许我正在尝试做什么吗？如果规范中没有任何内容,那么:

1. 关于这个概念的任何讨论/想法？
2. 由于某种原因,我认为不可能吗？

---

在我看来,作为一个财产应该是可能的相同的方式transition.

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

例

.text{line-height:100%;relative:line-height height;}这个元素line-height是100%它自己的height.

.text{padding:5% 0;relative:padding-top parent height, padding-bottom parent height;}这个元素是padding-top&padding-bottom它们都是5%它的父母的height.

---

请注意,我知道有些工作可以解决这些问题.我也知道这一切都可以用javascript完成.如果曾经在任何地方谈到/提到过,我更好奇,如果不是为什么？因为这似乎可能是有用的东西.

我也明白,在flexbox布局中,padding&margin属性是基于它们的百分比,这是非常棒的.但这不是我想要的.

Answer 1

当规范说......

允许百分比的每个属性还定义百分比所引用的值.

...此定义由规范给出,然后符合要求的用户代理根据规范实现计算.规范未对用户定义的百分比计算进行任何引用.如果我冒险猜测,可能是因为它改变了内置CSS单元的基本工作方式,可能会使开发人员面临过多的复杂问题.

该calc()功能,介绍在这里,你链接到其本身在同规格不允许你指定一个CSS属性,无论是相同的元素或其他一些因素,这意味着,例如,你不能这样做的:

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

但是,有一个名为CSS Custom Properties for Cascading Variables的新发布的草稿,它允许作者指定自定义属性值并在样式表中的任意规则集中使用它们.虽然模块本身没有讨论用户定义如何计算百分比的方法,但它确实讨论了使用级联变量calc().

这是非常有前途的:因为你已经能够执行乘法和除法calc(),你可以通过乘以十进制数而不是百分比来完全模拟百分比计算(或者只使用100%的级联值).您甚至可以强制通常不接受百分比的属性(例如border-width,使用此方法基于其他属性计算其值).

这是一个示例,其中包含一个可在Firefox 31及更高版本中使用的交互式概念验证,其中当前草案在撰写本文时已实现:

.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;
}

唯一需要注意的是,因为var()只能使用自定义属性,所以需要这样做

1. 在自己的自定义属性中声明值,然后
2. 依赖于此值的任何属性都必须通过访问自定义属性var().

但它的工作原理本身非常非常有希望,我们只能希望这个新模块将继续发展并得到更广泛的实施.