Usage of cutting-edge `:where` selector broken in old browsers

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I’m using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Button style css :where selector is experimental feature and broken in many browsers. Can reproduce by visit https://docusaurus.io/ in some old version browser, the “Get Started” and “Try a Demo” button style is broken.

And I checked the css file, seems no needs to use :where selector, change them to simple css selector can fix the issue.

:where(.button--primary) {
    --ifm-button-background-color: var(--ifm-color-primary);
    --ifm-button-border-color: var(--ifm-color-primary);
}

:where(.button--primary):not(.button--outline):hover {
    --ifm-button-background-color: var(--ifm-color-primary-dark);
    --ifm-button-border-color: var(--ifm-color-primary-dark)
}

:where(.button--secondary) {
    --ifm-button-background-color: var(--ifm-color-secondary);
    --ifm-button-border-color: var(--ifm-color-secondary)
}

:where(.button--secondary):not(.button--outline):hover {
    --ifm-button-background-color: var(--ifm-color-secondary-dark);
    --ifm-button-border-color: var(--ifm-color-secondary-dark)
}

See also: https://caniuse.com/?search=where

Reproducible demo

https://docusaurus.io/

Steps to reproduce

1. Visit https://docusaurus.io/ in chrome older than version 87, or other old version browsers
2. Check the button style

Expected behavior

Expect the Button style is same as the style show in latest browser.

Actual behavior

The Button style not work, no background color.

Your environment

• Public source code: N/A
• Public site URL: https://docusaurus.io/
• Docusaurus version used: 2.0.0-beta.21
• Environment name and version: the browser in Wechat, it seems based on an old version chrome.
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Android

Self-service

• I’d be willing to fix this bug myself.

[Josh-Cena]

If I understand you correctly—you are saying those that don’t have access to modern browsers and/or those that need to target ancient browsers are excluded from Docusaurus’ audience in the first place. Yes, that’s a fair point. But, what do we actually aim for?

1. Do we want to maximize user accessibility (in terms of browser compatibility)?
2. Do we want to maximize site creators’ DX (by making the CSS as easy to reason about as possible)?
3. Do we want to make the best optimizations (by stripping all “unnecessary” CSS like @supports queries)?

Docusaurus primarily goes towards (2) and (3). It doesn’t mean (1) is unimportant—but you have to look into the comparative. Most JavaScript bundle can still be downleveled, so this problem is very limited in scope and impact. Also, we have to do actual user portraits—how many users visiting Docusaurus websites are actually using outdated browsers? Are they our intended audience? Do we want to make these people happy at the cost of making CSS overriding harder and/or penalizing everyone with bigger bundles?

When I say “the actual Docusaurus users in China”, it’s not purely an a posteriori assertion. Docusaurus is not a general-purpose site builder—its design goals have naturally created a niche user base. Our main focus is on technical, or tech-oriented, documentation, intended for open-source projects and personal tech blogs. Keeping this goal in mind, we drew the conclusion that readers of the site are also those that are interested in technology. If you are using Docusaurus for a government landing page or service panel where your users can be on all kinds of devices, Docusaurus is probably not the best choice.

[Josh-Cena]

I think it happens in other countries as well—state-affiliated organizations are especially slow to migrate to modern IT infrastructure because of worries of security, legal issues, financing, politics, software compatibility, etc. (e.g. there are many British hospitals still using Windows XP + IE.) But these people have a particularly big share in the Chinese market.

Now, whether individuals fail to upgrade their browsers I don’t know, because the privilege I enjoy is probably disproportionate compared to most Chinese people. But from my observation, the actual Docusaurus users in China mostly work at Internet giants like Alibaba & ByteDance, and both site creators and users of these sites usually have access to modern browsers.