Предки элемента могут также иметь сжатые области (в тех случаях, когда их свойство 'overflow' - 'visible'); то, что отображается, находится на пересечении различных сжатых областей.
Если сжатая область выходит за пределы окна документа ПА, содержимое может быть сжато до размеров окна среды окружения.
Эти два правила:
P { clip: rect(5px, 10px, 10px, 5px); }
P { clip: rect(5px, -5px, 10px, 5px); }
создадут прямоугольную сжимаемую область, ограниченную пунктирной линией:
Примечание. В CSS2 все сжимаемые области прямоугольны. Мы предполагаем в будущем расширение, разрешающее непрямоугольное сжатие
'visibility'
Значение: visible | hidden | collapse | inherit
Начальное: inherit
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
Свойство 'visibility' специфицирует, отображаются ли боксы, генерируемые элементом. Невидимые боксы всё ещё влияют на структуру (см. свойство 'display' - 'none', чтобы полностью подавить генерацию бокса). Значения имеют следующий смысл:
visible
Генерируемый бокс виден.
hidden
Генерируемый бокс невидим (полностью прозрачен), но влияет на структуру.
collapse
См. также раздел динамические эффекты рядов и столбцов в таблицах. Если используется не с рядами или столбцами, 'collapse' имеет то же значение, что и 'hidden'.
Это свойство может использоваться вместе со скриптами для создания динамических эффектов.
В следующем примере нажатие любой кнопки в форме вызывает функцию скрипта, которая делает соответствующий бокс видимым, а другой скрывается. Поскольку эти боксы имеют одинаковые размеры и позицию, эффект заключается в том, что они сменяют друг друга. (Сценарий написан на гипотетическом языке сценариев. Он может иметь или не иметь какого-либо эффекта в ПА CSS.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<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>Choose a suspect:</P>
<DIV id="container1">
<IMG alt="Al Capone"
width="100" height="100"
src="suspect1.jpg">
<P>Name: Al Capone</P>
<P>Residence: Chicago</P>
</DIV>
<DIV id="container2">
<IMG alt="Lucky Luciano"
width="100" height="100"
src="suspect2.jpg">
<P>Name: Lucky Luciano</P>
<P>Residence: New York</P>
</DIV>
<FORM method="post"
action="http://www.suspect.org/process-bums">
<P>
<INPUT name="Capone" type="button"
value="Capone"
onclick='show("container1");hide("container2")'>
<INPUT name="Luciano" type="button"
value="Luciano"
onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
</HTML>
Лекция 12. Генерируемое содержимое, автоматическая нумерация и списки
В некоторых случаях бывает необходимо, чтобы пользовательские агенты (ПА) отображали содержимое не из дерева документа. Известный пример - нумерованный список: автор не хочет, чтобы нумерация выводилась явным образом, он или она хотят, чтобы ПА генерировал нумерацию автоматически. Также автор может пожелать, чтобы ПА вставлял слово "Figure" перед заглавием или фигурой или "Chapter 7" в начале 7 главы. В особенности для аудио и брайль-носителей, ПА должны иметь возможность вставить эти строки.
В CSS2 содержимое может генерироваться с помощью различных механизмов:
[x]. Свойство 'content' в сочетании с псевдоэлементами :before и :after.
[x]. Звуковые свойства 'cue-before' и 'cue-after' (см. главу звуковые таблицы стилей). Если свойство 'content' комбинируется со звуковыми свойствами, то они выводятся в следующем порядке: :before, 'cue-before', ('pause-before'), содержимое элемента, ('pause-after'), 'cue-after' и :after.
[x]. Элементы со значением 'list-item' для свойства 'display'.
Ниже описаны механизмы, ассоциированные со свойством 'content'.
Авторы специфицируют стиль и размещение генерируемого содержимого с помощью псевдоэлементов :before и :after. Как видно из их имён, псевдоэлементы :before и :after специфицируют размещение содержимого до и после содержимого дерева документа элемента. Свойство 'content' в соединении с этими псевдоэлементами специфицирует, что же будет вставлено.
Следующее правило вставляет строку "Note: " перед содержимым каждого элемента P, чей атрибут "class" имеет значение "note":
P.note:before { content: "Note: " }
Форматирующие объекты (напр., боксы), генерируемые элементом, включают генерируемое содержимое. Так, например, изменение вышеприведённой таблицы стилей:
P.note:before { content: "Note: " }
P.note { border: solid green }
вызовет появление сплошной зелёной рамки вокруг параграфа, включая начальную строку.
Псевдоэлементы :before и :after наследуют любые наследуемые свойства из тех элементов дерева документа, к которым они присоединены.
Следующие правила вставляют открывающий знак кавычек перед каждым элементом Q. Цвет знака кавычки - красный, но шрифт будет тот же, что и шрифт остальной части элемента Q:
Q:before {
content: open-quote;
color: red
}
В объявлениях псевдоэлементов :before или :after ненаследуемые свойства получают свои начальные значения.
Так, например, поскольку начальное значение свойства 'display' - 'inline', кавычка в предыдущем примере вставляется как инлайн-бокс (т.е. на той же самой строке, что и содержимое начального текста элемента). В следующем примере свойство 'display' явно устанавливается в 'block', так что вставленный текст становится блоком:
BODY:after {
content: "The End";
display: block;
margin-top: 2em;
text-align: center;
}
Обратите внимание, что пользователи аудио-ПА услышат слова "The End" после вывода оставшейся части содержимого BODY.
ПА обязаны игнорировать следующие свойства при наличии псевдоэлементов :before и :after: 'position', 'float', свойства списков и таблиц.
Псевдоэлементы :before и :after допускают значения свойства 'display':
[x].
Если субъект селектора является элементом уровня блока, допустимыми значениями будут 'none', 'inline', 'block' и 'marker'.
Если 'display' имеет другие значения, псевдоэлементы будут вести себя так, как если бы значение было 'block'.