Safari 9 в OS X El Capitan — что нового?

В этот понедельник состоялась основная презентация с WWDC 2015, на которой миру были представлены и анонсированы новые версии популярных операционных систем от Apple: iOS 9 и OS X El Capitan. Пересказывать весь keynote я здесь не буду и писать свое отношение — тоже. В другой раз.

Потому что сегодня мы поговорим про Safari 9 — новый браузер, идущий в комплекте с новой же OS X 10.11.

#

Safari 9 или Safari 8.1?

На данный момент доступна первая beta для разработчиков (публичная бета будет в Июле, а релиз — осенью) операционной системы OS X El Capitan. Safari, который с ней поставляется имеет порядковый номер 8.1, но все фичи соответствуют 9-й версии.

Сразу же оговоримся и впредь будем иметь в голове версию 9.

#

Закрепленные вкладки и другие UI-изменения

Сразу хочется упомянуть про фичи для широкого круга пользователей, такие как (очевидно) новый системный шрифт San Francisco, прозрачная строка состояния (status bar), возможность выключать звук у разных вкладок отдельно и новая фича — закрепленные вкладки.

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

Например, Instagram сделали это так:

<link rel="icon" sizes="any" mask href="//instagramstatic-a.akamaihd.net/bluebar/8d1e402/images/ico/favicon.svg">
<meta name="theme-color" content="#125688">

Два мета-тега, в одном из них ссылка на SVG-иконку, во втором написан цвет, в который окрашивать. Вот выдержка из документации Apple по этому поводу:

You can set the icon that the user sees when they pin your site by providing a vector image. Use 100% black for all vectors with a transparent background in SVG format and add the following markup to all webpages that the icon should represent.

От чего-то наш код работать отказывается. Будем пробовать и ждать следующих релизов. Фича полезная и интересная с точки зрения UX.

Обновлено 27 апреля 2016 года: Спустя несколько месяцев, в релизной версии всё уже работало. Работает и до сих пор.

#

Инструменты разработчика

Новые инструменты разработчика теперь разделены на вкладки, которые можно переставлять местами, включать/выключать и кастомизировать по своему усмотрению. Инспектор элементов находится отдельно от инспектора ресурсов.

Дополнительно во вкладке «шкала времени» теперь добавлен инструмент для профилирования фронт-енда — «отрисвока кадров», который показывает вам из-за чего фреймрейт на странице проседает ниже заветных 60 кадров в секунду.

Отладчик теперь показывает типы переменных (включая ECMAScript 6 классы) и более подробно показывает ошибки там, где они возникают.

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

#

Режим отзывчивого дизайна

Еще в Safari 9 вас ждет новый инструмент «режим отзывчивого дизайна», который больше походит на какое-то очень крутое расширение для тестирования адаптивной верстки. С его помощью вы сможете использовать всю мощь новых инструментов разработчика и тестировать верстку ваших сайтов на всех экранах.

Есть как предустановленные разрешения, так и три свободных слота для пользовательских разрешений. Дополнительно можно эмулировать плотность пикселей и менять строку User Agent.

#

Safari 9: WebKit под капотом

Следующая статья и ролик будут про новые CSS-свойства и возможности, которые предоставляет нам новый WebKit. А пока — порадуемся за Safari 9, ведь с каждым разом браузер становится все более «взрослым» и ориентированным на веб-разработчиков.

Или может веб-разработчики скатываются в детство?