Свойство CSS clip
Свойство CSS clip применяется только к абсолютно позиционированным элементам с position: absolute или position: fixed. Примеры.
Свойство CSS clip определяет прямоугольник, обрезающий позиционированный элемент и скрывающий всё за пределами этого прямоугольника. Всё, что выходит за видимую область, не отображается и не реагирует на клики. Это оригинальный CSS-инструмент для отображения «только этой части блока», и хотя он был устаревшим в пользу clip-path, вы по-прежнему встречаете его в старом коде и в классическом паттерне доступности «визуально скрытый».
На этой странице рассматривается, что делает clip, как работают координаты rect(), к каким элементам оно применяется и как перейти на современную замену.
Как работает clip
Область отсечения — это прямоугольник, записываемый как rect(top, right, bottom, left). Каждое значение является смещением длины, измеренным от верхнего левого угла блока границы элемента, то есть отвечает на вопрос «на каком расстоянии от края находится эта сторона видимого окна?»:
top— расстояние от верхнего края до верхней границы видимой области.right— расстояние от левого края до правой границы видимой области.bottom— расстояние от верхнего края до нижней границы видимой области.left— расстояние от левого края до левой границы видимой области.
Таким образом, rect(10px, 80px, 60px, 20px) сохраняет фрагмент элемента между x = 20px…80px и y = 10px…60px, скрывая остальное. Каждая из четырёх сторон также может принимать значение auto, что означает «использовать собственный край элемента» (без обрезки с этой стороны).
clip действует только на абсолютно позиционированные элементы — то есть элементы с position: absolute или position: fixed. На статически или относительно позиционированных элементах оно игнорируется. Также оно игнорируется, когда свойство overflow установлено в visible (значение по умолчанию), поэтому обрезаемый элемент обычно должен уже иметь position: absolute, устанавливающий собственный контекст.
Подводный камень с запятыми
В CSS2 функция rect() определялась с запятыми — rect(0px, 70px, 200px, 0px) — но некоторые устаревшие браузеры также принимали форму с разделением пробелами: rect(0px 70px 200px 0px). Форма с запятыми является надёжной. Всегда включайте единицы измерения; rect(0, 70, 200, 0) без px — недопустимо.
Свойство clip устарело и удалено из современной спецификации CSS. Для нового кода используйте clip-path, которое не ограничено прямоугольниками, работает с любым позиционированным или статическим элементом и поддерживает анимацию. Прямой заменой для clip: rect(t, r, b, l) является clip-path: inset(t calc(100% - r) calc(100% - b) l), или проще — clip-path: rect(t r b l) в браузерах, поддерживающих форму rect().
| Начальное значение | auto |
|---|---|
| Применяется к | Абсолютно позиционированным элементам. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS2 |
| DOM Синтаксис | object.style.clip = "rect(10px,40px,40px,10px)"; |
Синтаксис
Синтаксис свойства CSS clip
clip: auto | shape | initial | inherit;Пример свойства clip:
Пример свойства CSS clip со значением auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
clip: auto;
}
</style>
</head>
<body>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com" />
</body>
</html>Результат
При clip: auto ничего не обрезается — изображение отображается полностью. В следующем примере прямоугольник rect() обрезает изображение до области, определённой его координатами.
Пример свойства clip со значением "rect":
Пример свойства CSS clip со значением shape
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
clip: rect(0px, 70px, 200px, 0px);
}
</style>
</head>
<body>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com logo" />
</body>
</html>Паттерн «визуально скрытый»
Основная причина, по которой clip сохраняется в реальном коде, — это вспомогательный класс visually hidden (a11y). Он скрывает содержимое от зрячих пользователей, сохраняя его доступным для программ чтения с экрана — в отличие от display: none или visibility: hidden, которые также удаляют текст из дерева доступности.
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}Примените его к элементу <span>, который подписывает кнопку только с иконкой, и метка будет объявлена, но никогда не нарисована. Современные таблицы стилей дополняют это значением clip-path: inset(50%), чтобы вспомогательный класс продолжал работать по мере того, как clip выводится из употребления.
Значения
| Значение | Описание | Пример |
|---|---|---|
| auto | Не обрезает элемент. Это значение по умолчанию. | Пример » |
| shape | Обрезает элемент. Единственное допустимое значение — rect(top, right, bottom, left). | Пример » |
| initial | Устанавливает свойству значение по умолчанию. | Пример » |
| inherit | Наследует свойство от родительского элемента. |