WebPDF custom states: `:state()` names

Works in all major browsers

Since July 2026

WebPDF works in Chrome and Edge 125, Firefox 153 and Safari 18, on desktop and mobile, and in every later version: the oldest versions its PDF.js build supports, which already have every platform feature WebPDF needs. Since July 2026, that is every major browser.

<pdf-file> and <pdf-page> expose their state as custom states, which you match with the :state() pseudo-class. The elements' attributes stay as written.

Syntax

css

pdf-page:state(pending) {
  /* ... */
}

States

State	Element	When
`:state(pending)`	`<pdf-page>`	Not drawn yet: every page until its first render, so a lazy page until it comes near the viewport.
`:state(controls)`	`<pdf-page>`	Controls are on: its own, the file's or the `<script>`'s, and never with `-=controls`.
`:state(bar)`	`<pdf-page>`	Its bar shows.
`:state(gestures)`	`<pdf-page>`	Its gestures are on: the page has `touch-action: pan-y`.
`:state(drop-target)`	`<pdf-page>`	A file or a link is dragged over it; never with `-=drop`.
`:state(svg-fallback)`	`<pdf-page>`	`svg` was asked for but the page is drawn on a canvas, because the SVG module did not load.
`:state(pending)`	`<pdf-file>`	Its signatures are being checked.
`:state(verified)`	`<pdf-file>`	Every signature verified.
`:state(unknown)`	`<pdf-file>`	The worst signature could not be checked.
`:state(untrusted)`	`<pdf-file>`	The worst signature has a signer that is not trusted.
`:state(expired)`	`<pdf-file>`	The worst signature has a certificate that was not valid at signing time.
`:state(revoked)`	`<pdf-file>`	The worst signature has a revoked certificate.
`:state(invalid)`	`<pdf-file>`	The worst signature is broken, or the signed part changed.

A file has at most one signature state at a time, the same value as PDFFileElement.signed, in the order verified, unknown, untrusted, expired, revoked, invalid: the worst signature decides.

Fullscreen

A page shown fullscreen matches the standard :fullscreen pseudo-class, and what is behind it is its ::backdrop.

Examples

Fading pages that are on the way

css

pdf-page:state(pending) {
  opacity: 0.5;
}
pdf-page:state(drop-target) {
  outline: 2px dashed;
}

Warning about a broken signature

css

body:has(pdf-file:state(invalid)) {
  background: oklch(95% 0.03 27);
}

Specifications

Not part of any specification. <pdf-file> and <pdf-page> are autonomous custom elements defined by WebPDF.pro. It implements:

Specification
HTML # custom-state-pseudo-class

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`:state()`	125	125	153	111	18	125	153	83	18	27	125	18

: Full support

WebPDF custom states: :state() names

Legend

WebPDF custom states: `:state()` names