Использование пользовательских свойств с правилами @page

Question

Я пытаюсь использовать пользовательские свойства CSS вместе с правилами @page, но, похоже, это не работает. Это имеет смысл, так как переменные css каскадно и :root селектор и правило @page не имеют дочерних / родительских отношений.

Ниже приведен типичный пример того, что я хотел бы сделать:

:root {
    --page-width: 148.5mm;
    --page-height: 210mm;
}

@page  {
    size: var(--page-width) var(--page-height);
}

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

Answer 1

Каскадные переменные CSS и :root селектор и правило @page не имеют дочерних / родительских отношений.

@page правила каскад тоже. А контекст страницы действительно наследуется от корневого элемента, что означает не только @page правила каскада, но они участвуют в том же каскаде, что и правила стиля. Но поскольку этого не было в спецификации десять лет назад, реализации, в которых контекст страницы не наследуется от корневого элемента, по-прежнему соответствуют спецификации.

Хотя это означает, что вы не должны полагаться на @page правила наследования пользовательских свойств от :rootэто также означает, что @page сам по себе принимает пользовательские свойства, что делает наследование не проблемой. Итак, ожидается, что будет работать следующее, но это не так - кажется, что каждый браузер не может создать пользовательские свойства:

@page {
    --page-width: 148.5mm;
    --page-height: 210mm;
    size: var(--page-width) var(--page-height);
}

Интересно, что у Firefox и Chrome нет проблем с разбором и вычислениями var() выражения с запасными значениями в @page декларации стиля, в то время как Microsoft Edge не может это сделать, а это означает, что в результате Firefox и Chrome каждая страница будет иметь поля по 25 мм:

@page {
    --page-margin: 50mm;
    margin: var(--page-margin, 25mm);
}

Короче говоря, пользовательские свойства в @page правила не работают - не потому, что спецификация не позволяет этого, а потому, что реализация пользовательских свойств в каждом браузере является неполной.