Режимы и квази-режимы

,

На занятиях в методологическом кружке мы как-то обсуждали то, что режимы в интерфейсах могут являться источниками ошибок пользователей и иногда приводят к увеличению количества действий вместо ожидаемого уменьшения. Например, пользователю потребуется некоторое время, чтобы разглядеть индикатор раскладки клавиатуры или он попробует что-то напечатать и будет удалять введенный текст, если была установлена неверная раскладка. С другой стороны, когда пользователь осознанно активирует какой-то функционал и получает физическую обратную связь (например, переключает регистр, удерживая клавишу 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-кода