Styling Fullscreen with the :fullscreen Pseudo-Class

Technical Deep Dive & Specifications

The :fullscreen CSS Pseudo-Class Selector

The :fullscreen pseudo-class matches any element currently in the Top Layer via requestFullscreen():

/* Styles applied to the root element when it is fullscreen */
:fullscreen {
  background-color: #020617;
  color: #f8fafc;
}

/* Styles applied specifically to #mediaPlayer when it is fullscreen */
#mediaPlayer:fullscreen {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 3fr 1fr;
}

/* Styles applied to child elements inside a fullscreen container */
:fullscreen .overlay-controls {
  opacity: 1;
  font-size: 1.25rem;
}

User-Agent Default Stylesheet Resets

When an element enters fullscreen mode, modern browser engines (Chromium, Gecko, WebKit) automatically apply an internal user-agent stylesheet:

/* Typical Browser User-Agent Stylesheet for :fullscreen */
:fullscreen {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  margin: 0 !important;
  overflow: auto !important;
}

Why Background Resets Matter:

By default, standard HTML <div> elements have background-color: transparent. If you promote a <div> to fullscreen without explicitly declaring a background color, it will render transparently on top of the black ::backdrop. Always declare an explicit background color when styling :fullscreen:

.card:fullscreen {
  background-color: #0f172a; /* Prevents visual artifacts */
}

Fluid Typography with clamp() in Fullscreen

Standard typography sized in fixed pixels (font-size: 16px) appears tiny and unreadable when expanded to a 4K 65-inch television screen or a 32-inch desktop monitor.

Use CSS clamp() combined with viewport units (vw, vh) or Container Query units (cqw) to scale typography seamlessly:

/* Responsive font scaling specifically for fullscreen viewports */
:fullscreen h1 {
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.2;
}

:fullscreen p {
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  line-height: 1.6;
}

The Vendor Selector Pitfall (Why Comma-Separation Breaks CSS)

Historically, browsers supported vendor-prefixed selectors:

• WebKit / Blink: :-webkit-full-screen
• Gecko (Firefox): :-moz-full-screen
• Trident / IE: :-ms-fullscreen
• Standard: :fullscreen

[!CAUTION] Never Group Prefixed Pseudo-Classes with Commas!
If a CSS parser encounters an unrecognized selector in a comma-separated list (e.g. Chrome encountering :-moz-full-screen), the CSS specification mandates that the entire rule block must be dropped.

/* ❌ BROKEN IN ALL BROWSERS: Entire rule gets invalidated! */
:fullscreen,
:-webkit-full-screen,
:-moz-full-screen {
  background: black;
}

/* ✅ CORRECT: Separate into individual rule blocks (or use modern :fullscreen) */
:fullscreen {
  background: black;
}
:-webkit-full-screen {
  background: black;
}
:-moz-full-screen {
  background: black;
}

(In modern greenfield development targeting modern browsers, standard :fullscreen is supported across 98.5%+ of all global browser traffic).

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 83–91 (.slide-deck:fullscreen): When #slideDeck enters fullscreen mode, its background switches to a radial gradient, padding expands to 60px, and standard rounded card borders are removed.
• Line 94–102 (clamp()): Dynamically scales the heading between 2.5rem and 4.5rem based on 5vw, ensuring crisp legibility on 4K projectors without manual media queries.
• Line 105–108 (grid-template-columns: repeat(4, 1fr)): Reconfigures the 2-column mobile layout into an expanded 4-column widescreen row.
• Line 118–125 (.fullscreen-toolbar): Changes from display: none to display: flex, dynamically revealing presenter notes and an exit button exclusively when fullscreen is active.

Expected Browser Render Output

1. In standard view, the slide is rendered as a clean 640px card with 2 columns of metrics.
2. Clicking "Present Fullscreen" expands the slide across the entire monitor.
3. The layout transforms: text expands cleanly, all four metric cards align horizontally across the bottom, and a presenter notes bar appears at the bottom.
4. Pressing Escape or clicking "Exit Presentation" instantly collapses the card back into its compact 640px form.