Page MenuHomePhabricator

Consider 'normalize' stylesheet RL module
Closed, ResolvedPublic3 Estimated Story Points

Description

Alongside T255717: Scope and use of mediawiki.skinning's 'elements.less' file we should consider a 'normalize' rule containing core stylesheet module that skins should integrate by default.

Already mentioned in T255717, we currently have several normalize-style rules, that should become part of a distinct module:

Selector rulelocation(s)
body { margin: 0; padding: 0; }Vector's normalize.less
main { display: block; }Needed for IE 9-11. Proposed specifically for html5 in I3e4abb5fc8e55b71
pre, code … { font-family: monospace, monospace; }elements.less
abbr[title] {}legacy.less
sup, sub { line-height: 1; }legacy.less
button, input { overflow: visible; }normalize.css library, but useful to consider
::-moz-focus-inner {}mediawiki.ui/buttons.less; UniversalLanguageSelector
legend {}elements.less; 'femiwiki / skin'; skins/BlueSky; skins/GamePress; skins/Greystuff; skins/Mask; skins/Splash; MobileFrontend

… and many more…

Proposal

Considerations

  • Keep scope lean and only to currently surfacing rules, we don't want to push rules and bytes down the client, which might be useful in the mid-future now
  • Hence orient on normalize.css, but only take the reasonable parts

Sign off steps

Create tasks for:

  • Remove specific 'normalize' rules from other places: 'elements.css', 'legacy.css' -> T255717, T89981
  • Reducing number of normalizing rules across skins, extensions (naming those extensions and skins) -> T205341

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 27 2020, 12:54 AM

Change 608113 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] mediawiki.skinning: Add 'normalize' module and 'normalize.less'

https://gerrit.wikimedia.org/r/608113

Demian updated the task description. (Show Details)Jun 27 2020, 2:03 AM
Demian added a subscriber: Demian.

This reminded me of https://gerrit.wikimedia.org/r/c/mediawiki/core/+/110908 (Add normalize.css as an available resource), which was declined back in 2014. I don't know whether those comments are relevant to this or not.

Mainframe98 added a subscriber: Mainframe98.

@Legoktm Thanks for the pointer, vaguely remembering reading through the comments in 2014-15:
There were two different questions discussed:

  1. Do normalize style rules belong into core
  2. Does normalize as external component suffice core's requirements to be added as library

For 1. I highly recommend adding basic, fine-tailored normalization rules to MediaWiki output (with skin requirements, Parsoid limitations taken into account). We have front-end within core like the installer, like special pages output based on HTMLForm. All these would profit from cross-browser consistent rendering.
Additionally, we've got skin authors (/gadget writers) who have to reinvent the wheel every time they start a skin, leading to lots of code duplication for the most minimal MediaWiki-delivered output). With fine-tailoring we can keep the code lean and in one central place acting to new developments or changes in our browser support

For 2. not including an external library that has for example decided to leave IE 8 out of the game two years ago, or that adds every HTML element out there like template it doesn't make sense to be fully included in all its scope. Fine-tailoring to MW core a similar solution with it as orientation point but not initial implementation seems most reasonably.

ovasileva triaged this task as High priority.Jun 30 2020, 10:06 AM
ovasileva set the point value for this task to 3.Jun 30 2020, 5:32 PM

Change 608113 merged by jenkins-bot:
[mediawiki/core@master] mediawiki.skinning: Add 'normalize' module and 'normalize.less'

https://gerrit.wikimedia.org/r/608113

Change 609898 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] mediawiki.skinning: Add 'normalize' to 'interface' module

https://gerrit.wikimedia.org/r/609898

Volker_E updated the task description. (Show Details)Tue, Jul 7, 4:45 AM

Change 609901 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/Example@master] Use 'normalize' module from 'mediawiki.skinning'

https://gerrit.wikimedia.org/r/609901

Change 609903 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MonoBook@master] Use 'normalize' module from core's 'mediawiki.skinning'

https://gerrit.wikimedia.org/r/609903

Volker_E updated the task description. (Show Details)Tue, Jul 7, 5:47 AM
TheDJ added a subscriber: TheDJ.EditedTue, Jul 7, 7:35 AM

That list of various stylesheets in the description triggers me. Be careful with rework in this area. Remember that some of these are mostly content rules (sup and sub for instance), and some content doesn't have a skin (parsoid, api parse, etc). So if you move those lines from content-only stylesheets to skin stylesheets, you might unintentionally break something.

Jdlrobson updated the task description. (Show Details)Tue, Jul 7, 5:18 PM
Jdlrobson updated the task description. (Show Details)Tue, Jul 7, 7:28 PM

I echo @TheDJ here and would recommend dropping the " Remove specific 'normalize' rules from other places: 'elements.css', 'legacy.css'" into a separate task. I've mentioned this a few times before, but these really should be considered frozen in my eyes, so I think there's a bigger conversation here.

I would also not make the change to Monobook. There seems to be little gain in doing that there for the sake of the removal of 2 rules.

Change 609901 merged by jenkins-bot:
[mediawiki/skins/Example@master] Use 'normalize' module from 'mediawiki.skinning'

https://gerrit.wikimedia.org/r/609901

Change 609903 merged by jenkins-bot:
[mediawiki/skins/MonoBook@master] Use 'normalize' module from core's 'mediawiki.skinning'

https://gerrit.wikimedia.org/r/609903

Jdlrobson updated the task description. (Show Details)Tue, Jul 7, 9:51 PM
Jdlrobson closed this task as Resolved.Thu, Jul 9, 9:34 PM
Jdlrobson updated the task description. (Show Details)