Правило overflow CSS

Далеко не всегда элемент страницы необходимо делать видимым. Часто видимым нужно сделать только его содержимое, как правило, изображение, текст, таблицу. Правило overflow CSS устанавливает режим отображения контента.

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

Общие правила применения

В правиле overflow CSS допускаются пять значений:

• visible;
• hidden;
• scroll;
• auto;
• inherit.

Когда указано visible, то контент может выходить за пределы элемента. В случае hidden, выходящая за пределы часть будет обрезаться. Применение scroll и auto позволяет добавлять полосы прокрутки для просмотра содержимого, выходящего за пределы элемента.

Размер элемента определяют правила width и height. Когда правило overflow CSS разрешает делать скроллинг (значения scroll и auto), то его полоски помещаются внутри элемента. Не всегда это удобно и в подавляющем большинстве случаев не будет соответствовать дизайну страницы, когда разработчик заинтересован в управлении контентом и не планирует использовать классические «ползунки».

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

Когда overflow CSS – это не стандартный вариант правила, ответственность за правильный вывод контента возлагается на JavaScript код.

Пример: JavaScript + overflow без CSS

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

Идеально использовать overflow css (значения auto или scroll). При тестировании можно всегда видеть, что выведено в том или ином блоке.

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

В данном примере блоки могут не только содержать контент, который «выползает» за границы. Здесь есть необходимость перемещать его друг относительно друга. Один объект – эмуляция таблицы обменов электронных валют (на самом деле это дивы – «div»), но два экземпляра контента. В одном экземпляре одно направление обмена, в другом – другое.

Каждый блок может растягиваться (сжиматься) по высоте и ширине, располагаться над другим блоком. Реализовать эти возможности стандартным вариантом overflow CSS невозможно. При изменении размеров главного блока должны перестроиться все внутренние дивы. При этом размер шрифта должен измениться пропорционально, поскольку вариант отсечения информации в финансовых программах представляется слабо применимым.

Чистый CSS overflow, но без ползунков

Скроллинг, предлагаемый HTML/CSS, несомненно, практичен, а для этапа отладки просто необходим, но есть один существенный момент. Когда мышка находится над блоком, в котором есть скроллинг, перемещается контент этого блока, а не вся страница.

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

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

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

В общем смысле при создании блочных элементов следует уходить от идеи, что один элемент - это один «div», «span» или «td». Мыслить тегами HTML – не слишком благодарное занятие. Гораздо практичнее мыслить смысловыми элементами страницы, а сколько они потребуют для реализации тегов HTML – вопрос другой.

Движение, определяемое содержанием

Если взять за основу идею «есть блок, размеры которого определяет его содержание», то для правила overflow CSS это совсем иной вариант. Пропадает необходимость рассчитывать на стандартный скроллинг или писать собственный JavaScript код.

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

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

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