CSS Clip versus Clip-path

Bart De Clercq op 28/10/2014 - reageer als eerste

Clip en Clip-path zijn twee CSS eigenschappen die je op elementen kan toepassen. Er zijn verschillende doeleinden om Clip of Clip-path toe te passen. Hoofdzakelijk wil je een deel van een element tonen.

Aangezien Clip ontmoedigd wordt door het W3C (deprecated) bekijken we het voorgestelde alternatief Clip-path. In deze blogpost verdiepen we ons in de verschillen en wat ze met toegankelijkheid te maken hebben.

Clip

De CSS Clip eigenschap laat toe een gedeelte van een element te tonen. Je kan een rechthoek definiëren door vier coördinaten te gebruiken. Meestal wordt deze techniek op afbeeldingen toegepast.

Er zijn voor- en nadelen aan deze eigenschap. Zo moet het element absoluut gepositioneerd staan wat meestal een heel groot nadeel is.

Het volledige logo

We starten met afbeelding zonder Clip of Clip-path, namelijk ons logo.

Het AnySurfer logo met baseline
<img src="../logo_baseline_nl_307x70.png" alt="Het AnySurfer logo met baseline" />

Een deel van het logo

Stel dat we de tekst willen afknippen van onze afbeelding, dan kunnen we Clip gebruiken om de CSS Sprite techniek toe te passen. We gebruiken hetzelfde brondbestand maar tonen alleen het logo.

Het AnySurfer logo zonder baseline
<img src="../logo_baseline_nl_307x70.png" alt="Het AnySurfer logo zonder baseline" />

We selecteren een gedeelte van de afbeelding:

img{
  position: absolute; 
  clip: rect(0px 75px 70px 0px);		
}

Clip-path

Bij Clip ben je beperkt tot een rechthoek. Met Clip-path kan je gebruik maken van een SVG mask of enkele beschikbare CSS basisvormen (rectangle, circle, ellipse of polygon).

Een deel van het logo met SVG circle

Naast de CSS shapes kan je ook verwijzen naar een SVG waarin een SVG shape gedefinieerd is. In volgend voorbeeld linken we een SVG circle aan ons logo.

Deel van het logo met clip-path SVG circle

Als je hierboven niets of ons volledig logo ziet, dan ondersteund je browser SVG circle mask nog niet. Hieronder een screenshot wat je moet zien:

Screenshot SVG circle mask

<img 
  class="orange" 
  src="../logo_baseline_nl_307x70.png" alt="Deel van het logo met clip-path SVG circle" 
/>

De SVG bestaat uit een cirkel met coördinaten x en y plus de grootte van de radius.

<svg width="0px" height="0px">
  <defs>
    <clipPath id="clipping">
      <circle cx="37" cy="34" r="23" />
    </clipPath>
  </defs>
</svg>

In de CSS code wordt verwezen naar een SVG element met id="clipping".

.orange { 
  clip-path: url(#clipping);
}

Hieronder een schets welke SVG we maken. Het middelpunt zit op coördinaat 37px, 34px met een radius van 23px.

Schets SVG op het logo

En wat met toegankelijkheid?

Soms wil je tekst alleen beschikbaar maken voor screenreader gebruikers. Dit kan je doen door de Clip methode te gebruiken, meer lees je hierover op onze pagina Verborgen tekst, enkel voor screenreaders.

Omdat de Clip eigenschap vervangen wordt door de Clip-path eigenschap, is de code niet hetzelfde. Bij Clip gebruik je onderstaande code:

clip: rect(0 0 0 0);

Bij Clip-path een licht andere syntax:

clip-path: rectangle(0,0,0,0);

Besluit

Clip-path is momenteel onvoldoende ondersteund om het als waardig alternatief te gebruiken voor Clip. Voorlopig blijven we het gebruik van Clip aanraden.

Het kan geen kwaad om beide eigenschappen te gebruiken. Huidige browsers ondersteunen Clip en in de toekomst zullen ze Clip-path ondersteunen.

Reageer

De volgende HTML tags zijn toegestaan: <a> <b> <ul> <li>