Page MenuHomePhabricator

Migrate css rules in hacks.less into templates
Closed, DeclinedPublic

Description

The MobileFrontend extension has a file called hacks.less

http://git.wikimedia.org/blob/mediawiki%2Fextensions%2FMobileFrontend/8d9184c2d4af6e460ccea44be32b88db6565afc7/less%2Fcommon%2Fhacks.less

The purpose of this style is to optimise various user created templates for mobile devices by overriding existing known inline styles. It does this by using !important which is the only way to override an inline style.

Ideally this file shouldn't exist. All the components should have CSS which optimise the template for various display sizes.

The creation of a mechanism to style templates would provide a great generic solution to this problem:
https://www.mediawiki.org/wiki/Requests_for_comment/Allow_styling_in_templates

TODO

  • $wgMinervaApplyKnownTemplateHacks is removed.
  • Infobox styles are deleted from Minerva
  • Page issues styles are deleted from Minerva
  • Documentation is updated

Details

Reference
bz64578

Related Objects

StatusSubtypeAssignedTask
DeclinedNone
ResolvedTgr
ResolvedAnomie
Resolvedtstarling
Resolvedcoren
ResolvedAnomie
DeclinedBUG REPORTNone
ResolvedAnomie
ResolvedEsanders
ResolvedEsanders
Resolvedssastry
ResolvedAnomie
ResolvedCKoerner_WMF
Resolvedjhsoby
ResolvedTgr
DeclinedTgr
Resolvedcoren
ResolvedAnomie
ResolvedTgr
DeclinedNone
Resolvedssastry
ResolvedTgr
ResolvedTgr
ResolvedTgr
Resolved Deskana
ResolvedCKoerner_WMF
Resolved Whatamidoing-WMF
ResolvedTgr
ResolvedTgr
ResolvedTgr
ResolvedUrbanecm
ResolvedTgr
ResolvedTacsipacsi
ResolvedTgr
ResolvedCKoerner_WMF

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 3:14 AM
bzimport set Reference to bz64578.
Nemo_bis renamed this task from [Tracking] Migrate css rules in hacks.less into templates. to Migrate css rules in hacks.less into templates (tracking).Jul 19 2015, 9:59 AM
Jhernandez added a subscriber: Jhernandez.
resources/skins.minerva.content.styles/hacks.less
resources/skins.minerva.tablet.beta.styles/hacks.less
resources/skins.minerva.tablet.styles/hacks.less
Phabricator_maintenance renamed this task from Migrate css rules in hacks.less into templates (tracking) to Migrate css rules in hacks.less into templates.Aug 13 2016, 11:28 PM

I've moved the quote box 'hacks' into https://en.wikipedia.org/wiki/Template:Quote_box/styles.css
Will move to getting that deployed, so that we can remove that specific hack from less.css

Jdlrobson lowered the priority of this task from Medium to Low.Aug 1 2019, 8:21 PM
Jdlrobson added a subscriber: Ladsgroup.

@Ladsgroup I saw you were thinking of doing something TemplateStyles related as part of Wikimania. Is this task in scope for you and something we could collaborate on remotely?

@Ladsgroup I saw you were thinking of doing something TemplateStyles related as part of Wikimania. Is this task in scope for you and something we could collaborate on remotely?

Sure. It might be more complex as we need to make sure all wikis have these styles before removing them from code. If I understood this issue correctly.

http://git.wikimedia.org/blob/mediawiki%2Fextensions%2FMobileFrontend/8d9184c2d4af6e460ccea44be32b88db6565afc7/less%2Fcommon%2Fhacks.less

This link doesn't work. I couldn't find it in the whole mobile frontend extension. I found only this file which seems pretty small to me.

In a more general note, It would be great if I can understand this task better so I can help more efficiently with less chance of breaking everything.

I think if you can empty MediaWiki:Mobile.css which is similar to Common that would be good progress here Ladsgroup.

I think if you can empty MediaWiki:Mobile.css which is similar to Common that would be good progress here Ladsgroup.

Sure, do you know if there's a proper support TemplateStyles for mobile? I couldn't find anything in the help page.

Clearing Mobile.css of TemplateStyles requires the same level of effort as cleaning Common.css, more-or-less. As I've described elsewhere and multiple times over, there are multiple cases (hlist, navbox, infobox classes as examples) where classes are being defined in-page, not in a template, nor remotely near any template, and relying on Common.css to provide the related CSS.

I have also requested feedback on how best to implement TemplateStyles for the metatemplates that we have, and no-one got back to me. I consider that discussion a blocker for moving the CSS for those items out. See this archived discussion with nary a single response.

I think if you can empty MediaWiki:Mobile.css which is similar to Common that would be good progress here Ladsgroup.

Sure, do you know if there's a proper support TemplateStyles for mobile? I couldn't find anything in the help page.

Theres no magic here. You can use media queries in template styles, so mobile support= mobile styles by default and use media queries for the desktop view. For Minerva specific issues you can use:

body.skin-minerva

defined in-page, not in a template, nor remotely near any template, and relying on Common.css to provide the related CSS.

That's what this bug is about :). Those styles once defined in a template can be disabled on the wiki by disabling $wgMinervaTemplateHacks (mobile doesn't load Mediawiki:Common.css)

Clearing Mobile.css of TemplateStyles requires the same level of effort as cleaning Common.css, more-or-less. As I've described elsewhere and multiple times over, there are multiple cases (hlist, navbox, infobox classes as examples) where classes are being defined in-page, not in a template, nor remotely near any template, and relying on Common.css to provide the related CSS.

In the T228604: Clean up party of Mediawiki:Common.css at Wikimania 2019, we explicitly addressed your concerns, for example we explicitly say we should not move hlist or Make sure the class is only used in the fixed templates. Some times might copy and need the styles too..

Making the common.css or mobile.css completely empty has never been my intention. I'm focusing on reducing the size drastically but still keeping it as much as possible.

I have also requested feedback on how best to implement TemplateStyles for the metatemplates that we have, and no-one got back to me. I consider that discussion a blocker for moving the CSS for those items out. See this archived discussion with nary a single response.

I have no intention of moving navbar, infobox or sidebar out of common.css for now. I can't give a good answer for your question but I would recommend pining devs on this.

Theres no magic here. You can use media queries in template styles, so mobile support= mobile styles by default and use media queries for the desktop view. For Minerva specific issues you can use:

body.skin-minerva

All of TemplateStyles are wrapped around .mw-parser-output (T228604#5352013) for security reasons, so I think we can't use body there :(

All of TemplateStyles are wrapped around .mw-parser-output (T228604#5352013) for security reasons, so I think we can't use body there :(

Not if you start with body.class - this exception was added a while back and used in a few places. Referencing body will change the scope for this one use case. See T197617

All of TemplateStyles are wrapped around .mw-parser-output (T228604#5352013) for security reasons, so I think we can't use body there :(

Not if you start with body.class - this exception was added a while back and used in a few places. Referencing body will change the scope for this one use case. See T197617

oh cool. It wraps everything after that into mw-parser-output. That's good enough for our usecase.

This can't really happen until we have some kind of global templates. Without that this requires too much coordinate and is probably not a worth while use of our time.