-
Notifications
You must be signed in to change notification settings - Fork 661
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
Comments
Hearing no other comments, my proposed resolution for today is: Add a pseudo-element called To spell it out, the restrictions are that |
If I'm understanding correctly, this is basically like the :target element, except it's a pseudo-element, right? In that case maybe |
|
The CSS Working Group just discussed
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 |
@fantasai: More edits are needed to define |
Fixed in 103f7a1 earlier, just forgot to tag the issue. :) |
Thanks! |
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:
(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:
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?
The text was updated successfully, but these errors were encountered: