Page MenuHomePhabricator

Migrate css rules in hacks.less into templates
Open, LowPublic

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


Version: unspecified
Severity: normal

Details

Reference
bz64578

Related Objects

StatusAssignedTask
OpenJdlrobson
ResolvedTgr
ResolvedAnomie
Resolvedtstarling
Resolvedcoren
ResolvedAnomie
StalledMhurd
ResolvedAnomie
ResolvedEsanders
ResolvedEsanders
Resolvedssastry
ResolvedAnomie
ResolvedCKoerner_WMF
Resolvedjhsoby
ResolvedTgr
DeclinedTgr
Resolvedcoren
ResolvedAnomie
ResolvedTgr
OpenNone
Resolvedssastry
ResolvedTgr
ResolvedTgr
ResolvedTgr
ResolvedDeskana
ResolvedCKoerner_WMF
ResolvedWhatamidoing-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
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 19 2015, 9:59 AM
Jhernandez triaged this task as Low priority.Aug 18 2015, 5:10 PM
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
Jdlrobson raised the priority of this task from Low to Normal.Jul 24 2017, 8:50 PM
Jdlrobson moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.
Jdlrobson moved this task from Backlog to Tracking on the MinervaNeue board.Aug 16 2017, 8:49 PM
Jdlrobson moved this task from Tracking to 3rd party support on the MinervaNeue board.
Jdlrobson edited projects, added MinervaNeue (3rd party support); removed MinervaNeue.
TheDJ added a subscriber: TheDJ.Aug 3 2018, 9:42 AM

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 Normal to Low.Thu, Aug 1, 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 added a comment.EditedThu, Aug 1, 8:59 PM

@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.

Izno added a subscriber: Izno.EditedFri, Aug 9, 5:46 PM

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
Jdlrobson added a comment.EditedSat, Aug 10, 11:24 PM

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 :(

Jdlrobson added a comment.EditedSun, Aug 11, 2:57 PM

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.