LibrosWeb.es

La caja que los navegadores crean para mostrar cada elemento de la página siempre dispone de las dimensiones adecuadas para mostrar todos sus contenidos. No obstante, si se posicionan los contenidos de la caja o si se utilizan márgenes negativos o si se establece de forma explícita su anchura y/o altura, es posible que los contenidos se salgan de su caja. El estándar de CSS define la propiedad overflow para establecer el comportamiento de los contenidos que se salen.

Por otra parte, en ocasiones el diseño de la página puede requerir que sólo se vea una parte de los contenidos de un elemento. La propiedad overflow no se puede utilizar en este caso, ya que sólo controla el contenido que se sale de la caja del elemento. Por ello, el estándar de CSS incluye la propiedad clip para "recortar" una caja de forma que sólo se vea una parte de sus contenidos.

Las dos principales limitaciones de la propiedad clip es que sólo se puede aplicar a los elementos posicionados de forma absoluta (propiedad position) y sólo se pueden recortar áreas con forma rectangular.

El valor inicial de la propiedad clip es auto, que muestra la caja tal y como es originalmente, sin recortar sus contenidos. El otro valor que se puede utilizar en la propiedad clip es una forma geométrica rectangular que se define mediante la palabra reservada rect.

El clipping o recorte de una caja se realiza indicando los límites de la zona visible de la caja mediante la sintaxis rect(top, right, bottom, left). El valor top indica la posición del borde superior de la zona visible respecto a la posición del borde superior de la caja del elemento. El valor bottom indica la posición del borde inferior de la zona visible y su referencia también es el borde superior de la caja original.

Por su parte, el valor left indica la posición del borde izquierdo de la zona visible respecto a la posición del borde izquierdo de la caja original. Por último, el valor right indica la posición del borde derecho de la zona visible y su referencia también es el borde izquierdo de la caja original.

Si la dirección de escritura del texto del elemento, establecida con la propiedad direction, es de derecha a izquierda, la referencia de las propiedades left y right es la posición del borde derecho de la caja original.

Cada uno de los valores top, right, bottom y left se establecen mediante cualquier unidad de medida de CSS o mediante la palabra reservada auto. Los valores de las unidades de medida pueden ser negativos y la única unidad que no se puede utilizar es el porcentaje.

Los cuatro valores incluidos dentro de rect() normalmente se separan con comas, aunque el estándar también permite eliminarlas. En la práctica es casi obligatorio eliminar las comas, ya que los navegadores de tipo Internet Explorer sólo interpretan correctamente el valor de la propiedad clip cuando no se incluyen las comas y el resto de navegadores funcionan bien con y sin las comas.

Cuando se necesita un control preciso del recorte, se utiliza el píxel como unidad de medida:

elemento {
  clip: rect(10px 80px 90px 10px);
}

El siguiente ejemplo muestra la comparación entre el aspecto normal de la caja de un elemento y el resultado de recortar sus contenidos con la regla CSS anterior:

La regla clip: rect(10px 80px 90px 10px) se interpreta como top = 10px, right = 80px, bottom: 90px y left: 10px. Por tanto, verticalmente la zona visible empieza 10px por debajo del borde superior de la caja original y termina a 90px de distancia de ese mismo borde superior de la caja original. Horizontalmente, la zona visible empieza a 10px de distancia del borde izquierdo de la caja original y termina a 80px de distancia respecto de ese mismo borde izquierdo.

Si se quieren realizar recortes proporcionales, como por ejemplo "la mitad de la caja" o "el cuadrante superior derecho de la caja", se puede hacer uso de la palabra reservada auto. Su interpretación no es sencilla, ya que depende de la posición en la que se utilice:

• Para los valores top y left, la palabra reservada auto equivale a 0
• Para el valor bottom, la palabra reservada auto equivale a la suma de la altura de la caja (propiedad height), el relleno vertical (propiedades padding-top y padding-bottom) y la anchura de los bordes superior e inferior (propiedades border-top-width y border-bottom-width)
• Para el valor right, la palabra reservada auto equivale a la suma de la anchura de la caja (propiedad width), el relleno horizontal (propiedades padding-left y padding-right) y la anchura de los bordes izquierdo y derecho (propiedades border-left-width y border-right-width)

Aunque la explicación formal de la palabra reservada auto parece compleja, existe una explicación mucho más sencilla: el valor auto hace referencia a cada uno de los bordes de la caja original. Si se emplea por ejemplo el valor auto en la posición left, su valor es 0 de forma que el borde izquierdo de la zona recortada coincida con el borde izquierdo de la caja original. De la misma forma, si se emplea el valor auto en la posición right, su valor es la anchura total de la caja (incluyendo anchura de contenidos, rellenos y bordes) de tal forma que el borde derecho de la zona recortada coincida con el borde derecho de la caja original.

Por tanto, si se utiliza el valor auto en las cuatro posiciones, la caja recortada es igual que la caja original. La caja derecha del siguiente ejemplo utiliza la propiedad clip: rect(auto auto auto auto), por lo que se muestra de forma idéntica a la caja izquierda, que es la original:

El siguiente ejemplo muestra el uso de la palabra reservada auto para realizar un recorte proporcional de la caja, en este caso el cuadrante inferior izquierdo de un elemento:

La caja del ejemplo anterior se ha recortado mediante la propiedad clip: rect(75px 75px auto auto), ya que la caja original tiene una altura y anchura de 150px. Para que la zona recortada sea realmente "el cuadrante inferior izquierdo", no basta con utilizar el valor 75px (la mitad del valor de height) sino que también se deben tener en cuenta los rellenos verticales y la anchura de los bordes superior e inferior. Una dificultad añadida es que la propiedad clip no permite el uso de porcentajes, lo que facilitaría mucho los recortes como el del ejemplo anterior.

Las cajas recortadas pueden incluir en su interior otras cajas recortadas. En estos casos, la prioridad de los recortes es descendente, de forma que el recorte de una caja siempre afecta a los posibles recortes de sus cajas interiores.

Las reglas CSS de las cajas de la derecha del ejemplo anterior son las siguientes:

#caja1 {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 150px;
  height: 150px;
  clip: rect(75px 75px auto auto);
}
 
#caja1 #caja2 {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 130px;
  height: 130px;
  clip: rect(95px 85px auto 15px);
}

Por último, el propio estándar de CSS 2.1 reconoce que obligar a que todas las zonas recortadas tengan forma rectangular es una limitación excesiva, por lo que en las futuras revisiones del estándar CSS 2.1 o en estándares futuros se considerará la introducción de otro tipo de formas geométricas, como círculos y polígonos.