Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve styling on selected links #155

Open
wants to merge 1 commit into
base: gh-pages
Choose a base branch
from

Conversation

WesleyAC
Copy link
Contributor

This commit makes several improvements to selected links:

  • Previously, the link selection style had both the -moz prefixed
    selector and the unprefixed selector in the same rule, breaking the
    rule for browsers that did not know about the -moz prefix (such as
    Chrome). This is fixed by removing the -moz prefixed version, since it
    is not needed on modern browsers.
  • Previously, the background color was set to #b4d5fe, but this is not
    the correct selection color for all platforms. This is fixed by using
    the "highlight" and "highlighttext" colors, to ensure that link
    selections look the same as the surrounding text.

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

This commit makes several improvements to selected links:

* Previously, the link selection style had both the -moz prefixed
  selector and the unprefixed selector in the same rule, breaking the
  rule for browsers that did not know about the -moz prefix (such as
  Chrome). This is fixed by removing the -moz prefixed version, since it
  is not needed on modern browsers.
* Previously, the background color was set to #b4d5fe, but this is not
  the correct selection color for all platforms. This is fixed by using
  the "highlight" and "highlighttext" colors, to ensure that link
  selections look the same as the surrounding text.
* Selection fixes are now applied to markup in links, as well as text in
  links - for instance, italicised or bolded links will look normal now.

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.
@daveliepmann
Copy link
Contributor

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".)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants