cssmagic / CSS-Secrets

📖 《CSS 揭秘》这本书的大本营。
2.45k stars 329 forks source link

[注解] [603] 自定义复选框 #72

Open cssmagic opened 7 years ago

cssmagic commented 7 years ago

花絮与注解

第 150 页 ‧ 脚注 ②

② 据 CSS 2.1 规范所述:“替换元素的特征在于,其内容超出了 CSS 格式化模型的范畴,比如图片、嵌入的文档或小应用程序等。” 原则上我们无法为替换元素添加生成性内容,尽管某些浏览器可能会允许这样做。

WebKit 浏览器允许我们为复选框添加伪元素。虽然 CSS 规范很可能永远也不会支持这种行为,但浏览器擅自增加这种行为也没有破坏规范,因此我估计 WebKit 的这个特性并不会很快发生变化。

因此,从务实的角度出发,我认为这个特性是可以利用的。一旦放开这个禁忌,我们可以实现 “更好的” 自定义复选框(待续)。

第 151 页 ‧ 侧栏警告

在使用宽松的选择符时一定要小心。对于那些后面没有 label 的复选框来说(比如它是被嵌套进一个 label 的),使用 input[type="checkbox"] 选择符也会把它们隐藏起来,从而损害可用性。

在实际项目中,通常不会直接写这么宽松的选择符,因为 input 标签一般不会光秃秃地什么 class 都不加。

比如,在实践中,我们写好的自定义复选框样式通常会抽象出来,以便在网站的各处复用。参照市面上绝大多数样式库的接口风格,我们最终选用的抽象方案往往就是先约定结构,然后把可复用的样式以 class 作为接口暴露出来。

这样一来,原文警告的风险就不存在了,因为我们的工作方式并不是通过选择符来把样式匹配到复选框身上,而是以添加 class 的方式精确地为需要美化的复选框(及其配套的 label )加样式。