For those that are unaware: Firefox still supports alternative style sheets [0]. Unfortunately it's pretty well hidden, and I think it's unsupported by other br

For those that are unaware: Firefox still supports alternative style sheets [0]. Unfortunately it's pretty well hidden, and I think it's unsupported by other browsers. One of the things I love about this feature is that it gives users the choice. It's a damn shame that CSS System Colors [1] was deprecated. There's also System font values [2], even if it's barely used. I really like my system styles and I wish more web services could use similar element sizes and colors. A few years back using the system font for UI elements started to gain a bit of popularity [3] [4]. WebKit even added improved support for using system fonts in web content [5], although I don't know what state that's in. I understand that exposing more system information can be used for fingerprinting, but why can't I be the one to decide what information I expose? You could expose standard color values by default and allow me to whitelist trusted websites to access real system styles. I've thought about this a bit, and I wish websites could have different "modes" which you could switch to. I think it would make it much easier to develop and design websites that target devices with drastically different requirements. You usually want a desktop mode which is designed for use with a keyboard and mouse, and a mobile mode which is designed for use with a touch interface. The closest thing we have is the "desktop mode" switch on mobile browsers, but I think that depends on user-agent sniffing which is incredibly hacky. I'm typically not a fan of mobile first designs, since it usually leads to a worse experience for desktop users. Using media queries with viewport size break points is usually not what you want. For example, sometimes I want to reference some API docs so I'll resize the window to be incredibly narrow and place it next to my editor. Tons of websites take this narrow screen size to mean that I'm on mobile and drastically blow up the size of the text and UI elements, causing me to lose my position in the document. This is incredibly frustrating. Things are improving, though. Now you can use CSS media feature tests to check if the user has a pointing device [6] and if they can hover over elements [7]. Although I still think designing a website that handles all variations well is nigh impossible. Even worse, these values cannot be changed by the user! For example, imagine an advanced image editing app meant for use with a mouse. If I'm on mobile the browser could let me interface with it by providing a virtual trackpad. It might not be a great experience, but if the operation I'm doing is really simple it might be enough. I think I'd prefer it if you could use a link tag to expose different versions of the same document, and allow the user to chose which version they prefer. Aside from providing a desktop and mobile version you could also link to an API or data view which is designed for easier consumption by computers. Another neat use for this could be to provide EPUB or PDF links for online books; you can keep reading the online version or download the full version for later. [0] https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative... [1] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#System_Colors https://developer.mozilla.org/en-US/docs/Web/CSS/color_value... [2] https://developer.mozilla.org/en-US/docs/Web/CSS/font#System_font_values https://developer.mozilla.org/en-US/docs/Web/CSS/font#System... [3] https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ https://www.smashingmagazine.com/2015/11/using-system-ui-fon... [4] https://css-tricks.com/snippets/css/system-font-stack/ https://css-tricks.com/snippets/css/system-font-stack/ [5] https://webkit.org/blog/3709/using-the-system-font-in-web-content/ https://webkit.org/blog/3709/using-the-system-font-in-web-co... [6] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer https://developer.mozilla.org/en-US/docs/Web/CSS/@media/poin... [7] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hove...