background
}
B
#
P
4
E
T
x
w
O
5
/
G
H
C
9
&
n
4
5
3
0
i
6
G
9
D
h
%
Q
C
P

favicon
favicon
Reverier 的博客
 

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

Reverier-Xu at 2022-12-12 02:59:46 Web Development CC-BY-NC-SA 4.0

一点记录,持续更新。

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

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

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

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

语言统一

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

区分已访问链接与未访问链接

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

a {
  color: #0078d6;
}
 
a:visited {
  color: purple;
}

保证可交互元素的 outline

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

内容页面需要具有独立的 URL

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

不应当有 User-Agent 限制

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

对可交互元素改变鼠标指针

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

不要使用 js 进行链接跳转

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

内容文本支持用户选择,操作控件反之

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

将 submit 操作包含在 HTML form 中

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

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

更多……

还有什么想到的,以后再写吧。