gearmobile Reading time ~5 minutes

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

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

Обзор Modernizr

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

В последнее время я использую Modernizr практически постоянно для того, чтобы выделить те браузеры, которые не поддерживают специфические свойства стандарта CSS3.

Как работает Modernizr

Для того, чтобы установить Modernizr, сначала скачайте его с этой страницы - http://www.modernizr.com/. Затем внутри тега 

1

head
html-страницы подключите распакованный из архива файл 
1

modernizr-1.0.min.js
:

<script src="js/modernizr-1.0.min.js"></script>

Вторым шагом будет подключение класса 

1

no-js
для корневого элемента 
1

html
:

<html class="no-js">

Для чего необходимо подключать класс 

1

no-js
к элементу 
1

html
?

Потому что элемент 

1

html
с классом 
1

no-js
будет состоянием страницы по-умолчанию. Если JavaScript (
1

js
) на странице отключен, то скрипт Modernizr также не будет работать (совместно со всеми остальными функциями страницы, завязанными на этом языке), поэтому было бы хорошо, если у нас будет возможность отката (fallback) для этого случая.

Прим. переводчика: попробую от себя объяснить в двух словах, но иначе (если вдруг непонятно) что хотела сказать прекрасная девушка, автор статьи. Если на сайте отключена поддержка JavaScript, то класс 

1

no-js
для элемента html - это та “зацепка”, на которую можно повесить все CSS-fallback’и для этого случая.

Если же поддержка JavaScript в браузере включена, то произойдет динамическая подмена класса 

1

no-js
для элемента html на целую группу других классов. В результате исходный код страницы может выглядеть примерно так:

<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">

Впечатляет, не правда ли? Но что означают все эти классы? Давайте разберемся.

В данном случае, страница была открыта в браузере Firefox 3.5. Этот браузер (к сожалению) не поддерживает множественные фоны на CSS, CSS-градиенты и CSS-трансформации.

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

Например, множественные фоны на CSS “обозначены” как 

1

multipebgs
, CSS-градиенты как 
1

cssgradients
, CSS-трансформации как 
1

csstransforms
и так далее.

Когда Modernizr определит, какие CSS-свойства данный браузер поддерживает, а какие нет, он создаст своеобразный отчет - список классов, по которому можно точно узнать, что браузер “умеет”, а что - нет.

Если браузер поддерживает CSS-свойство трансформации, то на элемент html скрипт Modernizr “подцепит” класс 

1

csstransforms
. А если браузер не поддерживает это свойство, то Modernizr добавит для имени класса 
1

csstransforms
префикс 
1

no-
и также “повесит” этот класс на элемент 
1

html
, но в виде 
1

no-csstransforms
. И так далее …

Пример такого списка-отчета и был показан выше.

Что мне даст эта (ценная) информация?

Логичный вопрос - “а что мы можем делать с этой информацией?”. Хорошо, давайте рассмотрим простой пример.

Множественные фоны на CSS

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

Ваш CSS выглядит следующим образом:

#nice {
  background: url(background-one.png) top left repeat-x,
  url(background-two.png) bottom left repeat-x;
}

И браузер генерирует этот прекрасный (ведь не даром же идентификатор имеет имя 

1

nice
) фон так:

Множественные фоны

При использовании библиотеки Modernizr ваш код CSS должен быть преобразован в такой вид:

#nice {
  background: url(background-one.png) top left repeat-x;
}
.multiplebgs #nice {
  background: url(background-one.png) top left repeat-x,
  url(background-two.png) bottom left repeat-x;
}

И вот что увидят посетители сайта в зависимости от того, каким браузером (понимает он множественный фон или нет) они пользуются:

Множественный фон с Modernizr в Safari

Множественный фон с Modernizr в Opera

Это очень простой пример использования скрипта Modernizr, но он должен послужит образцом того, что можно сделать с помощью данной библиотеки.

HTML5

Библиотека Modernizr также позволяет использовать новые элементы, доступные в HTML5 - 

1

header
, 
1

footer
, 
1

section
, 
1

hgroup
, 
1

video
и так далее и стилизовать их.

Однако, это не означает, что все эти элементы можно использовать также в браузере IE. Но вы можете стилизовать эти элементы и тогда IE “поймет” их и не сможет игнорировать.

Прим. переводчика: загадочная фраза, которая лично мне ни о чем не говорит. Требует дальнейшего изучения.

JavaScript

Вы также можете анализировать в вашем собственном JavaScript возможности, которые поддерживает Modernizr, используя пример следующего синтаксиса:

if (Modernizr.geolocation) {
  ...
}

Заключение

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

Оригинал статьи - How to use Modernizr

gearmobile Reading time ~8 minutes

Как всегда случайно набрел в просторах Интернет на интересный блог одной девушки-дизайнера с не менее интересным именем Inayaili de León Persson.

Более того, эта девушка португальского происхождения родом из Панамы, но родилась она в СССР! С 2008 года живет в Лондоне и работает ведущим веб-дизайнеров в Canonical. Как все запутано!

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

1

calc()
- на CSSTricks (еще не успел прочитать) и на htmlbook (успел прочитать). Последний источник как-то не впечатлил, из-за сухости изложения материала, наверное.

А вот на сайте девушки с таким необычным именем функция 

1

calc()
описана кратко, но интересно, с примерами. И хоть написана статья была в далеком 2011 году, мне интересно было ее прочитать для себя (и фактически перевести).

Что такое функция calc()

Функция 

1

calc()
может быть использована для вычисления различных линейных размеров на странице. Например, с ее помощью можно рассчитывать значение границ, 
1

margin
, 
1

padding
, кегля и многое другое.

Вычисление ширины объектов может быть чрезвычайно сложной задачей, особенно если макет сайта резиновый; функция 

1

calc()
уникальная, потому что она позволяет выполнять расчеты внутри самих таблиц стилей CSS.

Функция 

1

calc()
умеет работать с простейшими математическими операторами:

  • сложением 
    1

    +
  • вычитанием 
    1

    -
  • умножением 
    1

    *
  • делением 
    1

    /

Давайте рассмотрим простейший пример работы функции 

1

calc()
:

div{
    width: calc(100% - 20px);
  }

Очень просто, не правда ли? В одной функции может использоваться не один, а несколько математических операторов:

div{
  width: calc(100% - 20px + 2px*2);
}

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

1

2px*2
, и только затем два оставшихся - сложение и вычитание. Также обратите внимание, что деление на 0 приведет (и должно привести) к ошибке.

Спецификация по функции 

1

calc()
еще не завершена, но ее основы уже готовы.

Простой пример calc()

Для того, чтобы показать возможности функции 

1

calc()
, была создана базовая разметка страницы с помощью этой функции.

Разметка состоит из основного контейнера 

1

div id="main"
(расположенного слева), колонки справа 
1

div id="accessory"
и подвала, помещенного внизу 
1

div id="footer"
.

Ниже приведен код этой разметки:

<div class="wrapper">
  <div id="main">
    <h1>Far far away ...</h1>
    <p>Far far away, behind the word mountains ...</p>
  </div>
  <div id="accessory">
    <ul>
      <li><a href="#">Far far away ...</a></li>
      <li><a href="#">Separated they live ...</a></li>
      <li><a href="#">A small river named ...</a></li>
    </ul>
  </div>
  <div id="footer">Visit the article ...</div>
</div>

После применения не требующего объяснений (надо надеяться) простого сброса CSS-стилей (полный код CSS-сброса смотрите в исходном коде примера - Calc Examples), установки базового шрифта и внешнего вида ссылок, стилизуем элемент 

1

body
:

body {
  background: #e8eadd;
  color: #3c323a;
  padding: 20px;
}

После этого я говорю, что основной контейнер 

1

div.wrapper
должен занимать всю ширину своего контейнера (100%) за вычетом 40 пикселей и располагаться горизонтально, по центру:

.wrapper{
  width: 1024px; /* Откат для браузеров, которые не поддерживают функцию calc() */
  width: -moz-calc(100% - 40px);
  width: calc(100% - 40px);
  margin: auto;
}

В коде выше была добавлена строка отката для браузеров, которые не поддерживают работу с функцией 

1

calc()
, а также браузерный префикс 
1

-moz-
для браузера Firefox 4.

Затем устанавливается ширина, границы, плавание влево и 

1

margin
для основного блока с контентом 
1

div#main
:

#main{
  border: 8px solid #b8c172;
  float: left;
  margin: 0 20px 20px 0;
  padding: 20px;
  width: 704px; /* Откат для браузеров, которые не поддерживают функцию calc() */
  width: -moz-calc(75% - 20px*2 - 8px*2);
  width: calc(75% - 20px*2 - 8px*2);
}

Давайте разберемся с функцией 

1

calc()
в этом примере кода. Здесь я хочу, чтобы ширина контейнера 
1

div#main
равнялась 75% (75% от ширины контейнера-родителя, не забывайте об этом!).

Но из этой ширины мне необходимо вычесть 

1

padding
слева и справа от контейнера - 
1

20px*2
, а также ширину границы с обоих сторон - 
1

8px*2
.

Переходим к боковой панели 

1

div#accessory
и говорим ей, что она должна занимать оставшуюся ширину контейнера-родителя в 25%. Но при этом также должны учитываться ширина границы этого блока, 
1

margin-right: 20px
и 
1

padding
. Блок будет “плавать” вправо:

#accessory{
  border: 8px solid #b8c172;
  float: right;
  padding: 10px;
  width: 208px; /* Откат для браузеров, которые не поддерживают функцию calc() */
  width: -moz-calc(25% - 10px*2 - 8px*2 -20px);
  width: calc(25% - 10px*2 - 8px*2 -20px);
}

Если более подробно разобрать выражение 

1

calc(25% - 10px*2 - 8px*2 -20px)
, то увидим, что из первоначальной ширины 25% вычитается padding справа и слева 
1

10px*2
, ширина правой и левой сторон границы этого блока 
1

8px*2
, а также правый 
1

margin
для блока-контейнера 
1

div#main
.

Блок-подвал 

1

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

Если уменьшать размер окна браузера, то при достижении им определенной величины ширина боковой панели 

1

div#accessory
становиться слишком маленькой, что нарушает дизайн страницы.

Поэтому в код ниже был добавлен простой 

1

media query
, с помощью которого у блоков 
1

div#main
и 
1

div#accessory
убирается плавание влево-вправо и пересчитывается ширина обоих блоков так, чтобы они занимали 100% ширины блока-родителя за минусом ширины границ и соответствующих 
1

padding
:

@media screen and (max-width: 768px){

  #main, #accessory{
    float: none;
  }

  #main{
    margin-right: 0;
    width: -moz-calc(100% - 20px*2 - 8px*2);
    width: calc(100% - 20px*2 - 8px*2);
  }

  #accessory{
    width: -moz-calc(100% - 20px*2 - 8px*2);
    width: calc(100% - 20px*2 - 8px*2);
  }
}

Приведенный выше пример разметки страницы является очень упрощенным. Но есть надежда, что он заинтересует вас и подтолкнет к дальнейшим экспериментам с замечательной функцией 

1

calc()
.

Поддержка браузерами

Функция 

1

calc()
поддерживается браузером IE9 и Firefox 4 (для которого необходимо указать браузерный префикс 
1

-moz-calc()
). Я понимаю, однако, что применение этой функции в устаревших браузерах к таким вещам, как анимация, может быть большой проблемой. Но в тоже время, анимация не является жизненно важной необходимостью сайта.

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

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

Дальше переводить не стал, ибо идет сплошная “вода” в виде заключения и всяческих пожеланий, не относящаяся к делу.

gearmobile Reading time ~24 minutes

Статья на NetTuts+, написанная Johnathan Croom в 2012 году.

Основная цель статьи - показать преимущество использования любого из трех описанных в ней препроцессоров Sass, LESS и Stylus. Обзор прекрасно подойдет для новичков, которые только открывают для себя эту грань веб-дизайна.

В этой статье мы рассмотрим преимущества и выгоды использования трех различных препроцессоров - Sass, LESS и Stylus.

Введение

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

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

Синтаксис

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

Sass & LESS

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

1

.scss
, LESS - расширение 
1

.less
.

Вид обычного файла в синтаксисе Sass или LESS представлен ниже:

/* style.scss или style.less */

h1{
  color: #0982c1;
}

Хорошо видно, что это обычный синтаксис CSS, который прекрасно конвертируется в Sass (SCSS) или LESS.

Важно обратить внимание, что Sass (SCSS) также имеет старую версию синтаксиса Sass, в которой опущены точки с запятой и фигурные скобки.

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

Синтаксис Sass (старая версия) выглядит следующим образом:

/* style.sass */

h1
  color: 0982c1

Stylus

Для своих файлов этот препроцессор использует расширение 

1

.styl
. Синтаксис препроцессора Stylus более многословный (прим. переводчика: автор что-то напутал здесь) в нем применяется за основу стандартный синтаксис CSS, но допускается применение различного сочетания скобок, двоеточий и точек с запятой.

Примеры синтаксиса Stylus:

/* CSS-подобный синтаксис */

h1 {
  color: #0982C1;
}

/* опущены фигурные скобки */

h1
  color: #0982C1;

/* опущены фигурные скобки, двоеточия и точки с запятой */

h1
  color #0982C1

Все варианты синтаксиса, показанные выше, являются валидными и в результате компиляции получается правильный CSS-код. Например, такой код скомпилируется в стандартный CSS без ошибок:

h1 {
  color #0982c1
}
h2
  font-size: 1.2em

Переменные

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

Sass

В препроцессоре Sass переменная объявляется с помощью символа 

1

$
, при этом имя переменной и ее значение отделяются друг от друга двоеточием так, как это делается в CSS:

$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;

body {
  color: $mainColor;
  border: 1px $borderStyle $mainColor;
  max-width: $siteWidth;
}

LESS

Переменные в LESS точно такие же, как и в Sass, за исключением того, что перед именем переменной ставится символ 

1

@
:

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;

body {
  color: @mainColor;
  border: 1px @borderStyle @mainColor;
  max-width: @siteWidth;
}

Stylus

Переменные в Stylus не нуждаются ни в каком знаке для своего объявления, но, тем не менее, могут использовать символ 

1

$
. Как правило, завершающий символ строки точка с запятой также не нужен, за исключением случая, когда имя переменной и ее значение совпадают.

Еще один достойный упоминания момент заключается в том, что Stylus (0.22.4) компилирует код, даже если в нем имя переменной объявлено с помощью символа 

1

@
, но при вызове этой переменной в коде подстановки значения переменной не происходит.

Другими словами, не выполняется такая операция:

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted

body
  color mainColor
  border 1px $borderStyle mainColor
  max-width siteWidth

Скомпилированный CSS

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

Благодаря им отпадает необходимость задавать значение цвета и потом двадцать раз повторять его в CSS-коде. Или же поставлена задача изменить ширину сайта и для этого необходимо “перерыть” код в поисках этой величины.

Прим. переводчика: здесь автор немного утрирует ситуацию, так как в любом нормальном редакторе кода имеется функция поиска.

Ниже представлен CSS-код после выполнения компиляции:

body {
  color: #0982c1;
  border: 1px dotted #0982c1;
  max-width: 1024px;
}

Вложенность (nesting)

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

Например, так:

section {
    margin: 10px;
}

section nav {
    height: 25px;
}

section nav a {
    color: #0982C1;
}

section nav a:hover {
    text-decoration: underline;
}

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

1

&#038;
является ссылкой (сокращением) на селектор элемента-родителя.

Sass, LESS & Stylus

Все три препроцессора имеют абсолютно одинаковый синтаксис для вложенных селекторов:

section {
  margin: 10px;

  nav {
    height: 25px;

    a {
      color: #0982C1;

      &#038;:hover {
        text-decoration: underline;
      }
    }
  }
}

Скомпилированный CSS

Ниже показан скомпилированный в CSS результат кода, представленного выше. Сравните с тем кодом, который мы писали в самом начале - абсолютно одинаково. Но какое удобство при использовании преимуществ препроцессора!

section {
  margin: 10px;
}

section nav {
  height: 25px;
}

section nav a {
  color: #0982C1;
}

section nav a:hover {
  text-decoration: underline;
}

Подмешивания (mixins)

Миксины 

1

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

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

Прим. переводчика: в приведенных ниже примерах стоит обратить внимание на разницу в синтаксисе объявления и вызова миксина внутри CSS-селектора для всех трех препроцессоров.

Sass

/* Sass mixin по имени error с аргументом $borderWidth, значение которого по умолчанию равно 2px */

@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
  color: #F00;
}

.generic-error {
  padding: 20px;
  margin: 4px;
  @include error(); /* Подключается миксин по имени error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  @include error(5px); /* Подключается миксин по имени error со значением аргумента $borderWidth, равным 5px; то есть происходит переопределение значения аргумента */
}

LESS

/* LESS mixin по имени error с аргументом $borderWidth, значение которого по умолчанию равно 2px */

.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}

.generic-error {
  padding: 20px;
  margin: 4px;
  .error(); /* Подключается миксин по имени error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  .error(5px); /* Подключается миксин по имени error со значением аргумента $borderWidth, равным 5px; то есть происходит переопределение значения аргумента */
}

Style

/* Stylus mixin по имени error с аргументом $borderWidth, значение которого по умолчанию равно 2px */

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}

.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* Подключается миксин по имени error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* Подключается миксин по имени error со значением аргумента $borderWidth, равным 5px; то есть происходит переопределение значения аргумента */
}

Скомпилированный CSS

Результатом компиляции из всех трех препроцессоров будет одинаковый CSS-код:

.generic-error {
  padding: 20px;
  margin: 4px;
  border: 2px solid #f00;
  color: #f00;
}

.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  border: 5px solid #f00;
  color: #f00;
}

Наследование (inheritance)

При написании CSS стилей “классическим” способом, для того чтобы применить одни и те же свойства к нескольким элементам в HTML-документе, нам следовало бы создать такой код:

p,
ul,
ol {
  /* какие-то стили здесь */
}

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

В противоположность этому применяются наследование. Наследование - это возможность для одних CSS-селекторов наследовать свойства у другого селектора.

Прим. переводчика: обратите внимание на одинаковый синтаксис подключения (объявления) наследования внутри CSS-селектора с помощью директивы 

1

@extend
.

Sass & Stylus

.block {
  margin: 10px 5px;
  padding: 2px;
}

p {
  @extend .block; /* Наследовать свойства у селектора класса .block */
  border: 1px solid #EEE;
}

ul, ol {
  @extend .block; /* Наследовать свойства у селектора класса .block */
  color: #333;
  text-transform: uppercase;
}

Скомпилированный CSS

.block, p, ul, ol {
  margin: 10px 5px;
  padding: 2px;
}

p {
  border: 1px solid #EEE;
}

ul, ol {
  color: #333;
  text-transform: uppercase;
}

LESS

Препроцессор LESS не поддерживает наследование в полной мере так, как это организовано в Sass или Stylus. Вместо добавления множественных селекторов в один набор свойств, наследование трактуется как миксин без аргументов.

Импорт стилей выполняется для каждого селектора. Обратной стороной такого подхода является постоянное повторение строк со свойствами в компилированном CSS-стиле.

Вот как может выглядеть LESS-код с наследованием:

.block {
  margin: 10px 5px;
  padding: 2px;
}

p {
  .block; /* Наследование свойств у селектора класса .block */
  border: 1px solid #EEE;
}

ul, ol {
  .block; /* Наследование свойств у селектора класса .block */
  color: #333;
  text-transform: uppercase;
}

Скомпилированный CSS

.block {
  margin: 10px 5px;
  padding: 2px;
}

p {
  margin: 10px 5px;
  padding: 2px;
  border: 1px solid #EEE;
}

ul,
ol {
  margin: 10px 5px;
  padding: 2px;
  color: #333;
  text-transform: uppercase;
}

Как хорошо видно из кода, стили класса 

1

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

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

1

.block
.

Импортирование

В CSS-сообществе к импортированию стилей с помощью директивы 

1

@import
существует стойкое негативное отношение, так как такой подход порождает множественные HTTP-запросы к серверу, что замедляет работу браузера и нагружает сам сервер. Однако, в препроцессорах технология импортирования работает иначе.

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

Прим. переводчика: другими словами, в препроцессорах импортирование необходимо для компиляции одного файла из нескольких. В стандартном CSS импортирование приводит к подстановке одного кода внутрь другого.

Обратите внимание, что при компилировании файла со стандартным подключением с помощью директивы 

1

@import "file.css"
внутри него компиляции последнего не происходит. А вот миксины или переменные импортируются и используются в стилевом файле, как положено. Технология импортирования очень удобная, так как она позволяет создавать множество отдельных файлов для правильной организации проекта.

/* file.{type} */

body {
  background: #EEE;
}

@import "reset.css";
@import "file.{type}";

p {
  background: #0982C1;
}

Скомпилированный CSS

@import "reset.css";

body {
  background: #EEE;
}

p {
  background: #0982C1;
}

Функции работы с цветом

“Цветовые” функции созданы для трансформации цвета при компиляции. Такие функции чрезвычайно полезны при создании градиентов, затемнения цвета при 

1

hover
и многое другое.

Sass

lighten($color, 10%); /* возвращает цвет на 10% светлее чем $color */
darken($color, 10%);  /* возвращает цвет на 10% темнее чем $color */

saturate($color, 10%);   /* возвращает цвет на 10% более насыщенный чем $color */
desaturate($color, 10%); /* возвращает цвет на 10% менее насыщенный чем $color */

grayscale($color);  /* возвращает шкалу полутонов цвета $color */
complement($color); /* returns complement color of $color */
invert($color);     /* возвращает инвертированный цвет от $color */

mix($color1, $color2, 50%); /* возвращает результат смешивания цвета $color1 с цветом $color2 */

Представленный выше код является всего лишь кратким списком функций работы с цветом в Sass. Полный список всех доступных функций расположен по адресу Sass Documentation.

“Цветовые” функции могут использоваться везде, где требуется работа с цветов в коде. Простой пример - объявлена переменная с цветом, к которой дальше в коде применяется функция затемнения цвета 

1

darken
:

$color: #0982C1;

h1 {
  background: $color;
  border: 3px solid darken($color, 50%);
}

LESS

lighten(@color, 10%); /* возвращает цвет на 10% светлее чем $color */
darken(@color, 10%);  /* возвращает цвет на 10% темнее чем $color */

saturate(@color, 10%);   /* возвращает цвет на 10% более насыщенный чем $color */
desaturate(@color, 10%); /* возвращает цвет на 10% менее насыщенный чем $color */

spin(@color, 10);  /* возвращает цвет, смещенный на 10 градусов вправо относительно цвета @color */
spin(@color, -10); /* возвращает цвет, смещенный на 10 градусов влево относительно цвета @color */

mix(@color1, @color2); /* возвращает результат смешивания цвета $color1 с цветом $color2 */

Список функций препроцессора LESS находится на официальном сайте проекта LESS Documentation.

Ниже показан пример того, как можно применять “цветовые” функции в LESS:

@color: #0982C1;

h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}

Stylus

lighten(@color, 10%); /* возвращает цвет на 10% светлее чем $color */
darken(@color, 10%);  /* возвращает цвет на 10% темнее чем $color */

saturate(@color, 10%);   /* возвращает цвет на 10% более насыщенный чем $color */
desaturate(@color, 10%); /* возвращает цвет на 10% менее насыщенный чем $color */

Полный список всех функций работы с цветом препроцессора Stylus представлен на сайте проекта Stylus Documentation.

И пример использования “цветовой” функции в Stylus:

color = #0982C1

h1
  background color
  border 3px solid darken(color, 50%)

Арифметические операции

Благодаря препроцессорам выполнение арифметических операций внутри CSS-кода теперь осуществляется просто и легко. Такая возможность часто бывает полезной.

Прим. переводчика: стоит упомянуть о функции из CSS3 по имени 

1

calc()
, которая также позволяет выполнять внутри CSS-кода простые арифметические операции.

Sass, LESS & Stylus

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 100px - 50px;
  left: 10 * 10;
}

Практические примеры

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

Браузерные префиксы

Одним из наиболее ярких примеров преимущества использования препроцессоров является написание с их помощью свойств с браузерными префиксами. Один раз создав миксин с поддержкой браузерных префиксов, мы избавляем себя от рутинной работы.

Например, создадим для всех трех препроцессоров миксин скругления углов блока:

Sass

@mixin border-radius($values) {
  -webkit-border-radius: $values;
     -moz-border-radius: $values;
          border-radius: $values;
}

div {
  @include border-radius(10px);
}

LESS

.border-radius(@values) {
  -webkit-border-radius: @values;
     -moz-border-radius: @values;
          border-radius: @values;
}

div {
  .border-radius(10px);
}

Stylus

border-radius(values) {
  -webkit-border-radius: values;
     -moz-border-radius: values;
          border-radius: values;
}

div {
  border-radius(10px);
}

Скомпилированный CSS

div {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

Трехмерный текст

Создание эффекта трехмерности для текста с помощью CSS-свойства 

1

text-shadow
является прекрасной идеей. Единственная проблема заключается в работе с цветом, которая достаточно трудная и обременительная.

Используя миксины и функции для работы с цветом, мы можем создать объемный текст и изменять его цвет на лету:

Sass

@mixin text3d($color) {
  color: $color;
  text-shadow: 1px 1px 0px darken($color, 5%),
               2px 2px 0px darken($color, 10%),
               3px 3px 0px darken($color, 15%),
               4px 4px 0px darken($color, 20%),
               4px 4px 2px #000;
}

h1 {
  font-size: 32pt;
  @include text3d(#0982c1);
}

LESS

.text3d(@color) {
  color: @color;
  text-shadow: 1px 1px 0px darken(@color, 5%),
               2px 2px 0px darken(@color, 10%),
               3px 3px 0px darken(@color, 15%),
               4px 4px 0px darken(@color, 20%),
               4px 4px 2px #000;
}

span {
  font-size: 32pt;
  .text3d(#0982c1);
}

Stylus

text3d(color)
  color: color
  text-shadow: 1px 1px 0px darken(color, 5%), 2px 2px 0px darken(color, 10%), 3px 3px 0px darken(color, 15%), 4px 4px 0px darken(color, 20%), 4px 4px 2px #000
span
  font-size: 32pt
  text3d(#0982c1)

В примере для Stylus я выбрал вариант написания свойства 

1

text-shadow
в одну строку, так как здесь я опустил фигурные скобки.

Скомпилированный CSS

span {
  font-size: 32pt;
  color: #0982c1;
  text-shadow: 1px 1px 0px #097bb7,
               2px 2px 0px #0875ae,
               3px 3px 0px #086fa4,
               4px 4px 0px #07689a,
               4px 4px 2px #000;
}

Колонки

Использование переменных и числовых значений для этих переменных пришла мне в голову, когда я только начал знакомиться с возможностями CSS-препроцессоров. Объявление ширины для макета внутри переменной делает задачу изменения этой ширины (при необходимости) простой и быстрой:

Sass

$siteWidth: 1024px;
$gutterWidth: 20px;
$sidebarWidth: 300px;

body {
  margin: 0 auto;
  width: $siteWidth;
}
.content {
  float: left;
  width: $siteWidth - ($sidebarWidth+$gutterWidth);
}
.sidebar {
  float: left;
  margin-left: $gutterWidth;
  width: $sidebarWidth;
}

LESS

@siteWidth: 1024px;
@gutterWidth: 20px;
@sidebarWidth: 300px;

body {
  margin: 0 auto;
  width: @siteWidth;
}
.content {
  float: left;
  width: @siteWidth - (@sidebarWidth+@gutterWidth);
}
.sidebar {
  float: left;
  margin-left: @gutterWidth;
  width: @sidebarWidth;
}

Stylus

siteWidth = 1024px;
gutterWidth = 20px;
sidebarWidth = 300px;

body {
  margin: 0 auto;
  width: siteWidth;
}
.content {
  float: left;
  width: siteWidth - (sidebarWidth+gutterWidth);
}
.sidebar {
  float: left;
  margin-left: gutterWidth;
  width: sidebarWidth;
}

Скомпилированный CSS

body {
  margin: 0 auto;
  width: 1024px;
}
.content {
  float: left;
  width: 704px;
}
.sidebar {
  float: left;
  margin-left: 20px;
  width: 300px;
}

Некоторые уловки препроцессоров

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

Сообщение об ошибках

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

CSS-препроцессоры могут сообщать об ошибках в коде и заставить их поступать таким образом достаточно просто. В этом случае препроцессор сам сообщает вам, в каком месте CSS-кода находиться ошибка (и все счастливы).

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

Комментирование

В CSS-препроцессоре при компиляции из кода удаляются любые комментарии в виде двойного слеш’а (

1

// это комментарий
). Но, в тоже время, блочные комментарии (
1

/* это комментарий */
) остаются в коде без изменений.

На заметку: при компиляции в минимизированную версию CSS-файла удаляются любые комментарии.

Заключение

Каждый из трех рассмотренный в этой статье CSS-препроцессоров (Sass, LESS и Stylus) обладает своим собственным, уникальным способом решения одной и той же задачи. Это дает в руки разработчика возможность выбора, каким способом выполнить поставленную задачу. Объединяет все препроцессоры способность расширить горизонты кодера с одновременным сохранением кросс-браузерности и чистоты кода.

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

На этом все.

gearmobile Reading time ~2 minutes

Со времен, когда я увлекался изучением операционных систем семейства Linux, для меня небезразличной была тема цифровой безопасности. Благо, системы Linux имеют богатый набор инструментов в этой области.

С того времени ничего не изменилось и при любом удобном случае я всегда поступаю по принципу - “безопасности много не бывает”. Особенно, когда это касается сайтов, выложенных во всеобщем доступе и работающих на такой мега-популярной CMS, как WordPress (со всеми вытекающими отсюда последствиями).

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

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

Логичным для меня шагом было найти доступный мануальчик по созданию безопасного канала связи с административной панелью WordPress. Но вот незадача - на русском языке я такового не нашел. Пришлось перевести англоязычную статью, вольный перевод которой привожу ниже.

Перед установкой WordPress у вас уже должен быть SSL-сертификат, который подключается к учетной записи хостинга, на котором будет располагаться ваш сайт. Если у вас нет сертификата SSL, вам необходимо приобрести его.

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

Для того, чтобы активировать сертификат SSL в WordPress, необходимо отредактировать файл 

1

wp-config.php
. Можете поступить двумя способами:

  1. скачать этот файл на локальную машину, используя файловый менеджер FTP
  2. воспользоваться встроенным редактором файлов в файловом менеджере FTP (например, FileZilla)

Подключение SSL к административной панели WordPress

  1. Открываем для редактирования файл 

    1

    wp-config.php

  2. Находим в этом файле строку:

/* That's all, stop editing! Happy blogging. */
  1. Выше этой строки добавляем в файл две строки:
define('FORCE_SSL_ADMIN', true);
define('FORCE_SSL_LOGIN', true);
  1. В результате файл 
    1

    wp-onfig.php
    должен выглядеть следующим образом:
define('FORCE_SSL_ADMIN', true);
define('FORCE_SSL_LOGIN', true);
/* That's all, stop editing! Happy blogging. */

Теперь каждый раз, когда вы подключитесь к административной панели WordPress, в адресной строке браузера вы увидите, что url начинается с 

1

https://
вместо 
1

http://
.

Заключение

Все хорошо, но теперь осталось выкроить “немного” маленьких зеленых бумажечек, чтобы приобрести SSL-сертификат.

gearmobile Reading time ~7 minutes

Начал создавать серию статей по Bootstrap, чтобы основательно изучить для себя данный вопрос. Но вот незадача - придется на время отложить его в сторону и отвлечься на пару моментов.

Первый из них - это язык Markdown, а второй - модульные сетки. И если без первого вопроса изучение Bootstrap можно продолжить без какого-либо ущерба (до этого же как-то обходился без него?), то вот со вторым вопросом посложнее будет.

Дело в том, что фреймворк Bootstrap в основе своей работы использует модульную сетку. А вы хорошо себе представляете (и знаете ли вообще?), что такое модульная сетка?

Начнем с языка Markdown

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

Язык Markdown - по мне, так его языком даже назвать нельзя. Это просто специальный синтаксис, призвание которого - облегчить и убыстрить написание HTML-документов. Это важно для людей, которые или сами ведут блоги\сайты или профессия которых называется контент-менеджер. Другими словами, это люди, которые часто пишут статьи с форматированием в виде HTML-документов.

Если вы хотя бы раз писали статьи с таким форматированием, то прекрасно знаете, что необходимо делать бесчисленное число раз в редакторе - ввод HTML-тегов для форматирования текста. Поверьте (если не знаете) - это очень неудобно и утомительно.

Конечно, для браузера HTML-теги необходимы, иначе он не сможет правильно прочитать HTML-документ. Но вот нам, человекам, эти теги, по большому счету, ни к чему.

Язык Markdown был создан именно для того, чтобы позволить человеку, набирающему текст в HTML-формате, забыть об HTML-тегах. Вместо этих тегов в Markdown применяются символы-заменители, которые гораздо легче набирать вручную. В этом заключается смысл создания и использования языка Markdown.

Конечно, как любой другой язык-надстройка (например, тот же SASS\SCSS или LESS для CSS), Markdown нуждается в компиляторе, который “переводил” бы текст в формате этого языка в стандартный формат HTML-документа.

В терминологии Markdown такой компилятор называется транслятором и их существует достаточное количество. Существуют платные или бесплатные Markdown-редакторы, в которых уже встроен такой транслятор.

Ниже я рассмотрю два варианта использования языка Markdown - один с помощью специализированных редакторов, второй - с помощью плагина под редактор Sublime Text 2, расширяющего его возможности в плане написания статей с таким синтаксисом.

Редактор MarkdownPad2

Редактор MarkdownPad2 - это герой моего дня сегодня! Бесплатный, интуитивно понятный и простой. Под Windows XP у меня на работе он установился и запустился без проблем. А вот дома на ноутбуке HP Pavilion g6 с Windows 7 установился, но запуститься отказался. Выдал какую-то ошибку, которую мне неохота было выискивать в Google.

В версии MarkdownPad2 (бесплатная) нет многих удобных фишек, которые есть в версии MarkdownPad2 Pro (платная). Но и без них можно прожить, это не так уж “страшно”.

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

  1. Первая - там описывать нечего. Он настолько прост и лаконичен, что ему можно и нужно выучиться за полчаса, просто набирая текст в редакторе. Глупо было бы - ведь для цели упрощения написания статей в HTML-разметке язык Markdown и создавался.
  2. Вторая - если у вас все же есть желание почитать статью-описание этого языка, то есть прекрасный вариант - “Технический блог” Владимира Старкова, где помещен материал Основы markdown. Статья совсем свежая, написана автором 13 февраля этого года. Кроме этого, малоизвестная поисковая система Google поможет вам найти целую кучу разнообразных 
    1

    cheatsheet
    ‘ов по этому языку.

Чтобы не быть голословным, приведу небольшое изображение редактора MarkdownPad2 после первого запуска программы:

MarkdownPad2 после первого запуска

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

Если хотите точно в этом удостовериться, нажмите клавишу F6 (или самую последнюю иконку на панели инструментов редактора). Создаваемая страница откроется в окне браузера, являющегося браузером по умолчанию в системе.

Давайте быстро пробежимся, как использовать программу и создавать документы в ней:

  • создаем новый документ Ctrl+N
  • вносим в него изменения: текст, изображения и так далее
  • сохраняем файл с расширением 
    1

    .md
  • экспортируем в HTML-файл Ctrl+Shift+1

Как видим, все просто до предела. Но хочу сказать о паре моментов по работе в этой программе:

  • при форматировании текста лучше использовать панель инструментов редактора, так как синтаксис в редакторе слегка отличается от “официального”;
  • опция экспорта в pdf-формат Ctrl+Shift+2 доступна только в платной версии (а оно нам надо?).

Редактор MarkDown#Editor

Еще один редактор для написания текстов в синтаксисе Markdown - “MarkDown#Editor”. Он также бесплатный, но на моем ноутбуке он запустился без ошибок.

Программа создана автором из Страны Восходящего Солнца по имени Mitsuhiro Hibara. Проект проживает по запоминающемуся адресу http://www.hibara.org (думаю, жители Восточной Украины и юга России меня поймут).

Редактор мне понравился как внешним видом, так и своими возможностями. В нем все просто и интуитивно понятно. Ниже представлен внешний вид программы после первого ее запуска:

MarkdownSharpEditor - первый запуск редактора

Программа умеет экспортировать только в один формат - HTML. Но больше и не нужно, правда?

Плагин MarkdownEditing

Готовые редакторы под Markdown - это прекрасная вещь, но меня не устраивает одно. Я не люблю держать на компьютере целую кучу программ, каждая из которых выполняет только одну задачу.

Я говорю это к тому, что под мой любимый редактор Sublime Text имеется плагин MarkdownEditing, который позволяет создавать документы формата Markdown в этой программе.

Давайте рассмотрим установку, настройку и работу этого плагина в ST2. Надо сказать, что вопрос с плагином под Sublime потратил у меня достаточно времени. Я не знал, как выполнять экспорт готового md-файла в html-файл. Ни Stackoverflow, ни Toster не помогли мне разобраться с данным вопросом. Только прямая свзяь с maintainer’ом плагина помогла разрешить ситуацию.

  1. Установка плагина MarkdownEditing в Sublime Text 2 стандартная - через менеджер пакетов
  2. Перезапускаем редактор Sublime Text 2
  3. Создаем новый документ и устанавливаем для него синтаксис Markdown Shift+Ctrl+P
  4. Пишем в новом документе текст
  5. Сохраняем отредактированный документ как файл с расширением 
    1

    .md

Плагин MarkdownEditing в Sublime Text 2

А теперь немного внимания! Для меня данный вопрос был камнем преткновения, который заставил добраться с просьбой о помощи до самого maintainer’а плагина - Ali Ayas. Я долго не мог понять простой вещи - MarkdownEditing предназначен только для редактирования файлов с синтаксисом Markdown, о чем говорит само название этого плагина.

Плагин MarkdownEditing не умеет сам конвертировать .md-файлы в файлы формата html. Поэтому, если вы пишите статьи для сайта под управлением WordPress (как в моем случае), вам необходимо поставить на эту CMS плагин для конвертации - WP-Markdown. Затем закидываете статьи в формате 

1

.md
под эту CMS, а там уже плагин WP-Markdown автоматически превратит их в html-файлы.

Не знаю, кого как, а меня разочаровал такой подход к делу создания markdown-файлов в Sublime Text 2 с плагином MarkdownEditing.

P.S.

Эмоции немного остыли и я пришел к выводу, что не все так плохо, как казалось с первого взгляда. Более того, имеется плагин MarkdownBuild под Sublime Text 2, который прекрасно справляется с задачей компиляции файла 

1

markdown
в html-файл. Устанавливается этот плагин как обычно, через менеджер пакетов.

Настройки плагина минимальные и их можно привести здесь целиком:

{
  "output_html" : true, // сохранить выходной файл html в ту же папку, в которой находиться входной файл markdown
  "open_html_in" : "browser",  // открыть файл html в браузере
  "use_css" : true,
  "charset" : "UTF-8"
}

Единственный момент заключается в том, что настройки плагина MarkdownBuild находятся в файле 

1

MarkdownBuild.sublime-settings
, добраться до которого можно только через файловый менеджер или Проводник. В редакторе Sublime Text 2 я не нашел способа открыть настройки этого плагина.

Кроме того, компиляция в этом плагине производится через сочетание клавиш Shift+Ctrl+B, а не Ctrl+B, как описано в документации.

Заключение

Я доволен тем, что познакомился с языком Markdown. С ним действительно создавать статьи под сайт гораздо легче, быстрее и удобнее. Писать статьи или обзоры с помощью Markdown - одно удовольствие.

Редактором-победителем для меня стала программа MarkdownPad - быстрая, удобная и надежная. Тот момент, что она отказалась установиться на моем ноуте под Windows 7 роли не играет, как мне кажется.

На этом все.