@MartinK: "Skin-specific CSS classes (e.g. .skin-vector) are attributes of the body element, while TemplateStyles prefixes all selctors with .mw-parser-output and therefore has only access to the content of the page." Being able to style content for only some skins without resorting to site CSS would be nice.
Description
Description
Details
Details
Customize query in gerrit
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | Ryasmeen | T202024 Remove background colors in mobile page issue banners | |||
| Resolved | Ryasmeen | T197265 Add more styling rules to handle blockquotes inside issues such as Template:Proposed deletion | |||
| Resolved | Tgr | T197617 TemplateStyles should be able to add skin-specific CSS |
Event Timeline
There are a very large number of changes, so older changes are hidden. Show Older Changes
Comment Actions
This would be good for improving mobile support for Wiki Loves Monuments, which begins at the start of September. @Tgr thinks he can work on this soon, sometime after Wikimania, and that we could get it deployed by then.
Comment Actions
Hello,
I'd like to propose a new attribute "skins" for templatestyles. For example:
<templatestyles skins="monobook vector" src="Template:Foo/styles.css" />
Instead of prefixing ".mw-parser-output" only, this generates styles prefixed by "body.skin-xxx .mw-parser-output", where the "xxx" is a real skin name. For example:
body.skin-monobook .mw-parser-output .style-one { // blah blah } body.skin-vector .mw-parser-output .style-one { // blah blah }
Since the "skin-xxx" class already exists in <body> tag, this solution requires minimal changes to the extension and no core change is needed.
Comment Actions
If you look above, that was already suggested. But the solution proposed in T197617#4298242 was determined to be superior and is likely what will be done.
Comment Actions
@Tgr @Deskana Just as a quick reminder: We talked about this task on Wikimania. And both of you agreed, that it should be possible to implement and deploy it by mid August, so that is ready to use for this years WLM campaign (starting end of this month).
So, hows the implementation going? Do you need any input from our side?
Comment Actions
TemplateStyles was deployed everywhere today as planned (yay!) so I'm hopeful @Tgr should have some time to work on this now as planned?
Comment Actions
Change 452049 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[css-sanitizer@master] Add hoisting option to StyleRuleSanitizer selector handling
Comment Actions
Hey there. I ran into this exact need while working on T202024. My selector targeting skin-minerva in https://en.wikipedia.org/wiki/Template:Afd-merge_to/styles.css currently doesn't work and I don't think its right to add this rule into Minerva itself given the low usage of the template.
Recognize .skin-foo as the first simple selector in a selector (with more than one simple selector), and insert the .mw-parser-output after it instead of before it.
2 for doing this.
Something like <templatestyles src="..." skin="vector" /> would easy to do without hacking css-sanitizer. Less flexible though.
This also sounds great.
Is https://gerrit.wikimedia.org/r/452049 still the solution we're going with and do we have any idea when this might land?
Comment Actions
@Tgr: Any plans, when this is going to be deployed.
As I told you on Wikimania. We need this feature for the LandingPages of this years WLM-Campaigns - starting in little more than a week now.
Comment Actions
There's a lot of competing priorities and vacations all happening at once here, sadly. @ggellerman and I are trying to get some answers on engineer availability.
Comment Actions
I can't stress enough that it's really important to be able to use this feature right from the beginning of the campaign on. We had a significant slump in contributors last year, which, according to our analysis, can also be attributed to the inadequate optimization for the increasing proportion of mobile users.
Comment Actions
I understand. I've passed on the importance and priority of this task on to the engineering managers. The rest is, sadly, out of my hands.
Comment Actions
Thanks for passing it on, @Deskana . Please note that also a negative reply, is a response. But if it has to be negative, better have it sooner than later :)
We were counting on this being ready well in time. Realistically, we will soon have to pull out emergency contingencies to create alternative pages - which requires building a global template and then need tweaking to national level, translations etc. (countries are already switching to other structures as we speak)
Comment Actions
Off topic: @MartinK i am curious if you are targeting mobile why using media queries (which is currently supported) is not an option. Can you elaborate? Skin specific styles would only be necessary for design consistency e.g. changing backgrounds. I'm really curious and would love to help you with preparing that campaign if I can. Feel free to ping me on wiki (user:jdlrobson).
Comment Actions
Change 452049 merged by jenkins-bot:
[css-sanitizer@master] Add hoisting option to StyleRuleSanitizer selector handling
Comment Actions
Change 455221 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/vendor@master] Update wikimedia/css-sanitizer to 2.0.0
Comment Actions
Change 455223 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/TemplateStyles@master] Hoist selectors for html and body element
Comment Actions
@Jdlrobson The problem is, that with MediaQueries react to the viewport width - not to the width of the content column. The very same viewport-width can result in totally different content widths, depending on the skin, the content lives in.
- In Minerva e.g. the content column is limited but fills up the full viewport on smaller devices.
- In Vector the content column floats to infinit but has to share its space with the side column
- In Timeless there are to side-columns and a max-width
- etc.
So for a really good working layout, one needs to know, which skin one is in.
Comment Actions
Change 455221 merged by jenkins-bot:
[mediawiki/vendor@master] Update wikimedia/css-sanitizer to 2.0.0
Comment Actions
Change 455223 merged by jenkins-bot:
[mediawiki/extensions/TemplateStyles@master] Hoist selectors for html and body element
Comment Actions
@MartinK this will be deployed with this week's train (ie. on Commons by end of Wednesday, on Wikipedias by end of Thursday). Please reopen if that's too late and we'll arrange for a SWAT deploy.
Comment Actions
@Tgr Thanks for the implementation. It would be good ta have it deployed on Commons asap, because we also need some time to build and test the landing pages - that need to be ready on Thursday evening latest.
Comment Actions
Change 455770 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/vendor@wmf/1.32.0-wmf.18] Update wikimedia/css-sanitizer to 2.0.0
Comment Actions
Change 455771 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/TemplateStyles@wmf/1.32.0-wmf.18] Hoist selectors for html and body element
Comment Actions
Change 455770 merged by jenkins-bot:
[mediawiki/vendor@wmf/1.32.0-wmf.18] Update wikimedia/css-sanitizer to 2.0.0
Comment Actions
Change 455771 merged by jenkins-bot:
[mediawiki/extensions/TemplateStyles@wmf/1.32.0-wmf.18] Hoist selectors for html and body element
Comment Actions
Mentioned in SAL (#wikimedia-operations) [2018-08-28T12:31:37Z] <tgr@deploy1001> Synchronized php-1.32.0-wmf.18/vendor/: SWAT: [[gerrit|455770|Update wikimedia/css-sanitizer to 2.0.0 (T197617)]] (duration: 01m 16s)
Comment Actions
Mentioned in SAL (#wikimedia-operations) [2018-08-28T12:34:36Z] <tgr@deploy1001> Synchronized php-1.32.0-wmf.18/extensions/TemplateStyles/: SWAT: [[gerrit:455771|Hoist selectors for html and body element (T197617)]] (duration: 00m 48s)
Comment Actions
Just checked it on de.Wiki and it seems to be working.
@Tgr Thanks for the express delivery!
Comment Actions
@MartinK thanks for clarifying. Yeh unfortunately that is a problem that would need TemplateStyles, although I'd argue with the right media queries, changes could be applied that would be useful for both mobile and tablet. IMO, we should be assuming that content will take up the full width of the screen and adding media queries for > 720px (tablet) to account for menus.
@Tgr @Anomie and @Deskana thanks so much for prioritising this. It's also been very useful for the Page-Issue-Warnings project!
Comment Actions
@Jdlrobson Glad to hear that this is useful!
In addition to @Tgr @Anomie and @Deskana, others involved in making this happen on time for WLM were @dr0ptp4kt @Jhernandez @Fjalapeno @Legoktm @Jdforrester-WMF and @Catrope. Many thanks!
Comment Actions
A thing @Shizhao has voiced concern about is the data overhead caused by "unconditional" loads as opposed to skin attribute-defined loads, per https://zh.wikipedia.org/wiki/Wikipedia_talk:首页/styles.css. This might be the rationale behind T197617#4439270.
Not looking for any more changes here, just figured that it would be good to add a side note here. TemplateStyles, after all, is not supposed to map to all of the MediaWiki stylesheets…
Comment Actions
OTOH, having a 'skin' attribute would mean we'd have to fragment the parser cache by skin, which would be a different kind of overhead.
Comment Actions
body.skin-vector .myClass doesn't seem to work? see test:
https://zh.m.wikipedia.beta.wmflabs.org/w/index.php?title=Wikipedia:首页&mobileaction=toggle_view_mobile&debug=true
https://zh.wikipedia.beta.wmflabs.org/wiki/Wikipedia:首页/styles.css
Comment Actions
You have misspelled "minerva" as "minera" in https://zh.wikipedia.beta.wmflabs.org/wiki/Wikipedia:首页/styles.css