Утром доделаю

Браузер Kindle Paperwhite

Kindle Paperwhite
Разрешение экрана 768 × 1024, 16 оттенков серого
Размер вьюпорта 758 × 899
Браузер На движке WebKit
User Agent (javascript) Mozilla/5.0 (X11; ; U; Linux armv7l; en-us) AppleWebKit/534.26+ (KHTML, like Gecko) Version/5.0 Safari/534.26+
User Agent (http header) Mozilla/5.0 (X11; U; Linux armv7l like Android; en-us) AppleWebKit/531.2+ (KHTML, like Gecko) Version/5.0 Safari/533.2+ Kindle/3.0+
Acid3 100/100
HTML5 Test 212/555
CSS3 Test 45%

Kindle Paperwhite — новая Амазоновская читалка с e-ink тачскрином. Девайс оборудован вайфаем, есть модели с 3G.

Браузер в читалке — усовершенствованная версия браузера из Kindle Keyboard. Производительность браузера довольно сильно возросла по сравнению с предшественником, поддержка HTML5 улучшилась.

С юзер-агентом у нового Киндла беда. На сервер отправляется вполне типичный для Киндлов юзер-агент, а вот из navigator.userAgent доступен другой, который сложно как-либо идентифицировать среди десятков других вебкитов. Палка в колеса моему снифферу и еще один повод юзать фиче-детекты.

Поддержка фич

Фичи тестировались Модернайзером. Полная таблица моих тестов на гугл доксах.

Фича Тест Реальный результат
backgroundsize True True
bgsizecover True True
borderradius True True
boxshadow True True
boxsizing True True
cssanimations True True (-webkit-)
cssgradients True True (-webkit-)
csstransforms True True (-webkit-)
csstransforms3d False True (-webkit-)
csstransitions True True (-webkit-)
fontface True True
mediaqueries True True
opacity True True
rgba True True
textshadow True True
touch False False
video False False

Анимации

Так же, как и предшественник, Kindle Paperwhite поддерживает анимации и транзишены, которые, с учетом времени отклика е-инка, выглядят довольно печально.

Тач

Новый Киндл лишен железных кнопок и полностью контроллируется с тач-скрина. Браузер управляется привычными жестами, поддерживает мультитач для зума. Отрисовка при скроллинге и зуме для е-инка весьма неплохая. Несмотря на это, тач-эвенты браузер не поддерживает.

Для всех ссылок насильно выставляется text-decoration: underline. Но, в отличии от Kindle Keyboard, на Paperwhite свойство можно заредефайнить с помощью !important:

h1.title a {
	text-decoration: none !important; /* no underline for Kindle! */
}

Шрифты

Поддерживаются все основные форматы веб-шрифтов (woff, ttf, svg). У браузера индивидуальная непереносимость к шрифту Scada:

Баг с шрифтом Scada

Другие шрифты работают без проблем.

Скролл

Блоки со скроллом скроллятся не всегда корректно. Если на странице есть блок с горизонтальным скроллом, вертикальное движение пальцем внутри блока часто приводит к горизонтальному проскролливанию самого блока вместо скролла страницы.

Например, здесь блок с кодом имеет горизонтальный скролл. Проскроллить страницу вниз в таком случае крайне сложно:

Высокий блок с горизонтальным скроллом

Баг с box-shadow

Если тень блока выезжает за вьюпорт, или если где-то вне вью-порта живет блок с box-shadow (даже если он находится в overflow другого блока), вьюпорт расширится, чтобы захватить собой тень. Такой вот дурацкий баг.

Формы

Браузер в зачаточной форме поддерживает некоторые типы полей ввода. Очень плохо работает range:

Тест различных типов полей ввода

Валидации нет, аттрибуты required и pattern, соответственно, тоже не поддерживаются.

Итого

Эволюционное развитие предыдущего поколения. Если у вас есть оптимизированный под мобильные устройства сайт, с большой вероятностью он прекрасно заработает на новом Киндле без дополнительных ухищрений.

Впрочем, немобильные сайты тоже работают вполне адекватно.

Опубликовано в «Редких зверях»