CSS: Add "clip-path" as progressive enhancement for deprecated "clip" property
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	aklapper
	Thu, May 1, 12:01

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;

Revisions and Commits

rP Phorge
	D25983	rP261fdca137e5 CSS: Add "clip-path" to deprecated "clip" property

Related Objects

Mentioned In: Next Up

Event Timeline

aklapper created this task.Thu, May 1, 12:01

Herald added subscribers: Cigaryno, Matthew, chris, tobiaswiese. · View Herald TranscriptThu, May 1, 12:01

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.

aklapper added a revision: D25983: CSS: Add "clip-path" to deprecated "clip" property.Thu, May 1, 12:27

valerio.bozzolan added a project: Wikimedia Hackathon 2025.Thu, May 1, 19:01

valerio.bozzolan moved this task from Backlog to Plz Review 🥺 on the Wikimedia Hackathon 2025 board.

valerio.bozzolan subscribed.

aklapper added a commit: rP261fdca137e5: CSS: Add "clip-path" to deprecated "clip" property.Sat, May 3, 21:59

aklapper mentioned this in Next Up.Sat, May 3, 21:59

aklapper closed this task as Resolved by committing rP261fdca137e5: CSS: Add "clip-path" to deprecated "clip" property.Sat, May 3, 21:59

aklapper claimed this task.

aklapper moved this task from Plz Review 🥺 to We did it 😍 on the Wikimedia Hackathon 2025 board.Sat, May 3, 22:00