Q:

CSS clip / clip-path equivalent

I have a line in my CSS file:
clip: rect(0 0 0 0); 

I see that clip is now depreciated, so I am attempting to use clip-path. What is clip-path's equivalent?
Is it:
clip-path: inset(0 0 0 0);

A:

No, it is not inset(0 0 0 0). The old clip property's parameters specify the distance at which the clipped rect's corners should be located from (0,0) of the box whereas in new clip-path: inset() they are points from the top, from right, from bottom and from left. 
So, rect(0 0 0 0) means all four corners of the clipped rect are at (0,0). Whereas inset(0 0 0 0) would mean the clipped rect's four corners are at (0,0) (100,0) (100,100) (0,100) for a 100px x 100px box. To put simply, clip: rect(0 0 0 0) is clip everything while clip-path: inset(0 0 0 0) is clip nothing.
Similarly, clip: rect(0 10px 10px 0) would produce a 10px x 10px box and its equivalent in the new syntax would be clip: inset(0 90px 90px 0) (if the un-clipped box is 100px by 100px).
(Note: Just for clarification, non Webkit/Blink browsers do not support CSS clip-path fully as yet and so the snippet will not work as expected in those browsers.)

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 -->

