CSS | Что за странная гармонь content: ".";
Сегодня речь пойдет о свойстве content: "."; из обоймы правил CSS. Наверняка вам уже попадалась эта странная конструкция в некоторых файлах стилей.
Само по себе свойство content весьма полезное и, как следует из названия, внедряет на страницу сайта некое содержимое. Так зачем же внедрять туда обычную точку?
Следует упомянуть, что свойство content применяется к псевдоэлементам :before и :after.
Если сильно упростить, то эти две плюшки позволяют прямо из файла стилей разместить на странице сайта некие детали, до и после элемента соответственно. Например, добавить всем цитатам нормальные наши кавычки «ёлочки», а не английские загогулины.
В нашем случае мы имеем некую точку. Так вот, хитрость здесь в следующем. Многие из вас наверняка используют в качестве метода очистки от плавающих (float) блоков следующую конструкцию:
<div style="clear:both;"></div>
Или что-то вроде такого:
<div class="clearfloat"></div>
где классу .clearfloat в стилях задаете соответствующее свойство:
.clearfloat {clear:both;}
Все это замечательно и работает вроде как надо. Но на самом деле это не есть гут.
Во-первых, вы добавляете на страницу пустой блок, а с точки зрения валидатора это не совсем правильно. Да и лишнего кода может образоваться приличная кучка, если у вас таких очисток на странице несколько десятков (бывает и такое).
Во-вторых, данный метод иногда выделывает странные кундштюки в браузере Firefox.
Поэтому умными человеками был придуман изящный способ сделать очистку при помощи псевдоэлемента :after. Ну а какой знак меньше всего занимает места? Правильно, точка! Хотя никто не запрещает использовать букву зю.
Сенс тут вот в чем: к нужному блоку добавляем псевдоэлемент :after, который нарисует после блока точку. Точке задается очистка clear: both; и свойство display: block;, что делает ее по-сути новым блочным элементом.
И, наконец, чтобы эту точку не было видно, скрываем ее при помощи свойства visibility: hidden; и до кучи добавим высоту равную 0. Весь код будет выглядеть так:
.sidebar:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
В данном случае мы прилепили очистку к блоку sidebar, что довольно часто встречается в шаблонах WordPress. Обратите внимание: псевдоэлемент пишется непосредственно после имени блока, без каких-либо пробелов.
