The color and underlining is older browsers are not the same as in newer browsers. They are not coherent with the Wikimedia user interface.

In T380345#10893713, @Aklapper wrote:

In T380345#10887792, @Xeverything11 wrote:

Maybe we can patch this issue for master branch and MediaWiki 1.43.2?

Why? Which underlying problem is created by links having a different color and being underlined?

It seems it also affects the latest stable version of MediaWiki (1.43.1). I tested on Miraheze Meta (MinervaNeue, running MW 1.43.1) on Chrome 81, see screenshot below. Given I already tested Safari 13 (Grade A) today on Wikipedia, it also happens on Chrome/Edge <88, Firefox <78 and Safari <14 due to :where() selector.

I did a bit of investigation in the link styling. It appears that the links use :where() selector, which is not supported in Chrome/Edge <88, Firefox <78, and Safari <14, which the latter is a Grade A browser. In these older browsers, the CSS link styling is not applied and therefore the links render the default browser styling (that is, blue [#0000ff] underlined).

Just tested on Safari 13 on macOS Catalina on LambdaTest. On Safari 13, which is a Grade A browser, links appear underlined and a different shade of blue.

Just tested on Safari 13 on macOS Catalina on LambdaTest. On Safari 13, which is a Grade A browser, there is no spacing between the footer icons.

MediaWiki 1.35 is unsupported since December 2023.

• Safari 11.x: 0.016%
• Safari iOS 11.x: <0.02%

A batch of new versions of AndroidX libraries have released today (in June) and they drop support for minSdk 21-22, therefore we have to increase minSdk for all WMF apps for Android from 21 (Android 5.0 Lollipop) to 23 (Android 6.0 Marshmallow) to go along with them.

Safari 11.1 (macOS) and 11.3-11.4 (iOS) only account for 0.02% of market share, according to CanIUse.

ES2018 RegEx features require Safari 12+, so we have to increase Grade A Safari requirement from 11.1 to at least 12 before implementing ES2018.

CSS flexbox is supported in Safari 9+, but gap in CSS flexbox is only for Safari 14.1+, so we can keep the CSS flexbox and remove gap in .footer-icons class. We can instead add margin-left: 16px to its children, .footer-icons li. margin-left CSS property is supported in all versions of Safari (1+).

This is for MinervaNeue skin not Vector 2022.

Safari 11.1 and later are Grade A browsers.

A notice at the top of the app on devices running Android 5.x Lollipop reading:

As of June 2025, some of AndroidX libraries will be dropping support for API levels 21 and 22 (Android 5.0-5.1 Lollipop).

It is clearly out of scope. Our Phabricator is for discussing technical requests and issues about Wikimedia projects and MediaWiki software.

Closing as out of scope.

I have added affected operating systems

I have updated browser versions to be within 7 years.

I tested on a Samsung device running One UI 6.1.1 (Android 14).

In T382576#10419768, @Aklapper wrote:

In T382576#10418541, @Xeverything11 wrote:

Yes, this change is good as it makes the CSS font stack coherent with operating systems' fonts.

And I wrote that I don't see why WIkipedia should spend resources trying to keep up with custom system font changes out there, especially if it only affects a single browser (Firefox) if I understand correctly.

(and only 21 bytes added!)

Additionally, prepending "One UI Sans APP VF" font only takes about a minute, so it doesn't take a lot of time.

Let's explain further about the proposed font stack:

• One UI 6+ (Firefox only) - will be One UI Sans APP VF
• Safari and Firefox on macOS, and all iOS browsers - fallback to -apple-system because One UI Sans APP VF doesn't exist
• Chromium browsers on macOS - fallback to BlinkMacSystemFont because above fonts don't exist
• Windows Vista and later - fallback to Segoe UI because above fonts don't exist
• One UI 6+ (Chromium) / 5- (all browsers) / other Android - fallback to Roboto because above fonts don't exist
• The following fonts: Inter, Helvetica, Arial, sans-serif; only exists when above fonts don't exist

Yes, this change is good as it makes the CSS font stack coherent with operating systems' fonts.

The proposed order would be:

• One UI Sans APP VF (Samsung One UI 6+, Firefox for Android)
• -apple-system (Safari, Firefox iOS/macOS)
• BlinkMacSystemFont (Chrome macOS)
• Segoe UI (Windows)
• Roboto (Android)
• Inter
• Helvetica
• Arial
• sans-serif

Behavior in handling backdrop-filter in divs

User agent: "Mozilla/5.0 (Linux; Android 4.4.2; Android SDK built for x86) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Mobile Safari/537.36"

As I mentioned, backdrop-filter supports Chrome 76+ so it should work fine on Chrome 81, see screenshot 2. But it didn't, as in Screenshot 1

backdrop-filter is supported on Chrome 76+.

TLS 1.3 is not as big of a issue for Android as with iOS.
Chrome 71 and Firefox 68 (both released 5 years ago) are compatible with Android 4.1 and above. These browsers support TLS 1.3.
Android 4.1 is 12 years old. However, iOS Safari 10-11, which are 7-8 years old, don't support TLS 1.3. Apple only managed to implement TLS 1.3 in iOS Safari 12.2, which is six years old.

I mentioned that CSS Grid Layout and #rrggbbaa/#rgba hex notation need this version bump. Both are very useful.

I clarified that TLS 1.3 supports Safari macOS 12.1+ (on macOS Mojave and later) and Safari iOS 12.2+.

Let's give a update to market share:

• Chrome 49: 0.02%
• Chrome 50: 0.01%
• Chrome 53: 0.01%
• Chrome 56: 0.02%
• Chrome 66: 0.02%
• Chrome 69: 0.08%
• Firefox 52: 0.04%
• Firefox 56: 0.01%
• Safari 12.1: 0.01%
• Safari 13.1: 0.06%
• Safari iOS 10.2: 0.01%
• Safari iOS 10.3: 0.04%
• Safari iOS 11.2: 0.16%
• Safari iOS 11.4: 0.01%
• Safari iOS 12.1: 0.01%

TLS 1.3 is also available in Safari 12.1 and later. Full support in macOS Mojave and later, and iOS.

Additionally, MediaWiki would feature new CSS features as time progresses.

Timeframe is useful as market share for older versions of browsers drop as time progress.

#rrggbbaa hex color notation is very useful as it is easier to create translucent colors which having to resort to rgba(). Let's say if you want to create green color with 60% opacity, you only need to type #00800099 instead of rgba(0, 128, 0, 0.6). It uses nine bytes instead of 20, so it can use less data. Additionally #RGBA is even smaller, at only 5 bytes.

Here are the new HTML/CSS properties when going from Chrome 49/Safari 10/Firefox 49 to last 7 years' versions.

Chrome and Firefox for Android can be updated through Play Store.

• Android 5, released in 2014, supports up to Chrome 95 (released in 2021) (3 years old) as well as the latest version of Firefox (2024)
• iOS 14, released in 2020, supports only Safari 14, also released in 2020.

• Safari iOS 14: 0.38% of Safari iOS users (0.08% of all)
• Safari iOS 12: 0.5% of Safari iOS users (0.1% of all)
• Safari iOS 11, 13: <0.1% of Safari iOS users (<0.02% of all)