Top
Best
New

Posted by damir 10/25/2024

Smarter Than 'Ctrl+F': Linking Directly to Web Page Content(alfy.blog)
228 points | 136 commentspage 3
seinecle 10/25/2024|
I wonder how that can be leveraged for SEO
polotics 10/25/2024||
Very nice! Hopefully Firefox developers have the bandwidth to implement this as well, and not let Google Chrome have this feature as an "embrace and extend" differentiator. As for MS-Edge, well I guess it must be funny for Microsoft to see they're getting a taste of their own sweet old medicine...
arp242 10/25/2024||
It was added to Firefox in 131, released a few weeks ago: https://www.mozilla.org/en-US/firefox/131.0/releasenotes/

And "add useful UX features that people want" is not "EEE", especially when there's a standard doc and test suite for it.

amiga386 10/25/2024||
FYI, the "standard doc" isn't in any sense standardised yet

https://wicg.github.io/scroll-to-text-fragment/

> This specification was published by the Web Platform Incubator Community Group. It is not a W3C Standard nor is it on the W3C Standards Track.

ruthmarx 10/25/2024||
Isn't Web Platform Incubator Community Group the group browsers makers formed because the W3C was being too slow and then largely overtook the W3C in terms of relevance?
amiga386 10/25/2024||
No, I would say you were describing WHATWG and their HTML5 specification (now called the HTML Living Standard)

https://en.wikipedia.org/wiki/WHATWG

The Web Platform Incubator Community Group is "a lightweight venue for proposing and discussing new web platform features" within the W3C

https://www.w3.org/community/wicg

ruthmarx 10/26/2024||
Oh yeah I got that mixed up. Thanks.
rzzzt 10/25/2024|||
Edge does have a "Copy link to highlight" option in its context menu.
nashashmi 10/25/2024||
And on mobile, it is called “create link”
jeroenhd 10/25/2024|||
This feature seems to work on Firefox as far as I can tell. It used to be one of those Chrome APIs, but now every browser but Safari seems to support them completely. I'm sure the Safari team can quickly implement the last bit of Javascript API when they get the opportunity to.
amiga386 10/25/2024|||
The feature "seems to work on Firefox" if you're using the version of Firefox released 10 days ago [0]

It's not implemented in Firefox ESR and won't be until June 2025 [1]

[0] https://caniuse.com/url-scroll-to-text-fragment

[1] https://whattrainisitnow.com/calendar/

nanna 10/25/2024||
Which is to say, that it work on Firefox.
amiga386 10/25/2024||
I'm running Firefox right now. It doesn't work. I use Firefox ESR version. Many people do. Many people have also not installed updates released a mere 10 days ago.

Be honest and admit that full, reliable support for this feature among all the main browsers is not going to be there until at least next year.

master-lincoln 10/25/2024||
What? It is there already in Firefox latest version. Do you mean it will take that long until the majority of users have it?

If you decide to not update or use a version that is updated less often, that is not the fault of the people working on the software.

Be honest and admit that you are knowingly using a Firefox version that gets major updates only every 52 weeks and still complain about not getting a released feature.

amiga386 10/25/2024|||
I'm not complaining. What I'm trying to highlight is, as it says on the caniuse.com page, this feature has "Limited availability across major browsers", and that is to be expected and accepted.

If you're thinking of promoting use of this non-standard feature, consider how many people it _doesn't_ work for, rather than thinking "oh and yes even Firefox (asoftendaysagoandonlythedesktopmainlinereleasenottheesrormobileversion) so I'll rush out and proseletyze this amazing feature that clearly everyone can use"

master-lincoln 10/25/2024||
Is there an alternative? Do users with browser that don't have support have a worse experience when these links are used? I thought no...
amiga386 10/25/2024||
As an alternative, all browsers the traditional scrolling to named element using a URL fragment, e.g. https://en.wikipedia.org/wiki/URI#Syntax goes to the "Syntax" section of the page. While the reason of text fragments it to allow for similar linking where there isn't an element with an id, most pages with non-changing text tend also to have non-changing layout and element ids.

If you generate links that include and depend on #:~:text= to make sense, accept that it will confuse users whose browsers do not support it. They will be linked to the top of the document and no text will be highlighted. Consider not only linking, but also quoting what you wanted to be highlighted, e.g.

    John says <a href="https://example.com/#:~:text=I%20dislike%20this">he dislikes it</a>:
    <blockquote cite="https://example.com/">
       Down with this sort of thing. <em>I dislike this</em> and can't abide it.
    </blockquote>
JimDabell 10/25/2024|||
> If you decide to not update

Browser support isn’t about what version you personally decide to run, it’s about what version your users are running. What Firefox ESR supports is the relevant factor here.

> Be honest and admit

Can you make your point without accusing people of dishonesty?

master-lincoln 10/25/2024||
> Can you make your point without accusing people of dishonesty?

I was just returning the favor to amiga386 to make them see this is not a normal form of communication. They lead with

> Be honest and admit that full, reliable support for this feature among all the main browsers is not going to be there until at least next year.

When I think they meant to say support for most users isn't there until next year. Because all major browsers have support already now in the current version.

JimDabell 10/25/2024||
> When I think they meant to say support for most users isn't there until next year.

They did say that though:

> full, reliable support

“Reliable” in the context of browser support means widely supported in the browser versions people actually use – i.e. web developers can rely upon it being there. Something that is only available in a browser version released last week is not “reliable” in the sense of browser support.

poincaredisk 10/25/2024||
But Firefox supports it. Firefox developers can't do anything else to improve the support. There's no reason to suspect this feature is not implemented in a reliable way.

The onus is now on users that use Firefox. You're right that many Firefox users don't run the newest version, and you can't in general rely on a Firefox user having a browser new enough to support this feature.

Maybe this is a pedantic distinction, but it feels weird to say "Firefox doesn't support X" to mean "Old version of firefox, that some people use, doesn't support X"

JimDabell 10/25/2024||
> There's no reason to suspect this feature is not implemented in a reliable way.

As I said in my earlier reply, that is not what “reliable” is referring to in the context of browser support. “Reliable” means “We can rely upon our users having it available in their browser”.

This feature does not have reliable support and will not have reliable support until common browser support matrices – of which Firefox ESR is a part – includes support.

OP was correct to say that browser support is unreliable and that Firefox ESR is the thing causing this and will continue to be until next year.

Are you a web developer? “Reliable browser support” is a very well-understood term of art.

milliams 10/25/2024|||
It works just fine on Firefox. The things that seems to be Chrome-only is the "select some text, right click to get direct link" bit, and the "link to text that is hidden".
newswasboring 10/25/2024||
> As for MS-Edge, well I guess it must be funny for Microsoft to see they're getting a taste of their own sweet old medicine...

Can you elaborate on this a bit?

xp84 10/25/2024|||
I think GP mistakenly believes that Chrome implemented this in its proprietary part instead of getting it from Chromium which was the actual case. In reality I think the feature appeared in both browsers at roughly the same time as a result.

And also that they believe that adding features like this to browsers is bad behavior in the first place. If that were the case and people abided by the "do nothing until the W3C acts" rule we'd probably all be using IE6-level browsers still.

reportgunner 10/25/2024|||
Something with internet explorer but I'm not old enough to know what exactly.
kwantaz 10/25/2024||
Copy link to highlight is best feature.
_giorgio_ 10/25/2024||
Can you disable it in firefox?

shift+i -> "permissions" -> disable "override keyboard shortcuts"

rafram 10/25/2024|
Huh? This post isn’t about overriding Ctrl-F.
dakiol 10/25/2024||
Is it just me or whenever I open a link with a text fragment, the page is loaded just fine but it takes one or two seconds to actually scroll down to the highlighted text?

Usually in Chrome and when visiting sites that are not 100% pure text (e.g., bloated Confluence docs)

o1o1o1 10/26/2024||
It is very annoying, yes.

Because of this bloat in Confluence, we actually just use it for editing and serve the content in a more lightweight way using the API and our own templates.

xp84 10/25/2024||
Yeah, even linking to a heading using its HTML ID (part of the pure HTML browser spec) was broken in Confluence for a while due to its fancy reimplementation of the concept of "serving a basic HTML document" in flashy React-y technologies. Though it works now.
RedShift1 10/25/2024||
Sidenote: please don't hijack CTRL+F on webpages, thanks. Sincerely, the world.
dspillett 10/25/2024||
[for those just reading the comments having not read TFA: it isn't talking about changing default find behaviour within a page, but the feature to specify text to scroll to and highlight within a link URL so the user doesn't need to ctrl-F when you refer to a small part of a larger page]
jeroenhd 10/25/2024|||
Sometimes they "need" to, because rather than load 100kB of text, they'll chunk 100kB of text over ten JSON requests and searching requires backend intervention. If you make every web page an app, the browser doesn't work right anymore so you force yourself to build a browser within a browser!
ants_everywhere 10/25/2024|||
Ctrl-F should search the loaded page using the browser's search settings so that the user can have a consistent interface.

If sites choose not to load the page all at once they can provide another search bar with a different experience. But that's not the Ctrl-F search.

0xTJ 10/25/2024|||
Even if it's for that, it's infuriating, and a terrible pattern. Just as I expect CTRL+click to open in a new tab, there are some interactions that should be left alone; it's annoying to me that they even can be overridden.
throw101010 10/25/2024|||
Small tip, and I know it doesn't make it much better, but in few cases I've seen this done (Discourse is the main culprit and it's widely used) pressing Ctrl+F a second time will go to the normal browser "Search in this page" function. Still annoying, but manageable.
wkjagt 10/25/2024|||
Interesting that this is the top comment at the time I'm reading this, while the article isn't at all about hijacking CTRL+F.
n_plus_1_acc 10/25/2024||
That's why it's prefaced with "sidenote"
amadeuspagel 10/25/2024|||
Please don't hijack HN threads with unrelated gripes about the modern the web and please don't pretend to speak for the world.
klabb3 10/25/2024|||
I have to agree.

Normally I think related side notes are fine. Heck, I’m guilty myself. But nowadays I always open the link first to make sure it's the right topic and to make sure it’s not addressed in the article. Often leads to a better response as well.

Yes, we know scroll-jacking or any other override of browser behavior is extremely disliked here.

RedShift1 10/25/2024|||
Unrelated? CTRL+F is literally in the title...
lolinder 10/25/2024|||
And only in the title. It doesn't mention the keyboard shortcut once in the body because it's not about keyboard shortcuts, it's about "linking directly to web page content".

In addition to unrelated gripes, it's generally considered bad practice to comment only based on the title.

RedShift1 10/25/2024||
You _know_ somebody will be thinking about hijacking CTRL+F with this.
lolinder 10/25/2024||
I appreciate the effort to retcon your comment, but I'm afraid it creates too many plot holes for me to buy it.
wkjagt 10/25/2024|||
It is. But the article doesn't talk about hijacking its behaviour.
TrianguloY 10/25/2024|||
I've seen that on pages with text editors that don't load all the text or where search is expanded with more features, like for example on Github.

In these cases I usually click outside the editor and then control+f works as usual.

If not, you can also try F3, and if that's hijacked too browsers usually have a shortcut to "find in page" in the hamburguer/three-dots menu

klez 10/25/2024|||
And `/` neither, while you're at it (I'm looking at you, GitHub).
SushiHippie 10/25/2024|||
They have a (broken) setting under the accessibility settings which disables all the character key hijacking.

https://github.com/settings/accessibility

But for whatever reason this only seems to work temporarily (if it is already toggled off for you, you need to enable it again, save preferences, then toggle it off, and save preferences) and then it does not hijack '/' for a few minutes.

klez 10/25/2024||
But even then I shouldn't need to do it for every website that does this.
rty32 10/25/2024|||
Found the vimmer
mmcdermott 10/25/2024|||
True, but `/` is also a shortcut for quick find in Firefox.
homebrewer 10/25/2024||
And ' searches through the links only. Find a link, press enter (or shift+enter) and you don't have to touch the mouse or install vimium and friends.
Karellen 10/25/2024||||
Or just anyone who uses `more` or `less` or almost any other pager.
klez 10/25/2024|||
Indeed :)
arusahni 10/25/2024|||
Hijacking CTRL+K sucks, too! It's the shortcut used to focus the browser search input in Firefox, but the industry has seemingly decided it's a great way to launch a command palette.
egeozcan 10/25/2024|||
I recently implemented this, and the users loved it, though I was disappointed to hear it may have frustrated a usually silent group.

I'm open to feedback! What would be a better approach? Please don’t just suggest “no custom shortcuts for any web app”—people spend 60-70% of their workday using the UI components my team maintains. While random sites hijacking shortcuts is definitely frustrating, in our case, the pros seem to outweigh the cons.

Maybe allowing users to disable or customize shortcuts could be a solution? Or would that be over-engineering?

Honestly, I think the web platform could use a standard API for defining shortcuts, with browsers providing a UI to manage or disable them. Maybe I'm still over-engineering here.

Would really appreciate hearing others’ thoughts!

arusahni 10/25/2024|||
> What would be a better approach?

I think Github handled this well by letting you choose between a few canned shortcuts, or disabling the feature altogether [1]. Since I seldom print, I opted to bind the command palette to "CTRL + P"

> Honestly, I think the web platform could use a standard API for defining shortcuts, with browsers providing a UI to manage or disable them. Maybe I'm still over-engineering here.

I'd agree with this sentiment. It's hard, but an obvious (IMO) pain point that has numerous sites reinventing the wheel and needing to introduce some state to save user preferences.

[1]: https://github.com/settings/accessibility

lolinder 10/25/2024||||
> I was disappointed to hear it may have frustrated a usually silent group.

This group isn't usually silent (far from it), they're just not usually your users.

If you're building a web app a la Notion, Figma, Google Docs, Slack, or anything similar: just ignore the "the web should just be documents that strictly use the platform" complaints. Ensure you build in the required accessibility hooks (since those don't come natively to most custom work), but your users will thank you for accommodating their specific needs better than the platform does.

If you're building a web page that mostly presents information... yeah, maybe listen to the people here.

The main thing you're seeing here is that there's a subset of developers who haven't ever really liked the idea that the web became the primary means of deploying applications.

cpmsmith 10/25/2024||||
The "press again to fall back to the browser's key binding" solution many sites use for ^F isn't perfect, and won't work for all scenarios, but it definitely helps.
pests 10/25/2024||||
> Honestly, I think the web platform could use a standard API for defining shortcuts, with browsers providing a UI to manage or disable them. Maybe I'm still over-engineering here.

I think this is really cool and would also allow some interesting features...

- Easier using random input devices. Game engines like Unity with their newest input manager abstracts everything away. Bind inputs not only to standard navigation actions but also app-defined shortcuts.

- Custom UI provided by the browser based on available shortcuts. PCs could get a quick actions bar and phones could have a shortcut drop-down menu exposing functionality.

- If there is an API for enabling/disabling shortcuts the browser can provide context-sensitive shortcut suggestions like some of the profession creation tools like Fusion360 [iirc] where available shortcuts are shown in the status bar.

n_plus_1_acc 10/25/2024|||
Maybe you could find shortcuts that aren't used by major browsers. They should be documented somewhere.
pythonlover2153 10/25/2024|||
CTRL+L works for that too on Chromium / Firefox.
Sophira 10/25/2024||
Not if you choose to have separate URL and search bars. In that case, Ctrl-L goes to the URL bar, and Ctrl-K goes to the search bar.
joveian 10/25/2024|||
At least in Firefox there is still a difference even if you don't have a separate search bar. Ctrl-K goes to the URL bar as a search in your default search engine while Ctrl-L goes to the URL bar in whatever mode it currently is in. This mostly matters if you disable searching by default in the URL bar but still search from the URL bar, although there is also a visual indication that you are searching with Ctrl-K in the default configuration.
DrammBA 10/25/2024||||
Honest question, what's the use case for separate url and search bars?
arusahni 10/25/2024|||
I keep them separate for two reasons: one privacy, and another preference:

1. If I'm interacting with the URL/address input, I'm either entering a full URL, or searching through my local history to jump to a previously-visited page (or, in Firefox, a tab I may have open on another device). I don't want that shipped off to my search provider for autocomplete suggestions.

2. If I'm interacting with the search input, I want autocomplete suggestions. Additionally, because it retains the value of the last term I searched for, I can use it as a shortcut to jump back to the results if I no longer have the tab handy.

antiframe 10/25/2024|||
It prevents you from leaking data in cases where you like live search suggestions (like completions from your search engine based on partial text entered) but didn't want your search engine recording all the URLs you visit outside of search.
n_plus_1_acc 10/25/2024|||
And F6 is one of them, but I can't remember which one.
taco_emoji 10/25/2024|||
Sometimes it's fine if a page is lazy-loading content, in which the browser's CTRL+F does not work because the text isn't all in the DOM at that moment.
xp84 10/25/2024|||
Maybe this is a hot take then, but I think most sites I've seen that do this, are surprisingly good at doing their One Job correctly such that I haven't resented it the way I resent things like overridden context menus, links that are not really links, etc.

e.g. GitHub. If I'm on a source file and I hit Ctrl-F, yes, in fact I do want to search the source code and not GitHub's UI -- and their search bar for that purpose is delightfully simple and not distractingly different than the normal search I expected to see when I hit that key.

What would make me rage throw my computer through a window would be if I hit Ctrl-F and it loaded a full-screen modal which showed a search results page of result snippets or something. So I'm impressed with the restraint shown by the front-end developers (or their "UX designer" taskmasters) in this case.

xp84 10/25/2024|
This also works perfectly in Microsoft Edge and has for a long time. Pointing this out because the post makes several references to things being exclusive to Chrome, when really it's probably just Chromium.

(I'm still puzzled why so many more people choose to use a browser distributed by the world's largest ad network over one with all the same features plus a few nice add-ons, made by a software company.)

prettyStandard 10/25/2024||
All the nerds trained their friends and family on Chrome. We did it to ourselves.
ttyprintk 10/25/2024||
As of a few years ago, independent tests of telemetry back to Bing, immutable hardware-derived identification, and add-on security of the Edge store were not good.
xp84 10/25/2024||
I guess I'm not convinced Microsoft is serious enough about monetizing my data and attention the way Google is. I'm assuming (generously, to be fair) that Microsoft mainly wants to optimize their software rather than use the data to maximize the effectiveness of their ad business, which seems hobby-level to me.

> immutable hardware-derived identification,

Is this in the telemetry data? Not in headers, right? Just curious to learn more

ttyprintk 10/28/2024||
The 2020 report:

https://news.ycombinator.com/item?id=39181863

But the zeitgeist I’ve seen in 2024 is that Edge and Chrome collect the data they want, plus the data each other is collecting. Tabs, history, etc. Google appears to be more careful, speculatively because it would be easier to prove anti-trust if Google blocked Microsoft’s collecting.