Beim Durchblättern der CSS-Standards ist mir folgende erstaunliche Eigenschaft aufgefallen, die ich gerne mal vorstellen würde: Die Clip-Eigenschaft. Diese ermöglicht es uns, HTML-Elemente wie beispielsweise Divs oder Bilder teilweise zu verstecken.
Dafür definiert man über die Clip-Eigenschaft einfach für jede Seite die Anzahl an Pixeln, die abgeschnitten werden sollen:
Technische Umsetzung
#divelement {
position: absolute; /* Das div-Element muss absolut positioniert sein, sonst funktioniert es nicht. */
width: 200px;
height: 200px;
background-color: grey;
clip: rect(10px, 10px, 10px, 10px);
}
</style>
Die Pixelangaben bedeuten:
- Ausgeschnittener Abstand von oben
- Ausgeschnittener Abstand von rechts
- Ausgeschnittener Abstand von unten
- Ausgeschnittener Abstand von links
Das Divelement ist hier nur 180 × 180 px groß, weil von jeder Seite zehn Pixel abgeschnitten wurden.
Browserkompatibilität
Was mich besonders erstaunt hat: Diese Eigenschaft ist nicht etwa CSS 3, sondern CSS 2.1 und funktioniert ab Internet Explorer 4.
Aber natürlich hat der Internet Explorer mal wieder eine Macke, und zwar: Man muss in den Klammern von rect() die Kommata weglassen, sonst funktioniert es nicht. Von diesem Fehler sind alle Versionen bis einschließlich Version 7 betroffen.

Adrian
