CSS-свойство CLIP

Семь раз отмерь, один раз отрежь.
© Народная мудрость.

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

Решение "в лоб": нарезать нужные фрагменты и рассовать по отдельным файлам.
Преимущества: сомнительные.
Недостаток1: общий размер фрагментов может превысить размер исходной картинки.
Недостаток2: можно перепутать файлы с почти идентичными фрагментами (отличие - на пару пикселов в ширину/длину).
Недостаток3: способствует появлению и развитию мазохизма.
Недостаток4: вообще, лень этим заниматься.
Самым весомым, разумеется, является последний недостаток ;)

Решение "с умом": использовать CSS-срезки (clipping regions).
Преимущество1: отдельных фрагментов нет, грузится только исходная картинка.
Преимущество2: возможно указание размещения фрагмента на картинке с точностью до пиксела - на глаз или по сетке ничего измерять не нужно.
Недостатки: нужно научиться работать со срезками.

Безусловно, недостатки у решения "с умом" значительные ;). Но. Научившись один раз пользоваться срезками, больше этому учиться не нужно. А резать фрагменты вручную пришлось бы снова и снова...

Кроме того, срезки можно применять не только в указанном случае. По части применений - все зависит исключительно от фантазии.

Ближе к телу! (как говорил Мопассан)
Итак, срезка - это прямоугольная ВИДИМАЯ область элемента. Области элемента, которые не входят в срезку - невидимы. По умолчанию, срезка - это вся область, занимаемая элементом.

Срезки применимы не только к изображениям. Создаются посредством установки стилевого параметра clip: clip: rect(top, right, bottom, left).
Отступы top, right, bottom и left указаны на нижеследующем рисунке:

Некоторые технические детали.
Clip в IE работает только для объектов с position = 'absolute'. Кроме того, в документации по CSS2 указано, что clip работает только для объектов, у которых overflow не равно visible. Но, похоже, IE к этому требованию относится "параллельно" и такого ограничения не ставит.

Пример.
В следующем примере срезка применена для подсветки прямоугольного участка текста. Обратите внимание, что подсвечивающий слой указан вторым. Это сделано для того, чтобы он перекрывал неподсвеченый слой (т.к. z-index мы не указали для обеих слоев, то верхним будет тот, который идет вторым).

<html>
<head>
<style>
div { 
 position: absolute;
 width: 300px;
 text-align: justify;
 text-indent: 1em;
 padding: 1em;
 font-family: Times New Roman;
 font-size: 12pt;
}
</style>
</head>
<body>
<div style="background: #00ff00;">

Her face and her voice, all at his service now, worked the miracle - the impression operating like the torch of a lamplighter who touches into flame, one by one, a long row of gas-jets. Marcher flattered himself the illumination was brilliant, yet he was really still more pleased on her showing him, with amusement, that in his haste to make everything right he had got most things rather wrong.</div>

<div style="clip: rect(15px, 200px, 150px, 60px); background: #ff0000;"> Her face and her voice, all at his service now, worked the miracle - the impression operating like the torch of a lamplighter who touches into flame, one by one, a long row of gas-jets. Marcher flattered himself the illumination was brilliant, yet he was really still more pleased on her showing him, with amusement, that in his haste to make everything right he had got most things rather wrong.</div>

</body>
</html>

Вот как выглядит это у меня в браузере:

Приложение.
Выдержка из CSS2 Specification (вольный перевод - А.Р. ;))

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

Свойство: 'clip'
Значения: <shape> | auto | inherit
По умолчанию: auto
Применимо к: block- и replaced- элементам
Наследование: нет
Значения в процентах: не допустимо
Устройство отображения: визуальное

Свойство 'clip' применимо к элементам, у которых 'overflow' установлено в значение, отличное от 'visible'.

Значения 'clip' имеют следующий смысл:
auto - срезка имеет те же размеры и положение, что и элемент
<shape> - В CSS2 единственным допустимым значением <shape> является rect (<top> <right> <bottom> <left>), где <top>, <bottom> <right> и <left> - обозначают отступы от соответствующих границ бокса элемента. <top>, <right>, <bottom>, и <left> могут иметь значения <length> либо 'auto'. Отрицательные значения <length> - допустимы. Значение 'auto' означает, что данная граница срезки будет такой же, как и у бокса этого элемента (т.е. 'auto' - то же, что и '0').

Когда координаты округляются к значениям в пикселах, необходимо следить за тем, чтобы не оставалось видимых пикселов, если <left> + <right> равно ширине элемента (или <top> + <bottom> равно его высоте). И, наоборот, что нет скрытых пикселов, когда эти величины равны нулю. (Этот абзац предназначен для разработчиков CSS-процессоров. - А.Р.)

Предки элемента также могут иметь срезки (в случае, если их свойство 'overflow' - не 'visible'). В результате будут отрисованы пересечения срезок.
Если срезка превышает границы окна документа, она может быть отсечена согласно локальным настройкам.

Благодарю всех за внимание!

Автор: Александр Рябов - http://ru-coding.com/