[go: nahoru, domu]

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

[css-pseudo-4] Add a highlight pseudo-element for scroll-to-text #5522

Closed
chrishtr opened this issue Sep 16, 2020 · 7 comments
Closed

[css-pseudo-4] Add a highlight pseudo-element for scroll-to-text #5522

chrishtr opened this issue Sep 16, 2020 · 7 comments

Comments

@chrishtr
Copy link
Contributor

Text fragments are a feature that encodes a textual query into the document into the URL. When loading a page, the browser scrolls to the text that matches the query and highlights it.

This issue is a breakout from issue #5233 to consider adding a pseudo-element for this use case. The specific proposal is to add a pseudo-element called ::text-fragment-match that allows the developer to style the match's color, background, and a few more properties. The exact list and matching mechanism would be the same as for ::selection, ::spelling-error, etc. The same considerations would come into play for this highlight as for the other ones, such as integration with various browser modes like forced colors and dark mode.

Text fragments are currently implemented in Chromium browsers. For concrete reference existing UI works as follows:

  1. Page loads and renders
  2. Page scrolls to the fragment match, and highlights it with a background color that is the same as the Chromium find-in-page UA feature's non-active match (*) color (currently yellow). If that find-in-page color changes in different modes of the browser, the fragment match color should also already be changing to match it
  3. The highlight is removed instantly if the user taps or clicks on the page. There is no animation
    (example link)

(*) Chromium find-in-page has two highlight colors: the active match and the non-active match. If there are multiple matches to the user's find-in-page query, then one of them is considered active at a time, and the user can use the mouse or keyboard to iterate between them.

In earlier CSSWG discussion, we concluded:

  1. The WG is interested in adding a feature to allow customizations of such highlights
  2. Text fragments seems a simpler situation than find-in-page, since find-in-page UIs vary widely across browsers

There were also questions raised about whether there are animations or other complexities in browser UIs to take into account (answer: currently no for Chromium). It may also be likely that the current UI of Chromium sticks long-term, because the highlight is an externally injected UI that is not provided by the page itself, and therefore the browser must use a UI that is most compatible with existing site behaviors (spell check underlines also have a simple, non-intrusive UI affordance, presumably for a similar reason). A simple highlight meets that criterion.

@frivoal (and others) WDYT? Based on the above do you think there are other considerations to take into account for the specific case of basic text-fragment highlighting?

@chrishtr
Copy link
Contributor Author
chrishtr commented Oct 7, 2020

Hearing no other comments, my proposed resolution for today is:

Add a pseudo-element called ::text-fragment-match that applies to the content highlighted by navigations with text fragments. Styling on the new pseudo-element will have the same restrictions as other highlight pseudo elements. No addition to the UA style sheet would be made (meaning the default color is UA-defined).

To spell it out, the restrictions are that color, background-color, cursor, caret-color, text-decoration, text-shadow, stroke-color, fill-color, and stroke-width would be allowed; every other CSS property would be ignored.

@fantasai
Copy link
Collaborator
fantasai commented Oct 7, 2020

If I'm understanding correctly, this is basically like the :target element, except it's a pseudo-element, right?

In that case maybe ::target-text would be a better name?

@chrishtr
Copy link
Contributor Author
chrishtr commented Oct 7, 2020

If I'm understanding correctly, this is basically like the :target element, except it's a pseudo-element, right?

::target-text sounds pretty good, I hadn't thought of that. :target is the element matching a fragment anchor id, and then ::target-text would be the same but for text fragments.

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed [css-pseudo-4] Add a highlight pseudo-element for scroll-to-text, and agreed to the following:

  • RESOLVED: Add target-text pseudo element
The full IRC log of that discussion <dael> Topic: [css-pseudo-4] Add a highlight pseudo-element for scroll-to-text
<dael> github: https://github.com//issues/5522
<dael> chrishtr: Discussed other use cases. This is specifically text fragment feature. Verified exact chrome behavior. Page loads, scrolls highlights. When you click highlight dismisses. Prop is new pseudo-element to color highlight for the site
<florian> q+
<dael> chrishtr: Suggested target-text name from fantasai which is analogous to target pseudo class which lets you style anchor in URL
<dael> chrishtr: Same way text fragments extend fragment concept this is related so good name
<astearns> ack florian
<TabAtkins> +1 to name suggestion
<dael> florian: You said the highlight is shown until click. When it is dismissed is it instant?
<dael> chrishtr: Yes
<dael> florian: So no fading so do't have to worry
<dael> chrishtr: Yes, investigated and it's instant
<dael> astearns: Prop: Add a target-text pseudo element with behavior as described in the issue
<dael> fantasai: Wouldn't over-prescribe behavior but have it things you spec are honored and rest match UA
<dael> chrishtr: Sayign we don't have to restrict like we did for spelling?
<dael> fantasai: Example if UA has a fade-out on the color styling shouldn't make it go away, jsut fade out your color. Or some other effect make it so you're able to style css
<dael> fantasai: [missed]
<dael> florian: Valid but applies to all highlight pseudos. As a mech if UA wants to fade go ahead on any of them
<dael> fantasai: Like UA might fade ::selection and that's fine
<dael> heycam: Might be a little strange :target styles remain and it's still in the URL
<dael> fantasai: If UA wants to continue highlighting that's okay. Controlling that is different porject. For :target author has added but in this case browser is injecting
<dael> heycam: Okay, agree with that
<dael> astearns: Any concerns about adding target-text pseudo?
<dael> astearns: prop: Add target-text pseudo element
<dael> RESOLVED: Add target-text pseudo element

@chrishtr
Copy link
Contributor Author

@fantasai: More edits are needed to define target-text, no?

@chrishtr chrishtr reopened this Oct 13, 2020
@fantasai
Copy link
Collaborator

Fixed in 103f7a1 earlier, just forgot to tag the issue. :)

@chrishtr
Copy link
Contributor Author

Thanks!

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

No branches or pull requests

3 participants