点击态样式:focus, active, hover 的区别与兼容性

focus hover active CSS

本文的核心问题是 如何实现点击态效果。移动端浏览器中没有鼠标的概念, 但滚动、点击等概念仍然成立,于是鼠标相关的这些伪类就不太容易理解。 在阅读本文的同时可以用手头的浏览器尝试 这个 DemoTL;DR

  • PC 上使用 :hover 判断鼠标悬停;使用 :active 匹配鼠标左键(primary button)按下。
  • 移动上使用 :active 判断手指按下,要兼容 iOS 需要绑一个 touch 类事件
  • 使用 -webkit-tap-highlight-color 禁用移动浏览器的默认(UA-defined)点击态。

在 HTML 和 CSS 中转义特殊字符

HTML CSS 转义

在编程语言中,字符串 直接量(Literal Value,也叫字面量)需要用一对分隔符来定义, 比如 "author:harttle" 中前后的引号。 那么当字符串中要表示分隔符时就需要 转义,比如 "author:\"harttle\""

JavaScript 是一种 通用编程语言,这类语言的转义相对比较一致通常使用反斜线,比如 \n, \r 等。 但是在 HTML、CSS 这样的 领域特定语言 中为了在大多数场景中提供更简单的语法, 转义就会比较麻烦。下文中给出 HTML 和 CSS 中的字符串转义机制,以及如何进行转义的代码片段。

本文介绍的是 HTML 和 CSS 中的转义,不是 JavaScript 中的 escape 方法(它可以产生一个类似 URL 编码的结果)。 此外关于百分号编码请参考 百分号编码与 encodeURIComponent,关于表单编码请参考 HTTP 表单编码 enctype

获取 DOM 元素的绝对位置

DOM HTML CSS

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置, 例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中, 当页面滚动超过了它的位置,就会始终悬浮在左侧。

本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性。 关于如何获取 DOM 元素高度和滚动高度,请参考 视口的宽高与滚动高度 一文。

为啥我写不出文档

方法学 设计 文档

当有人跟你说 “我们整理一个文档” 的时候,有没有考虑过这文档是不是没法做? 就像收到需求时可以说没法完成一样,文档也不是总是可以写出来的。 下次不想写文档时可以把这篇文章丢给他,也许这是本文最大的意义。

可能因为说话是人类的天赋,从未有人怀疑过写不出文档的可能性。 这大概就是很多文档就像废话一样没用的原因吧。 那下面 Harttle 就开始列举写好文档各种客观条件,并突出其客观性和无法抗拒性。

导航: 下一页

🔝