CSS3 рецепты для WebKit. Сделано для мобильных устройств. Программа мониторинга сети

На момент написания этой статьи Safari на iOS была самым сложным браузером. Как уже отмечалось в Главе 7, начиная с версии 2.0, IOS поддерживает большую (и странную) группу CSS-расширений, которые позволяют нам использовать аппаратно-ускоренную анимацию, переходы и даже 3D-эффекты. Некоторые из этих расширений, в зависимости от версии операционной системы, также работают и с Android и webOS браузерами.

WebKit функции

Многие CSS-свойства как параметр воспринимают функции. Эти функции — аппаратно-ускоренные WebKit-расширения.

Перечисленные здесь связанные с градиентом функции в iOS официально не поддерживаются (согласно Safari Reference Library). Тем не менее, они работают с OS 3.0 и более старыми устройствами, где они используют простой фон.

В таблице 9.7 перечислены функции, доступные для iPhone (есть и другие, но они работают только в настольном Safari). Некоторые из этих функций — например, scale и rotate — можно использовать также и в браузерах Android и webOS.

Табл. 9.7. Таблица CSS функций доступных в Safari на iOS Функция Описание

cubic-beizer(p1x, p1y, p2x, p2y)	Определяет кривую Безье для timing function.
matrix(m11, m12, m21, m22, tX, tY)	Определяет трансформационную матрицу из шести значений с двумя смещениями.
matrix3d(m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m31, m33)	Определяют трансформационную 3D матрицу 4×4.
perspective(depth)	Карты просмотра куба на пирамиде, основание которой находится далеко от зрителя.
rotate(angle)	Определяет 2D вращение вокруг начала координат элемента.
rotate3d(x, y, z, angle)	Определяет 3D вращение с в качестве вектора направления вращения.
rotateX(angle)	Указывает вращение по часовой стрелке вокруг оси Х.
rotateY(angle)	Указывает вращение по часовой стрелке вокруг оси Y.
rotateZ(angle)	Указывает вращение по часовой стрелке вокруг оси Z.
scale(scaleX, )	Выполняет операцию 2D масштабирования.
scale3d(scaleX, scaleY, scaleZ)	Выполняет операцию 3D масштабирования.
scaleX(value)	Масштабирование вдоль оси Х.
scaleY(value)	Масштабирование вдоль оси Y.
scaleZ(value)	Масштабирование вдоль оси Z.
skewX(angle)	Выполнение скошенного преобразования вдоль оси Х.
skewY(angle)	Выполнение скошенного преобразования вдоль оси Y.
translate(deltaX, )	Указывает вектор 2D смещения.
translate3d(deltaX, deltaY, deltaZ)	Указывает вектор 3D смещения.
translateX(value)	Выполняет смещение вокруг оси Х.
translateY(value)	Выполняет смещение вокруг оси Y.
translateZ(value)	Выполняет смещение вокруг оси Z.
from(color)	Определяет начальный цвет в последовательности.
to(color)	Определяет конечный цвет в последовательности.
color-stop(stop_percentage, color)	Указывает промежуточный цвет, который будет использоваться в последовательности в значении stop_percentage.
-webkit-gradient(linear, start_function, end_function, )	Определяет линейный градиент, используя стартовую точку, конечную точку и дополнительные промежуточные точки. Может быть использовано вместо любого изображения в CSS. Доступно начиная с iOS 3.0.
-webkit-gradient(radial, inner_center, inner_radius, outer_center, outer_radius, )	Определяет радиальный градиент с центральной (внутренней) точкой и другой точкой (внешней) с цветами, которые определяются серией функции color-stop. Доступно начиная с iOS 3.0.

CSS функции — это не новая особенность CSS, они доступны в любом браузере. На самомом деле, ты, наверное, уже знаком с некоторыми стандартными функциями — те же url(url_string) или rgba(red, green, blue, alpha) — для определения цвета.

Градиенты

Начиная с iOS 3.0 Safari поддерживает расширения CSS-градиента в качестве функции для тех ситуаций, где раньше мы использовали изображение (например, для фона). Для фона вместо функции url можно использовать функцию -webkit-gradient, с целью определить использование линейного или радиального градиента в качестве фона. Этот метод позволяет нам, используя минимум кода, делать действительно хорошие фоны для заголовков, контейнеров и ячеек. Для браузера Android применяем точно такой же код.

Некоторые примеры определения градиента:

/* Эффект солнца из правого верхнего угла */ body { background: -webkit-gradient(radial, 50% −50, 0, 50% 0, 300, from(#676767), to(black)) black; } body { background: -webkit-gradient(radial, 100% −10, 50, 70% 0, 200, from(yellow), to(white)) #FFC; } /* Простой линейный градиент */ li { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#369), to(#3FF)) #369; } /* Простой 3D эффект */ h1 { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#369), to(#369), color-stop(0.5, #58B)); }

Для значений позиций мы можем использовать проценты, абсолютные значения (без пикселей) или константы top, bottom, right и left. Например, в качестве второго параметра функции CSS мы можем использовать top right, а не 0% 0%. На рисунке 9.1 показано, как такие варианты могут выглядеть в браузере.

Рис. 9.1. Используя только CSS можно создать различные эффекты градиента для iPhone, iPod Touch, iPad, и устройств на базе Android.

Mobile Internet Explorer начиная с версии 6.0 поддерживает фильтры и переходы, используя CSS расширение со стилем filter. Можно применять , и другие эффекты.

Эффекты отражения

Эффекты отражения или зеркальные эффекты — одни из наиболее часто используемых эффектов в Web 2.0 проектах. Использоваться эти эффекты могут для любого контента, в том числе и для изображений. Но не забывай, что мы разрабатываем для мобильных устройств с их маленькими экранами и здесь не стоит тратить впустую слишком много пространства.

Отражение оригинального элемента не изменяет макет или размер исходного блока контента элемента. Это часть переполнения контейнера.

Чтобы сделать эффект отражения в Safari на iOS, используй свойство со следующим синтаксисом:

Webkit-box-reflect: direction offset ;

direction может быть above, below, left или right; offset — расстояние (в px или %) от исходного элемента, отражение которого должно появиться; дополнительный — это, как правило, функция градиента, которая будет работать как маска для отражения изображения. Если изображение маски не указано, то будет использоваться обычное зеркало.

У того типа эффекта отражения, который обычно используется на Web 2.0 сайтах следующие атрибуты:

Webkit-box-reflect: below 3px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));

Маски изображений

Начиная с iOS 3.0 у нас есть доступ к типичной дизайнерской функции, которая отсутствовала в веб-разработке в течении многих лет: маски изображений. Маски изображений мы можем использовать, чтобы к исходному изображению применить любую правильную или неправильную обрезку или, если используется альфа-маска (или функция градиента) можно для любого изображения сделать классный визуальный эффект (например, fuzzy border). Свойства маски похожи на свойства фона. Для применения маски у нас в распоряжении есть сокращенное свойство ярлыка, и специфические свойства для определения каждого параметра.

Синтаксис shortcut версии с дополнительными параметрами:

Webkit-mask: attachment, clip, origin, image, repeat, composite, box-image;

Конечно, у нас есть отдельный доступ ко всем свойствам ( , и т.д.). Возможностей много, но обычно в качестве значения изображения используются изображение (альфа или нет, PNG или SVG) или функция градиента. Пример:

Переход

Переход (transition) — это автоматическая анимация, которая проявляется при изменении значения CSS свойства. Свойство должно быть определено браузером как способное к анимации (обычно это относится к свойствам позиции и размера). Официального списка свойств, которые могут работать с анимацией нет, но в целом позиция такая: любое свойство с числовыми значениями или значениями цвета может быть анимирован при помощи transition. При этом есть несколько исключений, как, например, дискретное свойство .

Помни, что эти смещения реализуются только силами CSS: для создания анимации мы не используем JavaScript или любой другой подобный метод. Может тебе покажется странным, но это простой и, одновременно, мощный метод.

Фреймворк для работы с transition доступен для браузеров Safari (начиная с iOS 2.0) и Android и, кроме того, на этих устройствах производительность при работе с transition выше.

Для реализации transition мы должны:

Определить свойства transition (продолжительность, задержка, где применяется, функция синхронизации) для элемента (-тов), который(-е) мы хотим анимировать.

Изменить значения свойств элемента (-ов) для анимации с использованием JavaScript или применить классы или вообще удалить их из элемента.

Убедиться, что анимация работает.

Правда, звучит просто? Теперь давай сделаем.

Свойства анимации

Анимацию можно определить при помощи свойства со следующим синтаксисом:

Webkit-transition: property duration timing_function delay [, ...];

Мы также можем использовать специфические свойства, указанные в таблице 9.8.

Табл. 9.8. Таблица свойств transition для WebKit Свойство Описание

	Определяет какое свойство или свойства будут использоваться для анимации. Можно использовать список значений, разделенных запятыми или постоянные значения.
	Определяет продолжительность перехода. Значение может быть 0 (нет анимации) или положительное значение в секундах (s используется в качестве единицы). Если для каждого свойства мы хотим задать разное время — можно использовать список разделенных запятыми значений в том же самом порядке, как и значения для свойства -webkit-transition-property.
	Определяет функцию, которая используется для вычисления промежуточных значений между начальным и конечным значениями свойства. Ты можешь использовать CSS функцию cubic-bezier или любую из следующих констант: ease, linear, ease-in, ease-out, и ease-in-out (чаще всего используется).

При помощи следующего примера кода реализуется анимация появления и исчезновения

Fade Sample #box { width: 200px; height: 200px; background-color: red; -webkit-transition: opacity 2s; } .hide { opacity: 0; } function fade() { var box = document.getElementById("box"); box.className = (box.className=="hide") ? "" : "hide"; box.innerHTML = box.className; } Fading

Такие же переходы мы можем использовать для изменения размера, перемещения, изменения цвета и даже для 3D-перемещений.

Завершение перехода

Завершение перехода, точно так же, как и любое другое событие DOM можно реализовать при помощи addEventListener из JavaScript. Когда ты убедишься, что анимация действительно закончилась, можно инициировать начало следующего перехода или же еще какое-нибудь другое действие. Для этого нам нужно отловить событие webkitTransitionEnd. Сделать это мы можем при помощи следующего кода:

Box.addEventListener("webkitTransitionEnd", function(event) { alert("Finished transition"); });

Анимации

Переход — это отличная вещь и самый простой способ реализовать анимацию на устройствах iPhone и Android. Если же тебе нужен точный контроль над анимацией на уровне ключевого кадра, можно воспользоваться CSS фреймворком для анимации. Если честно, я думаю, что это уже слишком для обработки только посредством CSS, непроцедурного и «не-разметочного» языка. Но работает это прекрасно.

В WebKit анимация делается при помощи свойства и синтаксис будет следующим:

Webkit-animation: name duration timing_function delay iteration_count direction

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

Табл. 9.9. Таблица анимаций для WebKit Свойство Описание

	Определяет имя анимации, которое будет использоваться ключевыми кадрами.
	Определяет продолжительность анимации (в секундах или милисекундах).
	Определяет функцию, которая используется для вычисления промежуточных величин между начальными и конечными значениями определенного свойства. Ты можешь использовать CSS функцию cubic-bezier() или любую из следующих констант: ease, linear, ease-in, ease-out и ease-in-out (используется чаще всего).
	Определяет задержку анимации, которая начинается с момента изменения свойства. Определятся может в секундах или милисекундах; значение по умолчанию — 0. Если используется отрицательная величина — анимация запускается сразу, но какой-то фрагмент анимации будет уже как бы проигран и, соответственно, пропущен.
	Определяет, сколько раз повторится анимация. Значение по умолчанию здесь 1, также в качестве значения может выступать любое целое число, специальная константа infinite или любое действительное число.
	Определяет, в каком направлении будет проигрываться анимация.

Разобравшись с этим перечнем, ты, должно быть, спрашиваешь себя, где именно определяется анимация? Что выступает в качестве объекта анимации? И ответить на эти вопросы помогут расширения WebKit для ключевых кадров.

Если ты перемещаешь или масштабируешь объект и хочешь, к тому же, анимировать его, лучше вместо стандартных свойств CSS использовать — свойство с улучшенной производительностью.

Директива ключевого кадра

Чтобы определить, как будет работать анимация и что именно будет происходить, нужно определить специальное CSS эт-правило, которое называется . Это правило сопровождается именем анимации, которое определяется в -webkit-animation-name.

Внутри директивы ключевого кадра следует указать, сколько нам нужно селекторов или групп анимации в качестве ключевых кадров. Селектор определяется значением в процентах и константами from (эквивалент 0%) и to (эквивалент 100%). В каждом селекторе мы определяем все нужные для определенной точки анимации свойства и значения. При помощи -webkit-transition-timing-function мы можем определить синхронизацию для каждой анимационной группы.

По завершению анимации восстанавливаются исходные значения. После остановки анимации элементы не будут сохранять значения последнего ключевого кадра.

Например, при помощи следующего кода мы перемещаем по квадратной траектории:

Fade Sample #box { width: 200px; height: 200px; background-color: red; position: absolute; top: 0px; left: 0px; } .squareAnimation { -webkit-animation-name: squarePath; -webkit-animation-duration: 4s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes squarePath { /* В качестве селектора можно использовать 0% или "from" */ from { top: 0px; left: 0px; } 25% { top: 0px; left: 100px; } 50% { top: 100px; left: 100px; } 75% { top: 100px; left: 0px; } /* В качестве селектора можно использовать 100% или "to" */ 100% { top: 0px; left: 0px; } } function start() { // Когда мы применяем свойство -webkit-animation, анимация начинается document.getElementById("box").className = "squareAnimation"; } Движение по квадратной траектории

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

Итак, для старта анимации мы применяем класс, а если мы хотим остановить анимацию раньше, чем проиграется последний кадр, мы должны присвоить свойству -webkit-animation-name пустое значение.

Можно использовать несколько вариантов: одну анимацию, которая изменяет сразу несколько свойств или одновременно применять разные анимации (с разными именами), каждая из которых будет изменять только одно свойство.

События анимации

Как и в случае с переходами смещениями, мы можем отследить события webkitAnimationStart, webkitAnimationIteration, и webkitAnimationEnd. При запуске эти события отправляют в качестве параметра объект WebKitAnimationEvent. Но для получения каждого изменения ключевого кадра события нет.

У объекта события есть специальные свойства animationName и elapsedTime, значения которых задаются в секундах.

Трансформации

Последняя группа WebKit CSS расширений, которую мы рассмотрим — функции преобразования (трансформации). Для генерации визуальных эффектов без использования изображений, canvas или SVG, мы можем применить эти функции к любому элементу. Функции преобразования работают в браузерах Safari, Android и webOS.

Работать с этими функциями очень просто: мы используем CSS свойство , применяя в качестве значения функции CSS, с которыми мы уже встречались ранее в этом разделе, например rotate, scale или translate3d (последняя только Safari).

Упрощенный вариант шаблона CardFlip выглядит так:

Card Flip body { margin: 0px; -webkit-user-select: none; } #container { height: 356px; width: 320px; background-color: rgba(56,108,179, 0.5); /* Отключаем подсветку */ -webkit-tap-highlight-color: rgba(0,0,0,0); /* Придаем некоторую глубину карте */ -webkit-perspective: 600; } .card { position: absolute; height: 300px; width: 200px; left: 60px; top: 28px; -webkit-transform-style: preserve-3d; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1.5s; } .card.flipped{ -webkit-transform: rotateY(180deg); } /* Стилизуем карту и скрываем ее "обратную сторону" когда карта перевернута */ .face { position: absolute; height: 300px; width: 200px; -webkit-border-radius: 10px; -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5); -webkit-backface-visibility: hidden; } .face > p { margin-top: 36px; margin-bottom: 0; text-align: center; font-size: 92px; } .front { color: rgb(78,150,249); background-color: rgb(34,65,108); } .back { color: rgb(34,65,108); background-color: rgba(78,150,249,0.5); /* Обеспечиваем переворот "обратной стороны" */ -webkit-transform: rotateY(180deg); } function flip(event) { var element = event.currentTarget; /* Toggle the setting of the classname attribute */ element.className = (element.className == "card") ? "card flipped" : "card"; }

♠ ♦
♣

♦ ♠
♣

Если проанализировать код, то мы увидим два элемента div которые составляют нашу карту — элемент.card. Один div — «передняя» поверхность, другой — «задняя». Обе поверхности расположены на одной и той же самой позиции (как абсолютные элементы) и задняя сторона запускается при повороте вокруг оси Y на 180 градусов.

Когда пользователь кликает по контейнеру card (с выведенной на экран передней или задней стороной), мы при помощи JavaScript применяем (или не применяем) CSS класс flipped, который вращает элемент на 180 градусов вокруг оси Y. И вуаля! Спереди (front) всегда будет отображаться только только одна поверхность, а другая будет автоматически скрыта. И вседа это будет происходить с красивой сглаженной анимацией, которую ты, к сожалению, не сможешь полностью оценить на рисунке 9.3.

Рис. 9.3. С 3D поворотом можно использовать прекрасные 3D эффекты для отображения тыльной строны элемента.

Для многих из нас, разработчиков, WebKit - черный ящик . Мы бросаем в него HTML, CSS, JS и кучу изображений, и WebKit, как-то… магически, выдает нам веб-страницу, которая выглядит и работает хорошо.
Но на самом деле, как говорит мой коллега Илья Григорик :

Веб-кит не является черным ящиком. Это - белый ящик. И не просто белый, но и открытый ящик.

Так-что, давайте попробуем разобраться в некоторых вещах:

• Что такое WebKit?
• Чем WebKit не является?
• Как WebKit используется WebKit-браузерами?
• Почему WebKit-ы не одинаковые?

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

Стандартные компоненты веб-браузера

Давайте перечислим несколько компонентов современных браузеров:

• Парсинг (Разбор HTML, XML, CSS, Javascript)
• Макет (Layout)
• Рендеринг текста и графики
• Декодировка изображений
• Взаимодействия с GPU
• Доступ к сети
• Аппаратное ускорение

Какие из них общие для всех WebKit браузеров? В значительной степени только первые два.

Остальные компоненты каждый WebKit «порт» реализует по своему. Давайте разберемся что это значит.

WebKit порты

Существует множество WebKit «портов», и я предоставляю Ария Хидаят, WebKit хакер и тех. директор в Sencha право рассказать об этом :

Самым популярной ассоциацией к понятию WebKit, обычно является вид WebKit-а от Apple’s, который работает на Mac OS X (первая и оригинальная WebKit библиотека). Как вы можете догадаться, различные интерфейсы реализованны, используя различные нативные библиотеки Mac OS X, в основном сосредоточенные в компоненте CoreFoundation . Например, если вы определяете цветную плоскую кнопку, с особым радиусом контура, WebKit знает где и как рисовать эту кнопку. В тоже время, окончательная отрисовка кнопки (в виде пикселей на мониторе пользователя) ложиться на плечи CoreGraphics .

Как я упоминал выше, используемый CoreGraphics, уникален для каждого WebKit порта. Chrome для Mac-а, к примеру, использует Skia .

В какой-то момент, WebKit был «портирован» под разные платформы, как десктопные, так и мобильные. Такая вариация обычно называется «WebKit порт». Для Safari Windows, Apple также самостоятельно портировала WebKit для запуска под Windows, используя своей (с ограниченной реализацией) CoreFoundation библиотеки.

… не смотря на факт, что Safari под Windows теперь мертв .

Кроме этого, также было множество других «портов» (см. полный список). Google создал и продложает поддерживать свой Chromium порт. Также существует WebKitGtk, основанный на Gtk+. Nokia (а теперь Trolltech, который перекупил его) поддерживает WebKit Qt порт, который стал популярен в качестве QtWebKit модуля .

Некоторые порты WebKit

• Safari
  - Safari под OS X и Safari под Windows два разных порта
  - Ночная сборка WebKit это сборка исходного кода Mac «порта», который используется для Safari, только новее
• Мобильный Safari
  - Развивался в приватной ветке, но позднее был открыт .
  - Chrome под iOS (использует Apple’s WebView; чуть позже о разнице)
• Chrome (Chromium)
  - Chrome под Android (использует непосредственно «порт» Chromium)
  - Chromium также является основой для браузеров: Yandex , , Sogou , и скоро, Opera.
• Android браузер
  - Использует последний исходный код WebKit, доступный на момент релиза.
• Еще большее количество портов : Amazon Silk, Dolphin, Blackberry, QtWebKit, WebKitGTK+, The EFL port (Tizen), wxWebKit, WebKitWinCE, etc

Разные порты могут фокусироваться на разных задачах. Фокус Mac порта - разделение между браузером и операционной системой, и предоставление биндигов Obj-C и С++ для встраивание рендеринг движка в нативные приложения. Фокус Chromium порта - всецело на браузере. QtWebKit предлагает свой порт использовать вместе со своей кросс-платформенной архитектурой приложений, в качестве движка для рендеринга.

Что общее во всех WebKit браузерах

Для начала давайте рассмотрим общие функции, которые используются во всех WebKit-браузерах:

Знаете это смешно, я сделал несколько попыток, чтобы написать этот абзац. И каждый раз члены команды Chrome поправляли меня, как вы увидите…

И так, во первых, WebKit разбирает HTML одинаково. Ну, за исключением того, что Chromium единственный порт, на данный момент, где включена поддержка потоков для разбора HTML .

… Хорошо, но после разбора HTML, DOM дерево конструировается одинаково. Ну, на самом деле Shadow DOM включен только для Chromium порта, тоесть построение DOM-а варьируется. Тоже для кастомных элементов.

… Хорошо, WebKit создает window и document объекты для всех одинаково. Правда, хотя свойства и конструкиии которые они предоставляют, могут зависит от использования переключателей функций (feature flags).

… Разбор CSS одинаков. Поедание вашего CSS и преобразование его в CSSOM довольно таки стандартно. Ага, хотя Chrome поддерживает только -webkit- префиксы, когда Apple и другие браузеры поддерживают устаревшие префиксы -khtml- и -apple-.

… Макет… позиционирование? Это же как хлеб с маслом. Везде одинаково, правильно? Ну уже! Субпиксельный макет и насыщенная макетная арифметика является частью WebKit, но отличается от порта к порту.

Супер.

Так что, это сложно.

Теперь, давайте попробуем подвести итог, что общего в мире WebKit…

Что общего для каждого WebKit порта.

• DOM, window, document
  более или менее
• CSSOM
• Разбор CSS, свойство/значение
  различия в префиксах производителей
• Разбор HTML и построение DOM
  Одинаково, если мы забудем про Web Components.
• Макет и позиционирование
  Flexbox, Floats, block formating context… все общее
• Инструменты пользовательского интерфейса, и инструменты разработчика, типа Chrome DevTools он же WebKit inspector.
  Хотя с прошлого апреля, Safari использует свой собственный Safari инспектор, не-WebKit, с закрытыми исходниками.
• Такие функции как contenteditable, pushState, File API, большенство SVG, математика CSS трансформаций, Web Audio API, localStorage
  Хотя реализация может отличаться. Каждый порт может использовать свою собственную систему хранения для localStorage и может использовать разное audio API для Web Audio API.

Становится не совсем понятно, поэтому давайте попробуем взглянуть на некоторые различия.

Теперь, что не является общим для WebKit портов:

• Все связанное с GPU
  - 3D трансформации
  - WebGL
  - Декодирование видео
• Отрисовка 2D на экран
  - Технологии сглаживания
  - Рендеринг SVG и CSS градиентов
• Рендеринг текста и переносы
• Сетевые технологии (SPDY, пре-рендеринг, WebSocket транспорт)
• JavaScript движок
  - Движок JavaScriptCore лежит в репозитории WebKit. Но существуют биндинги в WebKit и для него, и для V8.
• Рендеринг элементов форм
• Поведение тэгов video и audio и поддержка кодеков
• Декодирование изображений
• Навигация назад/вперед
  - Часть pushState()
• SSL функции, такие как Strict Transport Security и Public Key Pins

Давайте взглянем на один из них: 2D графика зависит от порта, мы используем совершенно разные библиотеки для рендеринга на экран:

Или если вдаваться в подробности, недавно добавленная функция: CSS.supports() была включена для всех портов, за исключением win и wincairo, для которых не включены условные функции css3 (css3 conditional features).

Теперь, мы вдаемся в технические подробности… время стать педантичным. Даже сказанное выше не совсем корректно. На самом деле это WebCore, является общим компонентом. WebCore это макет, рендеринг, и DOM библиотека для HTML и SVG, и в основном то, что люди думают, когда они говорят WebKit. В самом деле «WebKit» технически - это слой биндингов между WebCore и «портами», хотя в обычной беседе это различие в основном не важно.

Диаграмма должна помочь:

Многие из компонентов WebKit переключаемые (показаны серыми).

Например, JavaScript движок WebKit-а, JavaScriptCore, является движком по-умолчанию в WebKit. (Изначально он основан на KJS (от KDE) с дней: когда WebKit начинался как ответвление KHTML. В тоже время, Chromium порт, переключается на V8 движок, и использует уникальные DOM биндинги.

Шрифты и рендеринг текста являются очень большой частью платформы. Существует 2 отдельных пути для текста в WebKit: Быстрый и Сложный. Оба требуют поддержку специфичную для платформы (реализованную на стороне порта), но Быстрый только должен знать как блитировать глифы (которые WebKit кэширует для платформы), когда Сложный полностью переносит рендеринг строк на уровень платформы и просто говорит «нарисуй это, пожалуйста».

«WebKit это как сэндвич. В прочем, в случае Chromium, это больше как тако. Вкусное тако из веб-технологий.
Dmitri Glazkov, Chrome WebKit hacker. Champion of Web Componets, and shadow dom.

Теперь, давайте расширим обзор, и посмотрим на несколько портов и несколько подсистем. Ниже представлены пять портов WebKit, обратите внимание, как различается набор инструментов для каждого из них, несмотря на общие компоненты:

Chrome (OS X) Safari (OS X) QtWebKit Android Browser Chrome for iOS Rendering Networking Fonts JavaScript

Skia	CoreGraphics	QtGui	Android stack/Skia	CoreGraphics
Chromium network stack	CFNetwork	QtNetwork	Fork of Chromium’s network stack	Chromium stack
CoreText via Skia	CoreText	Qt internals	Android stack	CoreText
V8	JavaScriptCore	JSC (V8 is used elsewhere in Qt)	V8	JavaScriptCore (without JITting) *

* Сноска про Chrome для IOS. Он использует UIWebView, как вы вероятно знаете. В соответствии с возможностями UIWebView, это означает что он может использовать только такой же рендеринг движок, как и Мобильный Safari, JavaScriptCore (а не V8) и однопоточную модель. Тем неменее, некоторый код заимствован из Chromium, такой как подсистема для работы с сетью, синхронизация инфраструктура закладок, omnibox, метрики и отчеты о сбоях (crash reporting). (Также, JavaScript на столько редко является узким местом на мобильных устройствах, что отсутствие JITting компилятора имеет минимальное влияние.)

Я очень часто вижу на сайтах свойства для какого-то конкретного браузера. Например, свойство "-moz-border-left-colors ", указывающее цвет левой рамки у элемента для Firefox . Давайте с Вами разберём, почему этого делать не стоит, а также укажу лишь единственный случай, когда -moz, -ms, -webkit и аналоги использовать можно.

Не буду особо говорить, что все эти свойства не входят в стандарт CSS , а потому не являются валидными. Как следствие, их реализация может быть в любой момент изменена (если так посчитают разработчики браузеров, ведь описания этих свойств в стандарте CSS нет), в итоге, Ваш сайт может сильно испортиться. Так же не буду особо объяснять, почему они портят общий вид кода. Всё это и так понятно.

Лучше разобрать причины того, зачем используют эти свойства. А причины тут две:

Отсутствие кроссбраузерности . Я могу смело сказать, что проблема кроссбраузерности уже в прошлом. Осталась только проблема некачественной вёрстки. Все современные браузеры адекватно всё обрабатывают. Минимальные недоразумения (например, border-radius у input в Opera ) легко решаются альтернативным подходом к задаче, когда все браузеры хорошо отобразят страницу без всяких "хаков ". И данная проблема не является поводом использования "левых" свойств.

Поддержка более старых браузеров . Причём именно "более ", а не просто старых. В старых браузерах этих свойств и в помине не было. Чтобы понять бессмысленность этого, стоит посмотреть статистику браузеров. Где-то 95% аудитории идёт по современным браузерам. Оставшиеся 5% пользуются непонятно чем. Портя код, Вы получите хороший вид ещё от силы на 1% браузеров. Поэтому сейчас лучше либо выводить сообщение о том, что стоит сменить браузер (у jQuery есть плагин jReject , который это делает), либо просто игнорировать. Более того, я сильно сомневаюсь, что среди этих 5% много людей, скорее всего, большинство там - это боты, которые отдают произвольные заголовки о клиенте. И старые боты могут отдавать тот же IE6 . Так же сюда входят те, кто по-прежнему тестирует свои сайты в старых браузерах.

Поэтому используйте CSS3 , там все возможности уже есть, и его смогут увидеть как раз 95% аудитории.

Однако, я пообещал сказать, когда свойства -moz, -ms, -webkit и прочие , можно использовать. Это нужно, если Вы хотите сделать, немного разный дизайн для разных браузеров. Причём именно "немного ", а если нужно полностью менять всё, то проще через JavaScript определить браузер и подключить отдельный файл стилей. Скажу честно, я с такой задачей не сталкивался, но это единственное, что мне пришло в голову, дабы хоть как-то оправдать "лишние " свойства CSS .

В комментариях одной из статей по CSS3 меня спросили: «В каких браузерах возможно реализовать CSS3 свойства?». И здесь можно было бы ответить, что на сегодняшний день многие функции CSS3 можно реализовать в Firefox, Konqueror, Opera или Safari/Webkit. Однако, в каждом браузере поддержка CSS3 на данный момент существует не на 100% процентов, и набор свойств может отличатся в зависимости от браузера. Так в каких же браузерах и как реализована поддержка CSS3?

Чтобы ответить на этот вопрос, мы обратимся к самим создателям браузеров. В сегодняшнем посте мы начнем с рассмотрения возможностей реализации CSS3 в браузере Safari, а соответственно и других браузерах которые используют последние версии движка WebKit. Ниже представлен перевод официального описания возможностей CSS3 от разработчиков Safari. Итак, приступим…

Вы можете вывести на качественно новый уровень ваши веб-проекты, используя передовые возможности CSS3 в Safari и WebKit. Уточним, WebKit — это движек рендеринга, который используется в браузере Safari на Mac OS X, Windows и OS iPhone.

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

Префикс -webkit который будет использоваться в этой статье, указывает какому типу браузера соответствует CSS правило, но данный префикс не является стандартом W3C, то есть CSS с таким префиксом не пройдет валидацию на соответствие CSS2.1. Например, свойство box-shadow является частью разрабатываемого CSS3 стандарта. И для браузеров на основе Mozilla используется префикс -moz , чтобы определить его именно для данного браузера.

Простое создание теней

Для начала посмотрим, насколько просто добавить тень к любому элементу веб-страницы. Фрагмент кода ниже создает изображение, которое немного наклонено и отбрасывает тень. Оба этих эффекта добавляются с помощью CSS.

1 2

Свойство transform поворачивает картинку, а свойство box-shadow собственно добавляет тень позади изображения. Вы можете изменить размер вращения или параметры тени, просто изменяя параметры в CSS.

Попробуйте, и вы уведите повернутое изображение, как показано в примере ниже.

Рисунок 1: Вращение изображения и создание тени используя CSS3.

В примере CSS прописан через style инлайном, но вы можете вынести правило через класс в отельный файл стилей.

Раньше для того чтобы сделать тень вам нужно было использовать специальные хитрые приемы. Теперь с CSS3 вы можете сделать это прямо в браузере, и это выглядит здорово.

Roll Over Pop Outs — появление изображения на наведение курсора

Следующий пример показывает реакцию изображения на наведение курсора мыши. Для этого используется псевдокласс hover и свойства изменения масштаба. Ниже приведен CSS примера:

1 2 3 4 5

img { -webkit-transform: scale(0.5); } img:hover { -webkit-transform: scale(1); }

При наведении курсора на изображение, оно появляется и становится больше, как это показано ниже.

Рисунок 2. Изображение после наведения курсора

Если убрать курсор, то оно снова уменьшится.

Рисунок 3. Изображение перед наведением курсора

Как вы видите, вы можете добиться этого эффекта с помощью всего лишь нескольких строк CSS.

Анимация изображения на наведение курсора

Еще одним распространенным приемом веб-разработчиков является смена двух изображений, когда пользователь наводить курсор на картинку. В этот примере, изображения не просто сменивают друг друга, но пи этом добавляется эффект затухания. Ниже приведен CSS примера:

1 2 3 4 5 6 7 8 9

div.swapper img { -webkit-transition: opacity 1s ease-in-out; } img.img1 , div.swapper : hover img.img2 { opacity : 1.0 ; } div.swapper : hover img.img1 , img.img2 { opacity : 0 ; }

div.swapper img { -webkit-transition: opacity 1s ease-in-out; } img.img1, div.swapper:hover img.img2 { opacity: 1.0; } div.swapper:hover img.img1, img.img2 { opacity: 0; }

Здесь свойство transition используется для обозначения всех параметров перехода. Первый параметр определяет вид анимации, второй определяет время, а третий определяет функцию перехода. ease-in-out является лишь одной из функций перехода, которые есть в вашем распоряжении. Вы можете также назначить линейные изменения, ease in, ease out, или более сложную cubic Bezier (куб Безье) трансформацию.

Вы можете поэкспериментировать с этими эффектами наводя курсор на картинку, вы получите эффекты, как показано на рисунке ниже.

Рисунок 4. Действие над объектом на наведение курсора с эффектом затухания. Но на картинке это показать сложно

Представьте себе: переходы с затуханием без использования JavaScript!

Макеты в несколько колонок с помощью CSS

Получение колонок на веб-страницах, используя чистый CSS вместо HTML таблиц. С того времени как CSS3 свойства для создания колонок реализованы в Safari и WebKit, вы можете четко определить число столбцов и расстояние между ними, чтобы точно отформатировать свой макет. Посмотрите на CSS в код ниже.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

{ -webkit-column-count: 3 ; -webkit-column-gap: 25px ; -moz-column-count: 3 ; -moz-column-gap: 25px ; column-count : 3 ; column-gap : 25px ; } Column A Column B Column C

#columns { -webkit-column-count: 3; -webkit-column-gap: 25px; -moz-column-count: 3; -moz-column-gap: 25px; column-count: 3; column-gap: 25px; }

Этот код определяет, что HTML в блоке с классом.columns должен быть представлен в трех колонках. Каждый параграф в собственной колонке.

Этот код также иллюстрирует соответствующий страхующий механизм, который используется когда применяются СSS свойства, которые еще не являются частью W3C стандарта. Этот код определяет column-count и column-gap свойства, как с префиксом -webkit и -moz , так и без них. Это означает, что этот код будет работать в Safari и WebKit, а также в Mozilla браузерах, которые поддерживают эти свойства, и будет продолжать работать после того, как CSS3 стандарты будут приняты, и потребность в префиксах отпадет.

Рисунок 5. Простая реализация нескольких колонок

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

Закругленные углы с CSS

Закругленные углы зачастую проблематично реализовать на HTML-страницах, так как они обычно делаются с использованием небольших изображений для каждого уголка и их последующим позиционированием или укладкой, что может вызвать проблемы рендеринга. Свойство border-radius в CSS3 поддерживается WebKit, и позволяет легко создавать закругленные углы всего лишь несколькими строками CSS. Этот метод проиллюстрирован ниже.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

#boxes div { border : 2px solid black ; padding : 10px ; margin : 5px ; width : 200px ; text-align : center ; background : #eee ; } All sides Opposite corners Top Side

#boxes div { border: 2px solid black; padding: 10px; margin:5px; width:200px; text-align:center; background:#eee; } All sides Opposite corners Top Side

Стили разметки определяют, что все блоки (div) внутри контейнера с классом.boxes должны иметь одинаковый бордер, отступы, ширину, фон и так далее. Далее каждому из отдельных блоков инлайн стилем прописаны разные радиусы для бордера. Вы сможете увидеть результат ниже.

Рисунок 6 . Закругленные углы с помощью CSS

В первом блоке border-radius задан для всех углов. Во втором блоке он установлен для правого верхнего и левого нижнего углов. Третий блок выведен в виде таба с закруглением только верхних углов. И у последнего блока закруглены только правые нижний и верхний углы.

Новые виды управления в формах

WebKit также дает целый ряд новых элементов контроля для использования на веб-страницах. В качестве примера ниже представлены горизонтальный слайдер, некоторые новые стили кнопок и поле для поиска похожие на то, которое используется в тулбаре Safari.

1 2 3 4

gradient button aqua button

gradient button

aqua button

Вы можете увидеть иллюстрации этих элементов контроля ниже.

Рисунок 7. Некоторые новые типы элементов контроля имеющиеся в WebKit

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

Простой бокс-слайдер

Заключительный пример, простой pop-out блок, который использует некоторые визуальные эффекты доступные в WebKit. CSS и JavaScript код для этого примера приведены ниже.

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

#box1 { z-index: 100; position:absolute; top:5px; left:5px; width:100px; height:250px; padding:5px; -webkit-border-radius:10px; border: 2px solid black; background: #dddddd; z-index: 200; } #slider { z-index: 100; position:absolute; top:30px; left:5px; height:200px; width:90px; padding-top:10px; padding-left:15px; -webkit-border-radius:10px; border: 1px solid black; background: #eeeeee; -webkit-transition: -webkit-transform 0.5s ease-in; } function popout() { document.getElementById("slider").style.webkitTransform = "translate(105px,0)"; }

Есть родительский бокс и бокс-слайдер, который находится под ним. Свойство transition бокса-слайдера определяет, что преобразования должны занимать пол секунды и использовать ease-in функцию тайминга. JavaScript триггеры определяют параметры слайдера, когда пользователь нажимает на ссылку. Это означает, что анимация применяется лишь после того, как пользователь выполняет действия — нажатие на ссылку «Popout».

HTML код для этого примера приведен ниже.

1 2 3 4 5 6

Slider Content Popout

Slider
Content Popout

Вы можете поиграть с этим примером, как показано на рисунке ниже.

Рисунок 8. Слайдер до выпадания бокса

Рисунок 9. Слайдер после того, как он появляется

Большая часть функциональности здесь осуществляется с помощью CSS, и только запускается JavaScript.

В Safari в iOS 11 Apple добавила несколько новых функций, которые должны позволить браузеру лучше отображать различный контент на сайте, а также ускорить его работу. Включить их просто - нужно зайти в Настроки > Safari > Дополнения > Experimental Features:

Разумеется, сразу непонятно, за что отвечает каждый пункт. Разберем их подробнее:

• Constant Properties - не позволяет изменять настройки на веб-страницах с различными настройками. Другими словами, предотвращается изменение веб-сайта или изменение его свойств после его загрузки.
• CSS display: contents - позволяет управлять генерацией поля элемента. Например, с его помощью можно сделать равномерные отступы между различными элементами на сайте без «костылей».
• CSS Spring Animation - разумеется, никакого отношения к весне не имеет, а всего лишь позволяет сделать реалистичную с точки зрения физики анимацию элементов на сайтах.
• Link Preload - нет, к предварительной загрузке ссылок это никакого отношения не имеет, эта функция в основном предназначена для предотвращения очистки предварительно загруженных ресурсов после проведения синтаксического анализа.
• Remove Legacy WebRTC API - в общем-то и так понятно, удаляет старый WebRTC (функция для передачи данных между браузером и приложением по принципу точка-точка. Пример - вы открываете ссылку в приложении VK - она открывается в копии Safari по технологии WebRTC).
• Secure Contexts API - функция, суть которой - убедиться, что данные на устройство были доставлены по безопасному протоколу (HTTPS) и не были перехвачены злоумышленниками.
• Subresourceintegrity - еще одна функция для обеспечения безопасности. Ее суть - владелец ресурса может указать его криптографический хэш, который потом сверяется с хэшем, вычисленным уже после загрузки ресурса на самом устройстве.
• Viewport Fit - позволяет сайтам изменять размер графических элементов под физический размер экрана устройства (то есть в теории если сайт это поддерживает, то не будет залезающих за края экрана его элементов).
• Web Animations - тут все очевидно, включение анимации на сайтах. При отключении может немного поднять производительность.
• WebGPU - позволяет использовать графический процессор для обработки информации на сайтах. Может ускорить работу браузера с насыщенными графикой сайтами, но вызовет повышенный нагрев устройства и уменьшит время автономной работы.
• Async Frame Scrolling - скроллинг, не привязанный к частоте обновления дисплея. Судя по всему он нужен для новых устройств со 120 Гц экраном для избежания лагов на сайтах, где они не могут выдать 120 fps. На старых 60 Гц экранах разницы не заметно.

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