我发现这 5 个错误经常发生，即使是经验丰富的开发人员也会犯。一旦你开始留意它们，它们就很容易修复。
#1. 防止溢出时布局偏移
如果你有一个元素overflow: auto，那么只有当元素溢出时才会出现滚动条。问题是，一旦元素溢出并出现滚动条，内容就会缩小以适应滚动条的宽度。
为了避免不必要的布局偏移，请添加：
scrollbar-gutter: stable
即使滚动条不可见，它也会为滚动条保留空间。
在撰写本文时，只有 74% 的用户拥有此功能。但这是一个很好的渐进式增强。这意味着使用较新浏览器的用户可享受更好的用户体验，而使用较旧浏览器的用户则不会受到影响。
2. 尊重设备对暗黑模式的偏好
如果你已经在网站上实现了暗黑模式，你可以通过检查设备对亮黑模式或暗黑模式的偏好，避免用户手动选择暗黑模式
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// dark mode
}
因此，如果用户已经在设置中选择了暗模式，那么您也可以在您的网站上将默认值设置为暗模式。
有些网站甚至选择完全不设置暗模式切换，而完全依赖设备的偏好。
#3. 链接应该是真实的链接
如果您有一个按钮需要重定向到网站的其他部分，那么最明显的方法是使用 JavaScript 监听点击事件并重定向用户。
这是错误的，只要您可以使用浏览器原语（例如：链接、表单），您几乎总是应该使用它。
使用 标签有很多好处。
- 可以按住 Ctrl 键单击（或在移动设备上长按）以在其他选项卡中打开链接
- 将鼠标悬停在链接上将显示您将被重定向到的位置
- 屏幕阅读器和搜索引擎爬虫等其他程序的效果会好得多
如果您正在使用 react-router 或 Next.js，那么您应该使用该框架的 Link 组件来防止整个页面重新加载。
4. 链接预览
当用户分享您网站的链接时，所有聊天和社交媒体应用都具有预览功能，可在用户点击之前查看该网站的部分内容。只需向您的 对象添加几个元标记，您就可以允许其他应用显示您网站的预览。
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
在React 19中，编辑 对象比以往更加简单。以前您必须使用第三方库，react-helmet但现在 React 已内置了这些库。
function BlogPost({ post }) {
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
<title>{post.title}</title>
<meta name="description" content={post.excerpt} />
<meta property="og:title" content={post.title} />
<meta property="og:description" content={post.excerpt} />
<meta property="og:image" content={post.image} />
<meta property="og:url" content={post.url} />
<meta property="og:type" content="article" />
</article>
);
}
这被称为开放图谱协议。社交分享预览
是一个非常有用的工具，它可以让您测试预览在不同网站上的显示效果，并为您提供改进建议。
5. 在输入中使用标签
我经常看到复选框，当我尝试单击复选框的标签时，什么也没有发生。除了可访问性差之外，这意味着用户必须单击小复选框才能选中它。
要解决这个问题，请使用 标签。
<label>
<input type="checkbox"> Click me to select the checkbox
</label>
这适用于所有输入类型。例如，单击文本输入的标签将聚焦到文本框中。
