Propriedade CSS clip
A propriedade CSS clip aplica-se apenas a elementos posicionados de forma absoluta, com position: absolute ou position: fixed. Veja exemplos.
A propriedade CSS clip define um retângulo que recorta um elemento posicionado, ocultando tudo o que estiver fora desse retângulo. Qualquer coisa além da região visível não é renderizada e não responde a cliques. É a ferramenta original de "mostrar apenas esta parte da caixa" no CSS e, embora tenha sido descontinuada em favor de clip-path, você ainda a encontra em código mais antigo e no clássico padrão de acessibilidade "visually hidden".
Esta página explica o que clip faz, como funcionam as coordenadas de rect(), onde se aplica e como migrar para o substituto moderno.
Como o clip funciona
A região de recorte é um retângulo escrito como rect(top, right, bottom, left). Cada valor é um deslocamento de comprimento medido a partir do canto superior esquerdo do border box do elemento, respondendo à pergunta "a que distância da borda este lado da janela visível fica?":
top— distância da borda superior até o topo da região visível.right— distância da borda esquerda até a direita da região visível.bottom— distância da borda superior até a parte inferior da região visível.left— distância da borda esquerda até a esquerda da região visível.
Portanto, rect(10px, 80px, 60px, 20px) mantém a fatia do elemento entre x = 20px…80px e y = 10px…60px e oculta o restante. Cada um dos quatro lados também pode ser auto, significando "usar a própria borda do elemento" (sem recorte naquele lado).
clip só tem efeito em elementos absolutamente posicionados — ou seja, elementos com position: absolute ou position: fixed. Em um elemento posicionado de forma estática ou relativa, é ignorado. Também é ignorado quando a propriedade overflow está definida como visible (o padrão), portanto, um elemento recortado geralmente já precisa ter position: absolute para estabelecer seu próprio contexto.
O problema das vírgulas
O CSS2 definiu rect() com vírgulas — rect(0px, 70px, 200px, 0px) — mas alguns navegadores legados também aceitavam uma forma separada por espaços, rect(0px 70px 200px 0px). A forma com vírgula é a mais segura. Sempre inclua unidades; rect(0, 70, 200, 0) sem px é inválido.
A propriedade clip está descontinuada e removida da especificação moderna do CSS. Para novos projetos, use clip-path, que não se limita a retângulos, funciona em qualquer elemento posicionado ou estático e pode ser animada. O substituto direto de clip: rect(t, r, b, l) é clip-path: inset(t calc(100% - r) calc(100% - b) l), ou de forma mais simples clip-path: rect(t r b l) em navegadores que suportam a forma rect().
| Valor Inicial | auto |
|---|---|
| Aplica-se a | Elementos absolutamente posicionados. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS2 |
| Sintaxe DOM | object.style.clip = "rect(10px,40px,40px,10px)"; |
Sintaxe
Sintaxe da propriedade CSS clip
clip: auto | shape | initial | inherit;Exemplo da propriedade clip:
Exemplo da propriedade CSS clip com o valor 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>Resultado
Com clip: auto nada é recortado — a imagem completa é exibida. No próximo exemplo, o retângulo rect() recorta a imagem para a região definida por suas coordenadas.
Exemplo da propriedade clip com o valor "rect":
Exemplo da propriedade CSS clip com valor de forma
<!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>O padrão "visually hidden"
O motivo mais comum para clip sobreviver em código real é o auxiliar visually hidden (a11y). Ele oculta o conteúdo de usuários que enxergam, mas o mantém disponível para leitores de tela — ao contrário de display: none ou visibility: hidden, que também removem o texto da árvore de acessibilidade.
.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;
}Aplique-o a um <span> que rotula um botão somente com ícone, por exemplo, e o rótulo é anunciado, mas nunca renderizado. Folhas de estilo modernas combinam isso com clip-path: inset(50%) para que o auxiliar continue funcionando à medida que clip é eliminado.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| auto | Não recorta um elemento. Este é o valor padrão. | Experimente » |
| shape | Recorta um elemento. O único valor válido é rect(top, right, bottom, left). | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |