全屏 | :fullscreen
*全屏
这是一种实验技术
由于该技术的规格不稳定,请查看兼容性表以了解各种浏览器的使用情况。还请注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
:fullscreen
CSS伪类选择显示在浏览器全屏模式下的任何元件。
/* Selects any <div> as long as it is being displayed in fullscreen mode */
/* Implemented in Gecko, Edge/IE, and WebKit/Chrome using prefixes */
/* Edge also supports the non-prefixed version */
div:-webkit-full-screen {
background-color: pink;
}
div:-moz-full-screen {
background-color: pink;
}
div:-ms-fullscreen {
background-color: pink;
}
div:fullscreen {
background-color: pink;
}
注意
:W3C规范使用单个单词:fullscreen
, 没有破折号 ,但Webkit和Gecko实验实现都使用带有两个单词的前缀变体,分别用短划线:-webkit-full-screen
和:-moz-full-screen
。Microsoft Edge和Internet Explorer分别使用标准约定:fullscreen
和:-ms-fullscreen
。
语法
:fullscreen
例
HTML
<div id="fullscreen">
<h1>:fullscreen Demo</h1>
<p> This will become big red text when the browser is in fullscreen mode.</p>
<button id="fullscreen-button">Enter Fullscreen</button>
</div>
CSS
#fullscreen:fullscreen {
padding: 42px;
background-color: pink;
border:2px solid #f00;
font-size: 200%;
}
#fullscreen:fullscreen > h1 {
color: red;
}
#fullscreen:fullscreen > p {
color: DarkRed;
}
#fullscreen:fullscreen > button {
display: none;
}
结果
规范
Specification | Status | Comment |
---|---|---|
Fullscreen APIThe definition of ':fullscreen' in that specification. | Living Standard | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 15.0 -webkit1 | 12 | 9.0 (9.0)-moz1 47.0 (47.0)2 | 11 -ms3 | ? | 6.0 -webkit1 |
Select all elements in the fullscreen stack | ? | 12 | 43 (43) | 11 | ? | ? |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | 9.0 (9.0) 47.0 (47.0)2 | No support | No support | No support |
Select all elements in the fullscreen stack | ? | (Yes) | 43.0 (43) | ? | ? | ? |