Niech Twoje treści będą mówić – pełny ekran interfejsu API

Obecnie większość przeglądarek umożliwia włączanie trybu pełnoekranowego lub kiosku. W praktyce interfejs Chrome nie przeszkadza w korzystaniu z przeglądarki, a zawartość przejmuje treść. W przypadku aplikacji zainstalowanych ze sklepu Chrome Web Store użytkownicy mogą nawet ręcznie skonfigurować aplikacje, które otwierają się na stronie Nowa karta w trybie pełnoekranowym. Ręczny pełnoekranowy jest dobry. Zautomatyzowane reklamy pełnoekranowe są lepsze!

Interfejs API pełnego ekranu umożliwia aplikacjom internetowym przekazywanie treści na stronie do trybu pełnoekranowego przeglądarki za pomocą kodu JavaScript. Oznacza to, że gry WebGL i <canvas> mogą w końcu stanąć w pełnej rzeczywistości, filmy mogą wydawać się jak srebrny ekran, a czasopisma internetowe – jak prawdziwe atuty. Uwielbiam tę przeglądarkę, ale nie powinniśmy się przez nią ograniczać :)

Jeśli chcesz pominąć szczegóły, zobacz prezentację:

Zrzut ekranu z prezentacją na pełnym ekranie

Jak więc działa ten interfejs API? Jeśli chcesz, żeby <div> na przykład wyświetlał się na pełnym ekranie, powiedz mu:

div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard

Następnie, aby wyjść z trybu pełnoekranowego, document udostępnia metodę:

document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();

Treści w trybie pełnoekranowym są wyśrodkowane w widocznym obszarze przeglądarki. Deweloper ma możliwość określenia stylu tych treści w najbardziej odpowiedni sposób. Zwykle wybrany element (<div>) zajmuje całą powierzchnię ekranu. Dobra wiadomość jest taka, że interfejs API zawiera nowe pseudoselektory CSS do tego zadania:

div:-webkit-full-screen {
    width: 100% !important;
}
div:-moz-full-screen {
    width: 100% !important;
}
div:-ms-fullscreen {
    width: 100% !important;
}
div:fullscreen {
    width: 100% !important;
}

/* While in fullscreen, hide any children with class 'tohide' */
:-webkit-full-screen .tohide {
    display: none;
}
:-moz-full-screen .tohide {
    display: none;
}
:-ms-fullscreen .tohide {
    display: none;
}
:fullscreen .tohide {
    display: none;
}

Pseudoselektory CSS bardzo ułatwiają zmienianie stylu treści na pełnym ekranie w dowolny sposób.

Pełnoekranowy interfejs API jest domyślnie włączony w przeglądarkach Chrome 15, FF 14, IE 11 i Opera 12.1. Więcej informacji o pozostałej części interfejsu API znajdziesz w specyfikacji.

Aktualizacja: 11.10.2012: aby zachować zgodność ze zmianami specyfikacji. Zamknięto literę „S” w tekście requestFullscreen() i zmieniono „document.webkitCancelFullScreen()” na „document.webkitExitFullscreen()”. Zaktualizowano komentarz dotyczący zgodności przeglądarki.

Aktualizacja 11.02.2014: aby uwzględnić prefiksy dla IE, dodać standardową składnię CSS i zaktualizować komentarz dotyczący zgodności przeglądarki. Dziękuję za @dstorey i @patrickkettner.