Page MenuHomePhabricator

Support CSS clamp in templateStyles
Open, Needs TriagePublicFeature

Assigned To
None
Authored By
Nux
Dec 6 2022, 12:43 AM
Referenced Files
F41484155: obraz.png
Nov 10 2023, 7:20 PM
F35847992: obraz.png
Dec 9 2022, 3:32 PM
Tokens
"Burninate" token, awarded by MartinK.

Description

Feature summary (what you would like to be able to do and where):
Please add support for clamp.

Use case(s) (list the steps that you performed):

  1. https://pl.wikivoyage.org/w/index.php?title=Szablon:SG/style.css&oldid=134236#L-70
  2. Edit https://pl.wikivoyage.org/w/index.php?title=Szablon:SG/style.css&action=edit
  3. I would prefer using clamp on this section:
.glowna-sekcje .glowna-miejsca {
	flex-basis: clamp(300px, 50%, 100%);
}

This would make the section grow as long as there is space to grow. So it would look better with old vector and similar skins (always 2 big sections on top and 3 small below).

Benefits (why should this be implemented?):
Clamp is a good layout tool. Less complicated then min/max/width in some cases.

Event Timeline

But all-ish browsers support it for about 2 years now ¯\_(ツ)_/¯
https://caniuse.com/css-math-functions

obraz.png (657×897 px, 51 KB)

I would appreciate it very much if the CSS-sanitizer would no longer block modern CSS functions - especially:

clamp()
min()
max()
minmax()

I also don't see any safety-relevant side effects that could make filtering necessary here.

Clam and others supported by 95.8% of browsers globally:

obraz.png (734×1 px, 88 KB)

Clamp is in CSS Values Level 4:
https://www.w3.org/TR/css-values-4/

And they already started working on CSS Values Level 5:
https://www.w3.org/TR/css-values-5/

While the W3C tends to be cautious in its process, the likelihood of changing syntax is slim to none. It's worth noting that Mediawiki doesn't necessarily need to implement this; it just needs to allow it in the CSS sanitizer. Therefore, there's no reason to hold back.