Мои любимые CSS-приемы

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

Три колонки

Чаще всего я пользуюсь простым и надежным способом: обычные плавающие блоки. Другие способы (типа Holy Grail), которые используют negative margins и другие хитрые способы позиционирования, в большинстве своем оказались довольно глючными или плохо работали с другими техниками.

Для получения трех колонок возьмем следующий код:

<div id="content-wrapper">
  <div id="content">...</div>
  <div id="right">...</div>
</div>
<div id="left">...</div>

Здесь я назначил ID left и right, но на реальных сайтах лучше использовать смысловые обозначения, наподобие sidebar и navbar.

Теперь, чтобы привести этот код в надлежащий вид, применим следующие стили:

#content-wrapper {
  float: right;
  width: 75%;
}
#left {
  float: left;
  width: 25%;
}
#content {
  width: 70%;
  float: left;
}
#right {
  float: right;
  width: 30%;
}

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

Плюс данного подхода в том, что содержимое находится «выше» боковых колонок, что положительно сказывается на SEO и доступности. Минус же в том, что боковые колонки должны иметь динамическую ширину, что не всегда подходит по дизайну — иногда требуются фиксированные колонки. Тогда уж отрицательных полей (negative margins) не избежать.

Также минусом можно считать лишний обёртывающий <div> — #content-wrapper.

Другие варианты

• Holy grail от ALA
• Различные CSS-шаблоны

Минимальная ширина

Нормальные современные браузеры понимают инструкцию min-width, но это не касается IE6. А так как еще довольно много людей им пользуется, в коммерческих проектах приходится применять различные хаки для задания минимальной ширины (чтобы сайт не схлопывался). Одним из самых популярных способов является использование проприетарных expression-ов в CSS.

Мне данный способ не нравится, так как он иногда подглючивает и требует JavaScript. Это означает, что пока документ не догрузился, минимальная ширина не работает и дизайн «будет прыгать». Поэтому я предпочитаю метод на чистом CSS — автором которого является Сту Николс.

Способ заключается в том, что для нормальных браузеров (включая IE7) указывается свойство min-width, а для IE6 заводится дополнительный обёртывающий <div>, которому назначается широкая граница (border), а внутренний блок смещают влево на ширину этой границы.

<div id="wrapper"><div id="min-width">
<div id="content-wrapper">
  <div id="content">...</div>
  <div id="right">...</div>
</div>
<div id="left">...</div>
</div></div>

CSS для IE6 лучше вынести в отдельный файл, подключив его при помощи условных комментариев:

* html #wrapper {
  border-left: 950px solid #fff;
  zoom: 1;
}
* html #min-width {
  margin-left: -950px;
  position: relative;
  zoom: 1;
}

Другие варианты

• Статья у Юрия Артюха

«Прилепленный» подвал

Часто бывает нужно прилепить подвал к низу страницы, если ее содержание не растягивается на всю высоту окна. Для этого есть довольно много способов, но я выбрал один наиболее надежный и постоянно использую его. Автором оригинального метода является Кэмерон Адамс.

  <div id="wrapper">
  ...
  </div>
  <div id="footer">
  ...
  </div>

и сопутствующий код CSS:

html,
body {
  height: 100%;
}
#wrapper {
  position: relative;
  min-height: 100%;
}
* html #nonFooter {
  height: 100%;
}
#footer {
  position: relative;
  margin: -7.5em auto 0 auto;
}

Условные комментарии

Добавьте этот код в документ:

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="ie.css" media="screen" />
<![endif]-->

и ваш CSS-файл будет подключен только для Internet Explorer. Используя эти условные комментарии, вы сможете подключать CSS и Javascript файлы для определённых версий Internet Explorer. Подробнее про conditional comments.

Очистка плавающих блоков

Когда элементам назначается свойство float, их высота не учитывается в родительском элементе и он «схлапывается». Чтобы этого не произошло, можно добавлять в разметку специальные элементы (например <br>), которым назначено свойство clear:both. А можно решать этот вопрос только при помощи CSS:

#parent-element:after{
  content: "";
  display: block;
  clear: both;
}

Для IE это правило не работает. Я обычно добавляю в ie.css следующую конструкцию, которая включает свойство hasLayout и решает проблему:

#parent-element{
  zoom: 1;
}

Всё вместе

Я собрал все перечисленные приемы в единый файл. Обычно я начинаю новые проекты примерно с такого вот шаблона:

CSS-шаблон на 3 колонки