С чего вдруг мне приспичило воспользоваться циклом в препроцессоре? Все, как всегда, просто - в предыдущей статье, посвященной плагину Smooth Scroll (Плагин Smooth Scroll), мне потребовался создать пример разметки HTML-документа с заголовками всех уровней, с первого (h1) до шестого (h6). Все бы ничего, но вручную создавать стили для заголовков всех уровней как-то утомительно.
HTML-разметка для цикла for
Вот я и озаботился задачей автоматизировать этот процесс, через цикл. Для этой цели я использовал цикл
1
for
. Упростил пример, выкинув параграфы и оставив только заголовки всех уровней:
Базовые CSS-стили
Затем пропишу основные стили для этой разметки:
Использую цикл for в Sass
Теперь у меня стоит задача “покрасить” все заголовки в оттенки цвета, указанного в переменной
1
$color: #778899;
. Для создания оттенков воспользуюсь функцией
1
lighten()
из препроцессора Sass.
Цвет будет меняться с шагом в 5% (
1
$percentStep: 5;
):
Также будет изменяться размер шрифта (кегль) в заголовках уровней с первого (
1
h1
) до шестого (
1
h6
), с шагом 10px (
1
$fontSizeStep: 10
):
Как видим, задача и вправду не для ленивых - это же надо тупо вбивать столько значений! Но мне поможет Sass и его циклы, а точнее - цикл
1
for
.
Для этого создаю такую конструкцию цикла
1
for
:
Небольшая расшифровка приведенного выше цикла. В данном случае используется цикл
1
for
, в котором счетчик
1
$i
изменяет свое значение в диапазоне от 1 до 6 включительно. Конструкция
1
#{$i}
называется экранированием в Sass и служит для того, чтобы значение счетчика
1
$i
подставилось в коде “как есть”, в виде текста.
В результате получается такой вывод:
h1
h2
h3
h4
h5
h6
Далее идут CSS-правила с использованием функции
1
lighten()
препроцессора Sass и переменных
1
$color
,
1
$percent
,
1
$fontSize
. Последние две строки производят увеличение значения переменных на указанный шаг:
Приведенный выше SCSS-код скомпилируется в готовый CSS-код подобного вида:
Смотрим результат в браузере и радуемся успеху:
Полный код примера цикла for в Sass
Полный код рассмотренного примера создания цикла
1
for
в Sass приведен ниже:
Скомпилированный в CSS-код результат нашего кодинга:
Обзор краткий такого же небольшого плагина Smooth Scroll, написанного под библиотеку jQuery.
Этот скрипт предназначен только для одной цели - плавного скроллинга (прокрутки) страницы. Благодаря этому улучшается юзабилити страницы и сайта в целом, так как нет резких скачков при переходе по ссылкам.
Подключение плагина Smooth Scroll
Подключение Smooth Scroll к HTML-странице производится как обычно:
… где первая строка - это библиотека jQuery, вторая строка - плагин Smooth Scroll, третья строка - файл инициализации плагина Smooth Scroll.
Инициализация Smooth Scroll
Для того, чтобы заработал плагин Smooth Scroll и на странице появилась плавная прокрутка, нужно в js-файле скрипта прописать строки:
… то есть - всем ссылкам страницы присвоить метод
1
smoothScroll()
, что дает плавный скроллинг. В принципе, этого достаточно - больше ничего и не надо.
Варианты выборки в Smooth Scroll
Помимо показанной выше строчки, скрипт Smooth Scroll имеет несколько других вариантов режима работы. Другими словами, эти режимы работы - все навсего усложненный первый вариант, вариации на тему выборки HTML-элемента в библиотеке jQuery.
Примеры выборок взяты мною из файла
1
readme.md
, переводить их мне совсем не хочется; да и нет в этом необходимости - все понятно даже по коду:
Allows for easy implementation of smooth scrolling for same-page links.
Works like this:
1
$('a').smoothScroll();
Specify a containing element if you want:
1
$('#container a').smoothScroll();
Exclude links if they are within a containing element:
Люблю я разбирать новые слайдеры и пробовать с ними работать. На этот раз я столкнулся с неизвестным для себя плагином FlexSlider в одном из готовых HTML-макетов австралийского фрилансера Peter Finlan.
Домашняя страничка слайдера FlexSlider располагается здесь - FlexSlider 2. Как сказано на официальной страничке, слайдер является адаптивным, периодически.
В арсенале у плагина заготовлена возможность автоматического генерирования перемотки изображений, пагинации страниц; показ не только изображений, но и видео. А вот заголовок для данного слайдера не предусмотрен, насколько я понял (поправьте меня, если я неправ - буду только рад, ибо слайдер понравился).
Зато у FlexSlider я впервые (для себя) встретил такую удобную возможность, как управление отображением стрелок перемотки или пагинацией через опции самого слайдера. То есть, не нужно копаться в сгенерированном коде DOM-дерева с помощью Firebug, чтобы найти там блок пагинации (к примеру) и отключить его через CSS-правило
1
display: block;
. В случае с FlexSlider все делается проще - прописал одну строчку
1
controlNav: false
и пагинация отключена.
Подключение FlexSlider
Подключение плагина FlexSlider к HTML-странице производится абсолютно стандартно, как и для любого другого плагина, написанного под библиотеку jQuery (я не забыл сказать, что FlexSlider написан под jQuery?). В моем случае я использовал версию jQuery 1.11.1. Здесь есть небольшое ограничение - FlexSlider 2.3.0 требует для своей работы как минимум jQuery 1.4.2. Кнопка для скачивания FlexSlider находиться там же, где вся остальная информация - FlexSlider Download.
Подключение FlexSlider в HTML:
HTML-разметка для FlexSlider
Разметка для слайдера на странице выполняется в виде блока-обертки и маркированного списка:
Пример взят с официальной странички и в нем оставлены имена классов для обоих блоков, как есть. Плагин при своей инициализации генерирует два дополнительных блока:
ol class=”flex-control-nav” - для пагинации изображений
ul class=”flex-direction-nav” - для стрелок перемотки изображений
… а также создает блок-обертку
1
div class="flex-viewport"
для списка
1
ul class="slides"
. То есть, разметка получается прозрачной и ясной.
Инициализация FlexSlider
Для инициализации плагина FlexSlider нужно в конфигурационном js-файле для случая самого простого вида написать такие строки:
В принципе, уже этого достаточно для создания слайдера FlexSlider - он уже работает. Можно стилизовать его самому с помощью CSS, или же подключить уже готовые CSS-стили и отредактировать их - кому как удобно. Я попробую отредактировать внешний вид слайдера сам:
slideshowSpeed: 7000, //Integer: Скорость слайдшоу в мс
animationSpeed: 600, //Integer: Скорость анимации в мс
initDelay: 0, //{Новое} Integer: Задержка инициализации в мс
-randomize: false, //Boolean: Случайный порядок слайдов
Использование функций
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS: true, //{Новое} Boolean: Slider will use CSS3 transitions if available
touch: true, //{Новое} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false, //{Новое} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
Первичное управление
controlNav: true, //Boolean: Создание навигации для постраничного управления каждым слайдом. Замечание: оставьте true для использования manualControls
directionNav: true, //Boolean: Создание навигации для кнопок назад/вперед (true/false)
prevText: “Previous”, //String: Тест для кнопки “previous” пункта directionNav
nextText: “Next”, //String: Тест для кнопки “next” пункта directionNav
Вторичная навигация
keyboard: true, //Boolean: Разрешает навигацию с помощью стрелок на клавиатуре (влево/вправо)
multipleKeyboard: false, //{Новое} Boolean: Разрешает управление с помощью клавиатуры по несколькими слайдерами. Поведение по умолчанию вырезает возможность управления клавиатурой при использовании более одного слайдера
mousewheel: false, //{Обновление} Boolean: Требуется плагин jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Управление навигацией по слайдам с помощью колесика мыши
pausePlay: false, //Boolean: Создание динамического pause/play элемента
pauseText: “Pause”, //String: Текста для кнопки “pause” элемента pausePlay
playText: “Play”, //String: Текст для кнопки “play” элемента pausePlay
Специальные свойства
controlsContainer: “”, //{Обновление} jQuery Object/Selector: Объявление какой контейнер элементов навигации будет применен. По умолчанию это FlexSlider. Например, можно использовать так $(“.flexslider-container”). Свойство игнорируется если элемент не найден.
manualControls: “”, //{Обновление} jQuery Object/Selector: Объявление пользовательской панели управления навигацией. Примером может быть $(“.flex-control-nav li”) или “#tabs-nav li img”, и т.п.. Количество элементов в вашей controlNav должно совпадать с количеством слайдов/табов.
sync: “”, //{Новое} Selector: Зеркало действий выполняемых над этим слайдером с помощью другого слайдера. Используйте с осторожностью.
asNavFor: “”, //{Новое} Selector: Внутренние свойства направленные на превращение слайдера в миниатюры с возможностью навигации для другого слайдера
Опции карусели
itemWidth: 0, //{Новое} Integer: Ширина Box-model отдельных элементов карусели, включая горизонтальные границы и отступы (padding)
itemMargin: 0, //{Новое} Integer: Отступ между элементами карусели
minItems: 0, //{Новое} Integer: Минимальное количество элементов карусели, которые будут видимы. Элементы будут плавно изменять размер при значении ниже заданного
maxItems: 0, //{Новое} Integer: Максимальное количество элментов карусели, которые будут видимы. Элементы будут плавно изменять размер при превышении этого лимита.
move: 0, //{Новое} Integer: Количество элментов в карусели, которые должны двигаться по анимации. Если 0, то слайдер будет двигать все видимые элементы
Callback API
start: function(){}, //Callback: function(slider) - Срабатывает, когда слайдер загружает первый слайд
before: function(){}, //Callback: function(slider) - Срабатывает асинхронно с каждой анимацией слайдера
after: function(){}, //Callback: function(slider) - Срабатывает после каждой завершенной анимацией слайдера
end: function(){}, //Callback: function(slider) - Срабатывает, когда слайдер доходит до последнего элемента (асинхронный)
added: function(){}, //{Новое} Callback: function(slider) - Срабатывает после того, как слайд добавлен
removed: function(){} //{Новое} Callback: function(slider) - Срабатывает после того, когда слайд удален
Варианты слайдера FlexSlider
На официальной страничке плагина в прекрасно оформленном виде представлены [различные варианты][6] создания слайдера. Все они реализуются с помощью опций этого плагина и дополнительной HTML-разметки.
Например, чтобы создать слайдер с thumbnail-пагинацией, нужно прописать в js-файле настроек:
… а HTML-разметку изменить таким образом:
Но, в принципе, в этом случае рассказывать о возможных вариантах слайдера достаточно глупо - можно и нужно посетить официальную страничку и там смотреть примеры создания.
В готовом шаблоне одного фрилансера встретил использование Animate.css - библиотеки CSS3-эффектов, созданной на самом же CSS3.
Ранее я уже встречал упоминание об этой библиотеке - Easy CSS3 Animation with Animate.css. Вот теперь пришла пора познакомиться с нею детально, что называется - на практике.
Кстати, официальная страница этого проекта расположена здесь - Animate.css. На ней можно посмотреть все возможные для этой библиотеки эффекты и подобрать подходящий в выпадающем списке.
Откровенно говоря, я приготовился к обстоятельному изучению этой библиотеки, но все оказалось предельно просто. Все, что нужно для подключения Animate.css - это скачать полную версию по ссылке Download Animate.css. Или же перейти на GitHub - View on GitHub, чтобы выбрать сжатую (
1
animate.min.css
) или несжатую (
1
animate.css
) версию библиотеки.
Подключение Animate.css
Для подключения библиотеки Animate.css в готовый HTML-проект, достаточно подключить в “шапке” документа скачанный CSS-файл
1
animate.css
:
И это все! Больше никаких действий не потребуется - все остальные манипуляции нужно выполнять в HTML-коде, добавляя необходимые CSS-классы из библиотеки Animate.css к нужным HTML-элементам.
Добавление CSS-классов из Animate.css
Первое, что нужно помнить - для нужного HTML-элемента необходимо добавить обязательный класс
1
.animated
. CSS-расшифровка этого класса также предельно проста:
Второе - на странице проекта подбираем для себя нужный\понравившийся эффект, запоминаем имя (пусть в данном случае это будет
1
bounceIn
) этого эффекта и добавляем его в качестве имени класса к HTML-элементу, у которого уже есть класс
1
.animated
(вспоминаем основы CSS - такая конструкция называется мультиклассовостью):
Все - можно проверять работу библиотеки Animate.css.
Использование jQuery c Animate.css
Если в проекте используется библиотека jQuery (а она применяется почти всегда), то применение библиотеки Animate.css еще больше упрощается, а HTML-разметка делается семантичной. Для этого подключаю библиотеку jQuery:
… и прописываю в скрипте инициализации
1
animate_me.js
:
Вуаля - все отлично работает!
Можно немного усложнить задачу и добавить с помощью Jquery событие
1
hover
к элементу
1
img
, затем “повесить” на него класс анимации
1
rotateIn
и
1
animated
из библиотеки Animate.css:
Управление задержкой анимации
Можно управлять задержкой анимации и скоростью анимации, изменив значения в классе
1
.animated
. Например, с
1
animation-duration: 1s
на
1
animation-duration: .4s;
:
Полный код примера на Animate.css
Полный код рассмотренного в этой статье примера привожу ниже.
Короткая статья, посвященная вопросу кросс-браузерности такого HTML5-атрибута для формы, как
1
placeholder
.
Недавно столкнулся в подобным вопросом, решение не смог найти. Однако, в книге “Недостающее руководство по HTML5” случайно столкнулся с подробным описанием решения этой маленькой проблемы. Проблема и вправду маленькая - вопрос поддержки или не поддержки браузерами данного атрибута на сегодняшний день - это мелочь. Ну правда, разве пострадает функциональность верстаемого сайта от того, что в поле поиска не будет отображаться подстановочный текст? Конечно, нет!
Еще один момент - говоря о кросс-браузерной поддержке атрибута
1
placeholder
, почти всегда подразумевается на самом деле поддержка этого атрибута только одним браузером. Конечно, это многострадальный Internet Explorer версии 7 или 8. О версии Internet Explorer 6 можно уже забыть. Остальные браузеры нормально справляются со своей задачей и понимают, что такое
1
placeholder
.
Автор статьи обладает некоторой долей перфекционизма - для него и такая мелочь является принципиальной мелочью, камнем преткновения. И вот, этот камень можно отодвинуть в сторону.
Кросс-браузерные заплатки для HTML5
Начну с того, что решение вопроса кросс-браузерного
1
placeholder
было создано уже давно. Это для меня данный факт был открытием! Более того, существует большое количество способов, решающих данную проблему. Все они собраны воедино по одному адресу на GitHub - HTML5 Cross Browser Polyfills . Вся эта коллекция называется “Кросс-браузерные заплатки для HTML5”, но в нашем случае нужен только один раздел этой коллекции - Web Forms : input placeholder.
Ого - там не одно решение, а целых одиннадцать! Причем, все они реализованы на JavaScript, поэтому и кросс-браузерные. Выбирать можно любой, какой понравиться - принцип работы и способ подключения к HTML-странице у них всех почти одинаков. Я возьму для себя способ jquery.placeholder.js, просто потому, что название понравилось.
Плагин
1
jquery.placeholder.js
может реализовать поддержку атрибута
1
placeholder
как в Internet Explorer 7 или 8, так и в Internet Explorer 6. Ну, Internet Explorer 6 - это уже слишком! На момент написания статьи многие верстальщики (конечно, не все) имеют тенденцию “забывать” о существовании даже Internet Explorer 8.
Подключение плагина jquery.placeholder.js
Подключение плагина
1
jquery.placeholder.js
абсолютно стандартное для такого рода скриптов. Ниже привожу пример такого подключения в HTML-коде:
Затем идет скрипт инициализации для данного плагина. Общая картина будет выглядеть таким образом:
Плагин
1
jquery.placeholder.js
делает в HTML-документе выборку по двум HTML-элементам -
1
input
и
1
textarea
. А затем применяет к ним метод
1
placeholder()
- все просто.
HTML-форма с placeholder
Ниже привожу пример HTML5-формы, в которой применен атрибут
1
placeholder
в полях ввода, реализованных через элемент
1
input
. А также в элементе
1
textarea
:
Проверка поддержки placeholder в IE8
JS-скрипты подключены и создана HTML-разметка. Для тестирования работы плагина
1
jquery.placeholder.js
воспользуюсь браузером, в котором заведомо не реализована поддержка атрибута
1
placeholder
- это Internet Explorer 8. Открываю созданную HTML-страничку в этом браузере (связка Windows XP + IE8) и вижу результат:
Галочками отмечены поля, в которых сработал плагин
1
jquery.placeholder.js
- если бы не он, там было бы пусто. Отлично - плагин работает и его можно применять в деле, на готовом проекте!