《CSS Secrets》读书笔记

Posted 2022-12-13 前端向朔

三年重构老司机二刷《CSS Secrets》觉得有些东西还是应该记录下来，本文内容来自书籍《CSS Secrets》中文名叫《CSS揭秘》，做笔记的过程中我会根据自己的过往经验加上自己的理解和看法，用通俗的表达对一些知识点进行解释。本书的对象是有一定CSS开发经验的人，如果你是新手，阅读起来可能有点吃力，同时，笔记也是针对我个人的查漏补缺，有些知识点并不会记录进去。

---

文章目录

• • 字体排印
  • 用户体验

字体排印

1. 连字符断行，hyphens: [none|manual|auto]，设置为auto的时候，可以实现自动软连字符，前提是在html标签设置好lang属性。
2. 有时候我们希望保留源代码中的空白符和换行，比如代码块，我们可以用到 white-space: pre 还有其他属性，pre 、 pre-line 或 pre-wrap ，但是推荐 pre ,它的兼容性更好。
3. 插入换行，用伪元素添加换行符，dd::aftercontent: "\\A";
4. 文本行的斑马条纹，如果是有结构划分的内容可以通过 nth-child() / :nth-of-type() 等伪类来实现斑马条纹，但是如果是一个代码块或者纯文字的时候，我们要想实现斑马条纹可以考虑用背景实现，之前我们已经分享过如何利用渐变实现条纹背景，运用到这里就刚好，同时注意设置背景的位置。

示例：https://codepen.io/xiangshuo1992/pen/MZPvpq

<p>
  timeout = setTimeout(function () 
    if (Date.now() - t < 2000) 
      location.href = apkUrl
    
  , 1000);
</p>

p
  width: 300px;
  white-space: pre;
  padding: .5em;
  line-height: 1.5;
  background: beige;
  background-image: linear-gradient(
    rgba(0,0,0,.2) 50%, transparent 0);
  background-size: auto 3em;
  background-origin: content-box;

5. 说到代码展示我们还会想到Tab缩进宽度问题，一般编辑器都会设置缩进宽度为4个字符或2个字符，但是浏览器中一般会将其显示为8个字符，这样缩进幅度有点大而且占用了很多空间，好在CSS3给我们提供了 tab-size 属性，让我们可以控制这个情况，如：pretab-size:2;。
6. 文字阴影，text-shadow，和 box-shadow 类似，当不设置模糊半径的时候，就会生成一层和原文字一样的文字，当添加模糊半径时就会实现外发光的效果，该属性支持 transition 过渡，可以设置在鼠标 hover 时，触发过渡效果，如果从兼容考虑，模糊外发光效果也可以由 filter:blur() 属性设置来实现。如果将多个不模糊的文字阴影叠加，并设置偏移，可以实现3D的文字凸起效果。
7. SVG的 textPath 路径文本，可以实现文字沿着设定的路径排列，比如圆形，波浪形等。

用户体验

1. 选用合适的鼠标光标，最值得推荐的就是禁用状态的提示，可以给禁用的累或者伪类或者属性选择器添加属性 cursor: not-allowed; 。
2. 扩大可点击区域，没有人愿意对一个狭小的按钮尝试点按很多次，但是现实中我们却经常遇到这种情况，在PC应用上会相对好一点，因为我们的鼠标操作还是相对精准和快速的，但是我们在手机应用上时，经常会对一个元素进行多次的操作来达到触发，原因就是因为元素的点击区域不够大，而我们的手指又不如鼠标那样精确，所以我们优化这项工作是很有必要的。
3. 那么如何来扩大点击区域呢，有几种方案，比如给元素添加透明色的 border 或者 padding ，但是这通常会造成元素本来的布局变化，如果是不受影响，用这种办法是可以直接一个属性设置就达到目的，但是很多情况下是会影响的，所以还有另外一个方案，就是在按钮的上方覆盖一层透明的伪元素，并让伪元素在四个方向上都比宿主元素大出10px，利用定位，我们可以将伪元素设置为任何的尺寸、位置或形状。
4. 在移动端，点击区域是有推荐大小的，根据 ios 人机交互规范，推荐的最小点击面为 44pt*44pt，在 Google Material Design 也就是安卓上，推荐最小点击面为 48dp*48dp ，在移动web应用中，根据设备的DPR，我们可以简单的估算为DPR*最小点击面，规范只是理想状态的推荐，不一定要严格执行，只要不影响正常布局和功能，同时又注意扩大点击区域来优化用户体验，目的就达到了。
5. 表单美化，这是一个非常有意思的工作，目前浏览器给到CSS工作者改造表单的属性不多，所以要实现个性化的比如单复选框，我们经常会通过其他元素来模拟，这里我不展示具体怎么实现，一句代码示例传达思路 input[type="checkbox"] + label::before ，然后可以看下表单美化这个课程，基本都在里面了，也可以去搜搜纯css实现tab切换效果，或者纯css实现轮播图。
6. 滚动提示，我们通过容器的阴影提示我们上下是否还有内容未展示，于是我们想到利用背景来实现这种效果，其中一个最重要的新属性是 background-attachment: local; 可以看下示例的完整效果以及代码实现，https://codepen.io/xiangshuo1992/pen/dwrwKg 。
   
7. 我们都知道 textarea 可以设置用户调节大小，其实这个属性也是可以用到其他元素上的，resize: horizontal | vertical | none | both ，如果我们想要用户自己调节其他元素大小，用这个属性也是可以的。

END.