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

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

.table {
    display: table;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
}

Разметка, например, может быть такой:

<div class="table">
    <ul class="table-row">
        <li class="table-cell">Ячейка 1</li>
        <li class="table-cell">Ячейка 2</li>
        <li class="table-cell">Ячейка 3</li>
    </ul>
</div>

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

.table, .table-row, .table-cell {
    display: block;
    float: left;
}
.table-cell {
    clear: right;
    zoom: 1;
}
.table {
    overflow: hidden;
    position: relative;
}

Комбинация float: left; и clear: right; заставляет следующий блок намертво прилипнуть к предыдущему, образовывая ячейки нашей таблицы. Можно использовать прибивку в другую сторону, если нужен обратный порядок элементов.

На занятиях в методологическом кружке мы как-то обсуждали то, что режимы в интерфейсах могут являться источниками ошибок пользователей и иногда приводят к увеличению количества действий вместо ожидаемого уменьшения. Например, пользователю потребуется некоторое время, чтобы разглядеть индикатор раскладки клавиатуры или он попробует что-то напечатать и будет удалять введенный текст, если была установлена неверная раскладка. С другой стороны, когда пользователь осознанно активирует какой-то функционал и получает физическую обратную связь (например, переключает регистр, удерживая клавишу Shift), то он однозначно понимает, какой режим сейчас включен. Это называется квази-режимом.

Квази-режимы являются весьма эффективными с точки зрения устранения режимов и уменьшению количества ошибочных действий.

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

<div>
    <div id="mode1" style="display: block;">Режим 1</div>
    <div id="mode2" style="display: none;">Режим 2</div>
    <div id="mode3" style="display: none;">Режим 3</div>
    <div id="mode4" style="display: none;">Режим 4</div>
</div>

Замена атрибута style на class у каждого блока особо ситуацию не меняет. Это все равно остается явное определение.

Мне нравится другой метод.

<div class="mode1">
    <div id="mode1">Режим 1</div>
    <div id="mode2">Режим 2</div>
    <div id="mode3">Режим 3</div>
    <div id="mode4">Режим 4</div>
</div>

Устанавливая класс у внешнего div в значения «mode1», «mode2», «mode3» или «mode4» активируются те или иные CSS-правила.

#mode1 {
    display: block;
}
#model2, #model3, #model4 {
    display: none;
}
.mode2 #mode1, .mode3 #mode1, .mode4 #mode1 {
    display: none;
}
.mode2 #mode2, .mode3 #mode3, .mode4 #mode4 {
    display: block;
}

Блок #mode1 будет видим по умолчанию, а остальные при соответствующем классе у внешнего блока.

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

Плюсы такого способа:

1. Вся логика переключения представлений сконцентрирована в CSS-файле
2. Удобно вести отладку. Нужно заменить только одной значение, чтобы полностью поменялся внешний вид.
3. Уменьшается количество однотипного JavaScript-кода