Page MenuHomePhabricator

Add 'width: -webkit-fill-available' to allowed syntax for TemplateStyles
Open, Needs TriagePublicFeature

Description

Currently unable to migrate the following from MediaWiki:Common.css to a TemplateStyles subpage.

.deploycal-eventcard {
	min-width: 70%;
	width: -webkit-fill-available;
}
Invalid or unsupported value for property width at line 3 character 9.

I'm aware that for security reasons, TemplateStyles only allows what it understands, and this is a fairly obscure browser feature. But it's been around for a few years and solves a problem that cannot be solved with CSS by other means currently. Being able to use it where available, with a fallback, improves the user experience.

See https://developer.mozilla.org/en-US/docs/Web/CSS/width for the documentation and spec.

The current implementations in browsers call this concept -webkit-fill-available (Chrome), and -moz-available (Firefox).

The W3C CSSWG has called it (at different times) it fill-available, stretch, and (latest) stretch-fit. Although I'm not aware of implementations yet, so we may want to hold off on those.