Что означает ключевое слово 'default' для переменных 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, они также сравнительно редки.