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

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

Правильный ответ — виноват менеджер проекта

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

Поставив стандартный Lorem ipsum, он не задумывается о множестве других элементов. Сознательные дизайнеры, которые продумали все возможные поведения контента и блоков, давно занесены в красную книгу. Либо они довольно опытные верстальщики, так как сознательных верстальщиков тоже мало.

С этими проблемами, как компания специализирующаяся на верстке, мы неоднократно сталкиваемся. И каков выход из положения? Об этом и поговорим.

Reset.css

Большинство верстальщиков используют reset.css, так называемый ластик, обнуляющий стандартные стили браузера. Мы не исключение, так как считаем это действительно удобным инструментом, хотя это довольно «холиварная» тема.

Большая часть проблем с его использованием и возникает. Жирные текст не становится жирным, курсив не становится курсивом и т.д. Но, все таки, удобство reset.css приоритетнее (пусть это пока будет фактом). Мы начинаем писать reset 2.0, т.е. в блоках с контентом мы заново отменяем предыдущий ластик.

Reset 2.0

Небольшой пример:

1. ARTICLE SUP {
2. vertical-align:super;
3. }
4.  
5. ARTICLE STRONG, ARTICLE B {
6. font-weight:bold;
7. }
8.  
9. ARTICLE EM, ARTICLE I, ARTICLE CITE {
10. font-style:italic;
11. }

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

Решение тривиальное — для контентных блоков мы пишем «reset 2.0», со списком всех нужных элементов.

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

1. <article role="main">
2. <h2 class="title">Заголовки</h2>
3. <h1>Заголовок H1</h1>
4. <h2>Заголовок H2</h2>
5. <h3>Заголовок H3</h3>
6. <h4>Заголовок H4</h4>
7. <h5>Заголовок H5</h5>
8. <h6>Заголовок H6</h6>
9. </article>

По ссылке полная версия.

Мы нагло исключили некоторые элементы, например acronym, который признан устаревшим. Или например dfn, который чересчур специфичен. Также мы не учитывали формы и инпуты.

Мы не первые в этом начинании. Пример шаблоны для Wordpress обязательно тестируют контент — http://wordpress.org/extend/themes/. Также похожая система существует у любого CSS фреймворка.

В качестве бонуса мы добавили ::selection и outline. Как говорится, время диктует свои правила.

С такой системой работать с контентом одно удовольствие. Вот еще один «живой» пример

Подозреваю, данный шаблон будет постоянно обновляться.

Этот шаблон будет полезен не только верстальщикам, но и дизайнерам. Ждем предложений и комментариев

P.S.

Дизайнерам

Не забывайте, что контент это не только абзац с Lorem ipsum и ссылки. Это множество элементов и связей между ними. Об этом нужно думать.

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

Правда сейчас, текущая версия работает из рук вон плохо.

Но есть и минус — этот плагин работает только под Firefox, а верстку, да и часто попиксельно — нужно проверять и в других браузерах. Решение — делать дизайн макета для каждой станицы отельным фоном? Но это долго, муторно и неудобно. А аналогов Pixel Perfect для других браузеров — мы не нашли.

По мотивам Extend Grid мы решили написать еще один плагин, аналог Pixel Perfect, но уже как плагин в виде JQuery (а почему и нет?), который будет работать в любом браузере.

Что хотим получить?

Список на самом деле не особо большой.

Скриншот первой версии ePixelPerfect.

• Кроссбраузерность
• Удобный интерфейс
• Drag-and-drop и возможность добавлять несколько картинок одновременно
• Сохранение данных (а как же без этого?)
• И для души — «гламурные» эффекты в «гламурных» браузерах. Опционально конечно :)

Как-то так. Пожелания и предложения приветствуются. Ждем комментарии. Релиз первой версии — в ближайшие две недели.

Поставленные задачи

• Кроссбразерность (c IE6)
• Никакого JS
• Простая разметка — никаких пустых и лишних элементов
• Хотелось бы без заданной высоты для футера, но увы, никак. Без JS по крайне мере

HTML

1. <div id="wrapper">
2. <div id="header"></div>
3. <div id="content"></div>
4. </div>
5. <div id="footer"></div>

Да-да, футер за пределом wrapper-а. Это уже классика.

CSS

CSS также простой, всего один хак для IE6 с min-height — height:auto !important; height:100%;

1. body, html{
2. height: 100%;
3. /* ^--- Ключевой момент */
4. font-family:Arial;
5. color:#fff;
6. }
7. body, p { margin: 0; padding: 0; }
8.  
9. #wrapper {
10. min-height: 100%;
11. height:auto !important;
12. height:100%;
13. /* ^--- Ключевой момент */
14. /* Хак для IE 6, реализующий min-height */
15. background:#333;
16. }
17.  
18. #header, #footer {
19. position: relative;
20. font-size:40px;
21. text-transform:uppercase;
22. font-weight:bold;
23. }
24.  
25. #header {
26. height: 100px;
27. margin: 0 auto;
28. background:#555;
29. }
30.  
31. #content { padding:0 0 100px; }
32.  
33. #footer {
34. margin:-100px 0 0;
35. height:100px;
36. /* ^--- Ключевой момент */
37. background:#777;
38. }

Ключевой момент в том, что для wrapper мы задаем min-height:100% (когда у body:height:100% — это важно). У футера margin-top минус значение его высоты.

Данный способ работает, при чем во всех браузерах и без всяких clearfix-ов (хотя этот пример очень простой). Недостаток выявлен лишь один — что бы задать нужные отступы между блоками, придется повозится, что бы не появлялся горизонтальный скролл. А в целом красота, простой HTML и CSS, то что нужно домохозяйке-верстальщику. Да, и минус — фиксированная высота футера, но, если у вас есть решение, пишите — интересно.

Пример

Пример, специально сделанный для рецепта и пример на боевом проекте.

В этой статье хотелось бы рассказать о наших правилах форматирования CSS, которые мы используем в своих проектах, на стадии разработки.

Внимание! Если вы читаете этот пост через RSS — вполне возможно, что примеры будут отображается некорректно, поэтому если интересно, рекомендую смотреть здесь, на сайте.

CSS менеджмент

Мы не разделяем файлы на screen.css, print.css, reset.css и т.д. Что бы снизить количество запросов — все хранится в одном CSS-файле — main.css ¹.

Да, в этом помогает @media. Исключение CSS для IE — ie.css (общие хаки для IE, в частности IE7) и ie6.css (хаки для IE6) ².

2. @media screen {
3. //...
4. }
5.  
6. @media print {
7. //...
8. }
9.  
10. @media projection {
11. //..
12. }

Порядок и сортировка

Кто как не сортирует :) Кто по алфавиту, кто по типам свойств. Вариаций может быть множество. У нас очень простое правило — сортировка по типу свойств (Форматирование, Позиционирование, Отступы, Цвет, Шрифт, Форматирование текста, Фон и т.д.) . В каждом типе — сортировка по алфавиту.

2. @media screen {
3. .class {
4. // Форматирование
5. clear:both;
6. display:block;
7. float:left;
8. overflow:hidden;
9. visibility:collapse;
10.  
11. // Позиционирование
12. position:absolute;
13. top:0; left:0;
14. width:100px; height:100px;
15.  
16. // Отступы
17. margin:0;
18. padding:0;
19.  
20. // Цвет
21. color:#000;
22.  
23. // Шрифт
24. font-family:Arial;
25. font-size:2em;
26. font-style:oblique;
27. // и прочие
28.  
29. // Форматирование текста
30. letter-spacing:-1px;
31. line-height:1em;
32. text-decoration:blink;
33. // и прочие
34.  
35. // Фон
36. background:#777;
37. }
38. }

Табуляция

Для табуляции мы выбрали древовидную структуру и табуляцию перед закрывающей скобкой. Как оказалось способ довольно популярный:

1. .header {
2. position:relative;
3. width:990px;
4. height:100px;
5. }
6. .logo {
7. postion:absolute;
8. margin:0; padding:0;
9. }
10. .logo a { color:#000; }
11. .logo a:hover { color:#fff; }

Цитирую, почему именно такой стиль табуляции :)

• Для того, чтобы создавать визуальную колонку для чтения имён селекторов
• Чтобы писать блоки правил вплотную друг к другу и сохранять читаемость имён — скролить в итоге меньше
• При построении дерева блоков правил (2-3 уровня) такое дерево имеет большую связность.

B еще одно правило. Если в блоке используется одно или два свойства — группируем в одну строчку.

Комментарии

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

В комментариях мы используем стандарт JavaDoc, пришедший от языка Java и очень распространенный среди семейства языков ECMA-Script.

Javadoc — генератор документации в HTML-формате из комментариев исходного кода на Java от Sun Microsystems. Javadoc — стандарт для документирования классов Java. Большинство cред разработки программного обеспечения автоматически генерируют HTML-документацию, используя Javadoc. Javadoc также предоставляет API для создания доклетов и тэглетов, которые позволяют программисту анализировать структуру Java-приложения.

— по мотивам Википедии

.

На его основе появились JSDoc, PHPDoc и т.п. Не удивительно что появился и CSSDoc. Правда спецификация находится в статусе черновика, но никто не мешает ее использовать уже сейчас. Последнюю версию можно скачать по ссылке.

Для более подробного ознакомления с CSSDoc — статья на Хабре.

1. /**
2. *
3. * Reset Block
4. *
5. * Reset to own defaults
6. * @section reset
7. * @see YUI Reset CSS,
8. * http://developer.yahoo.com/yui/reset/
9. */
10. margin:0; padding:0;
11.  
12. /**
13. * @bugfix IE inline-blocks support
14. * @link www.google.com/search?q=ie+inline-block
15. * @affected IE6, IE7
16. * @css-for IE7
17. * @valid no
18. */
19. *+html .inline-block {
20. display: inline;
21. zoom: 1;
22. }
23. */

К сожалению, пока нет генераторов документации на основе CSSDoc и данный формат используется по большей части для «красоты». В нашей же команде — мы используем его как некий единый стандарт, с которым удобно и привычно работать всем. Но, лишь на этапе разработки и поддержки кода.

В целом все. А как вы форматируете свой CSS?

А разные и порой нетривиальные задачи мы решаем каждый день. Более-менее интересные будем выкладывать здесь.

Задача

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

Как быть?

Решение

Интерфейс

• Размер столбца (px, %)
• Отступ столбца (px, %)
• Размер строки (px, %) — иначе в народе Row
• Отступ строки (px, %)
• Отступ у линии (px, %)

Функционал

Пример

1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
2. <script type="text/javascript" src="http://grid.wlcteam.ru/1.2/jquery.extend.grid.1.2.js"></script>
3. <script type="text/javascript">
4. $(document).ready(function(){
5. $("body").extend_grid();
6. });
7. </script>

Планы

Градиенты

Еще один прием, который позволяет значительно сэкономить время при помощи CSS — это возможность создавать градиенты в качестве фона. В IE данный эффект реализется через уже знакомое нам свойство filter с параметром Microsoft.gradient.

Синтаксис

1. #gradient {
2. background-image: -moz-linear-gradient(
3. top, #81a8cb, #4477a1); /* Firefox 3.6 */
4. background-image: -webkit-gradient(
5. linear,
6. left bottom,
7. left top,
8. color-stop(0, #4477a1),
9. color-stop(1, #81a8cb)); /* Safari и Chrome */
10. filter: progid:DXImageTransform.Microsoft.gradient(
11. GradientType=0,
12. startColorstr='#81a8cb',
13. endColorstr='#4477a1'); /* IE6 и IE7 */
14. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(
15. GradientType=0,
16. startColorstr='#81a8cb',
17. endColorstr='#4477a1')"; /* IE8 */
18. }

В IE параметр GradientType может принимать два значения — 1 (горизонтальный градиенты) и 0 (вертикальный)

Демо

Недостатки

• Из-за дополнительных селекторов -moz и -webkit ваш CSS будет считаться не валидным.
• Для IE8 необходим дополнительный селектор -ms.
• В IE поддерживается только линейный градиенты. Радиальный градиент, программно, создать невозможно.
• Для того, что бы градиент в IE был видимым — необходимо включить hasLayout (zoom:1).

Прозрачность в цветах (RGBA)

В CSS3 можно применять прозрачность не только через opacity, но и через alpha-канал. В IE данный метод не поддерживается, но обойти эту проблему можно точно также, как и в предыдущем примере — при помощи градиентов.

Синтаксис

Для браузеров поддерживающие CSS:

1. #rgba p {
2. background: rgba(98, 135, 167, .4);
3. }

В этом примере, цвет задается в формате RGB. Четвертый параметр — alpha-канал — именно в нем варьируется значение прозрачности. Для IE задаем одинаковые значения цветов в градиенте. Значением alpha (в шестнадцатеричном формате) являются первые две цифры.

1. #rgba p {
2. filter: progid:DXImageTransform.Microsoft.gradient(
3. GradientType=0,
4. startColorstr='#886287a7',
5. endColorstr='#886287a7'
6. );
7. }

Демо

Первый пример — демонстрация прозрачности цветов в браузерах с поддержкой CSS3, во втором только IE.

Недостатки

Абсолютно те же недостатки, что и с градиентами.

Множественные фоны (Multiple Backgrounds)

Заголовок говорит сам за себя, множественные фоны — довольно таки полезный и практичный метод позволяющий в виде нескольких слоев, накладывать изображения друг на друга. В данный момент только IE (до недавнего времени еще и Опера) не поддерживает этой свойство, но, опять таки имитирует некоторые его возможности через filter и параметр Microsoft.AlphaImageLoader. Но, нужно заметить — очень ограниченно.

Синтаксис

1. #multi-bg {
2. background:
3. url(images/bg-image-1.gif) center center no-repeat,
4. url(images/bg-image-2.gif) top left repeat;
5. }

1. #multi-bg {
2. background: transparent url(images/bg-image-1.gif) top left repeat;
3. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
4. src='images/bg-image-2.gif',
5. sizingMethod='crop'
6. ); /* IE6-8 */
7. -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
8. src='images/bg-image-2.gif',
9. sizingMethod='crop')"; /* IE8 only */
10. }

В IE, одновременно больше двух фонов подключить просто не получится.

Демо

Chrome, Firefox, Safari и Opera:

Данный пример работает только в IE:

Недостатки

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

Вращение элементов

В CSS3 появилось масса возможностей для работы с трансформацией и анимации элементов (в Webkit). В данном примере поговорим о вращении. Вращение элементов в IE можно имитировать при помощи progid:DXImageTransform.Microsoft.Matrix

Синтаксис

1. #rotate {
2. -webkit-transform: rotate(180deg);
3. -o-transform: rotate(180deg);
4. -moz-transform: rotate(180deg);
5. }

1. #rotate {
2. filter: progid:DXImageTransform.Microsoft.Matrix(
3. sizingMethod='auto expand',
4. M11=0.9914448613738104,
5. M12=-0.13052619222005157,
6. M21=0.13052619222005157,
7. M22=0.9914448613738104); /* IE6,IE7 */
8. -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
9. SizingMethod='auto expand',
10. M11=0.9914448613738104,
11. M12=-0.13052619222005157,
12. M21=0.13052619222005157,
13. M22=0.9914448613738104)"; /* IE8 */
14. }

Пример

Недостатки

• Из недостатков можно выделить, множество селекторов для разных браузеров.
• Вычислить точный градус в IE довольно сложно.

На этом все — в этой статье мы постарались собрать как можно больше «хаков» для IE. Как видите — 90% различных возможностей CSS3, решаются с помощью свойства filter (которое кстати, было доступно задолго до CSS3). Надеюсь данные советы помогут в «полной кроссбраузерности» ваших проектов.

Copyright

Статья является вольным переводом (с дополнениями переводчика) с сайта Smashing Magazine — CSS3 Solutions for Internet Explorer.

Публикуется с разрешения автора.

Но, к сожалению, Internet Explorer, даже в последней 8-й версии, не поддерживает многих новых свойств и возможностей CSS3.

К слову — в Internet Explorer 9 ожидается значительное потепление. Разработчики готовы простить «грехи» предыдущих версий за обещанные возможности :)

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

Тем не менее, довольно часто, возникают ситуации, когда клиент требует абсолютной кроссбраузерности, в том числе и для IE6.

В этой статье мы собрали несколько примеров, который помогут эмулировать некоторые свойства CSS3 в Internet Explorer.

Opacity / Transparency

Многих до сих пор удивляет тот факт, что Internet Explorer не поддерживает столь популярное свойство opacity. К счастью существует альтернатива в виде приоретарного свойства filter.

Синтаксис

1. #myElement {
2. opacity: .4; /* other browsers */
3. filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* работает в IE6, IE7 и IE8 */
4. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* работает только в IE8 */
5. }

Демо

Недостатки

• Свойство filter — приоретарное свойство Microsoft и поэтому не валидно.
• Как и в случае opacity дочерние элементы родителя, к которому применено это свойство, наследуют прозрачность.

Border-radius

Свойство border-radius одно из популярнейших свойств CSS3. Именно border-radius позволило добиться эффекта «скругленных уголков» без лишней головной боли, избавив от проблем с позиционированием множества элементов (в классическом решении 9 элементов) и применением лишнего JavaScript.

Опять-таки, ложку дегтя в бочку меда вносит Internet Explorer

Одно из решений этой проблемы, создано Remiz Rahnas — в виде HTC файла CSS Curved Corner, который можно скачать с Google Code.

Огромный плюс библиотеки — это простота использования.

Синтаксис

1. .box-radius {
2. border-radius: 15px;
3. behavior: url(border-radius.htc);
4. }

Пример.

И все! border-radius.htc корректно считывает значения свойства border-radius. Данный «хак» настоятельно рекомендуется выносить за пределы основного CSS и использовать только в в стилях для Internet Explorer.

Недостатки

• HTC-файл довольно-таки объемный (142 строчки кода).
• В CSS свойства behavior ну существует и поэтому при его использовании ваш CSS будет считаться некорректным.
• В IE8 наблюдаются проблемы с z-index.

Box-shadow

box-shadow — не менее полезное свойство, добавляющее тень к блочным элементам. К тому, что Internet Explorer не поддерживает это свойство (понятное дело, мы уже к этому привыкли), добавляется неприятный факт — свойство filter реализует поддержку box-shadow немного по другому.

Также, стоить отметить, что свойство box-shadow было удалено из раздела CSS3 Backgrounds and Borders Module:

This module previously defined a 'box-shadow' property. This feature has been removed from this module for further discussion, and should reappear in another CSS module (or a later version of this module) in the near future.

Синтаксис

1. .box-shadow {
2. box-shadow: 2px 2px 3px #969696; /* для Opera 10.5+ */
3. -moz-box-shadow: 2px 2px 3px #969696; /* для Firefox 3.5+ */
4. -webkit-box-shadow: 2px 2px 3px #969696; /* для Safari и Chrome */
5. filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
6. }

Демо

Недостатки

• Параметры свойства filter не совпадают с параметрами box-shadow, поэтому придется заниматься подгонкой, что называется на глаз.
• На данный момент, свойство box-shadow считается не валидным, как использование дополнительных селекторв типа -moz и -webkit

Text Shadow

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

К сожалению Internet Explorer не поддерживает text-shadow, даже в свойстве filter. C этой проблемой может помочь JavaScript — JQuery-плагин написанный Kilian Valkhof.

Синтаксис

1. .text-shadow {
2. text-shadow: #aaa 1px 1px 1px;
3. }

И пример использования плагина:

1. // include jQuery library in your page
2. // include link to plugin in your page
3. $(document).ready(function(){
4. $(".text-shadow").textShadow();
5. });

Пример.

Недостатки

• Что бы добавить тень к тексту в IE — придется потратить очень много времени.
• Использование JavaScript и сторонних библиотек в виде JQuery.
• В отличии от CSS3 плагин не поддерживает multiple-shadows (множественные тени).
• Тени в IE, внешне, всегда отличаются от других бразуеров. Идентичности добиться почти невозможно.
• Для корректной работы плагина, для элемента к которому применяется тень необходимо задать z-index.

Во второй части

• Прозрачность в цветах (RGBA).
• Градиенты.
• Множественные фоны (Multiple Backgrounds).
• Вращение элементов.

© Copyright

Статья является вольным переводом (с дополнениями переводчика) с сайта Smashing Magazine — CSS3 Solutions for Internet Explorer.

Публикуется с разрешения автора.

Продолжение статьи во второй части.

Проблема в том, что при использовании float дочерние элементы родителя, начинают выходить за пределы его потока. Или, как говорят иначе — блок «схлопывается». Особенно часто это заметно в IE.

Тут то и приходит на помощь так называемый clearfix — класс с набором CSS свойств, который служит для очистки потока, основываясь на свойстве clear:both;

Вспоминаются первые конструкции <div style="clear:both;"></div> (и даже древний <br clear="all"/>, ага)

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

1. .clearfix:after {
2. content: ".";
3. display: block;
4. clear: both;
5. visibility: hidden;
6. line-height: 0;
7. height: 0;
8. }
10. .clearfix {
11. display: inline-block;
12. }
14. html[xmlns] .clearfix {
15. display: block;
16. }
18. * html .clearfix {
19. height: 1%;
20. }

Кстати нельзя не вспомнить еще об одном методе очистки потока, к сожалению менее популярному, а именно — overflow:hidden. На эту тему есть отдельная статья — Clear или overflow:hidden — очистка всего потока или создание контекста форматирования?. Правда есть один неприятный минус

У браузеров на движке Gecko (Firefox и ему подобные) есть неприятная особенность: текст в блоках, для которых задан overflow:hidden (либо auto) не выделяется дальше границ этого блока.

И еще один простой метод. У родительского элемента с плавающими потомками — просто ставится float:нужное значение. Но у этого способа недостатков больше чем достоинств. Весь макет будет держатся «на соплях» — на тотальном и повсеместном float, что принесет больше слез, чем радости. Но в специфичных случаях — этот метод имеет право на жизнь.

К чему я веду. До недавнего времени, мы довольно часто использовали clearfix (к черту семантику!).

Ведь очень просто <div class="clearfix"></div> и дело в шляпе. Но, столкнувшись с парой проектов, где лишние и в принципе не нужные элементы были не допустимы, пришлось пересмотреть свои взгляды.

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

Комбинация внедрения clearfix в дополнительный класс <div class="header clearfix"></div> ни к чему хорошему не привела. Вышеописанный метод с float также не подошел.

И самое интересное. В конце концов мы остановились на обычном clear:both | left | right), т.е. пришли к тому откуда начали. И это работало, не без потерь конечно — с неожиданными и редкими (чрезвычайно редкими) заскоками элементов в потоке.

Рекомендуется применять в связке с .block:after {content: '.';}

В итоге — более тщательное взвешивание, а нужен ли здесь float:left? Никаких clearfix-ов и никаких лишних элементов.

Отсюда возникает философский вопрос, стоящий в заголовке статьи — а так ли нужен пресловутый clearfix?

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

Основные тезисы:

1. Один CSS файл
2. Правило @media
3. Верстка независимыми блоками
4. Спрайты и Data:URI
5. Сжатие CSS

Один CSS файл

В свое время было очень модно разделять css на несколько файлов, main.css, reset.css, typography.css, layout.css, mobile.css, print.css и т.д. Кстати этим «болеют» все CSS фреймворки. Да и мы раньше придерживались этого стиля.

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

После нескольких таких клиентов, мы внедрили несколько новый стиль логического формирования CSS. Называется «все в одном». И реализация довольно простая.

Правило @media

Вспоминаем о незаслуженно забытом правиле @media. Спецификация CSS 2.1 подразумевает, что страница может выводится на следующие типы носителей:

1. all — стили будут работать для любого типа устройства.
2. braille — для вывода на устройства, выводящие информацию азбукой Брайля ¹.
3. embossed — то же что и braille, но не для устройств, а для физических страниц.
4. handheld — для небольших устройств, чаще для мобильных.
5. print — для вывода на устройство печати.
6. projection — для презентаций.
7. screen — для вывода на экран компьютера.
8. speech — для вывода на «читалки»-синтезаторы (в CSS2 назывался «aural»).
9. tty — для любителей Lynx, т.е. для терминального вывода.
10. tv — для вывода на телевизор (низкое разрешение, проблемы с промоткой).

Правило @media работает во всей большой 4-ке (IE, Firefox, Opera, Safari).

К слову, спецификация CSS3 довольно существенно расширила правило @media.

Чаще всего используется all, screen, print. Приведем типичный пример main.css

1. @media screen {
2. /* reset */
3. /* typography */
4. /* layout */
5. }
7. @media print {
8. .class|#id, .class|#id_1, ... , .class|#id_n {
9. display: none;
10. }
11. }
13. /* Ну как же без поддержки iPhone? :) */
14. @only screen and (max-device-width: 480px) {
15. }

Каковы плюсы? Главного результата мы добились, объединение 3-х css файлов в один.

Второе, не используем @import.

О минусах использования @import интересно и подробно рассказывает Steve Souders. В двух словах — использование сразу нескольких правил @import в IE приводит к тому, что файлы загружаются не в том порядке, в котором они указаны в коде, что может привести к неожиданным и крайне неприятным результатам. В статье приведено несколько примеров и графиков.

Верстка независимыми блоками

Верстка независимыми блоками (дошедшая до концепции Абсолютно Независимых Блоков), разработанная Виталием Харисовым, успешно используется в Яндексе. Данный метод уменьшили время отрисовки страницы, особенно это заметно в IE6/7, где скорость увеличилась более чем на 100%.

В клубе Блок, Элемент, Модификатор (БЭМ) можно найти массу интересных решений и экспериментов.

Интересные факты:

Браузеры рассматривают селекторы cправа налево. Например, при нахождении элемента в дереве документа будут выбраны все селекторы с a или * на конце и будет осуществлён просмотр вверх по дереву в поисках элементов входящих в селектор до тех пор пока не будут найдены подходящие элементы, не станет понятно, что селектор не применим или не будет достигнут конец документа.

Источники, подтверждающие это:

1. Writing Efficient CSS for use in the Mozilla UI
2. Faster HTML and CSS: Layout Engine Internals for Web Developers

Также интересный подход сокращения всех уникальных длинных имен классов до буквенных сокращений вида <div class="ac">. Такая замена происходит на всех уровнях: статическая верстка, стили, шаблоны и скрипты. Делается с помощью маленькой утилиты jeanny.

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

Спрайты и Data:URI

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

1. Иконки
2. Менюшки
3. UI (кнопки, чекбоксы и прочиее)

А вот различные тянущиеся фоны и всякие мелкие элементы не подающие в вышеперечисленный список — мы встраиваем в CSS при помощи Data:URI, ага.

1. ul.checklist > li.complete {
2. margin-left: 20px;
3. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA
4. ABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeN
5. Ge4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC) top left no-repeat;
6. }

Да, все красиво, Data:URI экономит HTTP-запросы, но конечно что не без потерь с IE. IE6/7 в принципе не поддерживает Data:URI. IE8 поддерживает частично.

Альтернативный способ — mhtml. О поддержке Data:UI в IE подробно писал Bolk.

К сожалению это не единственный минус. Использование Data:URI, даст ответ на вопрос как замедлить Firefox в 10 (десять) раз? :)

Важная пометка — был обнаружен плагин Wappalyzer — который на порядок замедлял отображение data:URI в Firefox

Сейчас же наиболее оптимальным выходом является предварительное использование CSS Sprites, а потом конвертации минимального числа изображений в base64-формат, таким образом все издержки будут сведены к минимуму. Что мы собственно и делаем — придерживаемся гибридного подхода CSS-спрайты и Data:URI.

Ссылки по теме:

1. Data:URI и производительность, или как замедлить Firefox в 10 (десять) раз
2. Data:URI в IE
3. Картинки в теле страницы с помощью data:URL
4. Отечественный ресурс по автоматической генерации спрайтов и статьи по данной теме
5. Data:URI средствами браузера

Сжатие CSS

Последний штрих, сжатие CSS при помощи YUI Compressor.

Здесь ничего сложного, скрипт автоматически сжимает CSS, удаляет пробелы и комментарии. Чаще всего размер файла уменьшается на 10-30%, что в принципе будет приятной ложкой меда, ко всему вышесказанному.

Продолжение на тему клиентской оптимизации (JavaScript и картинки) будет чуть позже, отдельными постами.