Сегодня мы рассмотрим: Настоящие ценители музыки знают, что для качественного...
Я очень часто вижу на сайтах свойства для какого-то конкретного браузера. Например, свойство "-moz-border-left-colors ", указывающее цвет левой рамки у элемента для Firefox . Давайте с Вами разберём, почему этого делать не стоит, а также укажу лишь единственный случай, когда -moz, -ms, -webkit и аналоги использовать можно.
Не буду особо говорить, что все эти свойства не входят в стандарт CSS , а потому не являются валидными. Как следствие, их реализация может быть в любой момент изменена (если так посчитают разработчики браузеров, ведь описания этих свойств в стандарте CSS нет), в итоге, Ваш сайт может сильно испортиться. Так же не буду особо объяснять, почему они портят общий вид кода. Всё это и так понятно.
Лучше разобрать причины того, зачем используют эти свойства. А причины тут две:
Поэтому используйте CSS3 , там все возможности уже есть, и его смогут увидеть как раз 95% аудитории.
Однако, я пообещал сказать, когда свойства -moz, -ms, -webkit и прочие , можно использовать. Это нужно, если Вы хотите сделать, немного разный дизайн для разных браузеров. Причём именно "немного ", а если нужно полностью менять всё, то проще через JavaScript определить браузер и подключить отдельный файл стилей. Скажу честно, я с такой задачей не сталкивался, но это единственное, что мне пришло в голову, дабы хоть как-то оправдать "лишние " свойства CSS .
- Перевод
Для многих из нас, разработчиков, WebKit - черный ящик
. Мы бросаем в него HTML, CSS, JS и кучу изображений, и WebKit, как-то… магически, выдает нам веб-страницу, которая выглядит и работает хорошо.
Но на самом деле, как говорит мой коллега Илья Григорик :
Так-что, давайте попробуем разобраться в некоторых вещах:
- Что такое WebKit?
- Чем WebKit не является?
- Как WebKit используется WebKit-браузерами?
- Почему многие WebKit не одинаковые?
- Парсинг (Разбор HTML, XML, CSS, Javascript)
- Макет (Layout)
- Рендеринг текста и графики
- Декодировка изображений
- Взаимодействия с GPU
- Доступ к сети
- Аппаратное ускорение
Остальные компоненты каждый 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
Для начала давайте рассмотрим общие функции, которые используются во всех WebKit-браузерах:
Знаете это смешно, я сделал несколько попыток, чтобы написать этот абзац. И каждый раз члены команды Chrome поправляли меня, как вы увидите…
Так что, это сложно.
Теперь, давайте попробуем подвести итог, что общего в мире 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.
- Все связанное с GPU
- 3D трансформации
- WebGL
- Декодирование видео - Отрисовка 2D на экран
- Технологии сглаживания
- Рендеринг SVG и CSS градиентов - Рендеринг текста и переносы
- Сетевые технологии (SPDY, пре-рендеринг, WebSocket транспорт)
- JavaScript движок
- Движок JavaScriptCore лежит в репозитории WebKit. Но существуют биндинги в WebKit и для него, и для V8. - Рендеринг элементов форм
- Поведение тэгов video и audio и поддержка кодеков
- Декодирование изображений
- Навигация назад/вперед
- Часть pushState() - SSL функции, такие как Strict Transport Security и Public Key Pins
Или если вдаваться в подробности, недавно добавленная функция: 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 | ||||
| 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 компилятора имеет минимальное влияние.)
Хорошо, так к чему же мы пришли?И так, все WebKit полностью различные теперь. Я напуган.Не стоит! Покрытие WebKit тестами «layoutTest» огромное. (28,000 тестов по последним подсчетам), и не только для существующих функций, но также для всех найденных регрессий. На самом деле, когда бы вы не изучали новые или «тайные» функции DOM/CSS/HTML-5, наборы тестов «layoutTest» обычно имеют отличную минимальную демонстрацию.
В дополнении, W3C предпринимает усилия для стандартизации набора тестов . Это означает, что мы можем ожидать что и WebKit порты, и все другие браузеры будут тестироваться одинаковыми наборами тестов, что приведет нас к уменьшению quirks and a more interoperable web. Для всех тех, кто приложил свои усилия, посетив событие Test The Web Forward … спасибо вам!
Опера только что переехала на WebKit. Что из этого получится? Роберт Найман и Роб Хоукс уже коснулись этой темы , но я добавлю что, одной из важной частью анонса было то, что Opera переходит на Chromium . Это означает, что WebGL, Canvas, HTML5 формы, имплементация 2D graphics, все эти вещи будут одинаковыми на Chrome и Opera теперь. Одинаковое API, и низкоуровневая реализация. Так как Opera основана на Chromium, вы можете ощущать, что вы сокращаете свою работу, по проверке совместимости на Opera и Chrome.Я также должны обратить внимание, что все Opera браузеры будут переведены на Chromium. То есть, Opera для Windows, Mac, Linux и Opera Mobile (полноценный мобильный браузер). Даже Opera Mini, тонкий клиент, будет переключена с текущей рендеринг-фермы основанной на Presto, на другую, основанную на Chromium.… и ночная сборка WebKit. Что это? Это WebKit, работающий на том же коде что и Safari (хотя некоторые внутренние библиотеки были изменены). В основном Apple руководит им, так что поведение и набор функций соответствует тому, что вы сможете найти в Safari. Во многих случаях Apple ведет себя консервативно, когда речь заходит о включении функций, которые другие порты реализуют или с которыми ведут эксперементы. В любом случае, если использовать аналогии, думайте что… ночная сборка WebKit для Safari, это как Chromium для Chrome.
На момент написания этой статьи 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.
| 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 мы должны:
Правда, звучит просто? Теперь давай сделаем.
Свойства анимацииАнимацию можно определить при помощи свойства со следующим синтаксисом:
Webkit-transition: property duration timing_function delay [, ...];
Мы также можем использовать специфические свойства, указанные в таблице 9.8.
| Определяет какое свойство или свойства будут использоваться для анимации. Можно использовать список значений, разделенных запятыми или постоянные значения. | |
| Определяет продолжительность перехода. Значение может быть 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, есть свои специальные свойства.
| Определяет имя анимации, которое будет использоваться ключевыми кадрами. | |
| Определяет продолжительность анимации (в секундах или милисекундах). | |
| Определяет функцию, которая используется для вычисления промежуточных величин между начальными и конечными значениями определенного свойства. Ты можешь использовать 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 эффекты для отображения тыльной строны элемента.
В 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 Гц экранах разницы не заметно.
