Clipping

Back to October 2006

Table of contents

  1. Positioned boxes without clipping
  2. Clipping boxes
  3. Clipping images
  4. Conclusion: the weird scenes behind

1. Positioned boxes without clipping

The tollbooths were empty. The middle one stood in a heap of broken glass. Beyond them, the westbound lanes were empty for as far as they could see... [BOX 1]
He had sat on a hundred different Committees of Responsibility. He had walked in demonstrations against the same dozen companies on a hundred different college campuses. He wrote the questions that most discomfited those in power when they come to lecture, but he never asked the question himself. [BOX 2]
He dreamed oddly, and all he could remember upon waking was that he seemed to have been walking through endless rows of green corn... [BOX 3]
CSS code

* html body .container {
height: 100%;
margin-bottom: 2.3em;
}

.container {
margin: 2em 6em;
padding: 0;
background: transparent;
color: #000;
position: relative;
font-family: Tahoma, Arial, Helvetica, sans-serif;
}

.block {
position: absolute;
top: 0;
left: 0;
width: 200px;
margin: 0;
padding: 0;
background: orange;
color: #000;
}
.opposite {
position: absolute;
top: 0;
right: 0;
width: 200px;
margin: 0;
padding: 0;
font-family: Georgia, serif;
background: yellow;
}

.middle {
margin-left: 200px;
margin-right: 200px;
background: #fff;
color: #000;
font-family: Arial, sans-serif;
}

Comments

The 'clip' property is not applied here. A simple contextual positioning has been created by setting the 'position' property to 'relative' for the containing block with class .container. [BOX 1] and [BOX 3] are absolutely positioned inside their containing block, while [BOX 2] has been positioned through its left and right margin. Results look similar in all compliant browsers (Mozilla, Firefox, Opera). Internet Explorer 6 needs the declaration 'height: 100%' to display the elements correctly. This declaration is specified through the hack marked in red. This first example shows only the effects of absolute positioning.

2. Clipping boxes

This example shows what happens when the 'clip' property is set for boxes. As you can see, results are very different in all browsers. The code is the following:

CSS code

 .block {
position: absolute;
top: 10em;
left: 0;
width: 200px;
margin: 0;
padding: 0;
background: orange;
color: #000;
clip: rect(2em, 3em, 4em, 5em);
}
.opposite {
position: absolute;
top: 10em;
right: 0;
width: 200px;
margin: 0;
padding: 0;
font-family: Georgia, serif;
background: yellow;
clip: rect(2px, 3px, 4px, 5px);
}

.middle {
position: absolute;
top: 10em;
left: 210px;
width: 200px;
background: #fff;
color: #000;
font-family: Arial, sans-serif;
clip: rect(2%, 3%, 4%, 5%);
}

Different lenghts are specified here: ems for [BOX 1] , pixels for [BOX 3] and percentages for [BOX 2] (the box in the middle). Note the great differences between browsers: Firefox shows a chunk of [BOX 1] text, while Opera makes the boxes disappear from the viewport except for the middle one. Internet Explorer 6 leaves the boxes untouched.

3. Clipping images

This example shows what happens when the 'clip' property is set for the images. As you can see, results are very different in all browsers. The code is the following:

CSS code

.block {
position: absolute;
top: 10em;
left: 0;
width: 200px;
height: 130px;
margin: 0;
padding: 0;
display: block;
clip: rect(2em, 3em, 4em, 5em);
}
.opposite {
position: absolute;
top: 10em;
right: 0;
width: 200px;
height: 130px;
margin: 0;
padding: 0;
display: block;
clip: rect(2px, 3px, 4px, 5px);
}

.middle {
position: absolute;
top: 10em;
left: 210px;
width: 200px;
height: 130px;
display: block;
clip: rect(2%, 3%, 4%, 5%);
}

As you can see, this code is quite the same as above. The 'clip' property has been applied to an image with three different classes (.block, .opposite, .middle).

Different lenghts are specified here: ems for .block , pixels for .opposite and percentages for .middle (the image in the middle). Note the great differences between browsers: Firefox shows a chunk of the image with class .block, while Opera makes the images disappear from the viewport except for the middle one. Internet Explorer 6 leaves the images untouched.

4. Conclusion: the weird scenes behind

Maybe the 'clip' property is considered an outsider property. Support is weird and broken under the conditions showed above. However, this is not a fault. Browsers are free to develop some aspects of the CSS specs or not, that's all. In this freedom lies the hope for a better support in the future.