Web前端开发需要注意的一些问题

2022-12-12 2022-12-12 约 800 字预计阅读 2 分钟

警告

本文最后更新于 2022-12-12，文中内容可能已过时。

一点记录，持续更新。

颜色主题遵循原生系统设置

如果Web端有提供主题切换的话，默认主题应当遵循系统或者浏览器设置。

可以使用以下js片段获取浏览器/系统默认主题：

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

...

应当提供完善的i18n支持，但是对于某些专有名词和惯用约定不要乱翻译。

很多时候为了让链接的原本颜色与主题背景颜色区分开，我们都会重新设定链接的显示颜色。但是设定的时候通常会忘掉将已访问链接与未访问链接做一个区分，这样会影响可访问性。

a {
  color: #0078D6;
}

a:visited {
  color: purple;
}

在使用键盘tab聚焦某个元素的时候，应当有outline或者其他的视觉变化标识这个元素被聚焦了。

某些单页应用的多个页面切换不会更新URL，导致刷新或者将链接分享与他人的时候往往无法直接得到所需要的页面。

实际上其他浏览器也能够正常浏览页面（骂的就是你，西电一站式服务大厅）。

而不是点到哪儿都是一个箭头。

浏览器支持悬浮预览URL，也支持中键在新标签页中打开等快速操作，不要到处搞div然后用js监听事件并重写location（骂的就是你，Bilibili）。

对于展示内容的文本，要能够支持用户使用鼠标选中（骂的就是你，学习通）；对于操作控件而言，其文本支持鼠标选中后会使样式看起来奇奇怪怪。

对于一些网页表单，应当把 “提交” 按钮包括在表单之中，这样就可以通过 Tab 进行切换，而不需要用户。

在实现支持的情况下，可以在所有表单项均填写完毕时，支持回车直接提交表单。但是请不要在表单未填写完毕的时候支持回车提交，这样会很破坏用户的使用体验。