:fullscreen全画面モードでスタイルを適用する
:fullscreen
疑似クラスは、ブラウザが全画面(フルスクリーン)モード時に、指定した要素にスタイルを適用します。
なお、Safari(Mac)では :-webkit-full-screen
として実装されています。また、Internet Explorer では -ms-
接頭辞が必要です。
:fullscreenのサンプルソース
button:fullscreen { background-color: #d50000; color: #fff; } button:not(:fullscreen) { background-color: #ddd; color: #000; }
主要ブラウザの対応
IE11 | ○:-ms-fullscreen |
---|---|
Edge(EdgeHTML) | ○ |
Edge(Chromium) | ○ |
Chrome | ○ |
Firefox | ○ |
Safari | × |
iOS Safari | ○ |
Android Chrome | ○ |