Skip to main content

CSS At-rules

In this section you find the documentation for the supported CSS at-rules.

Prince accepts @-prince as a vendor prefix for Prince-specific at-rules to comply with validators - eg. @-prince-pdf and @-prince-color.

Initial At-Rules​

The following at-rules have to appear at the beginning of the CSS document, and exactly in this order:

@charset

Defines the fallback encoding to use for the stylesheet. Prince supports stylesheets in UTF-8, UTF-16, Latin1 and Windows-1252.

@layer <layer-name>? { <rule-list> } | @layer <layer-name>#

Allows authors to declare a cascade layer, or to define the order of precedence of cascade layers.

@import [ <url(URL)> | <string> ] [ [ layer | layer( <layer-name> ) ] || supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>

Allows authors to import style rules from other style sheets. The url(URL) or <string> give the URL of the style sheet to be imported, while the optional supports(...) expression and <media-query-list> state the import conditions.

@namespace [Prefix]? [ <url(URL)> | <string> ]

Defines a namespace prefix or default namespace to be used in the stylesheet.

@property <custom-property-name> { syntax: <string>; inherits: [ true | false ]; initial-vale: <declaration-value>?; }

Explicitly defines CSS custom properties. The syntax and inherits descriptors are required; as is the initial-value descriptor, unless the value of syntax is the universal syntax definition (syntax : "*").

Nested At-Rules​

After the initial at-rules, the following at-rules can appear also in nested form in the CSS document:

@page <page-selector-list> { <declaration-list> }

Defines the size of a page, and margin, border, padding and background of a document. The pages can be identified by a name, or by a page pseudo-class, and page declarations can either be style declarations or nested page region at-rules. The initial values for @page styles are documented in the Paged Media chapter.

:left

Page pseudo-classes

:right

:recto

:verso

:blank

:first

:nth(N)

:first-of-group

:nth-of-group(N)

@left-top | @left-middle | @left-bottom

Page region at-rules

@right-top | @right-middle | @right-bottom

@top-left-corner | @top-left | @top-center | @top-right | @top-right-corner

@bottom-left-corner | @bottom-left | @bottom-center | @bottom-right | @bottom-right-corner

@page-float-top | @page-float-bottom

@leftnote | @rightnote | @insidenote | @outsidenote

@footnote

@prince-overlay

The @page rule takes CSS properties to style the margins, borders, padding and background. It equally takes color, font and font-height properties that are inherited by the page-margin boxes - note that they are not inherited by the page area content. It also takes the following CSS properties: bleed | marks | -prince-mark-length | -prince-mark-offset | -prince-mark-width | -prince-pdf-page-colorspace | -prince-pdf-page-label | -prince-rotate-body | -prince-shrink-to-fit | -prince-trim | size
Additionally, Prince for Books takes the following CSS property: -prince-page-fill

@media <media-query-list> { <stylesheet> }

The rules will apply if the device meets the criteria of the condition defined in the media query. See CSS Media Queries for details.

@supports <supports-condition> { <stylesheet> }

Checks whether particular property:value combinations are supported. Unlike media queries, this uses the classical two-valued logic.

@font-face { <declaration-list> }

Links a font family to an actual font.
The @font-face rule takes the following CSS descriptors:

font-family: <family-name>

This descriptor defines the font family name that will be used in all CSS font family name matching. It is required for the @font-face rule to be valid.

src: [ url(<URL>) format(<string>#)? | local(<family-name>) | prince-lookup(<family-name>) ]#

This descriptor specifies the resource containing font data. It is required for the @font-face rule to be valid. The local() function searches for locally installed system fonts, but prince-lookup() will also find fonts defined by other @font-face rules.

unicode-range: <urange>#

This descriptor defines the set of Unicode codepoints that may be supported by the font face. The descriptor value is a comma-delimited list of Unicode range values.
Additionally, @font-face takes the CSS descriptors font-variant, font-stretch, font-weight and font-style, which take the same values as the CSS properties with the same name.

@font-feature-values <font-family-name># { <declaration-list> }

Allows for a user-friendly name in the font-variant-alternates property for OpenType features. Each of the following font feature values has the same meaning as the corresponding value of the CSS property.

@stylistic { <declaration-list> }

Font feature values

@historical-forms { <declaration-list> }

@styleset { <declaration-list> }

@character-variant { <declaration-list> }

@swash { <declaration-list> }

@ornaments { <declaration-list> }

@annotation { <declaration-list> }

@counter-style <counter-style-name> { <declaration-list> }

Extends predefined list styles with custom counter styles.
The @counter-styles rule takes the following CSS descriptors:

system: cyclic | numeric | alphabetic | symbolic | additive | [ fixed <integer>? ] | [ extends <counter-style-name> ]

This descriptor specifies how to represent a counter value.

symbols: [ <string> | <custom-ident> ]+

This descriptor specifies the symbols used to represent a counter value.

additive-symbols: [ <integer[0,∞]> && [ <string> | <custom-ident> ] ]#

This descriptor specifies the symbols used to represent a counter value when the system descriptor is set to additive.

negative: [ <string> | <custom-ident> ] [ <string> | <custom-ident> ]?

This descriptor specifies how negative counter values are represented.

prefix: <string> | <custom-ident>

This descriptor specifies content added to the beginning of a custom counter representation.

suffix: <string> | <custom-ident>

This descriptor specifies content added to the end of a custom counter representation.

range: [ [ <integer> | infinite ]{2} ]# | auto

This descriptor specifies one or more ranges of counter values for which the style is applied.

pad: <integer[0,∞]> && [ <string> | <custom-ident> ]

This descriptor specifies the minimum length for marker representations.

fallback: <counter-style-name>

This descriptor specifies a counter style to fall back to if the defined style cannot be created.
Additionally, @counter-style takes the CSS descriptors -prince-pdf-page-numbering and -prince-pdf-list-numbering.

@prince-color <color-name> { alternate-color: <color> }

Defines a new color name.
The @prince-color rule takes the mandatory alternate-color descriptor to specify an alternate color to use if the named spot color is not available. The named color is used in a stylesheet with the prince-color() function. (See Spot colors).

@prince-pdf { <declaration-list> }

Defines properties relating to PDFs.
The @prince-pdf rule takes the following CSS descriptors: -prince-fallback-cmyk-profile | -prince-filter-resolution | -prince-pdf-color-conversion | -prince-pdf-color-options | -prince-pdf-display-doc-title | -prince-pdf-duplex | -prince-pdf-event-scripts | -prince-pdf-open-action | -prince-pdf-output-intent | -prince-pdf-page-layout | -prince-pdf-page-mode | -prince-pdf-paper-tray | -prince-pdf-print-scaling | -prince-pdf-profile | -prince-pdf-role-map | -prince-pdf-script | -prince-pdf-tagged | -prince-pdf-xmp