Little snippet that inserts buttons at the top of the page so you can toggle the stylesheet there between these w3.org sheets:

  (function() {
    const sheets = [
      'https://www.w3.org/StyleSheets/Core/Oldstyle.css',
      'https://www.w3.org/StyleSheets/Core/Modernist.css',
      'https://www.w3.org/StyleSheets/Core/Midnight.css',
      'https://www.w3.org/StyleSheets/Core/Ultramarine.css',
      'https://www.w3.org/StyleSheets/Core/Swiss.css',
      'https://www.w3.org/StyleSheets/Core/Chocolate.css',
      'https://www.w3.org/StyleSheets/Core/Traditional.css',
      'https://www.w3.org/StyleSheets/Core/Steely.css',
      './mvp.css',
    ];

    const div = document.createElement('div');
    const head = document.querySelector('head');
    sheets.forEach(url => {
      let button = document.createElement('button');
      button.onclick = () => {
        // Remove all stylesheets
        let stylesheets = document.querySelectorAll('link[rel="stylesheet"]');
        stylesheets.forEach(el => el.parentNode.removeChild(el));

        // Insert our new sheet (<link rel="stylesheet" href="file.css">)
        let link = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('href', url);
        head.appendChild(link);
      };

      button.innerText =
        url === './mvp.css'
          ? 'Original MVP.css'
          : url.replace('https://www.w3.org/StyleSheets/Core/', '');
      button.setAttribute('style', 'cursor: pointer');
      div.appendChild(button);
      div.appendChild(document.createTextNode(' '));
    });

    // Insert buttons into DOM
    document.body.insertAdjacentElement('afterbegin', div);
  })();

They also have a preview sampler[1]

[1]: https://www.w3.org/StyleSheets/Core/preview.html

It never fails to amaze me that I've been doing this for a decade, and I keep learning things that seem basic at first glance. I have literally never heard of this at all.

Right? All of the starting from scratch I've done! All of the projects I've put off because style is one of the first things I've have to decide on (e.g. blogs).

Classics right there! We've got a long linage of this kinda stuff now from browser resets to full stylesheets to well specified content just for testing any of the above on. I love it! Simple. Consistent. And now more powerful than ever with the help of variables.

Might be fun to take all the w3 core styles rebuild them with modern CSS features. Maybe add some HTML5 elements to the test docs as well.

Yes, it feels somewhat natural to craft this kind of style sheet. As I've just found out [1], there is even more of those than I'd expect.

[1] @dohliam's excellent "Drop-in Minimal CSS" collection mentioned here https://news.ycombinator.com/item?id=22683281

I remember, when Firefox still had a menu bar, you could actually select a different named stylesheet from within the browser! It was in the edit menu.

Firefox (on Windows) never lost the menu bar: if you press F10 or Alt (or Alt+some letter from menu) it will pop from top. Style switcher you are referring to is located in View > Page Style, in English localization quickly accessible by Alt+V,Y. You can choose from "No style" (effectively disabling all author level styles) and "Basic Page Style" (enabled author styles). If you are lucky and stumble upon page with linked alternate style, you can still switch to it.

https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative... https://developer.mozilla.org/samples/cssref/altstyles/index...

The last detail this nice feature lacks to this day and that presumably doomed it to current obsolescence is that your choice does not persist during navigation and even page reloads. Never understood why this native switcher stuck half way to be usable. Back in day alternative style sheets were (at least a bit) "hype" author had to recede to JavaScript solutions to provide persistence, so it lost much of its charm.

Speaking of ancient CSS features that looked overwhelmingly promising but never caught up as successfully as they deserved, it is probably worth mentioning User Styles. CSS was initially meant as a "dialogue" among User Agent, User, and content Author, with styles as a tool to express individual preferences. User agent sets some "browser defaults", Author sets their styles and User can participate with their own sets of preferences that can be "weak" like those defaults or even stronger than author's. It is the (or at least mayor part of) "THE 'C' for 'Cascade' in CSS".

Browsers to this days are required by specs to give user a way to participate in the cascade, but it never wasn't easy or even pleasant experience - it mostly involved editing some magic file and restarting browser (for "native" user styles) or using some extension, what feels like a poor excuse to not support it natively and mostly is implemented an a way that does not comply with specs anyway - because it mostly just spams author origin level and does not create user origin level. (I miss the old days when web was young and "userstyles" and "userscripts" seemed like natural development of tech what every user will use daily.)