canmove, Confirmed users
2,675
edits
Gecko:FullScreenAPI: Difference between revisions
prefer media query selector, use two word form of CSS terms for consistency with DOM terms
(add issues section, naming, media type vs query selector) |
(prefer media query selector, use two word form of CSS terms for consistency with DOM terms) |
||
| Line 87: | Line 87: | ||
While a Document is in the fullscreen state, and the document's current fullscreen element is an element in the document, the 'full-screen' pseudoclass applies to that element. Also, an <iframe>, <object> or <embed> element whose child browsing context's Document is in the fullscreen state has the 'full-screen' pseudoclass applied. | While a Document is in the fullscreen state, and the document's current fullscreen element is an element in the document, the 'full-screen' pseudoclass applies to that element. Also, an <iframe>, <object> or <embed> element whose child browsing context's Document is in the fullscreen state has the 'full-screen' pseudoclass applied. | ||
New CSS media | New CSS media query selector: | ||
* <code>full-screen</code> | |||
that accepts two states: | |||
* | * <code>on</code> | ||
* <code>off</code> | |||
While a Document is in the fullscreen state, the fullscreen media type is active for the document. | While a Document is in the fullscreen state, the fullscreen media type is active for the document. | ||
| Line 108: | Line 113: | ||
/* In fullscreen mode, if the root element itself is not fullscreen then | /* In fullscreen mode, if the root element itself is not fullscreen then | ||
we should hide the viewport scrollbar. */ | we should hide the viewport scrollbar. */ | ||
@media | @media all and (full-screen:on) { | ||
:root:not(:full-screen) { | :root:not(:full-screen) { | ||
overflow:hidden; | overflow:hidden; | ||
| Line 163: | Line 168: | ||
3. Hide advertisements while the window is fullscreen. | 3. Hide advertisements while the window is fullscreen. | ||
@media | @media all and (full-screen:on) { | ||
.advertisement { display:none; } | .advertisement { display:none; } | ||
} | } | ||
| Line 183: | Line 188: | ||
Whichever we pick, we should be consistent, e.g., EITHER: | Whichever we pick, we should be consistent, e.g., EITHER: | ||
1. one word | |||
* '''fullscreen''' | * '''fullscreen''' | ||
** :fullscreen | ** :fullscreen | ||
** media query selector feature: fullscreen | |||
** cancelFullscreen() | ** cancelFullscreen() | ||
** requestFullscreen() | ** requestFullscreen() | ||
| Line 191: | Line 198: | ||
OR | OR | ||
2. two words | |||
* '''full screen''' | * '''full screen''' | ||
** :full-screen | ** :full-screen | ||
** media query selector feature: full-screen | |||
** cancelFullScreen() | |||
** requestFullScreen() | |||
** requestFullScreenWithKeys() | |||
OR | |||
3. come up with a good case (e.g. CSS vs DOM) to split them consistently: | |||
* '''full screen''' | |||
** :fullscreen | |||
** media query selector feature: fullscreen | |||
** cancelFullScreen() | ** cancelFullScreen() | ||
** requestFullScreen() | ** requestFullScreen() | ||
** requestFullScreenWithKeys() | ** requestFullScreenWithKeys() | ||
=== media type vs media query selector === | === media type vs media query selector === | ||
<code>@media | <code>@media full-screen</code> vs. <code>@media all and (full-screen: on)</code> | ||
Originally spec'd: | |||
New CSS media type: | |||
* full-screen | |||
While a Document is in the fullscreen state, the full-screen media type is active for the document. | |||
Per discussion among [[User:Fantasai]], [[User:Roc]], [[User:Tantek]] a media query selector for the fullscreen state (on or off) may be better, e.g. it can be combined with all media types: | |||
<code>@media all and (full-screen: on)</code> | |||
or can be special cased for specific media types: | |||
<code>@media handheld and (full-screen: on)</code> | |||
<code>@media screen and (full-screen: on)</code> | |||
<code>@media tv and (full-screen: on)</code> | |||
If we resolve the naming issue based on one word rather than two, then we'll rename this CSS feature accordingly ( :fullscreen , media query selector "fullscreen" ) | |||