#css
#css
Вопрос:
Я столкнулся со следующим синтаксисом:
border-color: var(--disabled) defau<
что неправильно интерпретируется моим минификатором css (он считает, что это чередующиеся цвета — сверху-снизу и слева-справа).
К сожалению, я не могу найти никакой документации по функции css. Кто-нибудь может указать мне на название функции / документацию?
Посмотрите на это в действии (я тестировал это в Chrome):
:root {
--disabled: #0000DD;
}
.status-parent {
color: red;
}
.status {
border-width: 5px;
border-style: solid;
border-color: var(--disabled) defau<
}
<p class="status-parent">
<span class="status">I have red border</span>
</p>
Комментарии:
1. Не хочу быть придирчивым, но, возможно, вы хотите знать: разве это не было бы «отключено» вместо «отключено»?
2. Где вы с ним столкнулись? Вы уверены, что они поняли это правильно?
3. значение по умолчанию в этом контексте не имеет ничего общего с переменной, оно пытается установить цвет одной из сторон границы на ‘default’, который не является цветом, поэтому свойство завершается сбоем и наследует красный цвет от своего родителя.
4.
border-color
не имеет значения по умолчанию.5. @dantheman93 Я рад принять это как правильный ответ. Меня ввел в заблуждение тот факт, что Chrome не помечает
var(--disabled) default
недопустимое значение (default
действительно помечено как недопустимое). Теперь я проверяю, что могу добавлять любой мусорvar(--dissabled) invalidvalue
, и это не применяет правило, но не помечает его как недопустимое.
Ответ №1:
border-color
не имеет значенияумолчанию. Следовательно, это правило игнорируется браузером.
С вашими переменными CSS проблем нет. Ниже приведен тот же код, default
замененный на yellow
:
:root {
--dissabled: #0000DD;
}
.status-parent {
color: red;
}
.status {
border-width: 5px;
border-style: solid;
border-color: var(--dissabled) yellow;
padding:0.5rem;
}
<p class="status-parent">
<span class="status">I have red border</span>
</p>
Поскольку специфика CSS .status
переопределяет родительский параметр color
для границы, вы увидите, что переменная (blue) определяет верхнюю и нижнюю границы, а второй аргумент yellow — левую и правую границы.
Комментарии:
1. Спасибо, как отмечалось в вопросе, меня ввел в заблуждение инструментарий —
var(--disabled) default
не помечен в Chrome как недопустимый синтаксис (хотяdefault
есть) — я неправильно предположил, что это должна быть какая-то особенность переменных CSS.2. @Lesiak честно говоря, переменные CSS кажутся не совсем удобными в рамках программирования CSS, они также сравнительно редки.