mediawiki-skins-MinervaNeue/adr/0003-reduce-support-for-browsers-that-do-not-support-css-variables.md

# 1. Reduce support for browsers that do not support CSS Custom Properties

Date: 2024-02-01

## Status

Accepted.

## Context

In order to develop night mode in a sustainable and performant way, the Web team
decided to use CSS custom properties for all colors in the Minerva skin. This
allows us to develop night mode by simply changing CSS custom property values.

## Decision

we will reduce support for browsers that do not support CSS custom properties,
most notably Opera Mini.

According to caniuse the main browsers this impacts are IE11 and Opera Mini:
https://caniuse.com/css-variables

According to https://github.com/Fyrd/caniuse/issues/3883 CSS variables are not
available only in its non-default "extreme mode".

According to the following stats:
https://analytics.wikimedia.org/dashboards/browsers/#mobile-site-by-browser
Opera Mini represents **0.1%** of traffic to the mobile site. Given this tiny
percentage of traffic, the maintenance and performance cost of providing a
fallback for older browsers is deemed too high (since it would involve
increasing the CSS payload to the remaining 99.9% of users).

## Consequences

Browsers like IE11 and Opera Mini will degrade gracefully into a reduced color
experience. Colors will fallback to the default user-agent stylesheet so links
will be blue, text will be black and background colors will be white. Although this
will be a grade C experience, it will still provide adequate legibility and
accessibility for basic functionality (i.e. reading).
Convert all color related Less variables to CSS custom properties All colors used in Minerva are converted from Less variables into CSS custom properties. A new file called CSSCustomProperties.less is created in the skins.minerva.base.styles module to store these custom properties and an ADR is provided on the rationale for dropping support for browsers that don't support custom properties. The new CSS custom properties follow Codex design token conventions where possible (and noted when not). Link colors are unique because their styles are defined in core, so in that case the Less variables values are set to custom properties. Those values are then fed back into MediaWiki core for core link styling. Also adds a temporary night-mode color palette under the .skin-nightmode-1 class on the <html> element. Bug: T356074 Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff 2024-02-01 17:33:08 +00:00			`# 1. Reduce support for browsers that do not support CSS Custom Properties`

			`Date: 2024-02-01`

			`## Status`

			`Accepted.`

			`## Context`

			`In order to develop night mode in a sustainable and performant way, the Web team`
			`decided to use CSS custom properties for all colors in the Minerva skin. This`
			`allows us to develop night mode by simply changing CSS custom property values.`

			`## Decision`

			`we will reduce support for browsers that do not support CSS custom properties,`
			`most notably Opera Mini.`

			`According to caniuse the main browsers this impacts are IE11 and Opera Mini:`
			`https://caniuse.com/css-variables`

			`According to https://github.com/Fyrd/caniuse/issues/3883 CSS variables are not`
			`available only in its non-default "extreme mode".`

			`According to the following stats:`
			`https://analytics.wikimedia.org/dashboards/browsers/#mobile-site-by-browser`
			`Opera Mini represents 0.1% of traffic to the mobile site. Given this tiny`
			`percentage of traffic, the maintenance and performance cost of providing a`
			`fallback for older browsers is deemed too high (since it would involve`
			`increasing the CSS payload to the remaining 99.9% of users).`

			`## Consequences`

			`Browsers like IE11 and Opera Mini will degrade gracefully into a reduced color`
			`experience. Colors will fallback to the default user-agent stylesheet so links`
			`will be blue, text will be black and background colors will be white. Although this`
			`will be a grade C experience, it will still provide adequate legibility and`
			`accessibility for basic functionality (i.e. reading).`