Одним из преимуществ наличия новых версий браузера каждые шесть недель является быстрый темп внедрения новых функций. Переход от ночных сборок к официальным релизам проходит всего за несколько недель. Это означает, что даже те из вас, кто внимательно следит за появлением новых функций, могут легко пропустить парочку.
Это относится и к Full Screen API . Как будто в одночасье он перешел от эксперимента к функции, поддерживаемой более чем половиной браузеров. Сейчас вам возможно интересно, чем он отличается от обычного полноэкранного режима, при нажатии в браузере F11 на Windows, или Shift + Command + F в Mac.
Что вам нужно знать
С помощью этого api вы можете отображать в полноэкранном режиме не только целые страницы, но и отдельные элементы внутри них. Цель здесь — предоставить возможность полноэкранного режима для HTML5 видео и игр, чтобы мы могли наконец объявить HTML5 как жизнеспособную альтернативу Flash.
Короче говоря, вот что вам нужно знать о FullScreen API:
- Работает в Firefox 10, Safari и Chrome ;
- Запускается с помощью нового метода
requestFullScreen(); - Может отображать любой элемент на весь экран, а не только всю страницу;
- По соображениям безопасности полноэкранный режим может быть запущен только из обработчика событий (то есть инициируется пользователем);
- Также для обеспечения безопасности, Safari блокирует все нажатия с клавиатуры, за исключением стрелок и клавиш управления, другие браузеры при вводе с клавиатуры отображают предупреждающие сообщения;
- API по-прежнему в разработке, поэтому вам нужно использовать специальные вендорные методы (префиксы
mozиwebkit);
Идея позволяющая разработчикам программно завладеть экраном пользователя пришла к нам не без серьезных последствий для безопасности, поэтому использование клавиатуры ограничено. Конечно, есть много реальных причин, требующих ввод с клавиатуры в полноэкранном режиме, поэтому думаю в будущих версиях API этот вопрос будет рассмотрен через какое-нибудь окно с подтверждением.
Однако даже в его нынешней ограниченной форме API дает нам возможность улучшить опыт конечного пользователя.
Основы
Согласно черновику W3, у нас есть доступ к ряду методов и свойств, которые помогут нам с задачей переключения нашего элемента на полный экран.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var elem = document.getElementById('#content'); // Активируем этот элемент на весь экран elem.requestFullscreen(); // Когда обнаружено изменение на полноэкранный режим, // выполняем следующее событие document.addEventListener("fullscreenchange", function(){ // Проверяем, находимся ли мы в полноэкранном режиме if (document.fullscreen) { // Мы сейчас на полном экране! } else { // Выход из полноэкранного режима } }, false); // Мы также можем выйти из полноэкранного режима следующей строкой document.exitFullscreen(); |
В настоящее время использование API довольно громоздко, так как для поддержки всеми браузерами нам нужно будет использовать префиксы vendor specific ones, такие как elem.mozRequestFullScreen() и elem.webkitRequestFullScreen().
API также вводит новый псевдоселектор CSS, который можно использовать для стилизации полноэкранного элемента.
|
1 2 3 |
#content:fullscreen { font-size: 18; } |
Разумеется, необходимо добавлять префиксы moz и webkit. Но есть решение проще.
Плагин jQuery
Существует более элегантное решение, чем написание кучи уродливого кода под каждый браузер. Вы можете использовать плагин jQuery FullScreen, который работает в разных браузерах и предоставляет вам простой метод для запуска полноэкранного режима.
|
1 2 3 4 5 |
$('#fsButton').click(function(e){ // Используем плагин $('#content').fullScreen(); e.preventDefault(); }); |
Этот код переведет элемент #content в полноэкранный режим. Плагин также имеет флаг поддержки jQuery метода, поэтому перед выполнением кода мы можем выполнить проверку:
|
1 2 3 4 |
if($.support.fullScreen){ // Показать кнопку полноэкранного режима $('#fsButton').show(); } |
Чтобы выйти из режима, снова вызовите метод fullScreen() или нажмите esc.
Плагин добавляет класс .fullScreen к вашему элементу, поэтому вы можете стилизовать его, не беспокоясь о специфике браузера. Теперь давайте используем его и сделаем для мира что-нибудь хорошее!
Практическая часть
Если вы являетесь владельцем веб-сайта, вы, вероятно, принимали решения, которые ухудшают опыт ваших пользователей. Для вас не должно быть сюрпризом, что вам нужно показывать рекламу, вам нужно поле поиска, панель навигации, виджеты соц. сетей, раздел комментариев и все, что делает ваш сайт тем, чем он является. Все это необходимо, но уменьшает пространство для контента, а это то, зачем люди приходят на ваш сайт.
Существует также практическое ограничение размера шрифта, не говоря уже о самом шрифте. Если у вас есть боковая панель, это также ограничивает горизонтальное пространство для вашего контента.
Мы можем исправить все это с помощью нового API. Мы увеличим секцию с контентом до полноэкранного режима, тем самым улучшим удобочитаемость для читателей даже на устройствах с небольшими дисплеями, такими как ноутбуки и нетбуки.
Создание режима чтения
Все довольно просто, нам нужна только кнопка, которая активирует плагин FullScreen. Мы можем использовать флаг $.support.fullscreen, чтобы проверить, поддерживает ли API текущий браузер. Если поддерживает, на странице появится кнопка с классом goFullScreen для переключения в полноэкранный режим.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
(function ($) { $(document).ready(function() { if($.support.fullscreen){ /* Наша кнопка, со свойством по умолчанию dysplay: none; */ $('.goFullScreen').css({display:"block"}); /* Вешаем обработчик на кнопку */ $('.goFullScreen').click(function(e){ e.preventDefault(); $('#primary').fullScreen(); }) } }); })(jQuery); |
Когда блок #primary отображается в полноэкранном режиме, ему назначается ширина и высота 100%. Если мы хотим, чтобы он был центрирован в середине экрана, то нам необходимо это исправить. Для этого стилизуем #primary.fullScreen, применяемый в полноэкранном режиме.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
a.goFullScreen{ /* Здесь отображается стиль кнопки полноэкранного режима */ display: none; } /* Следующие стили применяются только в полноэкранном режиме */ #primary.fullScreen{ /* Добавление ширины и margin:0 auto для центрирования контейнера */ width: 860px; margin: 0 auto; /* Увеличение размера шрифта для удобочитаемости */ font: 17px serif; padding: 45px 45px 10px; } #primary.fullScreen h1{ /* Стилизация заголовков */ font: 56px/1.1 Cambria,"Palatino Linotype",serif; text-align: center; } #primary.fullScreen h3{ /* Подзаголовки */ font: 28px Cambria,"Palatino Linotype",serif; } #primary.fullScreen #postAuthor{ /* Центрирование информации автора сообщения */ /* ... */ } /* Скрытие ненужных элементов и объявлений */ #primary.fullScreen #featuredImage, #primary.fullScreen #topMiniShare, #primary.fullScreen #wideZineBanner, #primary.fullScreen #downloadDemo{ display:none; } |
Вот и все! Только браузеры, поддерживающие полноэкранный режим, будут отображать кнопку.
Готово!
На веб-сайте есть множество мест, где вы можете использовать полноэкранный режим — от видео и canvas игр, до диалоговых окон и предварительного просмотра. Я лично хотел бы, чтобы это использовалось для инфографики и презентаций. Мы можем пройти долгий путь с такой полезной функцией.
Не совсем точный перевод статьи на tutorialzine.com
