Отсечение содержимого

Если содержимое абсолютно позиционированного элемента переполняет его блок элемента и свойство overflow определено так, что содержимое должно отсекаться, то, задав свойство clip, можно изменить форму области отсечения. По умолчанию устанавливается значение auto, и в этом случае содержимое элемента не должно отсекаться. Другая возможность состоит в том, чтобы определить форму области отсечения относительно области содержимого элемента. Это не меняет форму области содержимого, но изменяет область, в которой может быть сгенерировано визуальное представление содержимого.

Хотя в CSS2 область отсечения может быть только прямоугольной формы, спецификация предлагает возможность включения в будущие спецификации и других форм. Это осуществляется с помощью значения формы rect(top, right, bot-tom, left). Можно задать обычную область отсечения:

clip: rect(0, auto, auto, 0);

Любопытен синтаксис rect. Формально он может быть таким: rect(top, right, bottom, left) – обратите внимание на запятые, но спецификация CSS2 содержит примеры и с запятыми, и без них и определяет обе версии как допустимые. В этой книге я буду придерживаться варианта с запятыми главным образом потому, что он более удобен для чтения, а также потому, что ему отдается предпочтение в CSS2.1.


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

rect(0, 20px, 20px, 0)

Для rect(...) допускаются только значения, заданные в единицах измерения длины, и auto, что аналогично совмещению края отсечения с краем содержимого. Таким образом, следующие два выражения означают одно и то же:

clip: rect(auto, auto, 10px, 1em);
clip: rect(0, 0, 10px, 1em);

Поскольку все смещения в clip отсчитываются от верхнего левого угла и процентные значения не допускаются, создать «центрированную» область отсечения практически невозможно, если неизвестны размеры самого элемента. Рассмотрим:

div#sidebar {position: absolute; top: 0; bottom: 50%; right: 50%; left: 0;
clip: rect(1em,4em,6em,1em);}

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


Это можно узнать, только задав высоту и ширину самого элемента:

div#sidebar {position: absolute; top: 0; left: 0; width: 5em; height: 7em;
clip: rect(1em,4em,6em,1em);}

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

clip: rect(-0.25in, auto, auto, -0.25in);

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

div#sidebar {position: absolute; top: 0; left: 0; width: 5em; height: 7em;
clip: rect(0,6em,9em,0);}

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


Текст не распространяется вправо, потому что ширина его контейнеров строк по-прежнему ограничена шириной позиционированного элемента. Если бы на этом месте находилось изображение более широкое, чем позиционированный элемент, или форматированный текст с длинной строкой, их можно было бы увидеть справа от позиционированного элемента, вплоть до края прямоугольника отсечения. Синтаксис rect(...), как вы могли заметить, довольно необычен в сравнении с остальным CSS. Он происходит от ранних проектов раздела позиционирования, основывавшихся на схеме смещения от верхнего левого угла. Internet Explorer реализовал ее до того, как CSS2 стал принятой рекомендацией, и таким образом вступил в конфликт с самыми последними изменениями, которые требуют от rect(...) использовать смещения сторон, как это происходит во всем остальном CSS2. Это было довольно разумно, т. к. обеспечивало позиционированию непротиворечивость.

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


Еще больше обостряет проблему то, что rect(...) принимает только значения, заданные в единицах измерения длины, и auto. Добавление процентных значений как действительных значений rect(...) сделало бы огромный вклад в улучшение сложившейся ситуации, и, будем надеяться, следующие версии CSS введут эту возможность. Длинная и извилистая история clip означает, что в современных броузерах его поведение противоречиво, и на него нельзя полагаться в любой среде, предполагаемой для работы в нескольких броузерах.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Блок-контейнер
Блоки-контейнеры и абсолютно позиционированные элементы
Видимость элементов
Задание ширины и высоты
Запрет на обтекание