CSS-Secrets
CSS-Secrets copied to clipboard
cssmagic
《CSS 揭秘》这本书的大本营
## 花絮与注解 #### 第 150 页 ‧ 脚注 ② > ② 据 CSS 2.1 规范所述：“替换元素的特征在于，其内容超出了 CSS 格式化模型的范畴，比如图片、嵌入的文档或小应用程序等。” 原则上我们无法为替换元素添加生成性内容，尽管某些浏览器可能会允许这样做。 WebKit 浏览器允许我们为复选框添加伪元素。虽然 CSS 规范很可能永远也不会支持这种行为，但浏览器擅自增加这种行为也没有破坏规范，因此我估计 WebKit 的这个特性并不会很快发生变化。 因此，从务实的角度出发，我认为这个特性是可以利用的。一旦放开这个禁忌，我们可以实现 “更好的” 自定义复选框（待续）。 #### 第 151...
## 花絮与注解 #### 第 139 页 ‧ 图 5-42 > circular reasoning works because 这句话的中文意思是 “循环论证能起作用因为……”。这是一句可以无限循环进行自我论证的双关语，文字呈现出的环形外观也暗示了这一点。 #### 第 140 页 ‧ 第二段 > 如果你没看懂路径的语法，也别怀疑自己的智商，因为**根本没人能看懂**。即使真的有人费尽心思领略到了 SVG 路径语法的一丝神秘魅力，也会在几分钟内忘得一干二净。如果你还是很好奇，那我就来讲解一下这串神秘代码所包含的三个指令…… 原文接下来的表述省略了很多东西，只是在解释这三个特定参数的行为，而没有在讲解完整的 SVG 路径语法；而且表述也相当不严谨。 不过考虑到...
## 花絮与注解 #### 第 132 页 ‧ 倒数第二段 > 在拟物化风格的网页中，凸版印刷效果是最流行的文字美化手法之一。 凸版印刷的原理类似于盖章，因此纸面上的字迹会微微下凹。 #### 第 134 页 ‧ 第一段 > 在未来，实现文字描边或空心字的效果会非常容易，因为我们只需要使用 `text-shadow` 属性的扩张参数就可让投影变大，然后看起来就像给文字勾边了一样……不过不幸的是，目前浏览器对这个参数的支持还极为有限…… 将来 `text-shadow` 可以接受第四个长度值作为扩张参数，这一点与 `box-shadow` 是类似的。 这一特性目前似乎还没有进入标准化的进程。但考虑到与 `box-shadow` 的一致性，以及实际的需求，这个特性被标准化应该也是迟早的事。 据...
> #### 前言 > > 这本书图文并茂、全彩印刷，对排版工作也提出了极大的挑战。 > > 本页面仅记录排版方面的失误或值得改进的地方。 > #### 图标含义 > > * ✅ - 已在后续印次中修正。 > * ▶️ - 已被出版社确认，即将在后续印次中修正。 > * ⏸ - 已确认，但可能不会修正。 > *...
## 交流与答疑 #### 网友提问： > 我按书上的方法用渐变写出了棋盘图案，但为什么方格的对角线会出现缝隙？有什么解决办法吗？ 说到缝隙，最根本的原因在于，CSS 描述的是矢量信息，而浏览器需要以位图的方式把渲染效果显示出来，因为显示设备都是基于像素的。矢量信息在整个渲染过程中的哪个环节转换为位图信息，决定了最终渲染效果的误差有多少。理论上来说，矢量信息越晚转换为位图，渲染效果越精确，但计算也越复杂或越难做到。 在这个例子中，绘制方格的原理是通过两个直角三角形拼接而成。由于这种斜向渐变的渲染结果不可能是对齐到像素的位图，因此，在斜边拼接的地方很容易产生缝隙。 总的来说，本节的重心在于呈现思维方式。如果你真的要实现一个棋盘图案，还是选择其它更可靠的方案为佳。
## 花絮与注解 #### 第 125 页 · 最后一段 > ……在某些情况下（比如在 CMS 环境下），我们根本无法轻易地修改 HTML 结构。 CMS 即 “内容管理系统”，比如像 WordPress 这样的文章发布系统。CMS 意味着网站内容可能是 UGC（用户生成的内容），我们作为网站的设计者和维护者，当然是不可能去修改这些内容的。 #### 第 128 页 · 第二段 > 很遗憾，我们唯一的出路有些 hack...
## 花絮与注解 #### 第 123 页 ‧ 标题 本节的标题是 “Ligatures”。这个术语一般译作 “合字”，也译作 “连字”、“连结字” 或 “合体字”。 Adobe 系列软件译作 “连笔字”。但由于 ligature 并不一定有连笔的情况，所以没有采用 “连笔字” 的译法，虽然这个译法还挺浅显的。 在翻译时，最终采用了 [W3C 中文兴趣小组](https://www.w3.org/html/ig/zh/wiki/CSS3%E5%AD%97%E4%BD%93%E6%A8%A1%E5%9D%97#.E8.BF.9E.E5.AD.97.EF.BC.9A.E2.80.98font-variant-ligatures.E2.80.99.E5.B1.9E.E6.80.A7) 的译法——“连字”。 #### 第 123 页 ‧...
## 花絮与注解 #### 第 119 页 ‧ 脚注 > 很多焦头烂额的开发者甚至向 CSS 工作组申请增加 `::nth-line()` 这样的伪元素，不过由于性能上的考量被拒绝了。 原文的说法是 “... an `:nth-line()` pseudo-class ...”，称其为 “伪类”。 但实际上如果真的有这种东西，那它应该是个 “伪元素”。
## 花絮与注解 #### 第 117 页 ‧ 图 5-6 >  这张图故意画得比较宽，表示还有很多的水平空间可以放置内容。 ## 交流与答疑 #### 知乎网友提问： > https://www.zhihu.com/question/46744302 > > 用 `` 做包裹加了很多 CSS 样式到底有没有必要？用 `` 加上 `` 的方式一样可以很好的实现。有必要写这么复杂吗？这样写的原因在哪里？半新人求大神帮忙解析一下。...
## 花絮与注解 #### 第 113 页 ‧ 第三段 > 常见的方法包括服务器端预处理、JavaScript 后期处理、用在线生成器单独处理…… 这里的 “在线生成器” 是指帮忙插入软连字符的在线工具。