Вот плавно и постепенно, стараясь без рывков и пробелов в познаниях front-end, я подошел к теме модульных сеток на CSS. Очередные мысли по поводу верстки для начинающего верстальщика.

Зачем я подошел к этой теме? Для чего нужны модульные сетки для верстальщика? Ответ прост - сегодня по крайней мере половина всех дизайнов верстается по такой сетке. Зачем это делается? Для быстроты процесса верстки и стандартизации этого же самого процесса. Сама идея модульной сетки далеко и далеко не новая - в типографии она была разработана еще в прошлом веке (если я не ошибаюсь). Благодаря такой сетке упорядочивается расположение всех элементов текста (изображений) на странице журнала, газеты и т. д.

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

Выдуманный пример разметки журнальной страницы

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

Кстати, а почему модульные? Откуда такое название? Все просто - под модулем в таких сетках подразумевается “кирпичик”, основа сетки. Минимальная единица “измерения”, которая является основой этой сетки.

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

Сетка в электронной таблице MS Excel тоже является модульной структурой, в основе которой лежит ячейка этой сетки. Таблица в Excel может увеличиваться или уменьшаться с шагом, равным размеру ячейки этой таблицы.

Как очень хорошо известно, CSS - это типография, перешедшая в Интернет. Многие термины и понятия также перекочевали из типографии в технологию CSS: размер шрифта, межстрочное расстояние и т. д. Не стала исключением модульная сетка.

В один прекрасный момент веб-дизайнеры поняли, что не стоит изобретать велосипед. Что создание макета веб-страницы в коде HTML&CSS гораздо удобнее, проще и быстрее выполнять по модульной сетке, нежели “тасовать” блоки произвольно. Кроме того, сам дизайн страницы получается более стандартизированным, унифицированным; подчиненным одним и тем же, единым правилам.

С помощью кода на CSS была сделана попытка воспроизвести модульную сетку в Веб и применить ее на практике. Первой такой (насколько я знаю) попыткой была система 960 Grid System:

Модульная сетка на CSS

При первом взгляде на рисунок (не знаю, как у вас), у меня сразу возник вопрос - “а где же здесь сетка?” Сетка, сетка - это и есть сетка, спроектированная под особенности Веб! Ведь вы хорошо знаете, что в макете веб-страницы имеет значение только ширина блоков контента; высота же блоков является величиной переменной, она меняется в зависимости от количества контента, наполняющего эти блоки; она почти никогда не задается жестко, фиксировано. Поэтому в данном случае строки сетки совсем ни к чему - остаются только колонки.

Как уже упоминалось выше, модульная сетка пришла в CSS из типографии; понятия, связанные с модульной сеткой, также пришли из типографии.

В модульной сетке имеются всего три параметра:

  • container (контейнер)
  • column (колонка)
  • gutter (канавка)

Структура модульной сетки на CSS

Видим, что основной блок-обертка (container) содержит в себе 12 колонок (column). Содержимое (</em>контент</em>) располагается в этих колонках. Колонок может быть не обязательно 12; другими популярными величинами являются 16 колонок и 24 колонки:

Модульная CSS-сетка из 16 колонок

Модульная CSS-сетка из 24 колонок

Откуда такие величины - 12, 16 и 24 колонки? Во-первых, они взяты из математических расчетов, на которых основана модульная сетка. А во-вторых, такие значения наиболее применимы на практике.

Колонки разделяются между собой промежутками (

1
gutter
). Как правило, самые крайние отступы от колонок равны половине gutter - gutter/2.

Колонки можно объединять между собой - две колонки объединить в одну, три колонки объединить в одну и так далее. В результате получаются ячейки сетки - блоки с контентом. Чтобы визуально разъяснить (если еще непонятно) этот вопрос, посмотрите на рисунок ниже:

Пример блочной верстки на основе CSS-сетки

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

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

Получение модульной сетки 960gs

Первым шагом необходимо получить копию заготовки (шаблон) данной модульной CSS-сетки. Для этого заходим на сайт проекта 960gs и скачиваем оттуда заготовку, нажав большую кнопку посередине с надписью - ‘Big ol’DOWNLOAD button :)’. Получаем на свой компьютер архив с именем

1
960-Grid-System-master.zip
.

Кстати, а почему такое название у этой модульной сетки - 960 Grid System? Все просто, здесь цифра 960 - это ширина блока-обертки container в 960px, наиболее приемлемая ширина страницы сайта для мониторов с разрешением 1024x768px. На время создания этой модульной CSS-сетки большинство сайтов делалось фиксированной ширины для наиболее популярного разрешения мониторов - 1024x768px.

Разархивируем этот пакет и взглянем на его содержимое:

  • app_plugins
  • code
  • licenses
  • logo_files
  • sketch_sheets
  • templates
  • .gitignore
  • README.txt

В папке app_plugins находятся плагины под два графических редактора - Fireworks и Photoshop. Цель плагинов - будучи установленными в эти программы, помогать создавать макеты сайтов на основе модульной сетки 960gs. Это помощь для дизайнеров, которые рисуют макеты будущих сайтов.

В папке licenses располагаются тексты лицензий, под которыми распространяется данная модульная сетка.

В директории logo_files находятся логотип 960 Grid System в разных форматах -

1
.ai
,
1
.eps
,
1
.png
и
1
.psd
. Как пишется сам автор 960gs - Nathan Smith, этот логотип был создан и предоставлен в бесплатное пользование всем желающим по многочисленным просьбам “трудящихся”.

Есть также заготовки модульной сетки в виде линованной бумаги с колонкой для комментариев. Эти заготовки помещены в папку sketch_sheets в формате

1
.pdf
и готовы для того, чтобы их распечатать и пользоваться. Видимо, это тоже было сделано по просьбам “трудящихся”, которые любят создавать наброски макета на бумаге с помощью ручки или карандаша.

А вот для настоящих IT-ов имеется директория templates, в которой расфасованы точно такие же макеты, но в электронном виде, под самые разные wireframe-программы. Количество впечатляет - тут и Balsamiq, и Photoshop, Firework и Illustrator; под Gimp на Linux и под Omnigraffle на Mac OS X; пользуйся не хочу, что называется.

Но мы вернемся к самой главной папке, которую мы пропустили - code. Там находится то, ради чего мы и затеялись с этой модульной сеткой 960gs - готовые файлы с кодом этой самой сетки. Файлы формата HTML (

1
demo.html
,
1
demo_24_col.html
,
1
demo_24_col_rtl.html
,
1
demo_rtl.html
) можно посмотреть, но интереса они представляют мало - как понятно из их названия, это всего лишь демо-файлы. В папке img находятся три файла формата
1
.gif
:
1
12_col.gif
,
1
16_col.gif
,
1
24_col.gif
. Задача этих файлов - “подкладывать” их в виде фона для блока
1
.container_12
(или
1
.container_16
или
1
.container_24
) для того, чтобы удобно было визуально видеть эту самую сетку при верстке.

Папка CSS имеет список файлов формата CSS:

  • 960.css
  • 96012col.css
  • 96012col_rtl.css
  • 96016col.css
  • 96016col_rtl.css
  • 96024col.css
  • 96024col_rtl.css
  • 960_rtl.css
  • demo.css
  • reset.css
  • reset_rtl.css
  • text.css
  • text_rtl.css

… и подпапку min, в которой содержится точно такой же список файлов. Разница между первым и вторым списком в том, что первый список - это developer-версия, а второй - production-версия.

Внимательный читатель спросит - а что это за суффикс странный у некоторых файлов CSS -

1
rtl
. Ну, даже новичкам (которые в теме) должно быть понятно, что это
1
right-to-left
, стили для создания дизайна, в котором текст пишется и располагается справа налево. Таки если вы не собираетесь иммигрировать на историческую родину, то эти стили вам никогда не пригодятся, по большому счету!

Эти файлы формата CSS является тем самым, ради чего мы заходили на оф. сайт - это и сеть модульная сетка 960gs! Можно открыть их в HTML-редакторе и просмотреть исходный код - он очень короткий и простой.

Построение верстки на основе модульной сетки 960gs производится с помощью классов, расположенных в главном файле

1
960_12_col.css
(или
1
960_16_col.css
, или
1
960_24_col.css
). Классов в модульной сетке 960gs не так уж много - точнее, их совсем мало:

  • .container12 (.container16, .container_24)
  • .grid_х
  • .push_х
  • .pull_х
  • .alpha
  • .omega
  • .prefix_х
  • .suffix_х
  • .clear

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

  • Класс
    1
    
    .container_12
    создает блок-обертку шириной 960px, расположенную по центру окна браузера, состоящую из 12 колонок. Аналогично классы
    1
    
    .container_16
    и
    1
    
    .container_24
    также создают обертку шириной 960px, но состоящую из 16 и 24 колонок, соответственно.
  • Класс
    1
    
    .grid_х
    - это общее представление (можно сказать - формула) для создания ячеек модульной сетки. В качестве
    1
    
    х
    может быть значение от 1 до 12 (в 12-колоночной сетке), от 1 до 16 (в 16-колоночной сетке), от 1 до 24 (в 24-колоночной сетке). Задав значение вместо
    1
    
    х
    , создается ячейка шириной
    1
    
    х
    колонок. То есть,
    1
    
    .grid_2
    создает ячейку шириной 2 колонки;
    1
    
    .grid_10
    - создает ячейку шириной в 10 колонок. Естественно, значение
    1
    
    х
    не может превышать общее число колонок в контейнере. То есть, в контейнере с классом
    1
    
    .container_12
    может быть класс
    1
    
    .grid_12
    , но не больше. В контейнере с классом
    1
    
    .container_16
    может быть класс
    1
    
    .grid_16
    , но не больше. Аналогично с контейнером класса
    1
    
    .container_24
    .
  • Класс
    1
    
    .push_х
    “сдвигает” ячейку вправо на указанное количество колонок. То есть, класс
    1
    
    .push_4
    “отодвигает” ячейку вправо на 4 колонки.
  • Класс
    1
    
    .pull_х
    “сдвигает” ячейку влево на указанное количество колонок. Например,
    1
    
    .pull_3
    сдвинет ячейку влево на три колонки.
  • Классы
    1
    
    .alpha
    и
    1
    
    .omega
    просты - они убирают отступы у ячейки слева и справа, соответственно.
  • Классы
    1
    
    .prefix_х
    и
    1
    
    .suffix_х
    добавляют пустое пространство (расширяют) ячейку слева и справа, соответственно.
  • Класс
    1
    
    .clear
    служит для “очистки” содержимого после плавающего блока.

Давайте от теории перейдем к практике и создадим каркас обычного трех-колоночного макета, в котором “шапка” и “подвал” будут занимать всю ширину страницы:

Пример простого трех-колоночного макета

Из скачанного архива

1
960-Grid-System-master.zip
нам потребуются файлы:

  • text.css (в нем находятся все правила по типографике)
  • reset.css (файл сброса стилей для браузеров)
  • 960_24_col.css (модульная CSS-сетка на 24 колонок)
  • 24_col.gif (фоновая картинка, рисующая 24 колонок в основном блоке
    1
    
    .container_24
    )

Выбираем их оттуда и раскладываем по папкам нашего собственного проекта:

  • css:
    • text.css
    • reset.css
    • 96024col.css
  • img:
    • 24_col.gif

В шапке

1
header
файла
1
index.html
производим последовательное подключение полученных файлов. Только один из них -
1
style.css
- мы создадим самостоятельно, для написания своих собственных CSS-стилей. Все остальные файлы оставим без изменения - так и нужно поступать с файлами данного фреймворка (и не только этого):

<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/text.css" />
<link rel="stylesheet" type="text/css" href="css/960_24_col.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

Затем создадим HTML-структуру страницы, применив знания классов, которые были рассмотрены выше. Шапке сайта задаем класс

1
.grid_24
, чтобы она заняла всю ширину 24-колоночного блока. Затем создаем левый блок шириной в 8 колонок с помощью класса
1
.grid_8
, центральный блок шириной в 13 колонок с помощью класса
1
.grid_13
, правый блок шириной в 3 колонки через класс
1
.grid_3
. И внизу помещаем “подвал” сайта опять на всю ширину страницы с помощью класса
1
.grid_24
:

<div class="container_24">
  <!-- header -->
    <header class="grid_24"></header>
  <!-- content -->
    <aside class="grid_8 leftSideBar"></aside>
    <main class="grid_13"></main>
    <aside class="grid_3 rightSideBar"></aside>
  <!-- footer -->
    <footer class="grid_24"></footer>
</div>
<!-- end container -->

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

.container_24{
  background: url(../img/24_col.gif) top left repeat;
  margin-top: 10px;
}

header{
  background-color: hsla(120,100%,50%,.4);
  min-height: 100px;
  margin-bottom: 10px;
}

.leftSideBar, .rightSideBar, main{
  min-height: 300px;
  margin-bottom: 10px;
}

.leftSideBar{
  background-color: hsla(240,100%,50%,.5);
}

main{
  background-color: hsla(180,100%,50%,.4);
}

.rightSideBar{
  background-color: hsla(300,100%,50%,.3);
}

footer{
  background-color: hsla(60,100%,50%,.7);
  min-height: 50px;
}

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

Простой пример колонок

Очень простой пример создания двух рядов с тремя и двумя ячейками на всю ширину страницы:

Два ряда с колонками на всю ширину страницы

Для этого создаем такую разметку:

<div class="container_12">
  <!-- header -->
  <div class="grid_4">
    <p>
      1/3 ширины блока .container
    </p>
  </div>
  <div class="grid_4">
    <p>
      1/3 ширины блока .container
    </p>
  </div>
  <div class="grid_4">
    <p>
      1/3 ширины блока .container
    </p>
  </div>
  <div class="clear">
  </div>
  <!-- гадость! -->
  <!-- footer -->
  <div class="grid_6">
    <p>
      1/2 ширины блока .container
    </p>
  </div>
  <div class="grid_6">
    <p>
      1/2 ширины блока .container
    </p>
  </div>
</div>
<!-- end container -->

… и CSS-код:

.container_12{
  background: url(../img/12_col.gif) top left repeat;
  margin-top: 10px;
}

div[class^="grid"]{
  min-height: 100px;
  text-align: center;
  line-height: 100px;
}

div[class="grid_4"]{
  background-color: hsla(120,100%,50%,.4);
}

div[class="grid_6"]{
  background-color: hsla(240,100%,50%,.4);
}

Ячейки, обернутые другой ячейкой

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

1
alpha
и
1
omega
для первого и последнего блоков. С помощью этих классов убираются отступы слева и справа от этих крайних блоков. Если не добавить эти классы, то верстка поломается:

Обертывание ячеек в 960gs

HTML-код:

<div class="container_12">
  <!-- content -->
  <div role="wrap" class="grid_12">
    <div class="grid_3 alpha">
      <p>
        Part_1
      </p>
    </div>
    <div class="grid_3">
      <p>
        Part_2
      </p>
    </div>
    <div class="grid_3">
      <p>
        Part_3
      </p>
    </div>
    <div class="grid_3 omega">
      <p>
        Part_4
      </p>
    </div>
  </div>
</div>
<!-- end container -->

… и CSS-код:

.container_12{
  background: url(../img/12_col.gif) top left repeat;
}

div[role="wrap"]{
  background-color: hsla(120,100%,50%,.3);
  padding: 10px 0;
  margin-top: 10px;
}

div[class^="grid_3"]{
  background-color: hsla(240,100%,50%,.4);
}

Смещение ячеек в 960gs

Перемещение ячеек в сетке 960gs

Интересный пример перемещения ячеек в модульной сетке 960gs. Если внимательно посмотреть на пример, то станет заметно, что фиолетовый блок с надписью Last (последний) стоит на первом месте в ряду. Достигнуто это благодаря двум классам

1
.push
и
1
.pull
. Если не вдаваться в код, стоящий за этими двумя классами, то их назначение запомнить легко:
1
push
- толкать (толкаем, двигаем ячейки слева направо),
1
pull
- тянуть (тянем, двигаем ячейки справа налево). В этом примере было произведено взаимное замещение двух ячеек - они поменялись местами.

HTML-код:

<div class="container_12">
  <!-- header -->
  <div role="first" class="grid_6 push_6">
    <div class="grid_2 alpha">
      <p>
        Grid_1
      </p>
    </div>
    <div class="grid_2">
      <p>
        Grid_2
      </p>
    </div>
    <div class="grid_2 omega">
      <p>
        Grid_3
      </p>
    </div>
  </div>
  <!-- content -->
  <div role="last" class="grid_6 pull_6">
    Last
  </div>
</div>
<!-- end container -->

… CSS-код:

.container_12{
  background: url(../img/12_col.gif) top left repeat;
  margin-top: 10px;
}

div[class^="grid"]{
  min-height: 100px;
}

div[role="first"]{
  background-color: hsla(120,100%,50%,.3);
}

div[role="last"]{
  background-color: hsla(240,100%,50%,.3);
}

div[class^="grid_2"]{
  background-color: hsla(180,100%,50%,.2);
}

Создание рамки вокруг ячейки в 960gs

Также интересный пример создания рамки вокруг ячейки с изображением. Такая рамка с помощью обычного CSS-кода создается очень легко и просто; а вот в системе 960gs это достаточно непростая задача. Для этого придется в одну ячейку вложить блок, для которого установить границу, которая будет служить рамкой для картинки:

Ячейка с рамкой в 960gs

HTML-код:

<div class="container_12">
  <!-- content -->
  <div role="top" class="grid_7">
    <div role="border">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, voluptatum, minus dolor eaque officiis quis placeat commodi unde minima recusandae amet velit dolorem perferendis quibusdam dolorum! Saepe iste nisi nobis!
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, iusto, id veniam non quas nesciunt laborum error debitis ipsam delectus sequi incidunt sunt et iste nulla deserunt vitae aut beatae.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, ab, totam, labore, odio accusamus excepturi repellendus porro deserunt ut nisi molestiae molestias quibusdam accusantium saepe doloribus perspiciatis aliquid voluptatum sit?
      </p>
    </div>
  </div>
  <div role="top" class="grid_5">
    <div role="border" class="banner">
    </div>
  </div>
</div>
<!-- end container -->

… CSS-код:

.container_12{
  margin-top: 10px;
}

div[role="top"]{
  background-color: hsla(120,100%,50%,.3);
}

div[role="border"]{
  border: 10px solid #e5e5e6;
  height: 280px;
}

  div[role="border"] p{
    margin: 10px;
    padding: 5px;
    background-color: hsla(0,0%,0%,.3);
    border-radius: 5px;
  }

  div[role="border" ][class="banner"]{
    background: url(../img/weiss.jpg) top left no-repeat;
  }

Ячейка с обтеканием в 960gs

И напоследок еще один пример, на этот раз с примером отмены обтекания. Обратите внимание на два последних ряда. В предпоследнем намеренно сделано три ячейки, чтобы ширина страницы не была заполнена до конца. После этого ряда добавлен блок с классом

1
clear
, чтобы предотвратить смещение ячеек следующего ряда в это пустое пространство. Это одно из предназначений класса
1
clear
в системе 960gs.

Отмена обтекания ячейки в 960gs

HTML-код:

<div class="container_24">
  <!-- header -->
  <div class="grid_24 navbar">
    <div class="grid_12 push_2 alpha header"></div>
    <div class="grid_6 push_5 omega header"></div>
  </div>
  <!-- content -->
  <div class="grid_24 content">
    <aside class="grid_10 alpha leftColumn"></aside>
    <div class="grid_4 pull_9 label"></div>
    <div class="grid_11 push_3 rightColumn omega"></div>
  </div>
  <!-- subtopics -->
  <div class="grid_6 topic"></div>
  <div class="grid_6 topic"></div>
  <div class="grid_6 topic"></div>
  <div class="clear"></div>
  <!-- вот он зачем здесь, этот странный блок! -->
  <!-- subtopics -->
  <div class="grid_6 subtopic"></div>
  <div class="grid_6 subtopic"></div>
  <div class="grid_6 subtopic"></div>
  <div class="grid_6 subtopic"></div>
</div>
<!-- end container -->

… CSS-код:

.container_24{
  background: url(../img/24_col.gif) top left repeat;
}

.navbar{
  margin-top: 5px;
  margin-bottom: 10px;
  padding: 10px 0;
  background-color: hsla(240,100%,50%,.2);
}

.header{
  min-height: 50px;
  background-color: hsla(120,100%,50%,.7);
}

.content{
  background-color: hsla(60,100%,50%,.2);
  padding: 15px 0;
  margin-bottom: 10px;
}

.leftColumn{
  background-color: hsla(300,100%,50%,.5);
  min-height: 100px;
}

.rightColumn{
  background-color: hsla(180,100%,50%,.3);
  min-height: 150px;
  margin-top: -60px;
}

.label{
  background-color: hsla(0,0%,0%,.5);
  min-height: 50px;
  margin-top: 10px;
}

.news{
  background-color: hsla(0,0%,0%,.3);
}

.topic{
  background-color: hsla(0,0%,0%,.5);
  min-height: 80px;
}

.subtopic{
  background-color: hsla(30,100%,50%,.4);
  min-height: 80px;
}

.border{
  padding: 0 10px;
}

Вот и все. Объемной получилась статейка!


Короткая статья, посвященная условным комментариям. Такие комментарии до сих пор активно применяются на практике и имеют отношение исключительно к браузерам семейства Internet Explorer (IE).

Точнее - условные комментарии и являются изобретением фирмы ООО “Микрософт”, призванным помочь браузерам этой конторы более-менее адекватно обрабатывать веб-сайты. Откуда такое странное название - условный комментарий? Его можно расшифровать как слияние двух слов:

  • условие;
  • комментарий;

Условие - это как обычное условие if в любом языке программирования (в том же JavaScript, к примеру). А комментарий - это как обычный комментарий в HTML-документе:

<!-- Это комментарий в HTML -->

Синтаксис условного комментария

Сочетание условия и комментария в итоге получило название условного комментария. Синтаксис можно представить примером ниже:

<!--[if lte IE 8]>
  ...
<![endif]-->

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

Начинается (

1
if
) условный комментарий со строки:

<!--[if lte IE 8]>
  <p>... после которой идет HTML-код. Заканчивается (<strong>endif</strong>) условный комментарий строкой:</p>
<![endif]-->

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

<!--[if lte IE 8]>
  <link rel="stylesheets" type="text/css" href="css/ie.css" media="screen, projection">
<![endif]-->

Расшифровать подобный условный комментарий можно таким образом: “если браузером посетителя является Internet Explorer версии 8 или ниже, то следует загрузить таблицу стилей

1
ie.css
, расположенную по адресу
1
css/
”.

Цель создания условных комментариев

Условные комментарии понимают только браузеры семейства IE. Для других браузеров (таких как Chrome, Firefox или Opera) такие строки являются обычным HTML-комментарием, который они просто опускают (проходят мимо него).

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

Зачем понадобилась такая особенность именно для браузеров IE, много говорить не надо. Все хорошо знают, что IE версии 6-9 отображают HTML-страницы не всегда в соответствии с веб-стандартами.

Поэтому был придуман обходной маневр, призванный не нагружать “правильные” браузеры Chrome, Firefox или Opera лишним кодом, предназначенным только для браузера IE.

Ключевые слова в условных комментариях

Условие в условном комментарии создается с помощью специальных слов, запомнить значение которых очень легко, так как их всего четыре:

  • 1
    
    lt
    - меньше (
    1
    
    <
    )
  • 1
    
    lte
    - меньше или равно (
    1
    
    <=
    )
  • 1
    
    gt
    - больше (
    1
    
    >
    )
  • 1
    
    gte
    - больше или равно (
    1
    
    >=
    )

То есть, запись вида:

<!--[if lte IE 7]>
  ...
<![endif]-->

… читается как: “если браузер IE версии 7 или ниже (версия 6 или 5), то применить код внутри комментария”.

Или же:

<!--[if lt IE 9]>
  ...
<![endif]-->

… “если версия браузера IE меньше 9, то применить код внутри комментария.

С записями - IE 6, IE 7, IE 8, IE 9 - думаю, все должно быть понятно без объяснений: Internet Explorer 6 (IE 6), Internet Explorer 7 (IE 7), Internet Explorer 8 (IE 8), Internet Explorer 9 (IE 9).

Заключение

Более подробно и обстоятельно об условных комментариях можно почитать из первоисточника (очень логично и правильно так сделать) - About conditional comments. Правда, оригинал написан на языке Шекспира, но кто не владеет им, может разобраться и так.

Стоит также заметить, что на оф. сайте Microsoft говориться о том, что в браузере IE начиная с версии 10 прекращается поддержка условных комментариев - Условные комментарии более не поддерживаются. То есть, браузер IE10 не сможет понять условный комментарий в HTML-документе и пропустит его, посчитав обычным комментарием.

Насколько я могу лично судить о таком шаге, вызван он тем, что в компании Microsoft уверены в том, что браузер версии 10 сможет правильно работать в соответствии с W3C-стандартами и “костыль” в виде условного комментария ему больше не требуется.

На этом все.


Помимо хорошо известных четырех значений свойства

1
background-repeat
-
1
repeat
,
1
no-repeat
,
1
repeat-x
,
1
repeat-y
, в спецификации CSS3 появились еще два, с которыми я познакомился совсем недавно.

Перечислим их:

  • 1
    
    background-repeat: round
  • 1
    
    background-repeat: space

Отлично, скажете вы! Ну и что, что же это за свойства? Мало прежних четырех? Давайте разберемся сначала, что это за свойства, а уже потом будем говорить, нужны они или не нужны.

Свойство background-repeat: repeat

Для начала посмотрим, как работает простое и привычное нам значение

1
repeat
:

.rnd{
  width: 700px;
  height: 500px;
  margin: 10px;
  border: 1px solid #000;
  background-image: url(img/ChristinaVujnich.jpg);
  background-position: top left;
  background-repeat: repeat;
}

Свойство background-repeat: repeat

Видим, как браузер аккуратно сделал все, что мы от него требовали - размножил фоновое изображение по горизонтали и по вертикали. Что не вместилось в блок, то было обрезано. Получилось несколько некрасиво; но зато - что требовали.

Свойство background-repeat: round

В спецификации CSS3 появилось одно из двух значений свойства

1
background-repeat
, которое делает попытку исправить ситуацию и выполнять “заливку” фона более красиво и “интеллектуально”. Это значение называется
1
round
- от английского округлять.

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

Пример показан ниже:

.rnd{
  width: 700px;
  height: 500px;
  margin: 10px;
  border: 1px solid #000;
  background-image: url(img/ChristinaVujnich.jpg);
  background-position: top left;
  background-repeat: round;
}

Свойство background-repeat: round

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

Свойство background-repeat: space

Еще одно значение свойства

1
background-repeat
из спецификации CSS3, призванное решить проблему красивого размещения фонового изображения в блоке элемента, это значение
1
space
.

Принцип работы этого свойства аналогичен значению

1
round
- браузер также считает количество целых “вхождений” изображения в фон элемента. Но вот с пустым пространством он поступает несколько иначе. Браузер равномерно распределяет его между изображениями (размер которых он оставляет неизменными).

Чтобы было понятно, о чем идет речь, посмотрите на пример ниже:

.rnd{
  width: 700px;
  height: 500px;
  margin: 10px;
  border: 1px solid #000;
  background-image: url(img/ChristinaVujnich.jpg);
  background-position: top left;
  background-repeat: space;
}

Свойство background-repeat: space

Мною намеренно были изменены размер блока, для которого “прописывалось” фоновое изображение; и размер самого изображения также. Все было сделано с целью более наглядного представления, как работает значение

1
space
для свойства
1
background-repeat
.

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

Значения Round & Space - поддержка браузерами

В заключение осталось упомянуть последнее - какими браузерами поддерживаются оба значения свойства

1
background-repeat
. Похвастаться особо нечем - только два браузера на момент написания этой статьи поддерживают
1
space
и
1
round
. Первый - это Google Chrome начиная с
1
v.32
. А вот второй браузер, который может похвастаться (держитесь крепче за стул!) - это Internet Explorer v10.

Поддержка с помощью Modernizr

В библиотеку Modernizr включена (благодаря ходатайству Louis Lazaris) поддержка значений

1
round
и
1
space
CSS-свойства
1
background-repeat
с помощью соответствующих классов
1
bgrepeatspace
и
1
bgrepeatround
. Поэтому, теперь можно использовать эту библиотеку для определения возможности поддержки в браузерах.

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

.element {
  width: 550px;
  height: 400px;
  background: transparent url(bg.jpg) repeat 0 0; /* for all browsers */
}

.bgrepeatspace .element {
  background-repeat: space; /* for supporting browsers */
}

Заключение

Вот, в принципе, и все по значениям

1
round
и
1
space
свойства
1
background-repeat
. В статье активно использовались мысли (и даже код, когда шла речь о Modernizr) из источника:

CSS3′s ‘space’ and ‘round’ Values for background-repeat

На этом все.


Прочитал одну статью, посвященную проблеме создания кода в CSS и Sass.

Статья мне чрезвычайно понравилась - можно даже сказать, я был в восхищении о нее и от того, что написал ее автор. В ней вкратце описывались основные “опорные” моменты при написании кода в CSS/Sass. Одним из таких “опорных” моментов упоминались Breakpoint в Sass.

Так как я большой поклонник этого препроцессора, то мне интересны все вопросы, связанные с ним. Поэтому мимо такой технологии, как Breakpoint - я просто не мог пройти мимо.

Итак, давайте знакомиться с Breakpoint в препроцессоре Sass. Прежде всего, Breakpoint - это расширение (модуль) для хорошо известной и популярной библиотеки-фреймворка Compass. Создан он двумя web-разработчиками Mason Wendell и Sam Richard.

Основная идея и цель создания этого модуля - сократить к одной строке создание медиа-запроса и возможность задавать для медиа-запросов осмысленные имена.

Установка модуля Breakpoint

Первое, что необходимо сделать, это установить в систему сам модуль

1
breakpoint
. Делается это обычной командой Ruby-окружения:

gem install breakpoint

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

1
sass
и
1
compass
обычным способом, через команды:

gem install sass
gem install compass

… то велика вероятность, что у вас в системе стоят Sass версии 3.2.18 и Compass версии 0.12.4. Поверить этот факт можно командой в терминале:

gem list

Однако, на момент написания статьи разрабатывается библиотека Compass под версией

1
1.0.0.alpha.19
, которую уже можно использовать несмотря на ее экспериментальный вид. Более того, модуль
1
breakpoint
совместим только с библиотекой Compass этой версии (1.0.0.alpha.19).

Поэтому, при запуске команды:

gem install breakpoint

… будет произведено автоматическое обновление пакетов

1
sass
и
1
compass
до версий Sass 3.3.4 и Compass 1.0.0.alpha.19. После успешной установки модуля
1
breakpoint
можно создать через Compass новый проект, указав при этом, что в проекте требуется поддержка (required) модуля
1
breakpoint
:

compass create newProject -r breakpoint

Заходим в созданную директорию и пробуем запустить Compass на мониторинг изменений во всех файлах проекта. Но не тут то было:

Ошибка при запуске библиотеки Compass - нет модуля wdm

Compass пишет в терминале, что ему не хватает модуля

1
wdm
и не запускается в режим мониторинга. Что такое
1
wdm
, я не знаю (я не Ruby-разработчик), но подозреваю, что это какой-то модуль. И его придется установить.

Для этого необходимо скачать с оф. сайта Ruby пакет разработчика Development Kit (Device). Мною скачивалась версия

1
DevKit-tdm-32-4.5.2-20111229-1559-sfx.exe
. Ее нужно распаковать в любое (постоянное) место - папку, но при этом не туда же, где уже стоит у вас Ruby. Затем в терминале зайти в эту папку и запустить последовательно три команды (не обращая внимание, что они там пишут в ответ):

ruby dk.rb init
ruby dk.rb review
ruby dk.rb install

Установка пакета DevKit

А затем в этом же терминале снова запустить установку загадочного (для меня) модуля

1
wdm
:

gem install wdm

После этого процесс пройдет успешно и Compass, наконец-то, “заткнется” и станет делать то, что от него требуют - мониторинг содержимого папки:

Успешная установка пакета wdm

Теперь открывает уже созданный Compass файл

1
screen.scss
и дописываем в его начало строчку:

@import "breakpoint";

… говоря те самым, что в наш проект необходимо включить модуль

1
breakpoint
. Если проект создавался не с нуля, а уже был готовым, то поддержку Breakpoint в него можно добавить, дописав в конфигурационный файл
1
config.rb
строчку:

require 'breakpoint'

Дальнейшее знакомство с Breakpoint

Можно приступать к дальнейшему знакомству с Breakpoint.

Breakpoint - дословно с английского языка переводится как “опорная точка”. Медиа-запросы фактически и являются такими опорными точками. В правилах CSS мы указываем браузеру - при ширине

1
viewport
равной 480px сделать такой-то элемент таким-то; а при ширине
1
viewport
равной 768px сделать такой элемент другим! То есть, мы через CSS-правила определяем для браузера подобные опорные точки. Модуль Breakpoint позволяет создавать опорные точки в коде SCSS с помощью одной строки - через миксин (mixin)
1
breakpoint
.

Простейший пример применения миксина

1
breakpoint
приведен ниже:

$high-tide: 500px;

.johnny-utah {
  @include breakpoint($high-tide) {
    content: 'Whoa.';
  }
}

То есть, сначала инициализируется переменная

1
$high-tide
со значением 500px. Затем селектору класса
1
.johnny-utah
задается CSS-правило через подключение миксина
1
@include breakpoint
, аргументом которому передается значение переменной
1
$high-tide
. В теле миксина пишется, что нужно сделать браузеру - создать контент
1
Whoa.
(в данном случае).

Результатом генерации в CSS будет следующий код:

@media (min-width: 500px) {
  .johnny-utah {
    content: 'Whoa.';
  }
}

Предельно просто! ОК, немного усложним задачу и продвинемся дальше, чтобы на примере лучше понять, что из себя представляют Breakpoint:

$bkpt-login-small: 370px;
$bkpt-login-medium: 490px;
$bkpt-login-large: 865px;

body{
  background-color: hsl(0,100%,25%);
}

@include breakpoint($bkpt-login-small){
  body{
    background-color: hsl(30,100%,50%);
  }
}

@include breakpoint($bkpt-login-medium){
  body{
    background-color: hsl(60,100%,50%);
  }
}

@include breakpoint($bkpt-login-large){
  body{
    background-color: hsl(120,100%,50%);
  }
}

Здесь мы создали три переменные

1
$bkpt-login-small
,
1
$bkpt-login-medium
,
1
$bkpt-login-large
с помощью которых установили три опорные точки для адаптивного дизайна. А затем в SCSS-правилах через подключение миксина
1
@include breakpoint
для каждой опорной точки задаем правило для элемента
1
body
, последовательно указывая этому миксину переменные в качестве аргументов. Результат работы этого кода приводить не буду - вы можете сами набрать его в редакторе и проверить!

Варианты аргументов миксина Breakpoint

Миксин

1
breakpoint
в качестве аргумента может принимать не только одно значение, как в примере выше.

Два числа в качестве значений

Переменной можно задать два числа в качестве значений:

$ex-presidents: 600px 800px;

В этом случае модуль Breakpoint автоматически распознает и преобразует их в пару значений min-width/max-width:

.nixon {
   @include breakpoint($ex-presidents) {
   content: 'Ex-Presidents';
   }
 }

@media (min-width: 600px) and (max-width: 800px) {
   .nixon {
     content: 'Ex-Presidents';
   }
 }

Имя и значение этого имени

Переменной можно задать имя и значение этого имени:

$surfboard-width: max-width 1000px;

Модуль Breakpoint распознает его следующим образом:

.johnson {
   @include breakpoint($surfboard-width) {
     content: 'Surfboard Width';
   }
 }

 @media (max-width: 1000px) {
   .johnson {
     content: 'Surfboard Width';
   }
 }

Расширенный вариант имени и значения

И можно пойти еще дальше:

$surfboard-height: (min-height 1000px) (orientation portrait);

Breakpoint воспримет это таким образом:

.carter {
   @include breakpoint($surfboard-height) {
     content: 'Surfboard Height, Portrait';
   }
 }

@media (min-height: 1000px) and (orientation: portrait) {
   .carter {
     content: 'Surfboard Height, Portrait';
   }
 }

Настройки модуля Breakpoint

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

  • 1
    
    $breakpoint-default-media
    - тип медиа-запроса. По умолчанию его значение равно
    1
    
    all
    , то есть медиа-запрос применим ко всем типам устройств: мониторы, телефизоры и так далее.
  • 1
    
    $breakpoint-default-feature
    - по умолчанию установлено в значение
    1
    
    min-width
    как наиболее часто используемое на практике. То есть, это запрашиваемая характеристика типа устройства.
  • 1
    
    $breakpoint-default-pair
    - установлено в значение
    1
    
    min-width/max-width
    по умолчанию. То есть, при передаче миксину
    1
    
    breakpoint
    пары чисел (к примеру - 400px и 500px) он распознает их как
    1
    
    min-width: 400px
    и
    1
    
    max-width: 500px
    .
  • 1
    
    $breakpoint-to-ems
    - по умолчанию установлено в значение
    1
    
    false
    . Если перевести этот параметр в значение
    1
    
    true
    , то при передаче миксину
    1
    
    breakpoint
    аргументов в любых единицах измерения (
    1
    
    px
    ,
    1
    
    pt
    ,
    1
    
    %
    ) они будут автоматически переконвертированы в
    1
    
    em
    ! Круто!

Чтобы не быть голословным, приведу пример настройки последнего параметра -

1
$breakpoint-to-ems
:

Параметр модуля Breakpoints - breakpoint-to-ems

Авторами модуля Breakpoint была сделана еще одна дополнительная “плюшка” - поддержка кроссбраузерности для экранов повышенного разрешения (так называемых Retina-экранов). Чтобы не писать по отдельности медиа-запрос для каждого из движков браузеров:

-webkit-device-pixel-ratio
-moz-device-pixel-ratio
-o-device-pixel-ratio

… можно писать краткий медиа-запрос:

device-pixel-ratio

… который преобразует полученное браузером значение в стандартное разрешение экрана.

Заключение

Перечисленные возможности модуля Breakpoint являются основными, но не единственными. Однако, как мне кажется, этих основных возможностей хватит для 90% случаев на практике. Если же кто желает углубить свои познания в модуле Breakpoint, это легко можно сделать на оф. сайте проекта.

При написании этой статьи активно использовались два бесценных источника (а примеры кода вообще были скопированы оттуда самым наглым образом):

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


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

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

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

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

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

Первое, что необходимо сделать, это заполучить сам браузер Chrome v.32. Если последние шесть лет вы жили на обратной стороне Луны, то тогда вы можете сделать это по ссылке google.com/chrome.

Запустите установленный Chrome, откройте в нем страницу, которую хотите протестировать и откройте Developer Tools (Menu - Tools - Developer Tools, Cmd+Opt+I на Mac или F12/Ctrl+Shift+I под Windows и Linux). Кликните мышью на значке-шестеренке Settings в правом верхнем углу окна браузера, затем откройте раздел Overrides для того, чтобы включить показ эмуляции в браузере - Show Emulation view in console drawer (в версии 33 эта возможность активирована по умолчанию):

Режим Settings в браузере Chrome

Show Emulation view in console drawer

Закрываем окно Settings и открываем “Console Drawer” (это не тоже самое, что общая “Console”) - для этого кликаем мышью на иконке (расположенной слева от иконки Settings) или нажав клавишу Esc. У вас должна открыться вкладка Emulate в “Console Drawer” (если этого не произошло, перезапустите браузер Chrome):

Режим эмуляции - раздел Device

Раздел Device предоставляет несколько дюжин готовых предустановок для большинства популярных мобильных устройств, включая iPhone, iPad, Kindles, планшеты Nexus, смартфоны Samsung Galaxy и т. д. Выбор одного из устройств приводит к изменениям настроек в остальных разделах.

Выбираем из списка нужное устройство и жмем кнопочку “Emulate” внизу этого списка:

Выбор эмулируемого устройства

Обратите внимание! Инструкция, представленная выше, описывает включение режима эмуляции в стабильной версии v.32 браузера Chrome. Если вы используете последнюю версию браузера Chrome Canary, эта опция будет располагаться в разделе “Settings” во вкладке “General” под вкладкой “Appearance”. (прим. переводчика: кто не знает, браузер Chrome Canary - это самая свежая и нестабильная версия браузера Chrome.)

Режим эмуляции в Chrome Canary

Режим эмуляции - раздел Screen

В разделе Screen можно самостоятельно установить настройки экрана эмулируемого устройства:

  • Resolution - произвольный размер экрана устройства
  • Device pixel ratio - то есть для дисплеев Retina от Apple нужно ставит 2, чтобы производилось удваивание размера объектов в области просмотра
  • font-scaling factor (прим. переводчика: неизвестный для меня параметр)

Настройка экрана в режиме эмуляции

Режим эмуляции - раздел User Agent

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

Эмуляция агента пользователя

Режим эмуляции - раздел Sensors

В этом разделе настраивается режим эмуляции сенсорного экрана:

Эмуляция сенсорного экрана устройства

В режиме эмуляции сенсорного экрана курсор мыши приобретает вид отпечатка пальца на экране устройства:

Эмуляция отпечатка пальца на экране устройства

Эмуляция multi-touch может быть выполнена при помощи зажатой клавиши Shift и движения мыши в нужную сторону. Этот режим задействует соответствующие JavaScript-события, такие как

1
touchstart
,
1
touchend
,
1
touchmove
. Также делается попытка полностью соответствовать мобильным браузерам благодаря реализации JavaScript-события
1
mouseover
, но это событие возникает только тогда, когда будет произведено “нажатие” на элемент интерфейса. Эмулятор корректно игнорирует событие
1
mouseover
, возникающее, когда курсор сенсорного устройства просто движется поверх элемента интерфейса.

Возвращение браузера в обычный режим

Для того, чтобы завершить режим эмуляции и возвратиться в обычный режим просмотра, нужно перейти обратно в раздел Device и нажать кнопку Reset.

Мне больше не нужны устройства

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

Стоит также обратить внимание, что эмулятор несовершенен в следующих вопросах:

  • вы можете столкнуть с некоторыми необъяснимыми ошибками в работе эмулятора
  • CSS-событие
    1
    
    :hover
    все еще в действии и
  • для него нет механизма эмуляции; страница будет сгенерирована браузером Chrome вне зависимости от того, все ли устройства поддерживают возможности, заложенные в ней

Будем надеяться, что команда Google обратит внимание на эти недостатки и исправит их в последующих релизах.

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

Автор статьи: Craig Buckler, How to Use Mobile Emulation Mode in Chrome

От переводчика

Хочется от себя немного добавить в эту тему. В книге Б. Фрейна “HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств” автор приводит краткий список плагинов для тестирования страниц в различных браузерах. Эти плагины не такие “продвинутые”, как режим эмуляции в браузере Chrome. Их задача сводиться только к одному - проверке работоспособности страниц на экранах различных устройств, с разными размерами области просмотра. Цель такой проверки - создание полностью рабочего адаптивного дизайна сайта.

Для браузера Safari автор рекомендует расширение Resize или ResizeMe. Под браузер Mozilla Firefox имеется плагин Firesizer. А под браузер Google Chrome автором рекомендуется использовать расширение Windows Resizer.

Например, после установки и активизации расширения Windows Resizer под Chrome при щелчке мыши на иконке появиться окно с предустановленными размерами экранов устройств:

Расширение Windows Resizer под Chrome

В дальнейших объяснениях работа с плагином не нуждается, как мне кажется.

На этом все.