Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

li: nth-of-type(1) div { transition-timing-function: ease; }

li: nth-of-type(2) div {

transition-timing-function: linear;

}

li: nth-of-type(3) div {

transition-timing-function: ease-in;

}

li: nth-of-type(4) div {

transition-timing-function: ease-out;

} li: nth-of-type(5) div {

transition-timing-function: ease-in-out;

}

Глядя на рисунок можно увидеть, что лошадь 1 ( ease) вырывается в лидеры, это – явный победитель. О, нет! Она выбивается из сил на трети до финала. И все пять лошадей пересекают финиш одновременно!

Если вы недовольны предустановками, то можете установить свои собственные, используя кубическую функцию Безье. Для определения кубической функции, вам нужно задать координаты x и y для контрольных точек кривой. Начало всегда фиксируется на 0,0, а конец – на 1,1, поэтому их не нужно определять. Функцию перемещения ease-in можно определить, как показано ниже, с применением кубической функции:

transition-timing-function: cubic-bezier(0.42, 0, 1, 1);

Некоторое количество инструментов, таких как Lea Verou’s Cubic Bezier preview tool [56], позволят вам визуально задать и «довести до ума» функцию cubic-bezier.

Возможно, вы не захотите, чтобы перемещение произошло, как только изменятся значения. Вы можете контролировать это с помощью свойства transition-delay. Оно действует точно по такому же принципу, как и свойство transition-duration:

#track div {

…

transition-property: width;

transition-duration: 6s;

transition-delay: 1s;

}

Со всеми этими свойствами за плечами ваши элементы «пролетят» по странице за два счета!

Пока дизайнеры и разработчики продолжают выдвигать креативные технические решения, ясно одно: CSS3 будет использоваться дальше. Их применение не только значительно сокращает время на преобразование сайта от визуализации до кода, но также помогает создавать гибкий дизайн, который адаптируется к любой среде: изменениям кода, разному контенту и разным видам устройств.

Пока браузеры «снимают сливки» с CSS3, рабочая группа по CSS уже разрабатывает следующую версию, обычно упоминаемую как CSS4. Ожидается, что это привнесет свойства, которые уже жарко обсуждаются, такие как селекторы родителей, переменные, многоколоночная верстка макета страницы и конусные градиенты.

Восторгаясь от того, что CSS3 и CSS4, возможно, звучат как модные словечки, помните, что в целом живым стандартом является CSS. Каждый член рабочей группы CSS может утверждать, что в веб-стандартах нет таких понятий, как “CSS3” или “CSS4”. На деле, нет больше глобальной версии. После CSS 2.1, CSS была модулирована, и каждый модуль теперь имеет свою версию. И некоторые модули Уровня 1 фактически могли выходить позже, чем модули Уровня 4. Но нам не нужны модные словечки, чтобы приходить в восторг от всего, что приходит в мир CSS, так ведь?

Дэвид Стори имеет степень магистра в области Интернета и Распределенных систем университета Дарема, Великобритания. Член сообщества рабочей группы CSS, он является ярым сторонником открытых веб-стандартов. В настоящее время Дэвид живет в Маунтин Вью, штат Калифорния и работает в компании Motorola Mobility. До этого он работал в Opera, где создал команду разработчиков Developer Relations team и был бренд-менеджером продукта Opera Dragonfly. Так же он работал в ЦЕРН (CERN) – европейском центре ядерных исследований. Являлся автором тестов CSS3.info во времена его золотого периода. Он специализируется на HTML, CSS, SVG и JavaScript.

Ли Веру испытывает давнюю страсть к открытым веб-стандартам. Ее часто называют «гуру CSS». Ей нравится исследовать новые пути по извлечению преимуществ из новых веб-технологий и делиться своими изысканиями в своем блоге lea.verou.me. Ли также создает популярные инструменты и библиотеки, которые помогают веб-разработчикам изучать и применять эти стандарты. Она выступает на нескольких широко известных интернациональных конференциях по разработке сайтов и пишет публикации для ведущих изданий. Еще Ли является соавтором и лектором на курсах по веб-разработке в Афинском университете экономики и бизнеса.

Тэб Аткинс, мл. Специалист во многих областях. Он работает в Google над разработкой браузера Chrome в качестве хакера веб-стандартов, хотя его вклад в код достаточно скромен. Тэб в основном работает со спецификациями HTML и CSS. Также он является членом сообщества рабочей группы CSS и сотрудничает с несколькими другими рабочими группами в W3C.

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

jQuery заменила спецификацию DOM, которая определяла доступный контент на странице со свойствами getElementById()и getElementsByTagName(), более простым методом: используя CSS-селекторы. Перед дизайнерами открылся совершенно новый мир разработки. Ведь они знали CSS, но страдали от ежедневных срывов браузеров, которые не поддерживали сложные селекторы. Другими словами, jQuery позволила нам использовать CSS завтрашнего дня уже сегодня. Упомянутый выше метод сцепления jQuery (это значит, что кодов будет создаваться намного меньше) позволил быстро достичь успеха.

Очень скоро, примерно через несколько лет (и к тому времени, как вы будете читать эту книгу), мы продвинемся еще дальше. У нас есть HTML5, мы владеем поддержкой CSS3, у нас очень много всего, с чем можно развлечься в браузерах, которые установили мы и наши пользователи. Да, IE 6 все еще наш бич, и IE 8 будет с нами еще какое-то время. Но в общем и целом наше положение не такое уж и плохое. Такие библиотеки, как jQuery, дают основные преимущества при исправлении недочетов в старых браузерах, но они также вызывают и некоторую неудовлетворенность. А причина в том, что мы злоупотребляем ими.

Как сообщество, мы стали зависимы от jQuery. Это и понятно, но далеко не хорошо. Библиотека jQuery написана на JavaScript, но это не одно и то же; она исходно не встроена в браузер. С расцветом мобильного Интернета многие отворачиваются от jQuery, потому что она слишком «тормозит» и тяжела для наших модных карманных устройств. Найти хороших разработчиков JavaScript сложно: на каждое объявление о вакансии на должность разработчика JavaScript Вы получите около двадцати резюме от людей, которые в жизни не писали на чем-то, кроме jQuery. Это «обескровливает» наше ремесло.