We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

总结

css伪类:fullscreen应用于当前处于全屏显示模式的元素。 它不仅仅选择顶级元素,还包括所有已显示的栈内元素。

W3C标准使用不带破折号的单词:fullscreen,但Webkit和Gecko应用接口各自使用前缀带有破折号的变量::-webkit-full-screen 和:-moz-full-screen。微软的Edge和Internet Explorer各自使用标准语法::fullscreen:-ms-fullscreen。

语法

:fullscreen

例子

HTML

<div id="fullscreen">
  <h1>:fullscreen Demo</h1>
  <p> This will become a big red text when on fullscreen.</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;
}

结果

(If the 'Enter Fullscreen' button doesn't work, try here)

特点

特点 情况 评论
Fullscreen API
:fullscreen
Living Standard Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari

基本支持

15.0 -webkit[1] 12 9.0 (9.0)-moz[1]
47.0 (47.0)[2]
11 -ms[3] ? 6.0 -webkit[1]
全屏下选取所有元素 ? 12 43 (43) 11 ? ?
特性 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本支持 ? 9.0 (9.0)
47.0 (47.0)[2]
未实现 未实现 未实现
全屏下选取所有元素 ? 43.0 (43) ? ? ?

[1] Webkit和Gecko前缀版本在fullscreen之间带有破折号, 但W3C标准使用一个单词::fullscreen, :-webkit-full-screen, :-moz-full-screen.

[2] Gecko 47.0 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44) 通过参数full-screen-api.unprefix.enabled使用不带前缀的伪类, 默认为false.

[3] Internet Explorer使用前缀-ms,但在fullscreen之间没有破折号:-ms-fullscreen.

再看看

文档标签和贡献者

此页面的贡献者: LeonDWong
最后编辑者: LeonDWong,