CSS support

Every standard CSS property, at-rule, selector and value type, and whether PdfPecker draws it. Of the 602 properties below, PdfPecker supports 406, supports 15 in part and leaves out 70. Another 111 are for scrolling, animation and interaction, which have no effect on a printed page, so PdfPecker ignores them on purpose. HTML and CSS support explains how the supported features behave, and Limitations describes the gaps.

A declaration PdfPecker does not support is dropped like any unknown property: the rest of the rule still applies and the conversion does not fail. The property list is the standards-track properties in MDN's browser compatibility data, grouped by the specification that defines them, plus the paged media properties PdfPecker reads. Property names link to MDN.

Properties

Box model and sizing

Property	PdfPecker	Notes
`aspect-ratio`	✓ Yes
`block-ellipsis`	✓ Yes	auto or a string of your own ends a block cut short by line-clamp.
`block-size`	✓ Yes
`box-sizing`	✓ Yes
`column-width`	✓ Yes
`contain`	✕ No	Layout is the same without it.
`contain-intrinsic-block-size`	✕ No	Only matters with content-visibility.
`contain-intrinsic-height`	✕ No	Only matters with content-visibility.
`contain-intrinsic-inline-size`	✕ No	Only matters with content-visibility.
`contain-intrinsic-size`	✕ No	Only matters with content-visibility.
`contain-intrinsic-width`	✕ No	Only matters with content-visibility.
`content-visibility`	✕ No	Content is drawn even when set to hidden.
`continue`	✓ Yes	auto and discard, which keeps a box to its first fragment.
`display`	✓ Yes	block, inline, inline-block, flow-root, flex, grid, list-item, contents, none, every table value, two-value forms and -webkit-box.
`frame-sizing`	✕ No	Iframes are not loaded.
`height`	✓ Yes
`inline-size`	✓ Yes
`line-clamp`	✓ Yes	Also -webkit-line-clamp with display: -webkit-box.
`margin`	✓ Yes
`margin-block`	✓ Yes
`margin-block-end`	✓ Yes
`margin-block-start`	✓ Yes
`margin-bottom`	✓ Yes
`margin-inline`	✓ Yes
`margin-inline-end`	✓ Yes
`margin-inline-start`	✓ Yes
`margin-left`	✓ Yes
`margin-right`	✓ Yes
`margin-top`	✓ Yes
`margin-trim`	✕ No
`max-block-size`	✓ Yes
`max-height`	✓ Yes
`max-inline-size`	✓ Yes
`max-lines`	✕ No	Use the line-clamp shorthand.
`max-size`	✕ No	Newer shorthand; use max-width and max-height.
`max-width`	✓ Yes
`min-block-size`	✓ Yes
`min-height`	✓ Yes
`min-inline-size`	✓ Yes
`min-size`	✕ No	Newer shorthand; use min-width and min-height.
`min-width`	✓ Yes
`order`	✓ Yes
`overflow`	✓ Yes	auto and scroll clip like hidden, since paper cannot scroll.
`overflow-block`	✕ No	Only the media feature of that name is answered.
`overflow-clip-margin`	✓ Yes	padding-box, border-box or content-box, grown or pulled in by a length, for overflow: clip.
`overflow-inline`	✕ No	Only the media feature of that name is answered.
`overflow-x`	✓ Yes	As overflow.
`overflow-y`	✓ Yes	As overflow.
`padding`	✓ Yes
`padding-block`	✓ Yes
`padding-block-end`	✓ Yes
`padding-block-start`	✓ Yes
`padding-bottom`	✓ Yes
`padding-inline`	✓ Yes
`padding-inline-end`	✓ Yes
`padding-inline-start`	✓ Yes
`padding-left`	✓ Yes
`padding-right`	✓ Yes
`padding-top`	✓ Yes
`reading-flow`	– No effect	Only changes keyboard focus order.
`reading-order`	– No effect	Only changes keyboard focus order.
`scroll-axis-lock`	– No effect
`scroll-behavior`	– No effect
`scroll-marker-group`	– No effect
`scroll-target-group`	– No effect
`scrollbar-gutter`	– No effect
`size`	✓ Yes	The @page descriptor: A4, Letter, landscape or any length.
`text-overflow`	✓ Yes	ellipsis, clip and strings.
`visibility`	½ Partly	collapse acts as hidden, so a collapsed table row or column keeps its room.
`width`	✓ Yes	Also min-content, max-content, fit-content, stretch and -webkit-fill-available.

Borders, outlines and shadows

Property	PdfPecker	Notes
`border`	✓ Yes
`border-block`	✓ Yes
`border-block-color`	✓ Yes
`border-block-end`	✓ Yes
`border-block-end-color`	✓ Yes
`border-block-end-style`	✓ Yes
`border-block-end-width`	✓ Yes
`border-block-start`	✓ Yes
`border-block-start-color`	✓ Yes
`border-block-start-style`	✓ Yes
`border-block-start-width`	✓ Yes
`border-block-style`	✓ Yes
`border-block-width`	✓ Yes
`border-bottom`	✓ Yes
`border-bottom-color`	✓ Yes
`border-bottom-left-radius`	✓ Yes
`border-bottom-right-radius`	✓ Yes
`border-bottom-style`	✓ Yes
`border-bottom-width`	✓ Yes
`border-color`	✓ Yes
`border-end-end-radius`	✓ Yes
`border-end-start-radius`	✓ Yes
`border-image`	✓ Yes
`border-image-outset`	✓ Yes
`border-image-repeat`	✓ Yes
`border-image-slice`	✓ Yes
`border-image-source`	✓ Yes
`border-image-width`	✓ Yes
`border-inline`	✓ Yes
`border-inline-color`	✓ Yes
`border-inline-end`	✓ Yes
`border-inline-end-color`	✓ Yes
`border-inline-end-style`	✓ Yes
`border-inline-end-width`	✓ Yes
`border-inline-start`	✓ Yes
`border-inline-start-color`	✓ Yes
`border-inline-start-style`	✓ Yes
`border-inline-start-width`	✓ Yes
`border-inline-style`	✓ Yes
`border-inline-width`	✓ Yes
`border-left`	✓ Yes
`border-left-color`	✓ Yes
`border-left-style`	✓ Yes
`border-left-width`	✓ Yes
`border-radius`	✓ Yes	Elliptical radii and percentages.
`border-right`	✓ Yes
`border-right-color`	✓ Yes
`border-right-style`	✓ Yes
`border-right-width`	✓ Yes
`border-shape`	✕ No
`border-start-end-radius`	✓ Yes
`border-start-start-radius`	✓ Yes
`border-style`	✓ Yes
`border-top`	✓ Yes
`border-top-color`	✓ Yes
`border-top-left-radius`	✓ Yes
`border-top-right-radius`	✓ Yes
`border-top-style`	✓ Yes
`border-top-width`	✓ Yes
`border-width`	✓ Yes
`box-shadow`	✓ Yes	Inset shadows on inline elements are not drawn.
`corner-block-end-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`corner-block-start-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`corner-bottom-left-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`corner-bottom-right-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`corner-bottom-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`corner-end-end-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`corner-end-start-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`corner-inline-end-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`corner-inline-start-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`corner-left-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`corner-right-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`corner-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`corner-start-end-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`corner-start-start-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`corner-top-left-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`corner-top-right-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`corner-top-shape`	✓ Yes	Shapes the border-radius corners, as Chrome draws them.
`outline`	✓ Yes
`outline-color`	✓ Yes
`outline-offset`	✓ Yes
`outline-style`	✓ Yes
`outline-width`	✓ Yes

Backgrounds and images

Property	PdfPecker	Notes
`background`	✓ Yes	Several layers, gradients and images.
`background-attachment`	✓ Yes	fixed images are placed against the paper on every page, as in Chrome; fixed gradients move with their box.
`background-clip`	✓ Yes	Also text and -webkit-background-clip.
`background-color`	✓ Yes
`background-image`	✓ Yes
`background-origin`	✓ Yes
`background-position`	✓ Yes
`background-position-x`	✓ Yes
`background-position-y`	✓ Yes
`background-repeat`	✓ Yes
`background-repeat-x`	✕ No	Use background-repeat.
`background-repeat-y`	✕ No	Use background-repeat.
`background-size`	✓ Yes
`image-orientation`	✓ Yes	from-image (the EXIF orientation) and none.
`image-rendering`	✓ Yes	pixelated and crisp-edges write enlarged images with their pixels repeated, so every viewer shows them sharp.
`object-fit`	✓ Yes
`object-position`	✓ Yes
`object-view-box`	✕ No

Positioning, floats and shapes

Property	PdfPecker	Notes
`anchor-name`	✕ No	Anchor positioning is not supported.
`anchor-scope`	✕ No	Anchor positioning is not supported.
`bottom`	✓ Yes
`clear`	✓ Yes
`float`	✓ Yes	Also inline-start, inline-end and footnote.
`inset`	✓ Yes
`inset-block`	✓ Yes
`inset-block-end`	✓ Yes
`inset-block-start`	✓ Yes
`inset-inline`	✓ Yes
`inset-inline-end`	✓ Yes
`inset-inline-start`	✓ Yes
`left`	✓ Yes
`overlay`	– No effect	Only for dialogs and popovers in the top layer.
`position`	✓ Yes	fixed repeats on every page; sticky is drawn as relative, as in Chrome print.
`position-anchor`	✕ No	Anchor positioning is not supported.
`position-area`	✕ No	Anchor positioning is not supported.
`position-try`	✕ No	Anchor positioning is not supported.
`position-try-fallbacks`	✕ No	Anchor positioning is not supported.
`position-try-order`	✕ No	Anchor positioning is not supported.
`position-visibility`	✕ No	Anchor positioning is not supported.
`right`	✓ Yes
`shape-image-threshold`	✓ Yes
`shape-margin`	✓ Yes
`shape-outside`	✓ Yes	Basic shapes, boxes and images; SVG images fall back to the margin box.
`top`	✓ Yes
`z-index`	✓ Yes

Flexbox, grid and alignment

Property	PdfPecker	Notes
`align-content`	✓ Yes
`align-items`	✓ Yes
`align-self`	✓ Yes
`fit-tolerance`	✕ No
`flex`	✓ Yes
`flex-basis`	✓ Yes
`flex-direction`	✓ Yes
`flex-flow`	✓ Yes
`flex-grow`	✓ Yes
`flex-line-count`	✕ No
`flex-shrink`	✓ Yes
`flex-wrap`	✓ Yes
`grid`	✓ Yes	Template forms and auto-flow forms.
`grid-area`	✓ Yes
`grid-auto-columns`	✓ Yes
`grid-auto-flow`	✓ Yes	Including dense.
`grid-auto-rows`	✓ Yes
`grid-column`	✓ Yes
`grid-column-end`	✓ Yes
`grid-column-start`	✓ Yes
`grid-row`	✓ Yes
`grid-row-end`	✓ Yes
`grid-row-start`	✓ Yes
`grid-template`	✓ Yes
`grid-template-areas`	✓ Yes
`grid-template-columns`	✓ Yes	repeat(), minmax(), fit-content(), named lines and subgrid (horizontal writing modes).
`grid-template-rows`	✓ Yes	As grid-template-columns.
`justify-content`	✓ Yes
`justify-items`	✓ Yes
`justify-self`	✓ Yes
`place-content`	✓ Yes
`place-items`	✓ Yes
`place-self`	✓ Yes

Multi-column and gap rules

Property	PdfPecker	Notes
`column-count`	✓ Yes
`column-fill`	✓ Yes
`column-gap`	✓ Yes
`column-height`	✕ No
`column-rule`	✓ Yes	Between the columns of multi-column, grid and flex containers.
`column-rule-break`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`column-rule-color`	✓ Yes
`column-rule-inset`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`column-rule-inset-cap`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`column-rule-inset-cap-end`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`column-rule-inset-cap-start`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`column-rule-inset-end`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`column-rule-inset-junction`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`column-rule-inset-junction-end`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`column-rule-inset-junction-start`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`column-rule-inset-start`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`column-rule-style`	✓ Yes
`column-rule-visibility-items`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`column-rule-width`	✓ Yes
`column-span`	✓ Yes	all works on direct children of the multi-column box.
`column-wrap`	✕ No
`columns`	✓ Yes
`gap`	✓ Yes
`row-gap`	✓ Yes
`row-rule`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`row-rule-break`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`row-rule-color`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`row-rule-inset`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`row-rule-inset-cap`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`row-rule-inset-cap-end`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`row-rule-inset-cap-start`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`row-rule-inset-end`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`row-rule-inset-junction`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`row-rule-inset-junction-end`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`row-rule-inset-junction-start`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`row-rule-inset-start`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`row-rule-style`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`row-rule-visibility-items`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`row-rule-width`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`rule`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`rule-break`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`rule-color`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`rule-inset`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`rule-inset-cap`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`rule-inset-end`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`rule-inset-junction`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`rule-inset-start`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`rule-overlap`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`rule-style`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`rule-visibility-items`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.
`rule-width`	✓ Yes	Gap decorations in grid, flex and multi-column containers, as Chromium draws them.

Fonts

Property	PdfPecker	Notes
`font`	✓ Yes
`font-family`	✓ Yes	Bundled fonts, @font-face and fonts you register.
`font-feature-settings`	✓ Yes	Contextual lookups too, through the shaper, for the features you turn on.
`font-kerning`	✓ Yes
`font-language-override`	✕ No
`font-optical-sizing`	✓ Yes
`font-palette`	✕ No
`font-size`	✓ Yes
`font-size-adjust`	✓ Yes
`font-stretch`	✓ Yes
`font-style`	✓ Yes
`font-synthesis`	✓ Yes
`font-synthesis-position`	✓ Yes
`font-synthesis-small-caps`	✓ Yes
`font-synthesis-style`	✓ Yes
`font-synthesis-weight`	✓ Yes
`font-variant`	½ Partly	Contextual alternates (calt) are not on by default as in browsers; small caps are synthesized when the font lacks them.
`font-variant-alternates`	✕ No
`font-variant-caps`	✓ Yes	Small caps are synthesized when the font has no smcp feature, as in Chrome.
`font-variant-east-asian`	✓ Yes
`font-variant-emoji`	✕ No
`font-variant-ligatures`	½ Partly	Contextual alternates (calt) are not on by default as in browsers.
`font-variant-numeric`	✓ Yes
`font-variant-position`	✓ Yes
`font-variation-settings`	✓ Yes
`font-weight`	✓ Yes
`font-width`	✓ Yes	The new name of font-stretch.

Text, lines and writing modes

Property	PdfPecker	Notes
`alignment-baseline`	✓ Yes	In SVG text.
`baseline-shift`	✕ No
`baseline-source`	✕ No
`direction`	✓ Yes
`dominant-baseline`	✓ Yes	In SVG text.
`glyph-orientation-vertical`	✕ No
`hanging-punctuation`	✕ No
`hyphenate-character`	✓ Yes
`hyphenate-limit-chars`	✓ Yes
`hyphenate-limit-lines`	✓ Yes
`hyphens`	✓ Yes	Built-in dictionaries for many languages, chosen by lang.
`initial-letter`	✓ Yes	On ::first-letter, as in Chrome; not in vertical writing modes.
`letter-spacing`	✓ Yes
`line-break`	✓ Yes
`line-height`	✓ Yes
`math-depth`	✕ No	MathML is not laid out.
`math-shift`	✕ No	MathML is not laid out.
`math-style`	✕ No	MathML is not laid out.
`overflow-wrap`	✓ Yes
`ruby-align`	✕ No	Ruby annotations are not laid out.
`ruby-overhang`	✕ No	Ruby annotations are not laid out.
`ruby-position`	✕ No	Ruby annotations are not laid out.
`tab-size`	✓ Yes
`text-align`	✓ Yes	Right-to-left and bidi lines justify at spaces only.
`text-align-last`	✓ Yes
`text-autospace`	✕ No
`text-box`	✓ Yes	Trims block lines as Chrome does; inline boxes are not trimmed, as in Chrome.
`text-box-edge`	✓ Yes
`text-box-trim`	✓ Yes
`text-combine-upright`	✕ No
`text-fit`	✕ No
`text-indent`	✓ Yes
`text-justify`	✓ Yes	inter-character spreads CJK text.
`text-orientation`	✕ No	No upright CJK in vertical text.
`text-spacing-trim`	½ Partly	normal, space-all, space-first and trim-start; needs a font with the halt feature.
`text-transform`	✓ Yes
`text-wrap`	✓ Yes	balance (up to six lines), pretty and stable.
`text-wrap-mode`	✓ Yes
`text-wrap-style`	✓ Yes	As text-wrap.
`unicode-bidi`	✓ Yes
`vertical-align`	✓ Yes	Keywords, lengths and percentages.
`-webkit-text-fill-color`	✓ Yes
`-webkit-text-stroke`	✓ Yes	Text stays selectable text.
`-webkit-text-stroke-color`	✓ Yes
`-webkit-text-stroke-width`	✓ Yes
`white-space`	✓ Yes
`white-space-collapse`	✓ Yes	break-spaces acts as preserve.
`white-space-trim`	✕ No
`word-break`	✓ Yes
`word-spacing`	✓ Yes
`wrap-inside`	✕ No
`writing-mode`	½ Partly	Vertical modes are drawn as turned horizontal text, as Chrome does for Latin; CJK is not set upright.

Text decoration

Property	PdfPecker	Notes
`text-decoration`	✓ Yes
`text-decoration-color`	✓ Yes
`text-decoration-inset`	✕ No
`text-decoration-line`	✓ Yes
`text-decoration-skip`	✕ No	Use text-decoration-skip-ink.
`text-decoration-skip-ink`	✓ Yes
`text-decoration-skip-spaces`	✕ No
`text-decoration-style`	✓ Yes	Wavy and dashed lines differ a little from Chrome.
`text-decoration-thickness`	✓ Yes
`text-emphasis`	✓ Yes	Marks drawn as Chrome draws them.
`text-emphasis-color`	✓ Yes
`text-emphasis-position`	✓ Yes
`text-emphasis-style`	✓ Yes
`text-shadow`	✓ Yes
`text-underline-offset`	✓ Yes
`text-underline-position`	✓ Yes	under and from-font, as in Chrome.

Colour, effects and masks

Property	PdfPecker	Notes
`backdrop-filter`	✓ Yes	The backdrop is a 144 dpi raster; up to 64 per document. Also -webkit-backdrop-filter.
`background-blend-mode`	✓ Yes
`clip`	✓ Yes	rect() on absolutely and fixed positioned boxes. Deprecated; clip-path is the modern form.
`clip-path`	✓ Yes	Basic shapes (also rect() and xywh()), reference boxes and url(#id).
`clip-rule`	✓ Yes
`color`	✓ Yes	Every colour syntax; wide-gamut colours are mapped to sRGB.
`color-adjust`	– No effect	Backgrounds always print, as with exact.
`color-interpolation-filters`	✓ Yes
`color-scheme`	– No effect	Pages are always light, as in print.
`dynamic-range-limit`	– No effect
`filter`	✓ Yes	blur() and drop-shadow() are rasterized at 144 dpi; the rest stay vector.
`flood-color`	✓ Yes
`flood-opacity`	✓ Yes
`forced-color-adjust`	– No effect
`isolation`	✓ Yes
`lighting-color`	✓ Yes
`mask`	✓ Yes	Soft masks on HTML and SVG; text stays text. Also -webkit-mask.
`mask-border`	✕ No
`mask-border-outset`	✕ No
`mask-border-repeat`	✕ No
`mask-border-slice`	✕ No
`mask-border-source`	✕ No
`mask-border-width`	✕ No
`mask-clip`	✓ Yes
`mask-composite`	✓ Yes
`mask-image`	✓ Yes
`mask-mode`	✓ Yes
`mask-origin`	✓ Yes
`mask-position`	✓ Yes
`mask-repeat`	✓ Yes
`mask-size`	✓ Yes
`mask-type`	✓ Yes
`mix-blend-mode`	✓ Yes
`opacity`	✓ Yes
`print-color-adjust`	– No effect	Backgrounds always print, as with exact.

Transforms and motion paths

Property	PdfPecker	Notes
`backface-visibility`	½ Partly	Drawn as Chrome print does.
`offset`	✕ No	Motion paths are not supported.
`offset-anchor`	✕ No
`offset-distance`	✕ No
`offset-path`	✕ No
`offset-position`	✕ No
`offset-rotate`	✕ No
`perspective`	½ Partly	Flattened; perspective boxes stay parallelograms.
`perspective-origin`	½ Partly	Flattened with perspective.
`rotate`	✓ Yes	3D axes are flattened.
`scale`	✓ Yes
`transform`	½ Partly	2D is exact; 3D functions are flattened because PDF is affine.
`transform-box`	✓ Yes	On SVG elements and HTML boxes.
`transform-origin`	✓ Yes
`transform-style`	½ Partly	preserve-3d is flattened.
`translate`	✓ Yes

Lists, counters and generated content

Property	PdfPecker	Notes
`content`	✓ Yes	Strings, attr(), counters, quotes, string(), target-counter(), target-text(), leader(), and url() and gradients as inline images.
`counter-increment`	✓ Yes
`counter-reset`	✓ Yes
`counter-set`	✓ Yes
`list-style`	✓ Yes
`list-style-image`	✓ Yes	Images, image-set() and gradients.
`list-style-position`	✓ Yes
`list-style-type`	✓ Yes	Every Counter Styles 3 style and @counter-style.
`quotes`	✓ Yes	Including auto by lang.

Tables

Property	PdfPecker	Notes
`border-collapse`	✓ Yes	Collapsed-border conflicts can differ from Chrome in rare cases.
`border-spacing`	✓ Yes
`caption-side`	✓ Yes
`empty-cells`	✓ Yes
`table-layout`	✓ Yes

Paged media and breaks

Property	PdfPecker	Notes
`bookmark-label`	✓ Yes	content(), strings and attr().
`bookmark-level`	✓ Yes	Makes any block a bookmark, or leaves a heading out with none.
`bookmark-state`	✓ Yes	open or closed.
`box-decoration-break`	✓ Yes	clone and slice, on inline boxes and on blocks split across pages, as Chrome prints them.
`break-after`	✓ Yes
`break-before`	✓ Yes
`break-inside`	✓ Yes
`footnote-display`	½ Partly	compact is drawn inline.
`footnote-policy`	½ Partly	block acts like line.
`orphans`	✓ Yes
`page`	✓ Yes	Named pages with their own @page size and margins.
`page-break-after`	✓ Yes
`page-break-before`	✓ Yes
`page-break-inside`	✓ Yes
`-pdfpecker-image-max-resolution`	✓ Yes	PdfPecker’s own property: downsamples images drawn denser than a resolution.
`-pdfpecker-image-quality`	✓ Yes	PdfPecker’s own property: writes images as JPEGs at a quality, when that makes them smaller.
`-pdfpecker-repeat`	✓ Yes	PdfPecker’s own property: each-page draws a box again on its parent’s later pages.
`-pdfpecker-scale-to-fit`	✓ Yes	PdfPecker’s own property: shrink fits text of any length into a fixed-size box.
`position: running()`	✓ Yes	Running elements, placed with element() in the page-margin boxes.
`string-set`	✓ Yes	Running headers with string().
`widows`	✓ Yes

SVG properties

Property	PdfPecker	Notes
`color-interpolation`	✕ No
`cx`	✓ Yes	From style sheets too, winning over the attribute, as in Chrome.
`cy`	✓ Yes	From style sheets too, winning over the attribute, as in Chrome.
`d`	✓ Yes	From style sheets too, winning over the attribute, as in Chrome.
`fill`	✓ Yes
`fill-opacity`	✓ Yes
`fill-rule`	✓ Yes
`marker`	✓ Yes
`marker-end`	✓ Yes
`marker-mid`	✓ Yes
`marker-start`	✓ Yes
`paint-order`	✓ Yes	On SVG and on HTML text with -webkit-text-stroke.
`path-length`	✕ No
`pointer-events`	– No effect
`r`	✓ Yes	From style sheets too, winning over the attribute, as in Chrome.
`rx`	✓ Yes	From style sheets too, winning over the attribute, as in Chrome.
`ry`	✓ Yes	From style sheets too, winning over the attribute, as in Chrome.
`shape-rendering`	– No effect
`stop-color`	✓ Yes	From style sheets too, as in Chrome.
`stop-opacity`	✓ Yes	From style sheets too, as in Chrome.
`stroke`	✓ Yes
`stroke-color`	✕ No	Use stroke.
`stroke-dasharray`	✓ Yes
`stroke-dashoffset`	✓ Yes
`stroke-linecap`	✓ Yes
`stroke-linejoin`	✓ Yes
`stroke-miterlimit`	✓ Yes
`stroke-opacity`	✓ Yes
`stroke-width`	✓ Yes
`text-anchor`	✓ Yes	In SVG text.
`text-rendering`	– No effect	Kerning and ligatures follow font-kerning and font-variant.
`vector-effect`	✓ Yes	non-scaling-stroke; markers still scale.
`x`	✓ Yes	From style sheets too, winning over the attribute, as in Chrome.
`y`	✓ Yes	From style sheets too, winning over the attribute, as in Chrome.

Cascade, variables and containers

Property	PdfPecker	Notes
`all`	✓ Yes
`container`	½ Partly	Size queries and style(--custom); no scroll-state().
`container-name`	✓ Yes
`container-type`	✓ Yes
`--*`	✓ Yes	Custom properties (--*) and var() anywhere, @property too.
`interpolate-size`	– No effect	Only affects animations.

Prefixed and legacy names

Property	PdfPecker	Notes
`grid-column-gap`	✓ Yes	Read as column-gap.
`grid-gap`	✓ Yes	Read as gap.
`grid-row-gap`	✓ Yes	Read as row-gap.
`-moz-tab-size`	✓ Yes	Read as tab-size.
`-webkit-backdrop-filter`	✓ Yes	Read as backdrop-filter.
`-webkit-background-clip`	✓ Yes	Read as background-clip.
`-webkit-box, -webkit-box-orient, -webkit-box-pack, -webkit-box-align, -webkit-box-flex`	✓ Yes	Read as the old flexbox, as in Chrome.
`-webkit-box-decoration-break`	✓ Yes	Read as box-decoration-break.
`-webkit-hyphenate-character`	✓ Yes	Read as hyphenate-character.
`-webkit-hyphens`	✓ Yes	Read as hyphens.
`-webkit-line-clamp`	✓ Yes	Read as line-clamp.
`-webkit-mask`	✓ Yes	Read as mask, and every -webkit-mask-* longhand.
`-webkit-transform, -webkit-border-radius, -webkit-box-shadow and the other -webkit- names Chrome accepts`	✓ Yes	Read as their standard property.
`-webkit-writing-mode`	✓ Yes	Read as writing-mode.
`word-wrap`	✓ Yes	Read as overflow-wrap.

Interaction, animation and scrolling

Property	PdfPecker	Notes
`accent-color`	½ Partly	Check boxes and radio buttons; progress bars and range sliders keep their default colours.
`animation`	– No effect
`animation-composition`	– No effect
`animation-delay`	– No effect
`animation-direction`	– No effect
`animation-duration`	– No effect
`animation-fill-mode`	– No effect
`animation-iteration-count`	– No effect
`animation-name`	– No effect
`animation-play-state`	– No effect
`animation-range`	– No effect
`animation-range-end`	– No effect
`animation-range-start`	– No effect
`animation-timeline`	– No effect
`animation-timing-function`	– No effect
`animation-trigger`	– No effect
`appearance`	½ Partly	none turns check boxes and radio buttons into plain boxes you style; other controls keep their look.
`caret-animation`	– No effect
`caret-color`	– No effect
`caret-shape`	– No effect
`cursor`	– No effect
`field-sizing`	✕ No	Form fields keep their default size.
`ime-mode`	– No effect
`interactivity`	– No effect
`interest-delay`	– No effect
`interest-delay-end`	– No effect
`interest-delay-start`	– No effect
`link-parameters`	✕ No
`overflow-anchor`	– No effect
`overscroll-behavior`	– No effect
`overscroll-behavior-block`	– No effect
`overscroll-behavior-inline`	– No effect
`overscroll-behavior-x`	– No effect
`overscroll-behavior-y`	– No effect
`resize`	– No effect
`scroll-initial-target`	– No effect
`scroll-margin`	– No effect
`scroll-margin-block`	– No effect
`scroll-margin-block-end`	– No effect
`scroll-margin-block-start`	– No effect
`scroll-margin-bottom`	– No effect
`scroll-margin-inline`	– No effect
`scroll-margin-inline-end`	– No effect
`scroll-margin-inline-start`	– No effect
`scroll-margin-left`	– No effect
`scroll-margin-right`	– No effect
`scroll-margin-top`	– No effect
`scroll-padding`	– No effect
`scroll-padding-block`	– No effect
`scroll-padding-block-end`	– No effect
`scroll-padding-block-start`	– No effect
`scroll-padding-bottom`	– No effect
`scroll-padding-inline`	– No effect
`scroll-padding-inline-end`	– No effect
`scroll-padding-inline-start`	– No effect
`scroll-padding-left`	– No effect
`scroll-padding-right`	– No effect
`scroll-padding-top`	– No effect
`scroll-snap-align`	– No effect
`scroll-snap-stop`	– No effect
`scroll-snap-type`	– No effect
`scroll-timeline`	– No effect
`scroll-timeline-axis`	– No effect
`scroll-timeline-name`	– No effect
`scrollbar-color`	– No effect
`scrollbar-width`	– No effect
`speak`	– No effect
`speak-as`	– No effect
`text-size-adjust`	– No effect	Only for phone browsers.
`timeline-scope`	– No effect
`timeline-trigger`	– No effect
`timeline-trigger-activation-range`	– No effect
`timeline-trigger-activation-range-end`	– No effect
`timeline-trigger-activation-range-start`	– No effect
`timeline-trigger-active-range`	– No effect
`timeline-trigger-active-range-end`	– No effect
`timeline-trigger-active-range-start`	– No effect
`timeline-trigger-name`	– No effect
`timeline-trigger-source`	– No effect
`touch-action`	– No effect
`transition`	– No effect
`transition-behavior`	– No effect
`transition-delay`	– No effect
`transition-duration`	– No effect
`transition-property`	– No effect
`transition-timing-function`	– No effect
`trigger-scope`	– No effect
`user-select`	– No effect
`view-timeline`	– No effect
`view-timeline-axis`	– No effect
`view-timeline-inset`	– No effect
`view-timeline-name`	– No effect
`view-transition-class`	– No effect
`view-transition-group`	– No effect
`view-transition-name`	– No effect
`view-transition-scope`	– No effect
`will-change`	– No effect
`window-drag`	– No effect
`zoom`	✓ Yes	Scales a box and its content as Chrome does.

At-rules

At-rule	PdfPecker	Notes
`@charset`	✓ Yes
`@import`	✓ Yes	With layer(), supports() and media queries. Remote files load only through your ResourceResolver.
`@media`	✓ Yes	print and all match, screen does not. Page width, height, aspect-ratio, orientation, ranges, and/or/not, plus resolution, color, prefers-color-scheme (light), hover and pointer (none), overflow-block (paged) and more.
`@supports`	✓ Yes	Property tests, selector(), font-format() and font-tech().
`@layer`	✓ Yes	Including the !important reversal.
`@container`	½ Partly	Size queries and style(--custom); no scroll-state().
`@property`	✓ Yes	syntax, inherits and initial-value.
`@font-face`	✓ Yes	src (url(), local(), format()), font-weight and font-stretch ranges, font-style, unicode-range. font-display is accepted. size-adjust, ascent-override, descent-override and line-gap-override as in Chrome.
`@counter-style`	✓ Yes	Every system and descriptor.
`@page`	✓ Yes	size, margins, borders, padding, backgrounds and background images, :first, :left, :right, :blank, named pages and all 16 margin boxes. marks, bleed and page-orientation are ignored.
`@footnote`	✓ Yes	The footnote area inside @page.
`@namespace`	½ Partly	Accepted and ignored; HTML needs no namespaces.
`CSS nesting (&)`	✓ Yes
`@scope`	✓ Yes	Scope roots, limits and proximity, as in Chrome.
`@font-feature-values`	✕ No
`@font-palette-values`	✕ No
`@custom-media`	✕ No
`@function`	✕ No
`@position-try`	✕ No	Anchor positioning is not supported.
`@keyframes`	– No effect	No animations on paper.
`@starting-style`	– No effect	Only used for transitions.
`@view-transition`	– No effect
`@document`	✕ No	Obsolete Firefox rule.

Selectors

A rule whose selector PdfPecker cannot parse is skipped as a whole, as browsers do. Interaction states are parsed and never match, as in Chrome's print output.

Selector	PdfPecker	Notes
Type, class, id and universal (*)	✓ Yes
Attribute: [a], =, ~=, \|=, ^=, $=, *= and the i and s flags	✓ Yes
Combinators: descendant, >, + and ~	✓ Yes
Nesting selector &	✓ Yes
`:root`	✓ Yes
`:empty`	✓ Yes
`:first-child`, `:last-child`, `:only-child`	✓ Yes
`:nth-child()`, `:nth-last-child()`	✓ Yes	Including An+B of S.
`:first-of-type`, `:last-of-type`, `:only-of-type`, `:nth-of-type()`, `:nth-last-of-type()`	✓ Yes
`:not()`, `:is()`, `:where()`	✓ Yes	Complex selector lists; :is() and :where() are forgiving. Also :matches() and :-webkit-any().
`:has()`	✓ Yes	Relative selectors; :has() cannot nest inside :has(), as the spec says.
`:lang()`	✓ Yes
`:dir()`	✓ Yes	From the dir attribute.
`:link`, `:any-link`	✓ Yes
`:scope`	✓ Yes	Matches the root.
`:defined`	✓ Yes
`:checked`, `:default`	✓ Yes
`:disabled`, `:enabled`	✓ Yes
`:required`, `:optional`	✓ Yes
`:read-only`, `:read-write`	✓ Yes
`:placeholder-shown`	✓ Yes
`::before`, `::after`	✓ Yes
`::marker`	✓ Yes
`::first-letter`	✓ Yes	With initial-letter for drop caps.
`::first-line`	✓ Yes
`::placeholder`	✓ Yes	On text fields and textareas.
`::footnote-call`, `::footnote-marker`	✓ Yes	From CSS Generated Content for Paged Media.
`@page :first`, `:left`, `:right`, `:blank`	✓ Yes
`:valid`, `:invalid`	✓ Yes	As Chrome matches them before anyone types: required, pattern, min, max, step, email and url.
`:in-range`, `:out-of-range`	✓ Yes	As Chrome matches a page nobody has typed into.
`:open`	✓ Yes	details and dialog with the open attribute.
`:heading`, `:heading()`	✕ No
`:state()`, `:host`, `:host()`, `:host-context()`, `::part()`, `::slotted()`	✕ No	No shadow DOM: scripts do not run.
`::details-content`	✕ No
`::checkmark`, `::picker()`, `::picker-icon`	✕ No
Column combinator \|\| and :nth-col()	✕ No
Namespace selector ns\|E	✕ No
`:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:visited`, `:target`	– No effect	Parsed, never match, as in Chrome print.
`:indeterminate`, `:autofill`, `:user-valid`, `:user-invalid`, `:fullscreen`, `:modal`, `:popover-open`, `:playing`, `:paused`	– No effect	Parsed, never match.
`::selection`, `::highlight()`, `::spelling-error`, `::grammar-error`, `::target-text`, `::search-text`	– No effect	Nothing is selected on paper.
`::backdrop`, `::file-selector-button`, `::cue`, `::view-transition-*`, `::scroll-marker`, `::scroll-button()`	– No effect

Units, colours and functions

Value	PdfPecker	Notes
px, pt, pc, in, cm, mm, Q, %	✓ Yes
em, rem	✓ Yes
ex, ch, cap, ic, lh and rex, rch, rcap, ric, rlh	✓ Yes	Measured from the font.
vw, vh, vmin, vmax, vi, vb and the sv, lv, dv* sets	✓ Yes	The viewport is the page content area.
cqw, cqh, cqi, cqb, cqmin, cqmax	✓ Yes
fr	✓ Yes	In grid tracks.
deg, rad, grad, turn	✓ Yes
dpi, dpcm, dppx	✓ Yes	In media queries.
s, ms, Hz, kHz	– No effect	Only used by animations and speech.
Named colours, hex (3, 4, 6, 8 digits), currentColor, transparent	✓ Yes
rgb(), rgba(), hsl(), hsla(), hwb()	✓ Yes
lab(), lch(), oklab(), oklch(), color()	✓ Yes	Wide-gamut colours are mapped to sRGB.
color-mix(), relative colours (from)	✓ Yes
light-dark()	✓ Yes	Takes the light colour.
contrast-color()	✕ No
Device CMYK and spot colours (device-cmyk())	✕ No	Colours are written as RGB.
calc(), min(), max(), clamp()	✓ Yes
round(), mod(), rem(), abs(), sign()	✓ Yes
sin(), cos(), tan(), asin(), acos(), atan(), atan2()	✓ Yes
pow(), sqrt(), hypot(), log(), exp()	✓ Yes
calc-size(), progress(), random(), sibling-index(), sibling-count(), if()	✕ No
var() and custom properties	✓ Yes	Anywhere, in shorthands and inside math.
env()	✕ No
attr()	✓ Yes	Typed attr() in any property, as in Chrome 133; never in url() or other resource functions.
url()	✓ Yes	Data URIs, local files and, through your ResourceResolver, remote files. Stylesheets in data: URLs too.
linear-gradient(), radial-gradient(), conic-gradient() and repeating forms	✓ Yes	Drawn as PDF shadings, with colour interpolation methods such as in oklch. Also the old -webkit-gradient() syntax.
image-set()	✓ Yes	In backgrounds, list markers and generated content, chosen as Chrome chooses when it prints.
cross-fade(), element(), paint()	✕ No	element() as an image; element() of a running element in page-margin boxes is supported.
counter(), counters(), symbols()	✓ Yes
string(), content(), target-counter(), target-text(), leader()	✓ Yes	Paged media functions.
target-counters()	✓ Yes	Every level of a nested counter at the linked element.
anchor(), anchor-size()	✕ No
Basic shapes: inset(), circle(), ellipse(), polygon(), path()	✓ Yes	In clip-path and shape-outside.
xywh(), rect(), superellipse()	✓ Yes	rect() and xywh() in clip-path and shape-outside; superellipse() in corner-shape.
shape(), ray()	✕ No
repeat(), minmax(), fit-content()	✓ Yes	In grid tracks.
Transform functions: translate, scale, rotate, skew, matrix	✓ Yes
3D transform functions and perspective()	½ Partly	Flattened, because PDF is affine.
Filter functions: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia, url()	✓ Yes	blur and drop-shadow are rasterized at 144 dpi.
inherit, initial, unset, revert, revert-layer	✓ Yes	Also on shorthands.
!important	✓ Yes