:fullscreen

由於本文件沒有此語言的翻譯版本,您閱讀的是英文版的內容。 幫助我們翻譯這篇文章!

The :fullscreen CSS pseudo-class matches every element which is currently in full-screen mode. If multiple elements have been put into full-screen mode, this selects them all.

Syntax

:fullscreen

Usage notes

The :fullscreen pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and traditional presentations.

Example

In this example, the color of a button is changed depending on whether or not the document is in full-screen mode. This is done without needing to specifically apply style changes using JavaScript.

HTML

The page's HTML looks like this:

<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>

<p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically
  change the style of a button used to toggle full-screen mode on and off,
  entirely using CSS.</p>

<button id="fs-toggle">Toggle Fullscreen</button>

The <button> with the ID "fs-toggle" will change between pale red and pale green depending on whether or not the document is in full-screen mode.

CSS

The magic happens in the CSS. There are two rules here. The first establishes the background color of the "Toggle Full-screen Mode" button when the element is not in a full-screen state. The key is the use of the :not(:fullscreen), which looks for the element to not have the :fullscreen pseudo-class applied to it.

#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}

When the document is in full-screen mode, the following CSS applies instead, setting the background color to a pale shade of red.

#fs-toggle:fullscreen {
  background-color: #faa;
}

Specifications

Specification Status Comment
Fullscreen API
The definition of ':fullscreen' in that specification.
Living Standard Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:fullscreen
Experimental
Chrome Full support 71
Full support 71
Full support 15
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-full-screen
Edge Full support 12Firefox Full support 64
Full support 64
No support 47 — 65
Disabled
Disabled From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 9 — 65
Alternate Name
Alternate Name Uses the non-standard name: :-moz-full-screen
IE Full support 11
Prefixed
Full support 11
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 58
Full support 58
Full support 15
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-full-screen
Safari Full support 6
Alternate Name
Full support 6
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-full-screen
WebView Android Full support 71
Full support 71
Full support 37
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-full-screen
Chrome Android Full support 71
Full support 71
Full support 18
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-full-screen
Firefox Android Full support 64
Full support 64
No support 47 — 65
Disabled
Disabled From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 9 — 65
Alternate Name
Alternate Name Uses the non-standard name: :-moz-full-screen
Opera Android Full support 50
Full support 50
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-full-screen
Safari iOS No support NoSamsung Internet Android Full support 10.0
Full support 10.0
Full support 1.0
Alternate Name
Alternate Name Uses the non-standard name: :-webkit-full-screen
Select all elements in the fullscreen stack
Experimental
Chrome No support NoEdge Full support 12Firefox Full support 43IE Full support 11Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 43Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also