edwardtufte / tufte-css

Style your webpage like Edward Tufte’s handouts.
https://edwardtufte.github.io/tufte-css/
MIT License
5.99k stars 459 forks source link

Improve styling on selected links #155

Open WesleyAC opened 4 years ago

WesleyAC commented 4 years ago

This commit makes several improvements to selected links:

This has been tested in Firefox and Chrome on Linux, and offers improvements on both (bringing it from nonfunctional on Chrome to functional but inconsistent with the operating system style, and from functional but inconsistent on Firefox to fully functional).

The reason that Chrome does not respect the system highlight style appears to be either a bug or an intentional choice - the rule is getting correctly applied, but Chrome has the incorrect definition for the "highlight" color.

Before:

Chrome: tufte-highlight-chrome-linux-old-crop

Firefox: tufte-highlight-firefox-linux-old-crop

After:

Chrome: tufte-highlight-chrome-linux-new-crop

Firefox: tufte-highlight-firefox-linux-new-crop

daveliepmann commented 4 years ago

Hey, thanks for digging into this. I think this is mostly an improvement, though behavior on macOS+Firefox is substantially worse for me:

Before

image

After

image

I see a slight improvement on Safari and significant improvement on Chrome, both macOS Catalina. This leads me to want to double-check that the mobile experience isn't affected. Could you please test on a mobile device?

I also haven't had my hands deep in CSS for a few years, so I'm unfamiliar with and I don't see authoritative documentation on highlight/highlightText. Could you point me to anything? One concern is that one W3C doc seems to say they are deprecated CSS2 system colors. It looks like Firefox could be using these differently because of their interpretation of forced-colors mode? (See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value and search for "System colors".)