Please don't mess with links

Please don’t mess with links: 2026-05-31 A link is just a button that takes you somewhere when you click it right? 100% legit link 100% legit link Except that’s a pale, shallow imitation of a link.

请不要乱搞链接:2026-05-31 链接不就是一个点击后带你去某处的按钮吗?100% 合法链接 100% 合法链接,但这只是对链接苍白而肤浅的模仿。

A real link can be: Opened in a new tab. (ctrl) … or a fresh window. (shift) … or saved as a file (alt). Copied as a URL (right click) Used with the keyboard (tab + enter) Seen by tools like search engines and screen readers. Hovered over to see the URL. … none of which work with a button.

真正的链接可以:在新标签页中打开(Ctrl 键)……或在新窗口中打开(Shift 键)……或保存为文件(Alt 键)。可以复制为 URL(右键点击),可以使用键盘操作(Tab + Enter),可以被搜索引擎和屏幕阅读器等工具识别,悬停时可以看到 URL。而这些功能按钮都无法实现。

Another common offense is to use a real link, but hook the click event to open a popup. However, with a real link, I can: See the loading progress… … or/and cancel it. … see descriptive error pages and retry if needed. Open multiple at once. Read the original page while it loads. Use my browser’s tabs or/and window manager to organize them. Bookmark the page. Copy the URL and send it to a friend. … and above all, they are consistent:

另一个常见的错误是使用真正的链接,但通过点击事件来触发弹出窗口。然而,使用真正的 链接,我可以:查看加载进度……或者取消加载。查看描述性的错误页面并在需要时重试。一次打开多个页面。在页面加载时阅读原始页面。使用浏览器的标签页或窗口管理器来组织它们。收藏页面。复制 URL 并发送给朋友。最重要的是,它们是一致的:

I’ve long lost count of how many times I’ve accidentally closed the whole site while trying to close a popup that was a little too convincing. It’s also extremely common to click a link with a slow connection, only to be greeted with perpetual spinner. I have no idea if anything is actually happening or how long it will take. Worse, it usually covers up the original page so I can’t even read that!

我早已数不清有多少次在试图关闭一个过于逼真的弹出窗口时,不小心关掉了整个网站。在网络连接缓慢时点击链接,结果只看到永无止境的加载转圈,这种情况也非常普遍。我根本不知道是否真的在加载,也不知道需要多长时间。更糟糕的是,它通常会覆盖原始页面,导致我连原页面都无法阅读!

Browsers are good at links and loading pages: It’s the whole point. Don’t use javascript buttons as links. Don’t build your own loading animations. Link previews should open and close on hover, not on click. Don’t open links in javascript popups: Use target=“_blank” instead.

浏览器擅长处理链接和加载页面:这正是它们的核心功能。不要用 JavaScript 按钮代替链接。不要自己构建加载动画。链接预览应该在悬停时打开和关闭,而不是点击时。不要在 JavaScript 弹出窗口中打开链接:请改用 target=“_blank”。

Other common problems: Infinite scrolling breaks ctrl-f, bookmarks, the home/end keys and often the back button. You can have a 100k of text on a page: Browsers will render partially downloaded HTML and the user won’t even notice. Using a 5 MB javascript framework just do a worse job of downloading text is dumb.

其他常见问题:无限滚动会破坏 Ctrl+F 搜索、书签、Home/End 键,并经常导致后退按钮失效。页面上可以有 100k 的文本:浏览器会渲染部分下载的 HTML,用户甚至察觉不到。使用 5 MB 的 JavaScript 框架来做下载文本这种更差的工作是很愚蠢的。

To optimize speed, it’s best to minimize the total number of round trips. Just putting everything in a single TCP connection will always be better than breaking it up because of TCP’s slow start algorithm. Don’t reimplement

which will break search tools and screen readers. … but using fancy CSS to make it look nice is fine.

为了优化速度,最好尽量减少往返次数。将所有内容放在单个 TCP 连接中,总是比因为 TCP 的慢启动算法而将其拆分要好。不要重新实现

标签,这会破坏搜索工具和屏幕阅读器的功能……但使用精美的 CSS 让它看起来更漂亮是可以的。

Don’t roll your own date picker (or any other built-in form inputs) This will always used the user’s preferred date format, covert it to the standard yyyy-mm-dd, and works with the keyboard… also, it’s one line of code that works with dark mode by default.

不要自己编写日期选择器(或任何其他内置表单输入)。原生控件总是使用用户偏好的日期格式,将其转换为标准的 yyyy-mm-dd,并且支持键盘操作……此外,它只需一行代码,且默认支持深色模式。

Related: Real links! https://susam.net/do-not-roll-your-own.html: Don’t Roll Your Own … /misc/13kb/: Why using a single big page can actually improve performance.

相关内容:真正的链接!https://susam.net/do-not-roll-your-own.html:不要重复造轮子…… /misc/13kb/:为什么使用单个大页面实际上可以提高性能。