MinvervaNeue has been using for historic reasons[1] a fork of Erik Meyer's reset.
This has become seen as disadvantegous for a few reasons in contrast to normalize.css:
- normalize.css preserves useful defaults rather than "unstyling" everything.
- It corrects some common bugs that are out of scope for reset.css.
- It doesn't clutter your dev tools.
- It is more modular and can be broken down to the elements MinveraNeue wants to support
On top of normalize, we could also add some opinionated styles inspired by collections like sanitize.css and clearly mark them so.
[1]: Invented first to tame T42751 6 years ago.
Proposed change
Subtasks (and patches by @Volker_E; all of which are small) provide the split of the monster selector in more modular code. In a feature branch:
- Patches which split up code only
- Patches which add additional properties, inspired by normalize.css
Reading web will
- review and merge these all together and
- QA the changes in one go using this task
Acceptance criteria
- Unnecessary reset rules are removed (T217631) including for headings (T217626) and audio/video (T217629). Note video tag is not currently used in mobile site so risk here is negligible.
- The normalize feature has been added to the ResourceLoaderSkinModule.
- Table styles have been moved to a separate file tables.less and ordered by specificity (tracked in subtask T217620)
- Image styles are moved to images.less. Border reset is moved to links.less (tracked in subtask T217630)
- Form styles are moved out of the reset to more logical places (T217622)
QA steps
We are looking for visual regressions and should test on Firefox, iOS and Chrome.
We'll look at a variety of articles and compare production versions vs the versions on reading web staging. The suggested articles are:
- https://en.m.wikipedia.org/wiki/Barack%20Obama
- https://en.m.wikipedia.org/wiki/Qatar
- https://en.m.wikipedia.org/wiki/Donald%20Trump
- https://en.m.wikipedia.org/wiki/Pacific_tree_frog
- https://he.wikipedia.org/wiki/%D7%99%D7%A9%D7%A8%D7%90%D7%9C (you'll need a developer to update staging - Hebrew Israel page)
- https://en.m.wikipedia.org/wiki/Venezuela (audio)
Pay particular attention to the following:
- Tables and infoboxes look the same no visual regressions
- Images look the same, no regressions.
- Any font sizes that are different
- Any margins that are different
- Headings look same
- Thumbnails and audios look the same
In addition to this check for visual regression on the forms on the following special pages:
- Special:Watchlist
- Special:Userlogin
- Special:RecentChanges
- Special:Contributions
- Special:Search
and overlays:
- talk #/talk/new
- editor #/editor/0
- search #/search
Sign off steps
- Make sure all subtasks are merged.
