Web.QHMIT.com

CSS @page At-Rule

The CSS @page at-rule can be used to apply certain properties and at-rules on paged media.

The @page at-rule can be used on paged media to apply styles that are specific to paged media.

Paged media differs from continous media in that the content is split across one or more discrete static display surfaces. Examples of paged media include printed paper, transparencies, photo albums, a browser's "Print Preview" function, and more.

The @page at-rule helps you to control:

Here's a basic example:

This example sets the margin of all pages to 3 centimeters.

@page Descriptors

The following properties can be used as descriptors within the @page at-rule.

size

Specifies the target size and orientation of the page box's containing block.

Example:

marks

Adds crop and/or registration marks to the document. This is useful for trimming the document after it's been printed.

Example:

bleed

Specifies the extent of the bleed area outside the page box.

Example:

Page Selectors

Consider this example:

We know that it applies to all pages because the @page rule contains no selectors — just the @page rule followed by the declaration block.

You can also use page selectors to be more specific in which pages your styles are applied to and how they're applied.

A page selector is made of either a page type selector or a page pseudo-class.

Page Type Selector

A page type selector is a case-sensitive CSS identifier that matches pages of the named page type generated by the page property. This allows you to refer to that named page when using the @page at-rule.

Here's an example:

This code ensures that any tables are displayed on a landscaped page, and that any other content within a section element is displayed on a portrait page. Even if a table is nested within a section element, it will still be displayed within a landscape page.

Page Pseudo-classes

A page pseudo-class is a type of pseudo-class that has been defined specifically for paged media. Page pseudo-classes allow you to apply different styles depending on whether the page is on the left or right side, whether it's a blank page, or whether it's the first page in the document.

Page pseudo-classes are ASCII case-insensitive and their syntax is just like regular pseudo-classes.

Here are the page pseudo-classes:

:left

When using a double-sided document, :left matches all pages on the left.

Example:

:right

When using a double-sided document, :right matches all pages on the right.

Example:

:first

Matches the first printed page of a document.

Example:

:blank

Matches content-empty pages that appear as a result of forced page breaks.

This can be useful in cases where you want to display a "This page is intentionally left blank" notice or similar. This is a commonly used convention in legal documents, manuals, exam papers, etc and it can communicate to the reader that the blank page is not due to a printing error or some other issue.

Example:

Logical Page Selectors

In addition to the above page pseudo-clases, the following pseudo-classes are defined in CSS Logical Properties Level 1 which is in Editor's Draft status at the time of writing.

:recto
Equivalent to right in left-to-right page progressions and left in right-to-left page progressions.
:verso
Equivalent to left in left-to-right page progressions and right in right-to-left page progressions.

Margin @-Rules

A margin at-rule is an at-rule that identifies the page-margin box (for example @top-left-corner) and a block of descriptors (said to be in the margin context).

Here's a full list of the margin at-rules.

Each of those margin rules can be used to add content to the page-margin box that it represents.

Here's an example of using the @top-left and @top-right margin at-rules to display some text at the top of all pages in a document.

Official Specifications

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.