Page MenuHomePhorge

CSS: Add "clip-path" as progressive enhancement for deprecated "clip" property
Open, Needs TriagePublic

Description

Per https://www.w3.org/TR/css-masking-1/#clip-property, https://developer.mozilla.org/en-US/docs/Web/CSS/clip and https://caniuse.com/mdn-css_properties_clip, the clip property is deprecated.

Should probably add some future-proof CSS via clip-path per https://caniuse.com/css-clip-path, https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path but also add -webkit-clip-path to support Safari <9.1 released 03/2016 and Chrome <55 released 12/2016.

Plus keep deprecated clip to support Opera <42 released 12/2016 and Edge <78 released 01/2020.

[acko@foo phorge (master $|u=)]$ grep -r " clip:" --include=*.css . 
./webroot/rsrc/css/font/font-awesome.css:  clip: rect(0, 0, 0, 0);
./webroot/rsrc/css/font/font-awesome.css:  clip: auto;
./webroot/rsrc/css/core/core.css:  clip: rect(1px, 1px, 1px, 1px);
./webroot/rsrc/css/core/core.css:  clip: auto;

Event Timeline

From a quick look it seems that clip: rect(0 0 0 0) is very much the same as clip: rect(1px, 1px, 1px, 1px) (make things invisible and only found by screenreaders), and clip-path: inset(50%) (covering each side by 50%) is very much the same outcome as clip-path: inset(100%).

Any CSS folks are very welcome to correct me.