Topic on Extension talk:TemplateStyles

Handling desktop and mobile CSS

5
Sakretsu (talkcontribs)

If I'm not missing something, at the moment there is no way to directly prevent TemplateStyles from affecting both mobile and desktop versions. But let's say there is some CSS for desktop which could be loaded only on pages transcluding a certain template: would it be appropriate to wrap <templatestyles src="..." /> in a tag span with "nomobile" class or would it still be better to keep the CSS in MediaWiki:Common.css?

Jdforrester (WMF) (talkcontribs)

You're meant to use @media selectors, I believe.

Martin Kraft (talkcontribs)

I guess he is not taking about media queries but about skin-specific CSS?! We 've already discussed this issue on Phabricator and agreed on a solution, that should be in production right now.

Sakretsu (talkcontribs)

No, the topic is about how to target only desktop through TemplateStyles. Am I supposed to write @media (min-width: 1025px)? Is that accurate? Also, correct me if I'm wrong: this way the CSS won't load for mobile users who sometimes switch to the desktop version.

Tgr (WMF) (talkcontribs)

There's no way to target anything with TemplateStyles in the sense of selectively loading/not loading the CSS, since it is part of the page. (MobileFrontend splits the page cache so technically it could be done, not sure how much of a use case there is for it, though.) If you want to target the non-mobile site, see the linked Phabricator task. If you want to target non-mobile devices (not quite the same thing - you can visit the desktop site on mobile and the mobile site on desktop), something like @media (min-width: 1025px) would work, yeah.

Reply to "Handling desktop and mobile CSS"