Propiedad clip de CSS
La propiedad clip de CSS solo se aplica a elementos con posición absoluta, es decir, elementos con position: absolute o position: fixed. Ver ejemplos.
La propiedad clip de CSS define un rectángulo que recorta un elemento posicionado, ocultando todo lo que queda fuera de ese rectángulo. Lo que está más allá de la región visible no se renderiza y no responde a los clics. Es la herramienta original de CSS para "mostrar solo esta parte del cuadro" y, aunque desde entonces ha quedado obsoleta en favor de clip-path, todavía se encuentra en código antiguo y en el clásico patrón de accesibilidad "visualmente oculto".
Esta página explica qué hace clip, cómo funcionan las coordenadas de rect(), dónde se aplica y cómo migrar al reemplazo moderno.
Cómo funciona clip
La región de recorte es un rectángulo escrito como rect(top, right, bottom, left). Cada valor es un desplazamiento de longitud medido desde la esquina superior izquierda del cuadro de borde del elemento, de modo que responde a la pregunta "¿a qué distancia del borde se sitúa este lado de la ventana visible?":
top— distancia desde el borde superior hasta la parte superior de la región visible.right— distancia desde el borde izquierdo hasta el lado derecho de la región visible.bottom— distancia desde el borde superior hasta la parte inferior de la región visible.left— distancia desde el borde izquierdo hasta el lado izquierdo de la región visible.
Así, rect(10px, 80px, 60px, 20px) conserva la franja del elemento entre x = 20px…80px e y = 10px…60px y oculta el resto. Cada uno de los cuatro lados también puede ser auto, lo que significa "usar el propio borde del elemento" (sin recorte en ese lado).
clip solo tiene efecto en elementos posicionados de forma absoluta, es decir, elementos con position: absolute o position: fixed. En un elemento posicionado de forma estática o relativa se ignora. También se ignora cuando la propiedad overflow está configurada como visible (el valor por defecto), por lo que un elemento recortado normalmente ya necesita position: absolute para establecer su propio contexto.
El problema con las comas
CSS2 definió rect() con comas — rect(0px, 70px, 200px, 0px) — pero algunos navegadores heredados también aceptaban una forma separada por espacios, rect(0px 70px 200px 0px). La forma con comas es la segura. Incluye siempre las unidades; rect(0, 70, 200, 0) sin px no es válido.
La propiedad clip está obsoleta y eliminada de la especificación CSS moderna. Para trabajos nuevos, usa clip-path, que no se limita a rectángulos, funciona en cualquier elemento posicionado o estático, y puede animarse. El reemplazo directo de clip: rect(t, r, b, l) es clip-path: inset(t calc(100% - r) calc(100% - b) l), o de forma más simple clip-path: rect(t r b l) en navegadores que admiten la forma rect().
| Valor inicial | auto |
|---|---|
| Se aplica a | Elementos con posición absoluta. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS2 |
| Sintaxis DOM | object.style.clip = "rect(10px,40px,40px,10px)"; |
Sintaxis
Sintaxis de la propiedad clip de CSS
clip: auto | shape | initial | inherit;Ejemplo de la propiedad clip:
Ejemplo de la propiedad clip de CSS con el 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
Con clip: auto no se recorta nada: se muestra la imagen completa. En el siguiente ejemplo, el rectángulo rect() recorta la imagen hasta la región definida por sus coordenadas.
Ejemplo de la propiedad clip con el valor "rect":
Ejemplo de la propiedad clip de CSS con el valor 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>El patrón "visualmente oculto"
La razón más común por la que clip sigue apareciendo en código real es el helper de visually hidden (a11y). Oculta el contenido a los usuarios con visión mientras lo mantiene disponible para los lectores de pantalla, a diferencia de display: none o visibility: hidden, que también eliminan el texto del árbol de accesibilidad.
.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;
}Aplícalo a un <span> que etiquete un botón con solo icono, por ejemplo, y la etiqueta se anuncia pero nunca se pinta. Las hojas de estilo modernas lo combinan con clip-path: inset(50%) para que el helper siga funcionando a medida que clip va dejando de usarse.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| auto | No recorta un elemento. Este es el valor por defecto. | Pruébalo » |
| shape | Recorta un elemento. El único valor válido es rect(top, right, bottom, left). | Pruébalo » |
| initial | Hace que la propiedad use su valor por defecto. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |