Page MenuHomePhabricator

Use background and background-* properties
Closed, InvalidPublic

Description

Ability to use background and background-image, background-cover, background-repeat, ... in a CSS template.
I'm heavily using the Common.css page to customize the look of some pages and their subpages with

.rootpage-Pagenamehere

Each page would have a different look deeply customized according to the thematic and the background property is used to set a texture to the background but also the the background where the text is displayed using RGBA colors with some transparency, link colors, Infobox background etc.

Some pages are darker or lighter than others somodifying the background color of a table is important.

W3C link: https://www.w3.org/wiki/CSS/Properties/background
CanIUse link: https://caniuse.com/#search=background

Event Timeline

Anomie subscribed.

These are already allowed, and have been since css-sanitizer was written.

I'm wondering if there may be some validity to this task. When I tried to move the styles in https://sv.wikipedia.org/wiki/MediaWiki:Gadget-audiolink.css to TemplateStyles, I got "Invalid or unsupported value for property background at line 3 character 14.".

Try using "https://upload.wikimedia.org/wikipedia/commons/f/f7/Loudspeaker.png" as the URL.

Better error messages about URL whitelist misses would be nice, but probably hard. I think this was discussed in the past but can't remember the details.

Wow, it works! Thank you so much!

Unfortunately, now I have another problem. When I added <templatestyles src="Audio/styles.css"/> to https://sv.wikipedia.org/wiki/Mall:Intervall (https://sv.wikipedia.org/w/index.php?diff=42452572), I broke the template. What is the correct way to add the templatestyles tag in this case? (I realize this has nothing to do with this bug, so maybe discuss on mediawiki.org instead?)

Better error messages about URL whitelist misses would be nice, but probably hard. I think this was discussed in the past but can't remember the details.

Right now Matcher can't give a reason for failure at all, since failure is just "lack of any match". You'd have to add that, or do it out-of-band somehow.

With alternation and such I'm not sure how that would even work. Which error should be used if different branches report different errors?

If anyone decides to try to look at this, one test case might be the mask-image property from CSS Masking Module Level 1. It can accept, among other things, either any image (->url( 'image' )) or a reference to a <mask> tag inside an SVG (->url( 'svg' )). On a failure, the Wikimedia\CSS\Grammar\Alternative might see errors from failing to match the URL token against 'image' whitelist and against the 'svg' whitelist down different alternative branches.