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

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

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

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

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

Для начала посмотрим, как работает простое и привычное нам значение 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 появилось одно из двух значений свойства background-repeat, которое делает попытку исправить ситуацию и выполнять “заливку” фона более красиво и “интеллектуально”. Это значение называется 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

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

Принцип работы этого свойства аналогичен значению 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

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

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

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

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

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

В библиотеку Modernizr включена (благодаря ходатайству Louis Lazaris) поддержка значений round и space CSS-свойства background-repeat с помощью соответствующих классов bgrepeatspace и 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 */
}

Заключение

Вот, в принципе, и все по значениям round и space свойства 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

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

gem install breakpoint

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

gem install sass
gem install compass

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

gem list

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

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

gem install breakpoint

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

compass create newProject -r breakpoint

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

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

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

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

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

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

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

gem install wdm

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

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

Теперь открывает уже созданный Compass файл screen.scss и дописываем в его начало строчку:

@import "breakpoint";

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

require 'breakpoint'

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

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

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

Простейший пример применения миксина breakpoint приведен ниже:

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

То есть, сначала инициализируется переменная $high-tide со значением 500px. Затем селектору класса .johnny-utah задается CSS-правило через подключение миксина @include breakpoint, аргументом которому передается значение переменной $high-tide. В теле миксина пишется, что нужно сделать браузеру - создать контент 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%);
 }
}

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

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

Миксин 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 имеет совсем немного настроек, которые выражаются в четырех переменных, которые можно легко переопределить в рамках разрабатываемого проекта:

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

Чтобы не быть голословным, приведу пример настройки последнего параметра - $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 с помощью таких же обычных мыши и клавиатуры, то вам будет трудно оценить работоспособность вашего кода в реальных условиях (на всех вышеперечисленных устройствах). Такая возможность, как событие мыши 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-события, такие как touchstart, touchend, touchmove. Также делается попытка полностью соответствовать мобильным браузерам благодаря реализации JavaScript-события mouseover, но это событие возникает только тогда, когда будет произведено “нажатие” на элемент интерфейса. Эмулятор корректно игнорирует событие mouseover, возникающее, когда курсор сенсорного устройства просто движется поверх элемента интерфейса.

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

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

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

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

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

  • вы можете столкнуть с некоторыми необъяснимыми ошибками в работе эмулятора
  • CSS-событие :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

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

На этом все.


Перед созданием HTML-разметки часто бывает необходимым и полезным сделать визуальный набросок будущего макета сайта (wireframes).

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

Рисовал их где придется и как придется - в простом Paint или на листе бумаги карандашом или ручкой. Тут главное не до красоты - чтобы схема была доступной и понятной, это основное. Если схема не нарисована, то я элементарно не мог приставить себе “в голове”, как должна выглядеть блочная структура будущего сайта. А если я не мог представить, как должен выглядеть каркас здания, то о каком дальнейшем строительстве могла идти речь?

Wireframe в Notepad

Но вот когда блок-схема нарисована, то уже становится ясным, что делать дальше с точки зрения HTML-программирования. Я уже видел, что здесь нужно создать блок-обертку div.wrap, вверху поместить блок-шапку div.header, по центру должен располагаться большой блок div.main с основным контентом и внутренними блоками div.sidebar + div.content. Ну, а внизу должен находиться блок-подвал div.footer.

Другими словами, я просто повторял свои действия, выполненные на бумаге; но уже на компьютере и с помощью программного кода, в HTML-редакторе. Конечно, когда опыта у меня появилось немного побольше, я смог чисто “на глаз” определять основную структуру будущей HTML-разметки. Открывал готовый PSD-макет в Photoshop, “пробегал” его глазами и сразу “вычленял” составные части; которые должны были становиться основными блоками будущей HTML-страницы.

Но один я знаю, сколько времени у меня ушло на то, чтобы так “с лету” видеть структуру сайта. Я не хочу сказать, что это трудное дело. Совсем нет! Но в каждом деле нужен опыт и сноровка; а если ее нет, то дело движется тяжело и медленно (сразу вспомнилась любимая книжка детства - Робинзон Крузо).

К тому же, речь идет только о дизайне сайтов с простой структурой. Если же это сложный и большой сайт, то тут и опыт не поможет, так как одновременно держать “в голове” структуру и “ваять” код будет затруднительно. Тут без предварительной блок-схемы, разработанной на чем угодно и где угодно, не обойтись. Например, оцените вот такой пример готового наброска, сделанный на сайте Mockup Builder:

Mockup Builder

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

Первый подход - аскетичный

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

Второй подход - wireframes

Другие верстальщики используют специальные программы для создания эскизов HTML-разметки. Такие программы относятся к классу wireframes. Они бывают разных типов: online-сервисы (платные или бесплатные) или desktop-приложения (платные или бесплатные). Мое личное предпочтение к использованию именно таких программ, ибо мне кажется смешным рисовать карандашом на бумаге, сидя перед компьютером.

Вообще-то, существуют три класса программ для создания эскиза будущего сайта: wireframes, mockup, prototype. Wireframes - для создания простого эскиза дизайна, ничего больше. Mockup - это тот же wireframes, но в нем добавлены визуальные отрисовки для всех элементов управления (кнопки, картинки и т. д.). Prototype - это самый продвинутый тип; это mockup с возможностью программирования элементов интерфейса (кнопок) прямо в программе.

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

Третий подход - Photoshop или Illustrator

Промежуточным звеном между первыми и вторыми верстальщиками являются кодеры, которые умеют и любят использовать для создания визуального HTML-макета программы редактирования графики, такие как Adobe Photoshop, Adobe Illustrator или Adobe Firework. И они в чем-то правы - в этих программах есть все необходимое для создания эскиза сайта и ничего лишнего.

Wireframes - выбор инструмента

Что выбрать для работы - целиком зависит от предпочтений. Если в поисковой строке Google (Yandex) набрать wireframes, то результат превзойдет все ожидания - выбор просто огромен! На любой вкус и цвет - мощные программы для прототипирования (например, старейшая и известнейшая Axure), популярный Balsamiq, готовый PNG-набор под Photoshop под названием Stencil Kit от команды Yahoo. Этот список можно продолжать и продолжать.

Axure PR - пример создания макета

Официальный пример от Balsamiq

Лично для меня интерес представляют программы класса wireframes, бесплатные online-версии с минималистичным интерфейсом и возможностями. Чтобы открыл ее, за пару минут разобрался, как работать и создавать. И только wireframes, ничего больше.

Наверное, в этом плане можно упомянуть online-сервисы Cacoo или MockFlow. Очень нравиться Balsamiq, но он платный (хотя есть бесплатная online-demo версия - Balsamiq Demo).

Cacoo

Источники вдохновения

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

На этом все.


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

Вычисление всегда выполняется по формуле: Width = Margin + Border + Padding + Content. То есть, если ширина контента задана в 200px, padding равен 25px, border равен 10px, а margin равен 15px; то результирующая ширина блока будет равна 300px.

Такой способ вычисления ширины блока делают все современные браузеры:

200px + 25px*2 + 10px*2 + 15px*2 = 300px

Модель расчета ширины блока в браузере по умолчанию

Однако, были времена, когда не все браузеры вычисляли размеры блока элемента подобным образом. Существовал Internet Explorer версии 5/6, который ширину блока считал несколько иначе: из заданной ширины блока вычитались padding и border, получалась результирующая ширина области content. В те времена веб-разработчики “показывали пальцем” на этот браузер и говорили, что это ошибка и недочет разработчиков IE5/6.

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

Чтобы такого не произошло, как раз и становиться удобным “возврат” к той модели расчета ширины блока, какая присутствовала в IE5/6. Для этого было разработано свойство box-sizing, с помощью которого можно управлять подобной моделью расчета.

Свойство box-sizing принимает три значения (три модели вычисления ширины блока): **content-box   padding-box   border-box**.

Свойство box-sizing: content-box

Первая модель content-box является способом вычисления ширины блока по умолчанию, принятым в современных браузерах:

box-sizing: content-box

Ширина блока равна сумме: Width = Width (Content) + Padding + Border + Margin

Свойство box-sizing со значением content-box

Свойство box-sizing: padding-box

Вторая модель padding-box заключается в том, что ширина блока включает в себя ширину контента (content) и ширину padding. Остальные - border-box и margin-box - приплюсовываются к заданной ширине, как обычно. Данная модель, хоть и заявлена в спецификации CSS3, не поддерживается на сегодняшний день почти никакими браузерами; так что о ней можно забыть (пока забыть):

box-sizing: padding-box

Ширина блока равна сумме: Width = Width (Content + Padding) + Border + Margin

Свойство box-sizing со значением padding-box

Свойство box-sizing: border-box

Третья модель border-box очень похожа на предыдущую модель padding-box. Но, в данном случае, ширина блока включает в себя еще и border-box; то есть ширина блока включает в себя область content-box, padding-box и border-box. Область margin-box прибавляется к ширине блока элемента, как обычно.

box-sizing: border-box

Ширина блока равна сумме: Width = Width (Content + Padding + Border) + Margin

Свойство box-sizing со значением border-box

Практический пример свойства box-sizing

Теперь не мешало бы продемонстрировать на практике, каким образом браузеры выполняют вычисления ширины блоков элементов под управлением свойства box-sizing. Допустим, у нас имеется блок-обертка div class="wrap", внутри которого расположены два плавающих блока-потомка div class="left" и div class="right".

HTML-разметка представлена ниже:

 class="wrap">
  class="left">
class="right">

… и CSS-таблица, обычная для такого случая. Единственное “новое” правило в этом коде - это свойство box-sizing, указанное с вендорными префиксами. Обычно его можно не указывать, так как у браузеров по умолчанию свойство box-sizing установлено в значении content-box (как уже упоминалось ранее). Но в нашем случае понадобится явно указать это свойство. Для блоков-потомков здесь намерено мы не указываем (пока не указываем) padding, border и margin:

*{
 margin: 0;
 padding: 0;
}
html{
 background-color: #a7c5a8;
}
body {
 width: 80%;
 margin: 0 auto;
}
.wrap{
 width: 800px;
 height: 400px;
 margin: 50px auto;
 background-color: #778899;
 border: 3px solid #ff0000;
}
.left, .right{
 float: left;
 width: 400px;
 height: 400px;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
}
.left{
 background-color: #000;
}
.right{
 background-color: #fff;
}

Свойство box-sizing со значением content-box

Блоки-потомки четко вписываются в блок-родитель, так как у них нет border, padding и margin; ширина блоков-потомков точно равна половине ширине блока-родителя.

Теперь добавим для блоков-потомков padding: 5px:

.left, .right{
 float: left;
 width: 400px;
 height: 400px;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 padding: 5px;
}

Картина будет заранее предсказуемая - один из блоков-потомков опуститься вниз из-за добавления padding: 5px к обоим блокам:

Свойство box-sizing со значением content-box и padding: 5px

Настало время применить свойство box-sizing со значением border-box. Браузер сразу же пересчитает ширину обоих блоков и картина, как по волшебству, изменится:

.left, .right{
 float: left;
 width: 400px;
 height: 400px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 padding: 5px;
}

Свойство box-sizing со значением border-box и padding: 5px

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

.left{
 background-color: #000;
 border: 6px solid #0000ff;
}
.right{
 background-color: #fff;
 border: 6px solid #00ff00;
}

Свойство box-sizing со значением border-box и border: 6px

Но если прибавить к блокам div class="left" и div class="right" правило margin, то наша разметка снова “сломается”:

.left, .right{
 float: left;
 width: 400px;
 height: 400px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 padding: 5px;
 margin-left: 5px;
}

Это происходит потому, что в модель вычисления border-box поля margin не входят. Поле margin-left размером 5px прибавляется к ширине блока-потомка. Суммарная ширина обоих блоков-потомков превышает ширину блока-родителя и один из них выходит из его, опускаясь (снова) вниз:

Свойство box-sizing со значением border-box и margin-left: 5px

В этом примере мы не применили к свойству box-sizing значения padding-box, потому что [браузеры не понимают этого значения][1] и свойство box-sizing работать не будет в этом случае.

Заключение

Вот и все, что можно сказать о свойстве box-sizing. Понимание этого свойства понадобиться еще, когда придет время изучать адаптивный (responsive) дизайн.

Основой для данной статьи послужила замечательная “Большая книга CSS3 Д. Макфарланд (3-е издание).