Proprietà CSS clip
La proprietà CSS clip si applica solo agli elementi posizionati in modo assoluto, con position: absolute o position: fixed. Prova gli esempi.
La proprietà CSS clip definisce un rettangolo che ritaglia un elemento posizionato, nascondendo tutto ciò che si trova al di fuori di quel rettangolo. Qualsiasi elemento oltre la regione visibile non viene renderizzato e non risponde ai clic. È il classico strumento CSS per "mostrare solo questa parte del box" e, sebbene sia stato deprecato a favore di clip-path, lo si incontra ancora nel codice legacy e nel classico pattern di accessibilità "visually hidden".
Questa pagina spiega cosa fa clip, come funzionano le coordinate di rect(), dove si applica e come migrare alla sostituzione moderna.
Come funziona clip
La regione di ritaglio è un rettangolo scritto come rect(top, right, bottom, left). Ogni valore è un offset in lunghezza misurato dall'angolo in alto a sinistra del border box dell'elemento, quindi risponde alla domanda "quanto dista dal bordo il lato della finestra visibile?":
top— distanza dal bordo superiore alla parte alta della regione visibile.right— distanza dal bordo sinistro alla parte destra della regione visibile.bottom— distanza dal bordo superiore alla parte inferiore della regione visibile.left— distanza dal bordo sinistro alla parte sinistra della regione visibile.
Quindi rect(10px, 80px, 60px, 20px) mantiene visibile la porzione dell'elemento tra x = 20px…80px e y = 10px…60px, nascondendo il resto. Ciascuno dei quattro lati può essere anche auto, il che significa "usa il bordo dell'elemento" (nessun ritaglio su quel lato).
clip ha effetto solo sugli elementi posizionati in modo assoluto — ovvero elementi con position: absolute o position: fixed. Su un elemento con posizionamento statico o relativo viene ignorato. Viene ignorato anche quando la proprietà overflow è impostata su visible (il valore predefinito), quindi un elemento ritagliato di solito necessita già di position: absolute per stabilire il proprio contesto.
L'insidia delle virgole
CSS2 ha definito rect() con le virgole — rect(0px, 70px, 200px, 0px) — ma alcuni browser legacy accettavano anche la forma separata da spazi, rect(0px 70px 200px 0px). La forma con virgole è quella sicura. Includere sempre le unità; rect(0, 70, 200, 0) senza px non è valido.
La proprietà clip è deprecata e rimossa dalla moderna specifica CSS. Per i nuovi progetti usa clip-path, che non è limitato ai rettangoli, funziona su qualsiasi elemento posizionato o statico e può essere animato. La sostituzione diretta di clip: rect(t, r, b, l) è clip-path: inset(t calc(100% - r) calc(100% - b) l), o più semplicemente clip-path: rect(t r b l) nei browser che supportano la forma rect().
| Valore iniziale | auto |
|---|---|
| Si applica a | Elementi posizionati in modo assoluto. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS2 |
| Sintassi DOM | object.style.clip = "rect(10px,40px,40px,10px)"; |
Sintassi
Sintassi della proprietà CSS clip
clip: auto | shape | initial | inherit;Esempio della proprietà clip:
Esempio della proprietà CSS clip con valore 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>Risultato
Con clip: auto non viene ritagliato nulla — l'immagine viene mostrata per intero. Nell'esempio successivo, il rettangolo rect() ritaglia l'immagine alla regione definita dalle sue coordinate.
Esempio della proprietà clip con il valore "rect":
Esempio della proprietà CSS clip con valore 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>Il pattern "visually hidden"
Il motivo più comune per cui clip sopravvive nel codice reale è il pattern visually hidden (a11y). Nasconde il contenuto agli utenti vedenti mantenendolo disponibile per i lettori di schermo — a differenza di display: none o visibility: hidden, che rimuovono il testo anche dall'albero di accessibilità.
.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;
}Applicalo a un <span> che etichetta un pulsante con sola icona, ad esempio: l'etichetta viene letta dai lettori di schermo ma non viene visualizzata. I fogli di stile moderni abbinano questo con clip-path: inset(50%) in modo che il pattern continui a funzionare mentre clip viene eliminato.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
| auto | Non ritaglia un elemento. Questo è il valore predefinito. | Prova » |
| shape | Ritaglia un elemento. L'unico valore valido è rect(top, right, bottom, left). | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento padre. |