避免如下! low, inaccessible contrast (2.30) https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=BB99FF :
之所要避免第二种的低对比度图像
一方面, 有的人可能视力有所欠缺; 另一方面, 即使是视力良好的朋友在阳光下看手机等情况也无法正常阅读.
可以通过这个网站完成对比度的测试 check your contrast ratios here https://webaim.org/resources/contrastchecker/
三 对 button 的 hover,focus,active 状态进行区分
由于 button 是一个需要交互的标签, 用户在对 button 进行操作时肯定要得到反馈
浏览器本身对 focus 和 active 有默认的样式, 但是我们的重置取消了这部分样式; 因此我们需要添加一部分 CSS 代码完成这部分的操作, 并让 button 变化的状态和我们此前的样式更搭!
:active 状态
- /* old-school " 的 button 位置下移 + 颜色饱和度增加 */
- .btn:active {
- transform: translateY(1px);
- filter: saturate(150%);
- }
我们可以改变按钮的颜色, 但是我想为悬停时保留这种样式:
- /* 鼠标悬停时颜色反转 */
- .btn:hover {
- color: #9555af;
- border-color: currentColor;
- background-color: white;
- }
让我们增加 focus 样式, 用户经常会用键盘或是虚拟键盘 (ios 或安卓等) 来 focus 表单, button,links 和其他一些交互性组件
一方面: 这样可以加快交互效率
另一方面: 对有的人而言, 无法使用鼠标, 那么就可能依赖键盘或是其他工具访问网站
在绝大多数我见过的项目中, 设计师仅仅指定 mouse-over 样式而没有 focus 样式, 我们应该怎么做呢?
答案: 最简单的方法就是复用 hover 样式给 focus
- /* 复用样式 */
- .btn:hover,
- .btn:focus {
- color: #9555af;
- border-color: currentColor;
- background-color: white;
- }
如果要用到 focus 样式, 那么就需要移除浏览器 button 默认的样式(否则当 button 是 focus 或 active 状态下都会有 outline 边框)
- .btn {
- /* ... */
- /* all browsers: 移除默认 focus 样式 */
- outline: none;
- }
- /* Firefox: 移除默认 focus 样式 */
- .btn::-moz-focus-inner {
- border: none;
- }
试一试效果, 如果有键盘可以尝试用 tab 和 shift+tab 进行导航从而触发 focus!
Hi, I'm a link https://fvsch.com/code/styling-buttons/step3-states.html# And I'm a button
四 :active 和: focus 同时触发的问题!!
当我们对 button 进行点击时, active 和 focus 伪类同时触发, 在鼠标移开后, active 伪类消失, 但是 focus 样式还在, 这种时候我们就需要点击其他地方才可以消除样式, 很难受!
我们发现, 有一种新的伪类: focus-visible pseudo-class (draft specification) https://drafts.csswg.org/selectors/#the-focus-visible-pseudo .
这个特性还没有完全确定, 但是这个想法很好, 是指浏览器应该只在键盘或键盘式交互之后出现: focus-visible, 而鼠标点击无效.
但是由于多数浏览器还没有这个新特性, 所有需要借助 this polyfill https://github.com/WICG/focus-visible .
该 JS 保证了后相兼容性
在引入该 polyfill 后
- /*
- 保留键盘触发的 focus, 取消鼠标触发的 focus
- */
- .js-focus-visible :focus:not(.focus-visible) {
- outline: none;
- }
- /*
- Optionally: Define a strong focus indicator for keyboard focus.
- If you choose to skip this step then the browser's default focus
- indicator will be displayed instead.
- 这段我不太清楚怎么翻译,,
- */
- .js-focus-visible .focus-visible {
- ...
- }
在本项目中首先对 hover 和 focus 解耦
- /* inverse colors on hover */
- .btn:hover {
- color: #9050AA;
- border-color: currentColor;
- background-color: white;
- }
- /* make sure we have a visible focus ring */
- .btn:focus {
- outline: none;
- box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.5),
- 0 0 0 1.5px rgba(255, 105, 180, 0.5);
- }
然后利用 polyfill 完成移除多余的鼠标 focus 效果
- /* hide focus style if not from keyboard navigation */
- .js-focus-visible .btn:focus:not(.focus-visible) {
- box-shadow: none;
- }
完成地址: look at the final code https://fvsch.com/code/styling-buttons/step4-final.html
只有键盘交互才会出现的 focus 样式!
来源: https://www.cnblogs.com/cndotabestdota/p/9063761.html