Властивість clip визначає область позиціонованого елемента, в якій буде показано його вміст. Все, що не міститься в цій області, буде обрізане і стає невидимим. На даний момент єдина доступна форма області— прямокутник.
clip працює тільки для позиціонованих елементів, які мають властивість position задано як absolute або fixed.
Ця властивість застаріла, замість нього використовуйте clip-path.
Коротка інформація
| Значення за замовчуванням | auto |
|---|---|
| Успадковується | Ні |
| Застосовується | До блокових елементів |
| Анімується | Так |
Синтаксис
<код>clip: rect(Y1, X2, Y2, X1) | auto
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися в зазначеному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
В якості значень використовується відстань від краю елемента до області вирізки, яка задається в одиницях CSS — пікселі (px), em та ін. Якщо край області потрібно залишити без змін, слід встановити auto, положення інших значень показано на мал. 1.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>clip</title> <style> .clip { animation: clip 4s infinite; /* Анімація */
position: absolute; /* Абсолютне позиціонування */
/* Ховаємо частину тексту */
width: 200px; /* Ширина блоку */
color: white; /* Колір тексту */
background: #7f4c3e; /* Колір тла */
padding: 10px; /* Поля навколо тексту */
}
@keyframes clip { from { clip: rect(auto, 0, auto, 0); }
to { clip: rect(auto, 220px, auto, 0); }
}
</style>
</head>
<body> <div class="clip"> Визначення, хоч би як це здавалося парадоксальним, вимиває в осадовий чорнозем. Липкість двовимірно окислює псевдоміцелій. Чорнозем зволожує ґрунт. Як випливає із закону збереження маси та енергії, бур знижує мозаїчний лізиметр.
</div>
</body>
</html> Об'єктна модель
Об'єкт.style.clip
Примітка
Internet Explorer до версії 7 включно працює з іншою формою запису, при якій значення координат розділяються між собою пробілом, а не комою.
clip: rect(40px auto auto 40px)
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Masking Level 1 | Можлива рекомендація |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 4 | 12 | 1 | 7 | 1 | 1 |
| 1 | 1 | 8 | 1 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- > — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення дейс чи властивість застосовується не до всіх елементів, які вказані в специфікації.
Число вказує версію браузера, починаючи з якої властивість підтримується.
"field field-name-field-css-cat field-type-taxonomy-term-reference field-label-hidden">