clip CSS/clip-path équivalent

Question

J'ai une ligne dans mon fichier CSS:

clip: rect(0 0 0 0); 

Je vois que clip est maintenant dépréciée, donc je tente d'utiliser clip-path. Quel est l'équivalent de clip-path?

Est-il:

clip-path: inset(0 0 0 0); 

Answer 1

Non, ce n'est pas inset(0 0 0 0). Les anciens paramètres de la propriété clip spécifient la distance à laquelle les coins du rectangle coupé doivent être situés à partir de (0,0) tandis que dans le nouveau clip-path: inset() ils sont des points du haut, de droite, de bas et de gauche. Par conséquent, rect(0 0 0 0) signifie que les quatre coins du rectangle coupé sont à (0,0). Alors que inset(0 0 0 0) signifierait que les quatre coins du rectangle coupé sont à (0,0) (100,0) (100,100) (0,100) pour une boîte de 100px x 100px. Pour mettre simplement, clip: rect(0 0 0 0) est clip tout tandis que clip-path: inset(0 0 0 0) est clip rien.

De même, clip: rect(0 10px 10px 0) produirait une boîte 10px x 10px et son équivalent dans la nouvelle syntaxe serait clip: inset(0 90px 90px 0) (si la boîte non découpée est 100px par 100px).

(Note: Juste pour clarifier, les navigateurs non Webkit/Blink ne prennent pas en charge CSS clip-path pleinement encore et si l'extrait ne fonctionnera pas comme prévu dans les navigateurs.)

div { 
 
    position: absolute; 
 
    height: 100px; 
 
    width: 100px; 
 
    background: yellowgreen; 
 
} 
 
.clip { 
 
    clip: rect(0 0 0 0); 
 
} 
 
.clip-path-inset { 
 
    top: 110px; 
 
    -webkit-clip-path: inset(0 0 0 0); 
 
    clip-path: inset(0 0 0 0); 
 
} 
 
.clip-1 { 
 
    top: 220px; 
 
    clip: rect(0 10px 10px 0); 
 
} 
 
.clip-path-inset-1 { 
 
    top: 330px; 
 
    -webkit-clip-path: inset(0 90px 90px 0); 
 
    clip-path: inset(0 90px 90px 0); 
 
} 
 
.clip-path-polygon-1 { 
 
    top: 440px; 
 
    -webkit-clip-path: polygon(0px 0px, 10px 0px, 10px 10px, 0px 10px); 
 
    clip-path: polygon(0px 0px, 10px 0px, 10px 10px, 0px 10px); 
 
}

<div class='clip'>Some text</div> <!-- this won't be visible as it has rect(0 0 0 0) --> 
 

 
<div class='clip-path-inset'>Some text</div> <!-- this will be fully visible as it has inset(0 0 0 0)--> 
 

 
<div class='clip-1'>Some text</div> <!-- this will show a 10px x 10px box --> 
 

 
<div class='clip-path-inset-1'>Some text</div> <!-- this will show a 10px x 10px box --> 
 

 
<div class='clip-path-polygon-1'>Some text</div> <!-- this will show a 10px x 10px box -->