CSS / clip / Recorte rectangular y migración a clip-path

clip es una antigua propiedad CSS que limita la parte visible de un elemento a un rectángulo. Se aplica a elementos con position: absolute o position: fixed y está en desuso, por lo que se recomienda usar clip-path en código nuevo. Al migrar código existente, distingue las coordenadas del límite en rect() de las distancias hacia adentro en inset().

Condiciones y valores principales

El recorte oculta el dibujo fuera de una región. Se diferencia de editar el archivo de imagen original o de reducir realmente el ancho y alto del elemento. El valor inicial de clip es auto, y no se hereda. Establecer solo position: relative no hace que se aplique el recorte heredado.

El rectángulo de recorte heredado no acepta porcentajes. El valor completo clip: auto también difiere de rect(auto, auto, auto, auto). Este último recorta en los bordes interiores, por lo que los descendientes que sobresalgan pueden revelar la diferencia. MDN sintaxis de clip y condiciones de aplicación

Comparar el área original y la recortada con un ejemplo completo

Guarda el siguiente código completo como clip-example.html en UTF-8 y ábrelo en un navegador. No se necesitan imágenes externas, bibliotecas ni servidor. Mantén estos estilos de demostración en este archivo en lugar de pegarlos en una hoja de estilos compartida. Compara las tres cajas, luego cambia un valor a la vez, guarda y vuelve a cargar.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparar clip y 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 y 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>

La primera caja es la de referencia, mostrando todo el degradado de 200×120px. La segunda y la tercera deberían mostrar una región de 160×80px después de excluir 20px en cada borde. El fondo gris y el contorno pertenecen a un marco separado, por lo que el tamaño original de la caja sigue siendo visible. En una ventana estrecha, las cajas de comparación se trasladan a otra fila.

Convertir coordenadas rect en distancias inset

Las dos declaraciones producen la misma región visible porque sus números significan cosas diferentes. Estas reglas corresponden a .legacy y .modern en el ejemplo completo.

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

En el rect antiguo, top y bottom se miden desde el borde superior interno; left y right se miden desde el borde izquierdo interno. Una coordenada right de 180px no significa restar 180px del lado derecho. Los cuatro valores de inset en cambio se miden hacia adentro desde sus respectivos bordes, usando el border-box a menos que se especifique otra caja de referencia. El objetivo en este ejemplo no tiene padding ni borde, por lo que esa diferencia de caja de referencia no afecta la comparación.

Para una caja de ancho W y altura H sin relleno ni borde, rect(t, r, b, l) corresponde a inset(t, W − r, H − b, l). En CSS real, inserta las longitudes calculadas en lugar de copiar expresiones explicativas como W − r. Si hay bordes, relleno o una caja de referencia diferente, primero alinea los sistemas de coordenadas. MDN referencia de cajas y formas de clip-path

Cambiar el tamaño del elemento y comparar

Primero cambia solo .frame a un ancho de 300px y una altura de 180px en el ejemplo completo. Mantener las coordenadas rect antiguas deja una región visible de 160×80px, mientras que inset(20px) ahora deja 260×140px al excluir 20px de cada borde de la caja más grande. Compara por qué los mismos números no garantizan el mismo resultado recortado.

Para que los dos métodos coincidan nuevamente, cambia el límite derecho de .legacy a 280px y el límite inferior a 160px. Sustituye estas dos reglas en el ejemplo completo como sigue. Deja la declaración .modern sin cambios.

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

Ambos métodos ahora deberían dejar una región de 260×140px. Después de comparar, restaura .frame a 200×120px y rect a 20px, 180px, 100px, 20px. Para preservar el mismo espacio interior en una caja responsiva, inset expresa la intención de manera más directa que recalcular repetidamente los límites fijos.

Recorte, diseño y accesibilidad

El recorte con clip-path generalmente deja el espacio de diseño del elemento sin cambios. El .modern del ejemplo ocupa 200×120px y solo su área pintada se hace más pequeña. El elemento .legacy está fuera del flujo normal debido a la posición absoluta; su padre .frame reserva el espacio para la comparación. Distingue ese efecto de la posición del recorte en sí.

Para código nuevo, considera formas de clip-path como inset para un rectángulo o circle para un círculo. Cuando el objetivo es ocultar contenido desbordante o permitir el desplazamiento, considera la función separada de overflow. Un valor de clip-path distinto de none también puede crear un contexto de apilamiento, por lo que debes verificar los elementos superpuestos después de la migración. Enmascaramiento CSS sobre recorte y geometría de elementos

El recorte no es control de acceso ni protección de privacidad. El texto oculto puede permanecer en el documento, y su tratamiento por tecnologías de asistencia requiere verificación aparte. No recortes botones, entradas, información esencial o indicadores de enfoque del teclado de maneras que impidan a los usuarios operar la interfaz. Proporciona una forma de leer el contenido al hacer zoom o al utilizar la navegación táctil y con teclado.

Cuando el recorte no funciona como se espera

• Inspecciona la posición calculada y el clip del elemento seleccionado en las herramientas de desarrollo. La posición relativa o estática no cumple con las condiciones del clip heredado. En el ejemplo, cambia solo position de .legacy a relative, compara si el recorte desaparece y luego restaura absolute.
• El orden de los valores de rect es arriba, derecha, abajo, izquierda. Si la derecha es menor que la izquierda o bottom es menor que top, el rectángulo esperado no se mantendrá. Verifica si las coordenadas antiguas se conservaron después de cambiar el ancho o la altura.
• El desbordamiento de un ancestro, clip-path u otra regla de recorte puede reducir aún más la región visible. Desactiva y vuelve a activar las declaraciones individualmente en las herramientas de desarrollo para aislar la causa.
• Al reemplazar clip con clip-path, compara la posición, las cajas de referencia, los bordes, el relleno, el apilamiento y los indicadores de enfoque. El rect() antiguo usado por clip y la forma rect() más reciente en clip-path tienen una sintaxis diferente; los nombres coincidentes no hacen que sus valores sean intercambiables.