Пусть ваш контент говорит за вас — полноэкранный API

Eric Bidelman

Большинство браузеров уже некоторое время имеют возможность переходить в полноэкранный режим или режим киоска. По сути, пользовательский интерфейс Chrome браузера уходит с дороги, и контент берет верх. Для приложений, установленных из Интернет-магазина Chrome, пользователи даже могут вручную настроить запуск приложения в полноэкранном режиме при его открытии со страницы новой вкладки. Ручной полноэкранный режим — это хорошо. Программный полноэкранный режим лучше!

Полноэкранный API позволяет веб-приложениям программно сообщать любому содержимому на странице о переходе в полноэкранный режим просмотра браузера с помощью JavaScript. Это означает, что игры WebGL и <canvas> наконец-то смогут стать полностью захватывающими, видео — как киноэкран, а онлайн-журналы — как настоящее дело. Обожаю браузер, но не стоит им ограничиваться :)

Если вы хотите пропустить подробности, вот демо :

Так как же работает API? Если вы хотите, например, чтобы <div> работал в полноэкранном режиме, просто сообщите об этом:

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

Затем, чтобы выйти из полноэкранного режима, document предоставляет для этого метод:

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

Примечание. Функция exitFullscreen() — это версия спецификации. Однако и FF, и WebKit по-прежнему предоставляют префикс cancelFullScreen() .

Содержимое в полноэкранном режиме центрируется в области просмотра браузера. Разработчику остается стилизовать этот контент так, чтобы он был наиболее подходящим для просмотра. Обычно вам нужно, чтобы ваш <div> занимал всю площадь экрана. Хорошей новостью является то, что API включает в себя новые псевдоселекторы CSS:

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;
}

Псевдоселекторы CSS позволяют легко стилизовать полноэкранный контент так, как вы захотите.

Полноэкранный API включен по умолчанию в Chrome 15, FF 14, IE 11 и Opera 12.1. Дополнительную информацию об остальном API смотрите в спецификации .

Обновлено 11 октября 2012 г .: чтобы соответствовать изменениям спецификаций. Букву S в requestFullscreen() поместили в нижний регистр, а document.webkitCancelFullScreen() изменили на document.webkitExitFullscreen() . Обновлен комментарий о совместимости браузера.

Обновлено 11 февраля 2014 г .: добавлены префиксы для IE, добавлен стандартный синтаксис CSS и обновлен комментарий о совместимости браузера. Спасибо @dstorey и @patrickkettner .