CSS 2.1: Визуальные эффекты

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

Всякий раз, когда имеет место переполнение, свойство 'overflow' определяет то, обрезается ли блок по краю его отступа, и если это происходит, то обеспечивается ли механизм прокрутки для доступа к любому усеченному содержимому.

11.1.1 Переполнение: свойство 'overflow'

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

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

Агенты пользователя должны применять свойство 'overflow', установленное для корневых элементов, на область просмотра. HTML агенты пользователя должны вместо этого применять свойства 'overflow' элемента BODY к области просмотра, если значение в HTML-элементе имеет значение 'visible'. Значение 'visible' при использовании для области просмотра должно интерпретироваться как 'auto'. Элемент, свойство которого распространено на область просмотра, должен иметь используемое значение свойства 'overflow' равным 'visible'.

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

Рассмотрим следующий пример вывода блока (<blockquote>) , размер которого превышает размер его контейнера (назначенного элементом <div>). Исходный документ имеет вид:


<div>
<blockquote>
<p>I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.</p>
<cite>- Groucho Marx</cite>
</blockquote>
</div>

Далее приведена таблица стилей, управляющая размерами и стилем генерируемых блоков:


div { width : 100px; height: 100px;
      border: thin solid red;
      }

blockquote   { width : 125px; height : 100px;
      margin-top: 50px; margin-left: 50px; 
      border: thin dashed black
      }

cite { display: block;
       text-align : right; 
       border: none
       }

Начальным значением свойства 'overflow' является 'visible', поэтому <blockquote> будет форматироваться без усечения, например, как показано ниже:

Отображаемое переполнение [D]

С другой стороны, если свойству 'overflow' элемента <div> присвоить значение 'hidden', то это приведет к тому, что контейнер произведет усечение <blockquote>:

Усеченное переполнение [D]

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

Наконец, рассмотрите случай, где абсолютно позиционированный элемент присутствует вместе с переполненным родителем.

Таблица стилей:


  container { position: relative; border: solid; }
  scroller { overflow: scroll; height: 5em; margin: 5em; }
  satellite { position: absolute; top: 0; }
  body { height: 10em; }

Фрагмент документа:


  <container>
   <scroller>
    <satellite/>
    <body/>
   </scroller>
  </container>

В данном примере, элемент "scroller" не будет прокручивать элемент "satellite", потому-что контейнер последнего находится за пределами элемента, у которого переполнение усечено и прокручивается.

11.1.2 Усечение: свойство 'clip'

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

Свойство 'clip' применяется только к абсолютно позиционированным элементам. Значения имеют следующий смысл:

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

Предки элемента могут так же усекать часть своего содержимого (например, через свое свойство 'clip' и/или если значение их свойство 'overflow' отлично от 'visible'); что будет представляться – зависит от совместного применения свойств.

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

Следующие два правила:


p { clip: rect(5px, 40px, 45px, 5px); }
p { clip: rect(5px, 55px, 45px, 5px); }

создают прямоугольные области усечения, ограниченные пунктирными границами, как показано на следующем рисунке:

Две области усечения [D]

11.2 Видимость: свойство 'visibility'

Свойство 'visibility' определяет, будет ли осуществляться представление блоков, порождаемых элементом, или нет. Невидимые блоки по-прежнему влияют на расположение (для запрета генерации блоков свойству 'display' необходимо присвоить значение 'none'). Значения имеют следующий смысл:

Данное свойство можно использовать в сочетании со скриптами для создания динамических эффектов.

В следующем примере нажатие одной кнопки, расположенной в форме, активизирует заданный автором скрипт, вызывая тем самым появление соответствующих блоков и исчезновение других. Т.к. эти блоки имеют одинаковый размер и местоположение, то создается эффект замены одного блока другим. (Код скрипта написан на некоем гипотетическом языке скриптов. Он может влиять или не влиять на агенты пользователей, совместимые с CSS.)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD><TITLE>Пример динамического отображения</TITLE>
<META 
 http-equiv="Content-Script-Type"
 content="application/x-hypothetical-scripting-language">
<STYLE type="text/css">
<!--
   #container1 { position: absolute; 
                 top: 2in; left: 2in; width: 2in }
   #container2 { position: absolute; 
                 top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Выберите подозреваемого:</P>
<DIV id="container1">
   <IMG alt="Аль Капоне" 
        width="100" height="100" 
        src="подозреваемый1.png">
   <P>Имя: Аль Капоне</P>
   <P>Местожительство: Чикаго</P>
</DIV>

<DIV id="container2">
   <IMG alt="Лаки Лючиано" 
        width="100" height="100" 
        src="подозреваемый2.png">
   <P>Имя: Лаки Лючиано</P>
   <P>Местожительство: Нью-Йорк</P>
</DIV>

<FORM method="post" 
      action="http://www.suspect.org/process-bums">
   <P>
   <INPUT name="Capone" type="button" 
          value="Капоне" 
          onclick='show("container1");hide("container2")'>
   <INPUT name="Luciano" type="button" 
          value="Лючиано" 
          onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
</HTML>

Значение:	visible \| hidden \| scroll \| auto \| inherit
Начальное значение:	visible
Область применения:	незамещаемые элементы уровня блока, ячейки таблицы и строковые элементы уровня блока
Наследование:	нет
Процентное задание значений:	Н/Д
Устройства:	визуальные
Вычисляемое значение:	как определено

Значение:	<форма> \| auto \| inherit
Начальное значение:	auto
Область применения:	абсолютно позиционированные элементы
Наследование:	нет
Процентное задание значений:	Н/Д
Устройства:	визуальные
Вычисляемое значение:	Для значений прямоугольника, прямоугольник состоящий из четырех вычисленных длин; иначе, как определено

Значение:	visible \| hidden \| collapse \| inherit
Начальное значение:	visible
Область применения:	все элементы
Наследование:	да
Процентное задание значений:	Н/Д
Устройства:	визуальные
Вычисляемое значение:	как определено

11 Визуальные эффекты

11.1 Переполнение и усечение

11.1.1 Переполнение: свойство 'overflow'

11.1.2 Усечение: свойство 'clip'

11.2 Видимость: свойство 'visibility'