Hmmm. Does that mean we'll get dark mode now?
! Hacker News dark mode
news.ycombinator.com##html:style(filter:invert(90%) hue-rotate(180deg))
news.ycombinator.com##body:style(background: white)Maybe I could fund a startup for that…
The genius solution in there is probably this one:
@media (prefers-color-scheme:dark){body{filter:invert(1) hue-rotate(180deg)}}
const styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.textContent = "@media (prefers-color-scheme: dark) { html { filter: invert(1) hue-rotate(180deg); } }";
document.head.appendChild(styleElement);
This might be what we are up against:
On the home page the text that tells you who the poster is, how many upvotes and comments, etc, is gray text on a gray background, at 7pt font. Again, Firefox and Chrome scale this up to 9.33pt, which again, is too small for me to read comfortably on a 24 inch desktop monitor without zoom.
(I accept that 120% would be fine; that brings up the main font size to 14.4pt. Wikipedia seems to use 14pt and that's totally fine for me. But still, neither me nor the browser should have to scale up the website.)
Even at 130% zoom, on the home page I can see 20 posts at once. I understand complaints that reddit went too far in the other direction, but that doesn't mean they should throw accessibility out the window for this site.
Only if you've told it to. My Firefox settings have "Minimum Font Size" set to "None". Perhaps scaling up to 12px is a default? (Edit: Also, are you sure you're not thinking of 12pt? IIRC, points are DPI-independent units and (AIUI) the traditional way of specifying font sizes in computerized typography.)
Despite my age, I still have eyes that are good enough to easily read the font sizes you're complaining about. A hugely important part of a User Agent is that it provide overrides for site design choices that the Agent's user has decided will benefit them. It's a good thing that UAs let folks like you choose a minimum-possible font size. It's an equally good thing that UAs let folks like me choose to see the choices that designer made that others criticize.
To be clear, this is a confusingly- (and perhaps incorrectly-) worded way to say "At a given point size, a particular glyph from a particular font is supposed to be the same size on the output device, regardless of its physical size or number of pixels.".
Sheesh.
Things like colors, contrast levels, font sizes, are often matters of personal preference, and the browser (in theory) is the common place to manage those. Each site should not have to reinvent this feature.
This would send me into peals of laughter if I weren't already crying. The time to make this argument was 30 years ago, when the web wasn't fragmenting into a billion different pieces. The browser can make exactly zero assumptions about any given site, so it could never be a place where user preferences about them could be actionable. Downvoters should get work as web developers sometime. You really want the browser making assumptions about your web design?
All it can do is pass a header and let the website do what it will with it.
A user's custom style-sheet might be good for one web-site, but not for every website.
The original web was much about self-expression of developer-users, but now the web is all about apps, which must not break because a user might want to use different colors.
And why should you need to customize colors? I can understand that different users need larger fonts which you can do by zooming in the browser. Colors should be good to go if the website is well-styled to begin with.
What if it is not well-styled? Or, maybe some people think it is and others disagree and want something else. The end user should need to customize fonts (not only larger, but also if you want smaller fonts; I more often find the fonts on a web page are too big and want smaller fonts; however, also you might prefer a specific font typeface and not only the font size), colours (also for many reasons, including using a monochrome display or printer that the web page author might not have been aware of), animations (e.g. to disable them), margins, etc.
Pretty sure AI-driven style derivation will finally deliver the dream of custom stylesheets in a robust and automatic way.
That works today. No problem.
[role="button"] {
cursor: pointer;
}
Not sure what you mean. Between the new selector combinators and attribute selectors, you can do a ton. You also have style-based container queries, which are probably close to what you want.