Version CSS2 :

Une zone de rognage définit la partie du contenu rendu d'un élément qui est visible. Par défaut, la zone de rognage a la même taille et forme que la boîte, ou les boîtes, de l'élément. Cependant, celle-ci peut être modifiée à l'aide de la propriété 'clip'.

'clip'

Valeur :	<forme> | auto | inherit
Initiale :	auto
S'applique à :	ceux des éléments de type bloc et ceux remplacés
Héritée :	non
Pourcentage :	sans objet
Médias :	visuel

La propriété 'clip' s'applique aux éléments dont la valeur de la propriété 'overflow' est autre que 'visible'.[...]

En CSS2, la seule valeur admise pour <forme> est : rect (<haut> <droite> <bas> <gauche>) où <haut>, <droite>, <bas> et <gauche> représentent les décalages par rapport aux côtés respectifs de la boîte.

Version CSS2.1 :

A clipping region defines what portion of an element's border box is visible. By default, the clipping region has the same size and shape as the element's border box. However, the clipping region may be modified by the 'clip' property.

'clip'

Value:	<shape> | auto | inherit
Initial:	auto
Applies to:	absolutely positioned elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	For rectangle values, a rectangle consisting of four computed lengths; otherwise, as specified

[...]

In CSS 2.1, the only valid <shape> value is: rect(<top>, <right>, <bottom>, <left>) where <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and <left> specify offsets from the left border edge of the box in left-to-right text and from the right border edge of the box in right-to-left text.

Il en ressort que :

• clip s'applique aussi bien aux éléments bloc qu'aux éléments en ligne, aux contenus texte comme aux contenus graphiques (images) ;
• clip ne modifie que la visibilité de la zone de l'élément qui est rognée, à la manière de la propriété visibility. Cette zone rognée, bien qu'invisible, continue à agir sur la mise en forme de l'élément et notamment le positionnement de la zone toujours visible. Ce n'est donc pas l'équivalent d'un display: none qui serait appliqué à une partie du contenu de l'élément, et ni les dimensions réelles de l'élément, ni ses marges, ne sont modifiées ;
• Bordures et remplissage (padding) sont inclus dans la zone rognable ;
• clip ne nécessite pas que la propriété overflow de l'élément rogné soit autre que celle par défaut (visible) ;
• Mais clip ne s'applique qu'à des éléments en position absolue (et donc aussi bien à des éléments en position fixe).

La zone visible de l'élément est obligatoirement rectangulaire. Elle est spécifiée par clip: rect(top, right, bottom, left), avec :

• top : distance entre le bord supérieur de la zone visible et le bord supérieur de l'élément ;
• right : distance entre le bord droit de la zone visible et le bord gauche de l'élément ;
• bottom : distance entre le bord inférieur de la zone visible et le bord supérieur de l'élément ;
• left : distance entre le bord gauche de la zone visible et le bord gauche de l'élément.

top, right, bottom et left peuvent prendre la valeur auto, ce qui autorise les syntaxes du type clip: rect(5px, auto, auto, 5px) pour ne rogner que les bords supérieurs et gauche. Toutes les unités de longueur admises en CSS sont théoriquement admises (em, ex, px, in, cm, mm, pt et pc), ainsi que les valeurs négatives. Les pourcentages ne sont pas supportés.

Par exemple :

p { clip: rect(5px, 40px, 45px, 5px); }
p { clip: rect(5px, 55px, 45px, 5px); }

Laisseront visibles les zones illustrées ci-dessous (image empruntée à la spécification CSS2.1).

Enfin, CSS2 était ambigüe sur l'utilisation des virgules entre les valeurs de clip, puisque les exemples donnés en comportaient alors que le texte les omettait. IE5.x Win, Opera 7.x et Mozilla 1.6 supportent les deux syntaxes, mais Internet Explorer 6.0 Win a un comportement problématique. En effet :

• En mode Quirks (présence d'un prologue XML par exemple), les deux syntaxes sont supportées ;
• Mais seule p { clip: rect(top right bottom left); } est supporté en mode Strict (DTD (X)HTML Stricte sans prologue, par exemple).

Pour CSS2.1, l'absence de virgules est déconseillée, mais reste admise. En effet :

Authors should separate offset values with commas. User agents must support separation with commas, but may also support separation without commas, because a previous version of this specification was ambiguous in this respect.

En mode Strict, pour permettre le support de clip dans IE6.0 Win , tout en restant compatible avec des navigateurs appliquant strictement CSS2.1, il serait donc prudent d'écrire :

p {
position: absolute;
clip: rect(5px 40px 45px 5px);
clip: rect(5px, 40px, 45px, 5px);
}

Internet Explorer ne lira que la première règle clip, tandis que les navigateurs plus strictes liront la seconde.

Notons que le validateur CSS du W3C considère alors que la feuille de style est invalide.