:fullscreen

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

:fullscreenCSS擬似クラスで、現在全画面モードにあるすべての要素に一致します。複数の要素が全画面モードにある場合は、それらすべてを選択します。

構文

:fullscreen

使用上のメモ

:fullscreen 擬似クラスにより、要素が全画面と従来の表示の間を行き来した場合に、コンテンツの寸法、スタイル、レイアウトをスタイルシートで自動的に調整することができます。

この例では、文書が全画面モードであるかどうかによってボタンの色が変化します。これは JavaScript でスタイルの変更を適用せずに行われます。

HTML

ページの HTML は次のようなものです。

html
<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>

"fs-toggle" の ID を持った <button> が、文書が全画面モードであるかどうかによって淡い赤と淡い緑の間で変化します。

CSS

魔法は CSS で起こります。ここでは二つの規則があります。最初のものは要素が全画面状態でない場合に「Toggle Full-screen Mode」ボタンの色の背景を設定します。鍵になるのは :not(:fullscreen) を使用していることで、 :fullscreen 擬似クラスが適用されない要素を探します。

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

文書が全画面モードになっている場合、代わりに次の CSS が適用され、背景色に淡い赤の影を設定します。

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

仕様書

Specification
Fullscreen API
# :fullscreen-pseudo-class

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:fullscreen
Select all elements in the fullscreen stack

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Uses a non-standard name.
Has more compatibility info.

関連情報