前端进阶-样式

创建聚焦样式

• :focus 伪类，表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。
• outline CSS 属性，设置一个或多个单独的轮廓属性的简写属性 ， 例如 outline-style, outline-width 和 outline-color。 多数情况下，简写属性更加可取和便捷。
• :hover 伪类，可以创建复杂的层叠机制。触摸屏非常普遍，所以网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。
• ::before 伪元素，常通过 content 属性来为一个元素添加修饰性的内容。

/* Selects any <input> when focused */
input:focus {
  color: red;
}

/* 宽度 | 样式 | 颜色 */
outline: 1px solid white;
/* two identical declarations */
:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }

/* CSS3 语法 */
element::before { 样式 }  
/* （单冒号）CSS2 过时语法 (仅用来支持 IE8) */
element:before  { 样式 }  
/* 在每一个p元素前插入内容 */
p::before { content: "Hello world!"; } 

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

多设备自适应设计

• 响应式网站设计基础
• 关于触摸目标的 Material Design 无障碍性建议(英)

颜色和对比度

• http://webaim.org/standards/wcag/checklist#sc1.4.3 (英)
• http://webaim.org/standards/wcag/checklist#sc1.4.6 (英)
• http://webaim.org/standards/wcag/checklist#sc1.4.1