Page setupBaseline · Newly available
The @page CSS at-rule sets the page-specific dimensions and margins for content such as printed documents, ebooks, or slides.
Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Dec 11, 2024.
Browser support
DesktopChrome
1–14Not supported
15+Supportedsince Oct 25, 2011
Current: 155Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154Firefox
1–94Not supported
95+Supportedsince Dec 7, 2021
Current: 157Safari
1–18.1Not supported
18.2+Supportedsince Dec 11, 2024
Current: 27MobileChrome Android
18+Supportedsince Jun 27, 2012
Current: 155Firefox Android
4–94Not supported
95+Supportedsince Dec 7, 2021
Current: 157Safari iOS
1–18.1Not supported
18.2+Supportedsince Dec 11, 2024
Current: 27How to use
Every current browser supports this, but it only became Baseline on Dec 11, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.
Example
Full syntax and examples are on MDN: @page.
Feature detection
CSS · check before using
@supports (page: initial) {
/* styles that rely on page */
}
/* or in JavaScript */
if (CSS.supports("page", "initial")) {
// use it
}Specification
Usage share
Sub-features
Support for each part of the feature (21). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| @page | 2 | 12 | 19 | 18.2 | 18 | 19 | 18.2 |
| @page.at_bottom-center | 131 | 131 | ✕ | ✕ | 131 | ✕ | ✕ |
| @page.at_bottom-left | 131 | 131 | ✕ | ✕ | 131 | ✕ | ✕ |
| @page.at_bottom-left-corner | 131 | 131 | ✕ | ✕ | 131 | ✕ | ✕ |
| @page.at_bottom-right | 131 | 131 | ✕ | ✕ | 131 | ✕ | ✕ |
| @page.at_bottom-right-corner | 131 | 131 | ✕ | ✕ | 131 | ✕ | ✕ |
| @page.at_left-bottom | 131 | 131 | ✕ | ✕ | 131 | ✕ | ✕ |
| @page.at_left-middle | 131 | 131 | ✕ | ✕ | 131 | ✕ | ✕ |
| @page.at_left-top | 131 | 131 | ✕ | ✕ | 131 | ✕ | ✕ |
| @page.at_right-bottom | 131 | 131 | ✕ | ✕ | 131 | ✕ | ✕ |
| @page.at_right-middle | 131 | 131 | ✕ | ✕ | 131 | ✕ | ✕ |
| @page.at_right-top | 131 | 131 | ✕ | ✕ | 131 | ✕ | ✕ |
| @page.at_top-center | 131 | 131 | ✕ | ✕ | 131 | ✕ | ✕ |
| @page.at_top-left | 131 | 131 | ✕ | ✕ | 131 | ✕ | ✕ |
| @page.at_top-left-corner | 131 | 131 | ✕ | ✕ | 131 | ✕ | ✕ |
| @page.at_top-right | 131 | 131 | ✕ | ✕ | 131 | ✕ | ✕ |
| @page.at_top-right-corner | 131 | 131 | ✕ | ✕ | 131 | ✕ | ✕ |
| @page.size | 15 | 79 | 95 | 18.2 | 18 | 95 | 18.2 |
| @page.size.jis-b4 | 83 | 83 | 95 | 18.2 | 83 | 95 | 18.2 |
| @page.size.jis-b5 | 83 | 83 | 95 | 18.2 | 83 | 95 | 18.2 |
Show 1 more
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| page | 85 | 85 | 110 | 1 | 85 | 110 | 1 |