CSS / clip / Recorte retangular e migração para clip-path

clip é uma propriedade CSS legada que limita a parte visível de um elemento a um retângulo. Aplica-se a elementos com position: absolute ou position: fixed e está obsoleta, então prefira clip-path em código novo. Ao migrar código existente, diferencie as coordenadas de limite em rect() das distâncias internas em inset().

Condições e valores principais

O recorte oculta o desenho fora de uma região. Ele difere da edição do arquivo de imagem original ou da redução real da largura e altura do elemento. O valor inicial de clip é auto, e ele não é herdado. Definir apenas position: relative não faz com que o recorte legado seja aplicado.

O clip rect legado não aceita porcentagens. O valor completo clip: auto também difere de rect(auto, auto, auto, auto). Este último recorta nas bordas internas, então descendentes que transbordam podem revelar a diferença. MDN sintaxe de clip e condições de aplicação

Comparar as áreas original e recortada com um exemplo completo

Salve o seguinte código completo como clip-example.html em UTF-8 e abra-o em um navegador. Nenhuma imagem, biblioteca ou servidor externo é necessário. Mantenha esses estilos de demonstração neste arquivo em vez de colá-los em uma folha de estilos compartilhada. Compare todas as três caixas, depois altere um valor por vez, salve e recarregue.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparar clip e clip-path</title>
  <style>
    body { margin: 0; padding: 16px; font: 16px/1.6 sans-serif; }
    main { max-width: 760px; margin: auto; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .frame { position: relative; width: 200px; height: 120px;
      background: #e5e7eb; outline: 1px solid #666; }
    .target { width: 100%; height: 100%; padding: 0; border: 0;
      background: linear-gradient(135deg, #006c9c, #ffd166); }
    .legacy { position: absolute; top: 0; left: 0;
      clip: rect(20px, 180px, 100px, 20px); }
    .modern { clip-path: inset(20px); }
  </style>
</head>
<body>
  <main>
    <h1>Comparar clip e clip-path</h1>
    <div class="samples">
      <section><h2>clip: auto</h2>
        <div class="frame"><div class="target"></div></div></section>
      <section><h2>clip: rect(20px, 180px, 100px, 20px)</h2>
        <div class="frame"><div class="target legacy"></div></div></section>
      <section><h2>clip-path: inset(20px)</h2>
        <div class="frame"><div class="target modern"></div></div></section>
    </div>
  </main>
</body>
</html>

A primeira caixa é a referência, mostrando todo o gradiente de 200×120px. A segunda e a terceira devem mostrar uma região de 160×80px após excluir 20px em cada borda. O fundo cinza e o contorno pertencem a uma moldura separada, então o tamanho original da caixa permanece visível. Em uma janela estreita, as caixas de comparação se ajustam para outra linha.

Converter coordenadas rect em distâncias inset

As duas declarações produzem a mesma região visível porque seus números significam coisas diferentes. Essas regras correspondem a .legacy e .modern no exemplo completo.

.legacy {
  position: absolute;
  clip: rect(20px, 180px, 100px, 20px);
}
.modern {
  clip-path: inset(20px);
}

No rect legado, top e bottom são medidos a partir da borda interna superior; left e right são medidos a partir da borda interna esquerda. Uma coordenada direita de 180px não significa remover 180px do lado direito. Os quatro valores inset, ao contrário, medem para dentro a partir de suas respectivas bordas, usando a border-box a menos que outra caixa de referência seja especificada. O alvo neste exemplo não tem padding nem borda, então essa diferença de caixa de referência não afeta a comparação.

Para uma caixa de largura W e altura H sem padding ou borda, rect(t, r, b, l) corresponde a inset(t, W − r, H − b, l). No CSS real, insira os comprimentos calculados em vez de copiar expressões explicativas como W − r. Se houver bordas, padding ou uma caixa de referência diferente, alinhe primeiro os sistemas de coordenadas. MDN caixas de referência e formas de clip-path

Alterar o tamanho do elemento e comparar

Primeiro, altere apenas .frame para uma largura de 300px e altura de 180px no exemplo completo. Manter as antigas coordenadas do retângulo deixa uma região visível de 160×80px, enquanto inset(20px) agora deixa 260×140px ao excluir 20px de cada borda da caixa maior. Compare por que os mesmos números não garantem o mesmo resultado de recorte.

Para corresponder novamente aos dois métodos, altere o limite direito de .legacy para 280px e o limite inferior para 160px. Substitua essas duas regras no exemplo completo da seguinte forma. Deixe a declaração .modern inalterada.

.frame {
  width: 300px;
  height: 180px;
}
.legacy {
  clip: rect(20px, 280px, 160px, 20px);
}

Agora, ambos os métodos devem deixar uma região de 260×140px. Após a comparação, restaure .frame para 200×120px e rect para 20px, 180px, 100px, 20px. Para preservar o mesmo espaçamento interno em uma caixa responsiva, inset expressa a intenção de forma mais direta do que recalcular repetidamente limites fixos.

Recorte, layout e acessibilidade

O recorte com clip-path geralmente mantém inalterado o espaço de layout do elemento. O .modern do exemplo ocupa 200×120px e apenas sua área pintada se torna menor. O elemento .legacy está fora do fluxo normal devido ao posicionamento absoluto; seu pai .frame reserva o espaço de comparação. Diferencie esse efeito de posicionamento do próprio recorte.

Para código novo, considere formas de clip-path como inset para um retângulo ou circle para um círculo. Quando o objetivo é esconder conteúdo que ultrapassa o limite ou oferecer rolagem, considere o papel separado do overflow. Um valor clip-path diferente de none também pode criar um contexto de empilhamento, então verifique os elementos sobrepostos após a migração. Máscara CSS em clipping e geometria de elementos

O clipping não é controle de acesso nem proteção de privacidade. O texto oculto pode permanecer no documento, e o seu tratamento por tecnologias assistivas precisa de verificação separada. Não recorte botões, campos de entrada, informações essenciais ou indicadores de foco do teclado de maneiras que impeçam os usuários de operar a interface. Forneça uma forma de ler o conteúdo ao dar zoom ou usar navegação por toque e teclado.

Quando o recorte não funciona como esperado

• Inspecione a posição calculada e o recorte do elemento selecionado nas ferramentas de desenvolvedor. Posicionamento relativo ou estático não satisfaz as condições do recorte legado. No exemplo, altere apenas position de .legacy para relative, compare se o recorte desaparece, e depois restaure absolute.
• A ordem dos valores de rect é top, right, bottom, left. Se right for menor que left ou bottom menor que top, o retângulo esperado não permanecerá. Verifique se as coordenadas antigas foram mantidas após alterar a largura ou altura.
• O overflow, clip-path ou outra regra de recorte de um ancestral pode reduzir ainda mais a área visível. Desative e reative declarações individualmente nas ferramentas de desenvolvedor para isolar a causa.
• Ao substituir clip por clip-path, compare posicionamento, caixas de referência, bordas, preenchimento, empilhamento e indicadores de foco. O rect() legado usado pelo clip e a forma rect() mais recente em clip-path têm sintaxes diferentes; nomes correspondentes não tornam seus valores intercambiáveis.