Разрешены ли все правила CSS для всех элементов HTML и могут ли они быть унаследованы? - PullRequest
Новая
       21

Разрешены ли все правила CSS для всех элементов HTML и могут ли они быть унаследованы?

2 голосов
/ 27 марта 2020

Учитывая, что определенные правила CSS адаптированы для конкретных c HTML элементов (некоторые примеры - object-fit для <img>, <video>, et c .; stroke, fill и другие правила SVG для различных элементов SVG) и не имеют особого смысла при использовании с другими элементами:

  1. допустимо ли применять любое действительное CSS правило к любому элементу HTML?
  2. может ли быть унаследовано какое-либо правило?
  3. что такое унаследованное значение, особенно в случаях, когда оно наследуется от элемент, в котором использование свойства Speci c не имеет смысла?

Моя проблема в Speci c заключается в следующем. Я разрабатываю компонент кнопки с модульным CSS. Внутри этой кнопки у меня может быть элемент SVG для отображения иконки. Я хочу иметь возможность применять определенные стили к значкам (а именно, обводку и заливку) снаружи компонента, сохраняя при этом надлежащую инкапсуляцию (поэтому глубокие селекторы - нет-нет).

Для решения проблемы я установите SVG для наследования штриха и заполнения кнопки. Если я теперь применю эти свойства к кнопке, значок унаследует их, и я получу желаемый результат!

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

Это может показаться здравым смыслом, но найти определенный ответ на удивление сложно. Если бы кто-то мог указать мне на отрывок из спецэффекта c и, возможно, даже на некоторые таблицы поддержки, я был бы счастлив!

Показывать 100% точный пример - это слишком много, учитывая, как Я пишу свой код, но в основном я спрашиваю, действительно ли это: 

.icon {
  stroke: inherit;
  fill: inherit;
}

.button {
  stroke: #FFF;
  fill: #999;
}
<button class="button">
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
    <g stroke-width="2" transform="translate(1 1)">
      <path d="M14 2L2 14"/>
      <circle cx="8" cy="8" r="8"/>
    </g>
  </svg>
  <span>My button</span>
</button>

Ответы [ 2 ]

3 голосов
/ 27 марта 2020

все еще законно применить какое-либо действительное правило CSS к любому элементу HTML?

Да, но он может просто игнорироваться вашим браузером, если он не поддерживается или не поддерживается. неприменимо к такому элементу.

Кроме того, может ли какое-либо правило быть унаследовано?

Да, но следует учитывать, что наследование учитывает вычисленное значение и это может иметь значение:

Ключевое слово наследовать CSS заставляет элемент, для которого оно указано, принимать вычисленное значение свойства от его родительского элемента . Он может быть применен к любому CSS свойству , включая CSS стенографию all. ref

У меня нет тривиального примера, связанного с SVG, но вот еще один: 

.box {
  display:inline-block;
  float:left;
  width:200px;
  height:200px;
  border:1px solid red;
}

.box > div {
  display:inherit;
  border:1px solid green;
}
<div class="box">
  <div>text</div>
</div>

Обратите внимание, что внутренний div будет иметь display, равный block, а не inline-block, потому что float заставит вычисленное значение отображения быть блок для .box

Чтобы избежать проблемы наследования, вы можете рассмотреть CSS переменные для вашего случая: 

.icon {
  stroke: var(--s);
  fill: var(--f);
}

.button {
  --s: #FFF;
  --f: #999;
}
<button class="button">
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
    <g stroke-width="2" transform="translate(1 1)">
      <path d="M14 2L2 14"/>
      <circle cx="8" cy="8" r="8"/>
    </g>
  </svg>
  <span>My button</span>
</button>
0 голосов
/ 29 марта 2020

Ответ Темани был очень полезным и указал мне правильное направление. После небольшого исследования я думаю, что теперь я могу опубликовать более подробный и правильно подобранный ответ на свой вопрос.

Законно ли применять любое действительное правило CSS к любому элементу HTML?

Да, это . Это четко указано в CSS2.1 spe c: https://www.w3.org/TR/CSS2/about.html#applies -to (CSS3 является модульно-обратно-совместимым расширением CSS2.1, так что это все еще применяется). В нем говорится:

Считается, что все элементы имеют все свойства, но некоторые свойства не оказывают влияния на некоторые типы элементов. Например, свойство 'clear' влияет только на элементы уровня блока.

Считается, что все элементы имеют все свойства неявно означает, что любое свойство может быть установлено для любого элемента.

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

Может ли какое-либо правило быть унаследованным?

Чтобы ответить на этот вопрос, давайте рассмотрим CSS Значения и единицы Уровень модуля 3 spe c : https://www.w3.org/TR/css3-values/#common -ключевые слова . В нем говорится, что:

Все CSS свойства также принимают значения ключевых слов CSS в качестве единственного компонента значения их свойства.

Существует три CSS значения ключевых слов: initial, inherit и unset.

spe c фактически говорит, что любое свойство может использовать inherit в качестве значения, таким образом, ответ на вопрос да . Важной деталью, однако, является то, как определяется наследуемое значение. Как уже указывал Темани, это не так просто, как может показаться.

Как вычисляются унаследованные значения?

Отличным показателем каскадирования и наследования является CSS Уровень каскадирования и наследования 3 spe c: https://www.w3.org/TR/css-cascade-3/. В нем говорится, что:

Унаследованным значением свойства элемента является вычисленное значение свойства родительского элемента элемента.

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

  1. Соберите все объявленные значения для свойства для элемента - т.е. все соответствующие и действительные объявления CSS, найденные в таблицах стилей разработчика и атрибутах стилей, таблицах стилей пользовательского агента и т. д. c.
  2. Определите каскадное значение - выигрыш значение всех объявленных значений (в этом случае правила имеют приоритет, а одно выходит сверху).
  3. Если каскадного значения нет, используйте унаследованное значение , если свойство имеет наследуется.
  4. Если свойство не наследуется (см. этот вопрос для получения списка свойств, которые наследуются по умолчанию: Какие CSS свойства наследуются? * 10 78 *), используйте начальное значение . Каждое свойство имеет начальное значение в соответствии со значением c (например, начальное значение font-size равно medium; стоит отметить, что оно не является абсолютным значением, как 16px!).

  5. В этот момент для свойства будет присвоено некоторое значение, назначенное ему, но оно может быть относительным значением, т.е. зависеть от некоторые другие свойства CSS (например, процентное значение зависит от некоторого абсолютного значения, такого как абсолютные измерения родителя). На этом шаге значение будет разрешено настолько, насколько это возможно, чтобы оно было однозначным и готово к наследованию .

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

, как указано, но с относительными длинами, преобразованными в абсолютные длины

Таким образом, medium остается medium, но 1.2em становится, скажем, 19.2px (если размер шрифта родителя 16px).

Важный бит

То же каскадное и наследуемое spe c указывает, что:

Вычисленное значение существует, даже если свойство не применяется (как определено в строке «Применяется к»). Однако некоторые свойства могут изменить способ определения вычисленного значения в зависимости от того, применяется ли свойство к элементу.

Таким образом, каждый элемент будет иметь вычисленное значение для каждого свойство , но не может его использовать (так называемое используемое значение , которое является следующим шагом после вычисленного значения, равно none). Вычисленное значение - это то, что будет унаследовано.

Что все это означает для моего примера кнопки SVG:

  1. Мне определенно разрешено устанавливать stroke и fill на <button>. Он будет игнорировать это свойство при рендеринге, но при необходимости передаст его своим дочерним элементам.
  2. Дочерний SVG будет наследовать эти свойства по умолчанию (мне даже не нужно явно укажите это).
  3. Вычисленные значения для stroke и fill не имеют никаких оговорок, поэтому я могу ожидать, что правильный цвет будет унаследован (и это так!).
...