Page MenuHomePhabricator

Promote `rem` technical requirements across themes
Open, Needs TriagePublic

Description

Goal

In order to use rem for extensions and external libraries like Codex in a predictable manner, we need to ensure to have themes follow the same code approach.
Browser support for rems is wide enough to fulfill our Basic supported browsers.

Acceptance criteria for Done

  • Ensure that all Wikimedia deployed skins don't touch root element html in CSS being equivalent to 16px (they can still do whatever they want on body)
  • Be outspoken about this on theming documentation on mw.org
  • Write a message to wikitech-l, that we're starting using rems in various places and independent skin authors should follow above rule

Event Timeline

Let's assume we're building Codex on a browser default of root 16px equivalent and make it responsively cater to usability best practices on desktop a 32px default interaction target and on mobile/touch a 44px target via Codex breakpoints.
If we use rems and OldBook theme decides to go for a unusable 10px default, we would throw out all best practices and user sees miniscule components. This isn't ideal for our users.
Is it different from using ems? Not so much, only more predictable in rendering (think inherited style rules).

Still not the path that I'd suggest for rem usage in Wikimedia deployed skins.
In order to refrain from facing issues from untested and unintended interface consequences raised by volunteers unfamiliar with relative interface sizing.

I'd conclude to ensure that all Wikimedia deployed skins don't touch root element html in CSS in order to remain equivalent to 16px. Themes should just stick to the standard size on root.

One concern to take into consideration is how to deal with MediaWiki as platform, with external skin authors, how to tackle and communicate a possible unification like html { font-size: 100% } [or html { font-size: 62.5% }.