Page MenuHomePhabricator

Scope and use of mediawiki.skinning's 'elements.less' file
Closed, ResolvedPublic

Description

Currently, MediaWiki core's 'elements.css' file is a mixture of skin-like styling, reset and normalize approaches.
Example, MonoBook and Vector (legacy and modern) load "elements.less" as of now.

It would seem preferable to me to reduce the shared styles between skins to the bare minimum in this file and leave decisions like layout in skins hand.

Wondering if integrating normalize.css in core makes more sense than using 'elements.css' as carrying module for normalizing rules.

Proposed action

  • The elements feature should only occur styles that style HTML tag elements and
    • this should be documented at the top of the file. Exceptions should be documented.
  • Clean-up outdated rules, especially ones that are reset.css inspired and follow a normalize.css / sanitize.css approach
  • Decide how to deal with skinning properties like color in the file – this is going to be covered by skin.variables in future.

Event Timeline

Change 606257 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] mediawiki.skinning: Order heading selectors and use normalized way

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

Change 606257 merged by jenkins-bot:
[mediawiki/core@master] mediawiki.skinning: Order heading selectors and use normalized way

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

@Volker_E what tangibly do you want to clean up here? How would you go about doing this for Monobook?

I see several options based on the desired output.

If the plan is to remove rules in resources/src/mediawiki.skinning/elements.css in favor of normalize, I think that can be done easily, by making the feature 'elements' in ResourceLoaderSkinModule also enable normalize.

If you want to split up elements into multiple modules, we can also do that making elements a shorthand for the new ones.

We can also deprecate elements as is if the goal is to get skins to copy across the rules they need.

Change 681488 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] Create the `content-links` ResourceLoaderSkinModule feature

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

Change 681488 merged by jenkins-bot:

[mediawiki/core@master] Create the `content-links` (and -external) ResourceLoaderSkinModule feature

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

@Volker_E what tangibly do you want to clean up here? How would you go about doing this for Monobook?

I see several options based on the desired output.

If the plan is to remove rules in resources/src/mediawiki.skinning/elements.css in favor of normalize, I think that can be done easily, by making the feature 'elements' in ResourceLoaderSkinModule also enable normalize.

We've had such question in a different context (normalize to interface) https://gerrit.wikimedia.org/r/c/mediawiki/core/+/609898 and decided against an automatism.
We should rather aim for good defaults in all Wikimedia deployed skins and Example skin what modules to enable.

If you want to split up elements into multiple modules, we can also do that making elements a shorthand for the new ones.

What's the point on this? elements is a good default module for all HTML tag elements specific overarching rules.
We shouldn't change only for change's sake.

We can also deprecate elements as is if the goal is to get skins to copy across the rules they need.

Same as above. Good overarching HTML tag elements module.

Patch above covers already most of the documentation part here!

@Jdlrobson The remaining rules not fitting into elements.less are

/* Emulate Center */
.center {
	width: 100%;
	text-align: center;
}

*.center * {
	margin-left: auto;
	margin-right: auto;
}

/* Small for tables and similar */
.small {
	font-size: 94%;
}

table.small {
	font-size: 100%;
}

I think we should move .center to 'deprecated/content-layout-legacy.less'.
And .small I don't have a great idea, as we currently don't feature general text style classes.

Change 684815 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] mediawiki.skinning: Move `textarea` rule to 'elements.less'

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

Jdlrobson claimed this task.

@Jdlrobson The remaining rules not fitting into elements.less are

/* Emulate Center */
.center {
	width: 100%;
	text-align: center;
}

*.center * {
	margin-left: auto;
	margin-right: auto;
}

/* Small for tables and similar */
.small {
	font-size: 94%;
}

table.small {
	font-size: 100%;
}

I think we should move .center to 'deprecated/content-layout-legacy.less'.
And .small I don't have a great idea, as we currently don't feature general text style classes.

I've created T282063 for this one, since it requires a bit more thought. My gut says this will require some community outreach.

Change 684815 merged by jenkins-bot:

[mediawiki/core@master] mediawiki.skinning: Move `textarea` rule to 'elements.less'

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