備忘録的プログラミングリファレンス

:fullscreen クラス

　:fullscreen クラスは、フルスクリーンモードで表示されたエレメントにスタイル設定を反映する疑似クラスです。フルスクリーンモードは全画面モードともいいます。
　Linux、Windows ブラウザにおいてはF11キー、Mac ではcommand + control + Fで全画面モードになります。

:fullscreen
body:fullscreen{
	width: 100%;
	background-color:#66FF77;
}

:fullscreen div{
	text-align: center;
	color: gray;
}

動作の確認はExampleを参照してください

　場合によっては、JavaScript で Element.requestFullscreen() 関数を実行することで、CSSは全画面モードと認識するようです。

　現在、フルスクリーン（全画面）モードは document.fullscreen から Fullscreen API の扱いになりました。CSSはこちらの設定を取得するようです。

ページ内 Index

構文(Syntax)

CSS

HTMLElement:fullscreen {
  style_propaty: value;
	...
}

DOM ( JavaScript )

　疑似クラスはDOM ( JavaScript )から操作できません。
　スタイルのみの操作は擬似クラスを利用したほうが簡易です。

Example

　:fullscreen クラスの例です。

　確認ボタンをクリックすると以下のコードを実行します。
　実行されたら、全画面モード切り替えでモードの切り替えができます。

　.requestFullscreen() 関数のよる全画面モードはバックが色抜き（黒）になります。

　現在、フルスクリーン（全画面）モードは document.fullscreen から Fullscreen API の扱いになりました。CSS はこちらの設定を取得するようです。

　F11キー での全画面モードと .requestFullscreen() 関数による全画面モードに違いがあるようです。
　.requestFullscreen() 関数は任意のエレメントを全画面として表示することができます。F11キー はページ全体を全画面に表示します。
　そのためか、:fullscreen 擬似クラスの対象は .requestFullscreen() 関数によって全画面に表示されるエレメントであるようです。

　<iframe> エレメントにおいては、 allowfullscreen を指定しないと全画面に切り替えができないブラウザがあります。

　.requestFullscreen() 関数によって全画面表示された場合のスタイルシートには ::backdrop 疑似エレメントがあります。詳しくは::backdrop エレメントページを参照してください。

関連（Related）