Процесс развития

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

Даже признавая правомерность этого подхода, не так-то легко - осуществить его на практике. Гораздо проще и привычнее - пытаться «срезать угол», перескочить через несколько жизненно важных ступенек - лишь бы сэкономить время и усилия и в то же время достичь желаемого результата.

Что происходит, когда мы пытаемся ускорить естественный процесс развития? Представьте себе: вы - посредственный теннисист, но, чтобы произвести выгодное впечатление, бросаете вызов игроку высокого класса. Как по-вашему, что произойдет? Достаточно ли настроиться на успех, чтобы выиграть у профессионала? Ответ очевиден. Никому не дано безнаказанно игнорировать естественный ход событий и пытаться ускорить движение вперед. Это - против законов природы. Все попытки «срезать угол» приведут к краху и разочарованию.

Использование обтекаемых элементов при верстке

Избегайте ограничения ширины контейнера div с основным контентом — браузеры расширяют его, чтобы он занимал доступное пространство. Даже если вы хотите создать фиксированный дизайн, вам не нужно ограничивать ширину основного контента.

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

Запрет обтекания и элементы-контейнеры

Вы можете отменить обтекание с левого края элемента. При этом все другие элементы на этой стороне опустятся вниз и будут располагаться под текущим (clear: left;). Аналогично свойство clear: right; отменяет обтекание с правой стороны элемента. Для нижнего колонтитула и других элементов, которые должны находиться в нижней части страницы, вы должны устранить обтекание как слева, так и справа: footer { clear: both; }

Избавиться от проблем, возникающих с обтекаемыми элементами, можно несколькими способами. Перечислим наиболее популярные из них.

Добавьте в конце div-контейнера запрещающий обтекание элемент. Это решение — наиболее простое. Нужно лишь добавить элемент, например разрыв строки или горизонтальную линию, в конце контейнера div, содержащего обтекаемый элемент (то есть прямо перед закрывающим тегом </div>). Затем используйте свойство clear, чтобы установить этот дополнительный элемент под обтекаемыми элементами. Такой метод расширяет контейнер, выявляя его фон и границу. Вы можете указать разрыв строки — <br> (HTML) или <br/> (XHTML) — перед закрывающим тегом </div> и добавить к нему класс: <br class = "clear"/>. Затем создайте для него следующий стиль:

br.clear { clear: both; }

Предотвращение выпадения обтекаемого элемента с помощью свойства box-sizing

Основной причиной выпадения обтекаемых элементов является странный способ, который используется браузерами для вычисления фактической экранной ширины элемента. Например, вы устанавливаете ширину 100 пикселов, но браузер визуализирует элемент шириной 122 пиксела, потому что вы добавили также 10-пиксельный левый и правый отступы и 1-пиксельную границу по краям элемента. К счастью, есть CSS-свойство, которое позволяет избавиться от столь неприятного способа расчета.

Свойство box-sizing позволяет применить другую модель расчета фактической экранной ширины элемента. Ему можно присвоить одно из трех значений.

content-box приводит к обычной работе браузера: ширина элемента учитывает только размер контента — значение свойства width.

box-sizing: content-box;

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

box-sizing: padding-box;

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

box-sizing: border-box;

Такую схему поддерживает большинство браузеров, включая Internet Explorer 8.

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

* { box-sizing: border-box;}

Создание точек останова

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

Нередко создают три набора медиазапросов для трех различных точек останова — один для смартфонов, другой для планшетов, а третий — для компьютерных мониторов. Конкретные значения точек останова зависят от конкретного дизайна (а также от конкретного устройства), но чаще всего отправной точкой служит экран, имеющий разрешение по горизонтали меньше 480 пикселов, который получает один набор стилей, экран с разрешением по горизонтали между 481 и 768 пикселами получает второй набор стилей, а устройства с разрешением по горизонтали больше 768 пикселов получают дизайн, предназначенный для компьютеров. Но все это в конечном счете остается на ваше усмотрение.

Добавление медиазапросов в таблицу стилей

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

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

@import url(css/base.css); /* без медиазапроса, для всех */
  @import url(css/medium.css) (min-width:481px) and (max-width:768);
  @import url(css/small.css) (max-width: 480px);

Внедрение медиазапроса в таблицу стилей. Медиазапрос можно также внедрить непосредственно в таблицу стилей:

@media (max-width: 480px) {
  body {
    /* сюда помещаются свойства стиля*/
	}
  .style1 {
	 /* сюда помещаются свойства стиля */
  }
}

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

Схематично структура для такого файла должна иметь следующий вид:

/* Сброс стилей браузера */
/* стили для компьютеров и базовые стили для всех устройств */
body {
/* свойства тела страницы */
}
/* только для устройств со средним размером экрана */
@media (min-width: 481px) and (max-width:768px) {
body {
/* только для планшетов */
}
}
/* только для устройств с малым размером экрана */
@media (max-width:480px) {
body {
/* только для смартфонов */
}
}

Видео и Flash-контент

Чтобы внедрять видеоконтент с сайта YouTube, прочтите статью tinyurl.com/q2y7k94 или обратитесь к онлайн-инструменту embedresponsively.com. Укажите URL-адрес видеоролика на сайте YouTube или Vimeo, и вы сможете сгенерировать HTML-код, который необходимо добавить в качестве адаптивной версии видеоконтента на своей веб-странице.

Flex

.container div:nth-of-type(1n+2) { margin-left: 20px; } Селектор nth-of-type выделяет каждый элемент div, начиная со второго, и добавляет к нему отступ, равный 20 пикселам (этот хитрый прием гарантирует, что к первому элементу div не будет применен отступ 20 пикселов от края контейнера).

Дополнительные таблицы стилей

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

Головная боль с кэшем

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

Со временем кэш посетителей все же очистится и они получат новые CSS-файлы. Однако у вас есть один простой способ победить кэш — обновить элемент link на каждой HTML-странице. Обычно элемент link для внешней таблицы стилей выглядит следующим образом:

link rel="stylesheet" href="main.css"

Однако если добавить строку запроса после имени CSSфайла (например, main.css?v=1), то браузер будет видеть файл как main.css?v=1, а не как main.css. Если вы измените число после символов v= при обновлении внешней таблицы стилей, то браузеры воспримут этот код как появление нового файла и загрузят внешнюю таблицу стилей с веб-сервера вместо использования кэшированной версии.

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

link rel="stylesheet" href="main.css?v=1"

Затем, когда вы обновите файл main.css, можно изменить код элемента link следующим образом:

link rel="stylesheet" type="textcss" href="main. css?v=2"

Браузер определит, что таблица стилей отлична от сохраненной в кэше версии файла main.css и загрузит файл с веб-сервера.

На самом деле код ?v=1 ничего не делает и не влияет на то, как работает веб-сервер. Это лишь способ сообщить браузеру о необходимости повторной загрузки файла.

Недостатком этого метода является необходимость обновлять код элемента link для каждого HTML-файла сайта

Идентификация тела страницы

Рассмотрим, как можно отформатировать навигационную кнопку в зависимости от того, в каком разделе сайта она находится. стр.617

Селекторы

Создание групповых селекторов
h1, h2, h3, h4, h5, h6 { color: #F1CD33; }
h1, p, .copyright, #banner { color: #F1CD33; }
Универсальный селектор
* { font-weight: bold; }
Создание селекторов потомков

любой текст, окруженный тегами элемента strong, находящегося внутри элемента h1

h1 strong { color: red; }

отформатировать все ссылки (a), которые расположены в элементах списка (li)

li a { font-family: Arial; }

применить данный стиль ко всем ссылкам (a) — потомкам другого элемента, относящегося к классу с именем intro

.intro a { color: yellow; }