Page MenuHomePhabricator

TemplateStyles should allow for "mobile-only" styles
Closed, DeclinedPublic


MobileFrontend emits body content wrapped in a div#mw-mf-viewport element, which should be usable for styling in a way analogous to per-skin styling in T197617. Similar to the per-skin styling case, the #mw-mf-viewport selector should be moved to somewhere before the .mw-parser-output thing.

This change would allow for further replacement of Mobile{,FrontPage}.css by letting these things disperse into individual pages.

zh.wp sort of bumped into this issue in the main page template-style-ification process, see The basic story is that we are using the fact that MF does not load Common.css but only Mobile.css to do some differential styling, like everyone else is doing. Translating it into TemplateStyle is difficult since there is not an exact match for "mobile" pages -- the closest possible is skin-minerva, which is not generalizable to all MF deployments because MF can use other skins too.

Event Timeline

I think this is a valid use case, but I am not sure it has to be solved the same way it is currently being done in Mobile.css.

Rather than coding a template specifically for the MobileFrontend extension, it seems more appropriate to code it for a skin (e.g. skin-minerva, per T197617), and/or for a particular viewport size (@media).

That would make the template more maintainable in long-term, and also benefit users more widely instead of being limited to MobileFrontend. If the style in question is for Minerva, it can all users of Minerva (including those that use it on tablet or desktops). If the style in question is for narrow viewports, it can benefit narrow windows in the Vector skin as well ("responsive design").

Anomie subscribed.

To add to what @Krinkle said, I suppose a third case would be if you're trying to restyle some content hack that MobileFrontend applies.

IMO it would be better overall if those content hacks were to be phased out, but in the end that's not up to me. In the mean time, I'd say the best solution for targeting MobileFrontend's content hacks specifically would be to have MobileFrontend put an appropriate class on the body tag to indicate that it processed the page, rather than having TemplateStyles include a special case for an ID that MobileFrontend currently outputs.

Should allow for "desktop-only" styles

Media queries can be utilized to give you "desktop-only" and "mobile-only" styles. They can be used like this (we use this exact same mechanism for the existing mobile site):

.desktop-only {
  display: none;

@media all and ( min-width: 1000px ) {
    .mobile-only {
      display: none;
   .desktop-only {
      display: block;