Page MenuHomePhabricator

Omit `<link rel="mw-deduplicated-inline-style">` from page view HTML
Open, Needs TriagePublic

Description

From T168333: CSS is duplicated on each template usage.

For the deduplicated styles, do we really need the <link> tags? Couldn't we completely remove the tag?

It doesn’t do anything bad to keep them, the only thing that might be interested in removing them is probably mobile version (since every byte seems to count there).

I don't see any particular reason to do this specifically in MobileFrontend. More generally, this is a matter of distinguishing between canonical HTML and presentation mode.

When editing in VisualEditor, or when rendering partials of pages on mobile web or mobile apps, it is important that the client can keep the stylesheet around, even if it removed the section it was a part of, as long as there is another section that had a reference to it. Likewise, when a section if viewed without any references to that template, it can be omitted.

However, for page views as output by a skin (Vector, Minerva, MobileFrontend), they are indeed not needed. It seems like this falls in the same category as a lot of Parsoid attributes not needed that we strip on rendering. Except this is the first (obvious) instance of such concept for the PHP parser output.

Event Timeline

Krinkle created this task.Jul 23 2018, 3:11 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 23 2018, 3:11 PM
Anomie added a subscriber: Anomie.Jul 23 2018, 3:14 PM

I note TemplateStyles has no control over this, the code doing it lives in core.

Od1n removed a subscriber: Od1n.Jul 23 2018, 3:49 PM
Tgr added a subscriber: Tgr.Jul 23 2018, 6:54 PM

Should we create a hook for post-processing rendered HTML, called with different arguments in canonical and presentation mode? (Although not sure what is canonical in this case? action=render?)

Can't the <style> tags be moved to some centralized place altogether? Their scattered presence in HTML causes problems like mentioned here, in T186965 and in T200704 (I opened the last task just recently).

Tgr added a comment.Jul 30 2018, 9:32 PM

They could but it would probably negatively impact time to first paint.

Pikne added a subscriber: Pikne.Aug 15 2018, 11:42 AM

I came across another use case where omitting <link/> could be desirable. English Wikipedia has style .navbox+.navbox{margin-top:-1px} that merges borders for adjacent boxes {{navbox}}{{navbox}}. Using <templatestyles/> at the top of this template, before <div class="navbox">...</div> that the content is enclosed in, however ensures that given style is not applied since <link/> sits between the boxes.

Can't the <style> tags be moved to some centralized place altogether?

That was considered during discussion of T155813: Decide on storage and delivery method for TemplateStyles CSS, but was rejected for client-side performance reasons: the one centralized place would have to be before all the content, which would mean that clients would have to download all the styles before getting to the actual content.

I came across another use case where omitting <link/> could be desirable. English Wikipedia has style .navbox+.navbox{margin-top:-1px} that merges borders for adjacent boxes {{navbox}}{{navbox}}. Using <templatestyles/> at the top of this template, before <div class="navbox">...</div> that the content is enclosed in, however ensures that given style is not applied since <link/> sits between the boxes.

You could move the <templatestyles> tag to just inside the <div class="navbox"> (a noticeable FOUC seems unlikely to me since it'd just be an unstyled div, although I'm no expert on FOUC), or you could change the style rule to .navbox + link + .navbox.

[...] or you could change the style rule to .navbox + link + .navbox.

This might be a use case for the general sibling combinator, which would look like .navbox ~ .navbox.

stjn added a comment.Aug 15 2018, 3:46 PM

You could move the <templatestyles> tag to just inside the <div class="navbox"> (a noticeable FOUC seems unlikely to me since it'd just be an unstyled div, although I'm no expert on FOUC), or you could change the style rule to .navbox + link + .navbox.

Just in this case it is also preferred because without this navbox will be removed from mobile view, but its styles will still be loaded. (But in other ones, it is a sound argument for removing these tags.)