Опыт использования CSS хака clearfix

Перевод статьи: Lessons learned concerning the clearfix css hack.
Автор: Jeff Starr.

Как и большинство разработчиков, я в своих проектах постоянно применяю хак clearfix. Этот CSS прием также известен как Easy Clearing Hack — метод, использующийся для отмены обтекания блочных элементов <div> без необходимости внесения изменений в исходный HTML код документа. Он с успехом применяется для решения множества задач, связанных с версткой веб-страниц, используя при этом абсолютно кроссбраузерный подход, и является корректным с семантической точки зрения. В течение нескольких последних лет я сталкивался с некоторыми моментами, касающимися хака clearfix, которые имеют как положительный, так и отрицательный эффект. Настоящая статья посвящается моему опыту использования этого хака. К тому же в ней представлен несколько усовершенствованный его вариант.

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

Давайте рассмотрим первоначальную форму хака clearfix, ранее используемую де факто, которая представлена в одном из первоначальных источников этого метода:

.clearfix:after {
content: "."
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html.clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Обратите внимание на значение свойства content. Мною было замечено, что использование точки "." в качестве значения для этого свойства в некоторых случаях приводит к нарушению визуальной структуры документа. Это объясняется тем, что в результате использования такого кода, после блока, к которому применяется класс .clearfix (по причине использования псевдо-элемента .clearfix:after) создается дополнительный блочный элемент (display: block), содержащий точку, который для некоторых браузеров является камнем преткновения. И это касается не только Internet Explorer, а при определенных обстоятельствах, зависящих от используемой разметки страницы, сгенерированная псевдо-точка может вызвать проблемы отображения документа и в Firefox. Для исключения таких ситуаций необходимо заменить значение свойства content: "." на знак пробела content: " ". Результат такого приема проверен и прекрасно работает во всех браузерах. Я успешно его использую при создании класса .clearfix во всех своих проектах. В результате имеем:

/* удаляем точку и заменяем ее на пробел */
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.
.
.

Для полного порядка обнуляем значение высоты шрифта.

Еще один неприятный момент, который связан с совместимостью, решается путем добавления в фрагмент кода свойства font-size с последующим обнулением его значения:

/* нулевое значение высоты шрифта исключает появление потенциальных проблем */
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
.
.
.

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

Не пользуйтесь кодом, взятым из непроверенных источников.

Кроме рассматриваемых в данной статье недоработок оригинального кода хака clearfix, которые после наших разбирательств стали очевидными, существует множество источников, как в Интернете, так и в различных печатных изданиях, где вы можете найти не совсем корректный вариант кода clearfix. В качестве примера возьмем достойную внимания книгу J. W. Lowery — «CSS Hack & Filters». Вот что в ней содержится:

.clearItem:after {
content:.
clear: both;
height: 0;
visibility: hidden;
display: block;
}

.clearItem { display: inline; }

/* Start Commented Backslash Hack \*/
* html.clearItem, * html.clearItem * {height: 1%;}
.clearItem { display: block; }
/* Close Commented Backslash Hack */

Можете ли вы самостоятельно определить проблемные места в представленном коде. Вообще-то, в этом clearItem хаке присутствуют две ошибки. Первая заключается в некорректном использовании значения inline для свойства display в среднем CSS правиле c селектором .clearItem. Этот вопрос затрагивался ранее в оригинальной статье, где в качестве значения для свойства display в этом случае рекомендуется использовать inline-block, что отменяет обтекание в IE для Macintosh:

.clearItem {display: inline-block;}

Второе упущение мистера Ловери в его cleaItem хаке – наличие селектора * html.clearItem * в следующей строке:

* html.clearItem, * html.clearItem * {height: 1%;}

Для решения поставленной задачи первого селектора здесь вполне достаточно. Второй же селектор предназначен для установки высоты форматируемого блока в 1%
для всех версий IE. Но это, как раз, и является проблемой, на первый взгляд незаметной, но в отдельных случаях катастрофической. После нескольких месяцев использования этой версии хака я выяснил это на своем горьком опыте. В результате чего примерно половина всех посетителей моего сайта (именно те, кто пользуется IE) не имели возможности оставить свой комментарий по той причине, что поля в форме обратной связи были недоступны для них, так как в IE их высота была всего лишь один пиксель 1px. К счастью, мне не понадобилось много времени на поиск виновника проблемы, коим оказался универсальный селектор *:

* html.clearItem, * html.clearItem * {height: 1%;}

После удаления которого все стало на свои места.

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

Теперь соберем все воедино.

Учитывая все, описанные выше моменты и сделав соответствующие им коррективы в первоначальном варианте хака Easy Clear Method, получим следующий полнофункциональный код clearfix:

/* слегка доработанный, универсальный clearfix хак */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html.clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

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

*Больше информации по этой теме можно найти в статье Криса Койера — Автоматическая отмена обтекания дочерних элементов.

* Примечание переводчика.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *