Заметки с тегом «css» (страница 6)

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

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

Определение браузера

Когда я искал материал для статьи «Обнаружение браузера Opera 9», то наткнулся на интересный тест браузеров, выполненный исключительно на CSS, — http://www.brunildo.org/test/csshacks3.html.

Этот тест успешно определяет версию IE, версию Firefox ниже 3.0 (Gecko <1.9) и 3.x (Gecko 1.9). Однако определение версий Webkit и Opera в нем нет.

Другие тесты и эксперименты.

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

Улучшаем clearfix

Пожалуй самыми популярными техниками для управления форматированием всплывающих блоков без дополнительной разметки являются clearfix и overflow: hidden . В этой статье описывается улучшение первого метода и проливается свет на истинную природу второго.

Clearfix

В статье «Everything you know about clearfix is wrong » подробно рассмотрены особенности использования этого метода в различных браузерах. Самым часто встречающимся «странным» поведением этого метода является схлапывающиеся отступы у блока. Например, в Safari или Firefox этих отступов нет, а в IE они есть.

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


.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

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

Overflow

Подводным камнем этого метода является то, что утверждение «Если поместить абсолютно спозиционированный блок внутри контейнера с overflow: hidden , то часть его часть за пределами контейнера будет отсечена» не всегда верно. Это правило всегда отсекает относительно спозиционированные элементы, но не всегда абсолютно спозиционированные. Это происходит потому, что для элемента со значением стиля position: absolute контейнером будет служить ближайший предок с установленным стилем position в одно из значений absolute, relative или fixed. Это значит, что элемент с абсолютным позиционированием будет виден до тех пор пока его контейнер имеет статичное позиционирование.

Альтернативный способ

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

display: inline-block;
width: <любое явное значение>;

По материалам clearfix Reloaded + overflow:hidden Demystified

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

Исправляем дефект CSS-селектора «child»

В спецификации CSS 2.1 есть замечательное правило «child selector ». Но оно пока не получило популярности из-за того, что не работает в IE6. Первая и, к сожалению, не без дефектов реализация в этой линейке браузеров была сделана в IE7.

Однако есть трюк, который эмулирует действие этого правила.


<div id="article">
    <h1>Header</h1>
    <p>First level paragraph</p>
    <div>
        <p>Paragraph inside div element</p>
    </div>
</div>
<p>Copyright info</p>

p {
    font-size: 14px;
}
#article > p {
    font-size: 18px;
    font-weight: bold;
}

Всем параграфам документа назначается высота шрифта 14px. Параграфы, которые являются непосредственными потомками блока с идентификатором article, выделяется жирным шрифтом и высотой шрифта 18px.

Для IE используем следующие правила.


#article p {
    font-size: 18px;
    font-weight: bold;
}
#article * p {
    font-size: 14px;
    font-weight: normal;
}

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

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

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

Блоки с выноской на поля

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

Пример блоков с выноской

Чтобы сверстать этот фрагмент можно задать значение padding для основного текста колонки и сделать его равным 0 у блока с выноской. Этот способ очевиден и надежен, но далеко не универсален. Нужно будет тщательно выверять выравнивание других модулей, которые могут быть привязаны к этой же разметке.

Более гибкий способ — это использование отрицательных значений margin . В этом случае достаточно будет определить 1 класс и добавлять его тем блокам, котором это необходимо.


.block {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    zoom: 1;
}

Величина отступа с отрицательным значением задается в margin, и тут же компенсируется таким же положительным значением в padding.

Для IE 6 и 7 добавляются еще position: relative и свойство zoom: 1, которое включает блоку hasLayout . Замечу, что у родительского блока тоже обязательно должен быть включен hasLayout для корректного отображения.

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