Я хотел бы использовать переменную CSS для хранения шрифта на случай, если у пользователя не установлен указанный шрифт.
Пример:
:root {
--common-font: Comic Sans MS;
}
.header1 {
font-family: CoolFont1, var(--common-font);
}
Не сломаются ли устаревшие браузеры, если я добавлю ссылку на переменную в названиях шрифтов?
Да, он сломается, вы должны использовать резервный шрифт для устаревшего браузера без использования переменных CSS.
Например:
.header {
font-family: sans-serif; /* This is fallback font for old browsers */
font-family: var(--common-font);
}
Также вы можете использовать условие @supports с фиктивной функцией. запрос:
.header {
@supports ( (--a: 0)) {
/* supported */
font-family: var(--common-font);
}
@supports ( not (--a: 0)) {
/* not supported */
font-family: sans-serif; /* This is fallback font for old browsers */
}
}
Определенно, он сломается в устаревшем браузере. Однако я думаю, что для преобразования можно использовать плагин postcss-css-variables. Так что вы можете продолжать использовать функцию переменных CSS, но не слишком беспокоиться о устаревшем браузере. Когда устаревшие браузеры исчезнут, вы можете просто удалить плагин.
Оформить заказ https://www.npmjs.com/package/postcss-css-variables для подробностей.
Здесь также есть детская площадка, на которой вы можете поиграть, чтобы посмотреть, как она себя ведет.
Например,
:root {
--color-background: #ffaaaa;
--font-color: #2222ff;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: #aaaaff;
--font-color: #ffFF22;
}
}
body {
background-color: var(--color-background);
}
p {
color: var(--font-color);
}
будет преобразован в
body {
background-color: #ffaaaa;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #aaaaff;
}
}
p {
color: #2222ff;
}
@media (prefers-color-scheme: dark) {
p {
color: #ffFF22;
}
}
