CSS :fullscreen Pseudo-Class

CSS :fullscreen Pseudo-Class

The CSS :fullscreen pseudo-class selects an element while it is displayed in fullscreen mode using the Fullscreen API. It allows developers to apply styles that are active only when an element occupies the fullscreen display area.

:fullscreen Syntax

:fullscreen {
  property: value;
}

The :fullscreen pseudo-class does not accept arguments. It matches an element while that element is in fullscreen mode.

Example Syntax

.fullscreen-box:fullscreen {
  background-color: #003366;
  color: #fff;
  padding: 30px;
}

This rule changes the background, text color, and padding of an element while it is displayed in fullscreen mode.

The :fullscreen pseudo-class has a specificity of 0-1-0. Combined with the .fullscreen-box class selector, its specificity becomes 0-2-0.

Styling Any Fullscreen Element

:fullscreen {
  background-color: #111;
  color: #fff;
}

This rule applies to any element that matches :fullscreen, regardless of its element name or class.

How :fullscreen Works

The :fullscreen pseudo-class matches elements that have been placed into fullscreen mode through the Fullscreen API.

Fullscreen mode allows an element to be displayed above the normal page layout, typically occupying the entire screen.

Fullscreen Matching Behavior

An element matches :fullscreen while its fullscreen flag is set. The matching state changes when the element enters or exits fullscreen mode.

Matching Conditions

Fullscreen vs. Full-Viewport Layout

Setting an element's dimensions to 100vw and 100vh does not activate the :fullscreen pseudo-class. The element must enter fullscreen mode through the browser's fullscreen mechanism.

Fullscreen and the Top Layer

Fullscreen elements are placed in the browser's top layer, allowing them to appear above normal page content without relying on large z-index values.

Entering Fullscreen Mode

JavaScript can request fullscreen mode by calling the requestFullscreen() method on an element.

HTML

<div id="fullscreen-panel">
  <p>Fullscreen content</p>
</div>
<button type="button" id="enter-fullscreen">Enter Fullscreen</button>

JavaScript

const panel = document.getElementById("fullscreen-panel");
const button = document.getElementById("enter-fullscreen");

button.addEventListener("click", async () => {
  try {
    await panel.requestFullscreen();
  } catch (error) {
    console.error("Fullscreen request failed:", error);
  }
});

The fullscreen request is triggered by clicking the button. Browsers generally require a user interaction before allowing a fullscreen request.

Fullscreen Restrictions

Fullscreen requests may be blocked by browser permissions, iframe restrictions, or unsupported environments. A request can also fail if the element or document does not meet the Fullscreen API requirements.

Exiting Fullscreen Mode

Fullscreen mode can be exited using the document.exitFullscreen() method.

JavaScript

if (document.fullscreenElement) {
  document.exitFullscreen();
}

The document.fullscreenElement property identifies the current fullscreen element in the document, or returns null when no element is fullscreen.

Using the Escape Key

Users can generally exit fullscreen mode by pressing the Escape key. Browsers may also provide their own fullscreen controls.

Returning to Normal Styles

When an element exits fullscreen mode, it stops matching :fullscreen, and styles that depend on that selector no longer apply.

Styling Fullscreen Elements

Fullscreen-specific CSS can adjust backgrounds, spacing, alignment, and content sizing without changing the element's normal appearance.

Fullscreen Background

.viewer:fullscreen {
  background-color: #111;
  color: #fff;
}

The viewer receives a dark background and light text while fullscreen.

Centering Fullscreen Content

.viewer:fullscreen {
  display: flex;
  justify-content: center;
  align-items: center;
}

Flexbox centers the viewer's contents horizontally and vertically.

Fullscreen Images

img:fullscreen {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #000;
}

The image scales to fit within the fullscreen area while preserving its aspect ratio.

Fullscreen Video

video:fullscreen {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

The video fills the available fullscreen area without cropping its content.

Fullscreen Backdrop

The ::backdrop pseudo-element represents the backdrop behind an element displayed in the top layer, including fullscreen elements.

Styling the Backdrop

.fullscreen-box:fullscreen::backdrop {
  background-color: #000;
}

This rule styles the backdrop associated with the fullscreen element.

Fullscreen Element vs. Backdrop

The :fullscreen pseudo-class styles the fullscreen element itself. The ::backdrop pseudo-element styles the backdrop behind it.

For a fullscreen container that already covers the display, the container's own background is usually more visible than its backdrop.

JavaScript and Fullscreen

The Fullscreen API provides methods and events for entering, exiting, and detecting fullscreen mode.

Common Fullscreen API Features

Detecting Fullscreen Changes

document.addEventListener("fullscreenchange", () => {
  if (document.fullscreenElement) {
    console.log("Fullscreen mode is active");
  } else {
    console.log("Fullscreen mode has ended");
  }
});

The event fires when the document enters or exits fullscreen mode.

Accessibility

Fullscreen interfaces should remain accessible to keyboard users and provide a clear way to return to the normal page layout.

Providing an Exit Control

Include a visible exit button inside custom fullscreen interfaces. Do not rely exclusively on the Escape key.

Keyboard Navigation

Ensure that interactive controls remain reachable using the keyboard and that visible focus indicators are preserved.

Readable Content

Use sufficient contrast and readable text sizes. Fullscreen layouts should adapt to different screen sizes and orientations.

Fullscreen User Choice

Request fullscreen mode in response to a clear user action rather than attempting to activate it unexpectedly.

Best Practices

• Use :fullscreen for styles that should apply only during fullscreen mode.
• Use requestFullscreen() in response to user interaction.
• Provide an accessible control for exiting fullscreen mode.
• Handle fullscreen request failures gracefully.
• Preserve keyboard navigation and visible focus indicators.
• Test fullscreen layouts on different screen sizes.
• Use ::backdrop when the fullscreen backdrop requires styling.
• Do not confuse fullscreen mode with full-viewport CSS layouts.

:fullscreen Example

This example demonstrates how :fullscreen changes a panel's appearance when fullscreen mode is activated. Select Enter Fullscreen to expand the panel, then select Exit Fullscreen or press Escape to return to the normal view.

HTML

<div class="fullscreen-demo">
  <div class="fullscreen-panel" id="demo-panel">
    <h3>Fullscreen Example</h3>
    <p>This panel changes its appearance in fullscreen mode.</p>
    <button type="button" id="exit-fullscreen">Exit Fullscreen</button>
  </div>
  <button type="button" id="enter-fullscreen">Enter Fullscreen</button>
</div>

CSS

.fullscreen-demo .fullscreen-panel {
  padding: 15px;
  border: 2px solid #0088cc;
  background-color: #eaf6fc;
}
.fullscreen-demo .fullscreen-panel:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 30px;
  background-color: #003366;
  color: #fff;
  text-align: center;
}
.fullscreen-demo button {
  padding: 8px 12px;
  margin-top: 10px;
  border: 1px solid #006699;
  background-color: #0088cc;
  color: #fff;
  cursor: pointer;
}
.fullscreen-demo #exit-fullscreen {
  display: none;
}
.fullscreen-demo .fullscreen-panel:fullscreen #exit-fullscreen {
  display: inline-block;
}

JavaScript

const panel = document.getElementById("demo-panel");
const enterButton = document.getElementById("enter-fullscreen");
const exitButton = document.getElementById("exit-fullscreen");

enterButton.addEventListener("click", async () => {
  try {
    await panel.requestFullscreen();
  } catch (error) {
    console.error("Fullscreen request failed:", error);
  }
});

exitButton.addEventListener("click", async () => {
  if (document.fullscreenElement) {
    await document.exitFullscreen();
  }
});

Browser Result

Play in Editor

Note: Fullscreen requests may be restricted inside embedded frames. If the example does not enter fullscreen mode, open it using Play in Editor and try again.

Browser Support

Baseline: Widely available. The :fullscreen pseudo-class is supported in modern versions of Chrome, Edge, Firefox, Safari, and other major browsers. Fullscreen API behavior and permissions may vary by browser and device.

For current compatibility information, visit Can I Use? and search for :fullscreen.

Specifications

The :fullscreen pseudo-class is defined by the Fullscreen API specification, which describes fullscreen elements, fullscreen requests, and the associated matching behavior.

Fullscreen Standard - :fullscreen Pseudo-Class