CSS魔法
术语翻译对照表
# 术语翻译对照表 | 原文 | 本书译法 | 其它译法（未采用） | | --- | --- | --- | | **CSS** | - | 层叠样式表、级联样式表、样式单 | | cascade | 层叠（机制） | 级联 |...
## 花絮与注解 #### 第 102 页 · 最后一段 > 为了补偿这种情况，我们需要让伪元素**相对其宿主元素的尺寸再向外扩大**至少 `20px`（即它的模糊半径），我们可以通过 `-20px` 的外边距来达到目的，由于不同浏览器的模糊算法可能存在差异，用一个更大的绝对值（比如 `-30px`）会更保险一些…… 书中采用 `margin: -30px` 来实现伪元素向外扩张的效果。当然我们也可以换用另一种方法，把 `top`、`left`、`right`、`bottom` 的值都设置为 `-30px`，效果是一样的。 但显然还是用 `margin` 比较优雅，它的简写语法一个顶四个，改起来也方便。 #### 第 101 页 ‧ 代码块...
## 花絮与注解 #### 第 169 页 ‧ 第二个代码块 > ```js > range.oninput = function() {...} > ``` 这一段在 JS 代码中，作者为简化代码，采用 `.oninput` 这样事件处理属性来绑定事件处理函数。需要提醒大家的是，这种写法在实际开发中应该杜绝。 具体原因请参考这篇文章：[《前端进阶之路：点击事件绑定》](https://github.com/cssmagic/blog/issues/48)。 #### 第 169 页 ‧ 侧栏的 “小提示”...
## 花絮与注解 #### 第 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 页 ‧...