Есть ли что-нибудь в спецификации CSS, которая позволяет свойство процента относиться к определенному элементу/свойству?

Я хочу, чтобы определить, что каждое свойство, которое позволяет процент относительно.

В соответствии с текущей спецификацией W3 CSS:

Процентные значения всегда относятся к другому значению, например, к длине. Каждое свойство, которое позволяет проценты, также определяет значение, на которое указывает процент. Значение может быть значением другого свойства для того же элемента, свойства для элемента предка или значения контекста форматирования ( например, ширина содержащего блока). Когда задано значение процента для свойства корневого элемента, а процент определяется как относящийся к унаследованному значению некоторого свойства, результирующее значение представляет собой процентное значение, умноженное на начальное значение этого свойства.

Я хочу определить, какое значение должен быть основан на проценте элемента. Я хочу ссылаться:

  • Элемент предка, на котором основан процент свойства.
  • Свойство указанного элемента содержит процент свойства.

У меня много раз возникали проблемы с процентным значением свойств line-height (основанных на font-size) и padding и margin (, который основан на на width даже для padding-top и padding-bottom/margin-top и margin-bottom). Я понимаю, что в настоящее время нет способа делать то, о чем я говорю, но я просмотрел спецификацию CSS для всего, что связано с этим, и я пришел с пустыми руками.

Есть ли что-нибудь в текущей спецификации (которую я не смог найти), которая позволяет то, что я пытаюсь сделать? Если в спецификации нет ничего, есть:

  • Любые дискуссии/идеи об этой концепции?
  • По какой-то причине я думаю о невозможности?

Мне кажется, что это должно быть возможно как свойство таким же образом 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 основаны на их процентах с уважением, что является удивительным. Но это не то, что я ищу.

Ответы

Ответ 1

Когда спецификация говорит...

Каждое свойство, которое позволяет проценты, также определяет значение, на которое указывает процент.

... это определение дается спецификацией, а затем соответствующий пользовательский агент реализует вычисление в соответствии со спецификацией. Спецификация не делает никаких ссылок на пользовательские процентные вычисления. Если мне угрожать догадки, вероятно, потому, что он изменил, как встроенный блок CSS в принципе работает, потенциально может открыть разработчиков до множества осложнений.

Функция calc(), введенная здесь в той же спецификации, с которой вы ссылаетесь, сама по себе не позволяет вам указать свойство CSS, либо одного элемента, либо другого элемента, что означает, например, что вы не можете сделать что-то вроде этого:

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

Однако есть недавно опубликованный проект под названием CSS Custom Properties для каскадных переменных, который позволяет авторам указывать собственные значения свойств и использовать их в произвольные наборы правил в таблице стилей. И хотя сам модуль не обсуждает способ определения пользователями процентного соотношения, он обсуждает использование каскадных переменных с помощью 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() работает только с настраиваемыми свойствами, вам нужно

  • объявить значение в своем собственном настраиваемом свойстве, а затем
  • любое свойство, зависящее от этого значения, должно получить доступ к пользовательскому свойству через var().

Но тот факт, что он работает, сам по себе очень, очень многообещающий, и мы можем только надеяться, что этот новый модуль будет продолжать развиваться и быть более широко реализованным.