:fullscreenクラス
:fullscreenクラスは、フルスクリーンモードで表示されたエレメントにスタイル設定を反映する疑似クラスです。フルスクリーンモードは全画面モードともいいます。
Linux、WindowsブラウザにおいてはF11キー
、Macではcommand + control + F
で全画面モードになります。
body:fullscreen{ width: 100%; background-color:#66FF77; } :fullscreen div{ text-align: center; color: gray; }
場合によっては、JavaScriptで HTMLBodyElement.requestFullscreen() 関数を実行することで、CSSは全画面モードと認識するようです。
現在、フルスクリーン(全画面)モードは document.fullscreen から Fullscreen API の扱いになりました。CSSはこちらの設定を取得するようです。
構文(Syntax)
CSS
HTMLElement:fullscreen { style_propaty: value; ... }
DOM(JavaScript)
疑似クラスはDOM(JavaScript)から操作できません。
スタイルのみの操作は擬似クラスを利用したほうが簡易です。
Example
:fullscreenクラスの例です。
実行例は別窓で表示します。全画面モードへ
ボタンをクリックすると全画面モードになります。
UbuntuではF11キーでの全画面モードでは何も変化はありませんでした。
JavaScriptでHTMLBodyElement.requestFullscreen()関数を実行するとCSSで反応がありました。
.requestFullscreen()関数のよる全画面モードはバックが色抜き(黒)になります。背景色を指定しても設定されません。
現在、フルスクリーン(全画面)モードはdocument.fullscreenからFullscreen APIの扱いになりました。CSSはこちらの設定を取得するようです。