:fullscreen¶
Псевдокласс :fullscreen
выбирает элемент, который отображается, когда браузер находится в полноэкранном режиме.
Псевдоклассы
- :active
- :any-link
- :blank
- :checked
- :current()
- :default
- :defined
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :future
- :has()
- :host
- :host()
- :host-context()
- :hover
- :indeterminate
- :in-range
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :local-link
- :not()
- :nth-child()
- :nth-col()
- :nth-last-child()
- :nth-last-col()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :past
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :target-within
- :user-invalid
- :valid
- :visited
- :where()
Синтаксис¶
/* Selects any <div> that is being displayed in fullscreen mode */
/* Implemented in Firefox, WebKit/Chrome, and Edge/IE using prefixes;
Edge also supports the non-prefixed version */
div:-moz-full-screen {
background-color: pink;
}
div:-webkit-full-screen {
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
, соответственно.
Спецификации¶
Пример¶
<div id="fullscreen">
<h1>:fullscreen Demo</h1>
<p>
This text will become big and red when the browser is in
fullscreen mode.
</p>
<button id="fullscreen-button">Enter Fullscreen</button>
</div>
#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;
}