Секретное оружие №1 в разметке — CSS свойство table

Секретное оружие №1 в разметке - CSS свойство table

От автора: сейчас модуль Flexbox является, возможно, САМЫМ новым и модным инструментом для построения разметки макетов. Почти невероятные возможности Flexbox адаптироваться под доступное пространство вызвали у многих из нас сильное удивление. Однако есть и другие решения. Во многих случаях я находил более простые решения, используя часто игнорируемые CSS свойства для отображения таблиц.

Модуль Flexbox не может решить всех проблем с разметкой макетов и, более того, при его использовании возникают проблемы с совместимостью со старыми браузерами. На данный момент просто нет стопроцентного «полифилла» (фолбэка (запасного варианта) для старых браузеров) для Flexbox — я знаю только о существовании одного полифилла для IE (версии 2009 года): Flexie.

Во многих случаях я находил более простые решения, используя часто игнорируемые CSS свойства для отображения таблиц. Данные CSS свойства имеют хорошую поддержку во всех значимых браузерах (за исключением IE6 и 7) и могут элегантно избавить вас от головной боли при решении нескольких крупных, а также некоторых небольших проблем при создании разметки макетов.

В случае если вы знакомы с данной техникой не на все 100%, скажу, что, изменяя значение свойства display у блоков DIV, можно заставить их вести себя, как таблицы или элементы таблиц.

Минутку… Что?! Таблицы для создания разметки? Разве это хорошо?

Пожалуй, что в начале 2000х годов самой «горячей» темой для обсуждения в мире веб-дизайна было использование HTML таблиц для создания разметки макетов. Это был хак, который до сих пор является плохой практикой.

Вместо этого мы используем совершенно осмысленный HTML (т.е. теги DIV, SECTION, HEADER и т.д.) и просто заимствуем в CSS некоторые полезные возможности отображения таблиц. Это как раз то, зачем были придуманы CSS стили, так что не надо думать, что это какой-то хак или «костыль». Это не так.

Использвание ‘display:table-cell’

В нижеприведенном примере вы можете изменить значение свойства display (с block на table-cell) у трех цветных блоков DIV, кликнув по верхней кнопке:

Видите, как можно легко выстроить блоки DIV по горизонтали, не применяя свойство float, а также вам станут доступны некоторые (обычные для таблиц) правила поведения (например, свойство vertical-align для вертикального выравнивания).

Если вам будет нужно немного пространства между блоками, то помните, что обычное CSS свойство margin никак не повлияет на ячейки таблицы: используйте вместо этого свойство border-spacing (его нужно применить к элементу table). В демо-примере есть несколько закомментированных строк, если вы хотите немного поиграть с данными правилами.

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

Я выбрал три простых случая, когда табличные свойства отображения могут быть действительно ценными. Давайте посмотрим на них:

По-настоящему подробное руководство по таблицам в CSS вы можете найти на сайте CSS Tricks.

Случай 1. Колонки одинаковой высоты

Я думаю, что это один из самых частых случаев, с которым мне приходилось сталкиваться: есть несколько «плавающих» блоков с неизвестным по объему контентом, а вам нужно, чтобы все блоки были одинаковой высоты. Знаю, что флексбокс может легко решить эту проблему, но и табличные правила на это способны.

Просто назначьте свойство display: table (или table-row) для контейнера и свойство display: table-cell для внутренних блоков. Позаботьтесь о том, чтобы убрать свойство float (иначе значение table-cell не сработает).

HTML

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

CSS

#wrapper {
    display: table;
}
#wrapper div {
    display:table-cell;
}

Случай 2. Простой «старомодный» вариант разметки

Есть устаревший пример разметки, но я думаю, что, возможно, вам придется столкнуться с ним, как это недавно произошло со мной.

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

Случай 3. Отзывчивая разметка макета и управление контентом

Предыдущий пример наводит нас на новую тему: возможно ли создать отзывчивый макет, используя CSS правила для отображения таблиц?

Не только возможно, но вы также можете выполнять некоторые задачи по управлению контентом. Мы уже видели, как изменение значения свойства display (с block на table-cell) у двух блоков div, способно поменять их расположение (с вертикального на горизонтальное).

Сюда можно добавить и тот момент, что элемент, для которого задано свойство display со значением table-header-group, перемещается на самый верх таблицы. По такому же принципу, благодаря значению table-footer-group, все элементы перемещаются в самый низ таблицы и т.д. Это может быть неожиданно полезным, когда требуется реорганизовать элементы в отзывчивом макете.

В нижеприведенном демо-примере элемент header меняется местами с элементом nav при изменении размеров окна, путем простого изменения значения свойства display (table-header-group).

HTML

<div id="wrapper">
    <nav></nav>
    <header></header>
    <!-- остальной код -->
</div>

CSS

#wrapper, header {
    display: block; /* на самом деле нам не очень нужно данное правило, т.к. это значение по умолчанию */
}

@media (min-width: 48em) {
    #wrapper {
        display: table;
    }
    header {
        display: table-header-group;
    }
}

Похожим образом ведут себя элементы footer и #banner2. Вот схематичный план разметки: слева – отображение по умолчанию, мобильная версия, справа – версия для десктопов:

А вот и «живой» демо-пример:

Заключение

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

Автор: Massimo Cassandro

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Верстка сайта для начинающих

Прямо сейчас научитесь верстать сайты с нуля.

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree