:fullscreen
Quick Summary for :fullscreen
The :fullscreen CSS pseudo-class matches every element which is currently in fullscreen mode. If multiple elements have been put into fullscreen mode, this selects them all.
Code Usage for :fullscreen
<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 fullscreen mode on and off,   entirely using CSS.</p>  <button id="fs-toggle">Toggle Fullscreen</button> 
More Details for :fullscreen

:fullscreen

The :fullscreen CSS pseudo-class matches every element which is currently in fullscreen mode. If multiple elements have been put into fullscreen 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 fullscreen and traditional presentations.

Examples

In this example, the color of a button is changed depending on whether or not the document is in fullscreen 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 fullscreen 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 fullscreen mode.

CSS

The magic happens in the CSS. There are two rules here. The first establishes the background color of the "Toggle Fullscreen Mode" button when the element is not in a fullscreen 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 fullscreen mode, the following CSS applies instead, setting the background color to a pale shade of red.

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

Specifications

Specification
Fullscreen API Standard # :fullscreen-pseudo-class

See also

Fullscreen API Guide to the Fullscreen API :not ::backdrop DOM API: Element.requestFullscreen(), Document.exitFullscreen(), Document.fullscreenElement allowfullscreen attribute

Last modified: Feb 15, 2022, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Random CSS Property

caption-side

The caption-side CSS property puts the content of a table's <caption> on the specified side. The values are relative to the writing-mode of the table.
caption-side css reference