Safari на iOS7 и HTML5: проблемы, изменения и новые API (перевод)

Apple выпустила iOS7 и несколько дней назад новые устройства iPhone 5S и iPhone 5C. Как и ожидалось Apple опубликовал лишь 10% необходимой информации для web-разработчиков и я могу без страха ошибиться заявить, что это самая «бажная» версия Safari с выхода 1.0. В этом посте я покажу вам новые API, возможности и болльшую часть проблем с которыми вам надо справиться прямо сейчас, если у вас есть вебсайт или веб-приложение.

В двух словах

Нет времени читать длинный пост?

• Изменения интерфейса: «прозрачность» панели инструментов (toolbar), проблемы с навигацией в полноэкранном режиме, новые размеры иконок home screen; на iPhone не используется <title>; возможны проблемы с новыми «жестами».
• Новые устройства: Ничего нового о них для веб-разработчиков, также как и с iPhone5
• Разметка HTML5: субтитры к видео, <progress>, УДАЛЕНА поддержка input type=datetime
• HTML5 API: вид страницы, AirPlay API, усовершенствование canvas, УДАЛЕНА поддежка Shared Workers, Web Speech Synthesis API, поддержка Web Audio и Animation Timing без префиксов, Mutation Observer и другие незначительные изменения. БОЛЬШИЕ ПРОБЛЕМЫ с использованием WebSQL по размеру большим, чем 5Mb.
• CSS: Regions, Sticky position, FlexBox, ClipPath, поддержка Transitions без префиксов и другие изменения
• Home Screen webapps: НЕСКОЛЬКО СЕРЬЕЗНЫХ ПРОБЛЕМ (например, отсутсвие поддержки alert)
• Native webapps: Web View Pagination, JavaScript runtime для нативных приложений и новые возможности воспроизведения видео

Продолжение под катом.

Новый браузер

Пользовательские ощущения и интерфейс Safari, также как и других нативных приложений, преобразились максимально со времен версии 1.0. Эти изменения влияют на то, как пользователь будет взаимодействовать с веб-сайтами и на то, как будет реагировать ваше приложение.

Прозрачность панели инструментов

Safari теперь будет создавать «прозрачность» toolbar’ов (заголовок адреса URL и нижнюю панель инструментов на iPhone), которая будет получаться из:

• background-color загруженной страницы
• преобладающего цвета позади панелей во время прокручивания страницы (scroll)

Если вы хотите использовать разные цвета для страницы и заголовка без создания мусора в HTML (такого, например, как новые контейнеры) можете применить следующий CSS-хак:

body { background-color: blue; /* for the tint */ background-image: linear-gradient(to bottom, green 0%, green 100%); /* for the body */ } 

В этом хаке мы указываем и цвет и изображение заднего фона; контент будет использовать изображение, в данном случае градиент (можно использовать и однопиксельное изображение). На следующем изображении вы мождете видеть два первых примера с одинаковым цветом (только background-color) и последний пример с разными цветами

Full screen и проблемы HTML5 приложений и игр

Веб-серфинг не всегда полноэкранный на iPhone и iPod touch. Когда пользователь скроллит страницу в книжной ориентации (portrait orientation), нижняя панель исчезает и панель адреса трансформируется в маленькую полупрозрачную панель вверху. В альбомной (landscape) после скролла страницы обе панели исчезают, делая страницу полностью полноэкранной.
Панели снова появятся когда пользователь:

• нажмет на панель адреса вверху
• начнет скроллить страницу обратно вверх

Следующая картинка показывает как выглядит интерфейс до и после скролла в книжной и альбомной ориентации

Проблемы:

• Событие resize не срабатывает когда панели появляются/исчезают
• Мы не можем определить изменения JavaScript’ом или через media (media queries)
• Прежний хак с использованием window.scrollTo чтобы спрятать URL больше не работает; следовательно теперь нет способа спрятать панель адреса, кроме вмешательства пользователя прокручиванием страницы
• Если вы не используете обычный scroll у вас большие проблемы (будет описано ниже)
• Нижняя часть canvas больше не интерактивна (детали позже)

Если вы используете разметку со «своим» скроллом, такую как iframe, контейнеры с overflow:scroll или механизм пролистывания основанный на JavaScript, панели не спрячутся. И более того, если пользователь как-то попадет в полноэкранный режим он не сможет вернуться в обычный.Для примера взгляните на страницу Twitter (использующую overflow:scroll) в альбомной ориентации, где прокручиваемая область меньше 50% экрана и панели не исчезают.

Если быть честным, когда вы перейдете в книжную ориентацию, а потом обратно в альбомную, иногда вы попадаете в полноэкранный режим, но не сможете из него выйти.
Прокручивание в обратную сторону чтобы восстановить панели усложняет также и работу с HTML5 играми. Так как эта тема была поднята на Apple Forum во времена Beta 1. Многие уже пожаловались на данную проблему, к примеру:

• Richard Davey: “This is actually a real issue for us. It has broken the display of all of our games on the BBC site (try anything on http://www.bbc.co.uk/cbeebies/ for example). With the removal of the full-screen button and the removal of this ‘hack’ we’ve no way to make our games go full screen. So they are crammed into a tiny window in the middle of the browser on iPhones. (…) When you enter a page in landscape mode, only 2/3rd’s of the screen area is available. Controls cover a full 1/3rd of the screen.(…)
• TheFlashGuy: “We need more control over the appearance / disappearance of the browser bars when in landscape mode. It’s far too easy for a user to break out of this mode just by touching the top or bottom of the screen. This breaks a lot of websites and web apps whose major ui nav elements tend to sit in the top or bottom of the content area”

Теперь нет возможности использовать полноэкранный режим на вашем сайте. Это был один из прекрасных аспектов iOS6, и отказ от него огромный шаг назад. Richard Davey.

Нижняя панель и интерактивные элементы

Когда вы находитесь в полноэкранном режиме, нижняя часть страницы больне не интерактивна. Эта проблема относится к любым панелям инструментов, ссылкам или элементам форм которые находятся в нижней части видимой области пока вы в полноэкранном режиме (после скролла). Например неподвижные панели инструментов внизу страницы
Когда вы нажимаете на эту область, не важно в какую ее часть, срабатывает действие «выйти из полноэкранного режима». Поэтому панели Safari снова появятся и вам придется снова кликать на интерактивном элементе чтобы активировать его. Протестировать это вы можете здесь
К примеру, на следующем изображении, если вы попытаетесь нажать Albums, просто откроется панель Safari, и вам придется нажимать Albums снова.

Заголовок Title

Следующее большое изменение в интерфейсе Safari на iPhone это область заголовка. Title страницы на iPhone был заменен текущим хостом(доменом) как вы моете увидеть на следующих изображениях. Заголовок страницы доступен только при переключении вкладок на iPhone.