呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#书摘 #css #前端
《CSS 世界》font-face 中的src
「接下来解答#iefix有什么用的问题。实际上，#iefix是没什么用的！“你在开玩笑吗？”没有，这里的#iefix 确实没什么用，真正有用的其实是前面的问号。IE9之前的版本解析有一个严重的问题，当src属性包含多个 url()时，会把长长的字符当作一个地址解析而返回 404 错误。
因此把 eot 格式放在第一位，然后在字体文件 url 地址后加上问号，这样IE9之前的版本会把问号之后的内容当作 url 的参数。好吧，#iefix 严格来说还是有点儿用的，它可以让请求地址短一些，因此请求地址是不包括锚点标志#及其后面的内容的。
如果按照这种说法，那岂不是说iefix 这几个字符多余？没错，多余！不懂的人不知道是干什么用的，懂的人知道它是没什么用的，因此多余。」6

最后的问题是：format()功能符有什么作用，可不可以省略？我的回答是最好不要省略。format()功能符的作用是让浏览器提前知道字体的格式，以决定是否需要加载这个字体，而不是加载完了之后再自动判断。

于是，综合上面的全部知识会发现，业界常用的这套东西，其实可以优化成下面这样：
@font-face {
font-family: ICON;
src: url('icon.eot');
src: local('☺'),
url('icon.woff2') format("woff2"),
url('icon.woff') format("woff"),
url('icon.ttf');
}
有一种一周瘦10斤的感觉。
书摘 css 前端 iefix是没什么用的 iefix
《CSS 世界》font-face 中的src
@font-face {
font-family: ICON;
src: url('icon.eot') format('eot');
src: url('icon.eot?#iefix') format('embedded-opentype'),
url('icon.woff2') format("woff2") url('icon.woff') format("woff"),
url('icon.ttf') format("typetrue"), url('icon.svg#icon') format('svg');
font-weight: normal;
font-style: normal;
}
先解答一下字体格式的问题。上面这段 CSS 代码一共出现了 5 种字体格式，分别是.eot、.woff2、.woff、.ttf和.svg。
1. svg格式是为了兼容iOS 4.1及其之前的版本，考虑到现如今iOS的版本数已经翻了一番，所以svg格式的兼容代码大可舍弃。
2. eot格式是IE私有的。注意，目前所有版本的IE浏览器都支持eot格式，并不是只有IE6～IE8支持。只是，IE6～IE8仅支持eot这一种字体格式。
3. woff是web open font format几个词的首字母简写，是专门为Web 开发而设计的字体式，显然是优先使用的字体格式，其字体尺寸更小，加载更快。Android 4.4开始全面支持。
4. woff2是比woff尺寸更小的字体，小得非常明显。因此，Web 开发第一首选字体就是woff2，只是此字体目前仅Chrome和Firefox支持得比较好。
5. ttf 格式作为系统安装字体比较多，Web 开发也能用，就是尺寸大了点儿，优点在于老版本Android也支持。
综合上面的分析，我们可以得到如下的结论。
（1）svg格式果断舍弃。
（2）如果无须兼容IE8浏览器，eot格式果断舍弃。
（3）如果无须兼容Android 4.3之前版本手机，ttf格式果断舍弃。
说来说去还得是兼容，哎
iefix
#书摘 #css #前端
《CSS 世界》使用关键字值的font属性
font属性除了缩写用法，还支持关键字属性值
一个需求：希望非Windows系统下不要使用“微软雅黑”字体，而是使用其系统字体。怎么处理呢？
html { font: menu; }
让网页的字体跟系统走，对设计师而言，其实是一个比较冒险的做法，因为最终呈现的字体是不可控的。举个例子，某女生非常喜欢可爱风格，于是就把她的电脑主题变成了非常可爱的风格，菜单栏的字体全部变成那种很可爱的字体，此时，font:menu 所呈现的就不是“微软雅黑”，而是这个用户定义的“可爱字体”，这可能不是设计师想看到的，因为往往会跟自己的网页设计风格不一致。
但是，转念一想，万一这是用户想看到的呢？既然用户把自己的主题设为该字体，那就说明这个用户对这个字体并不排斥，而是喜欢。当她浏览网页的时候，发现就你的网站呈现出了她喜欢的那种字体，你说会不会给用户一种“你懂我的心”的感觉呢？对用户而言，反而成了一种情感化的设计！
另外，让网页的字体跟系统走，还有一个更加长远的好处。随着软件的不断发展，我们的操作系统的默认中文字体一定是越来越好看，如果网页的font-family定死为某个字体，用户就无法及时享受到新系统新字体带来的愉悦的视觉感受。举个例子，OS X 的默认中文字体其实已经变过好多次了，例如，你今天写了个页面，字体设置为很潮的“苹方”，过两年说不定会出来更好的名叫“梨方”的字体，我打包票，网站绝对是不会跟进的，因为大多数的线上项目维护都不会管font-family这种边边角角的事情，因此，就算很多年过去了，网站使用的依然是老字体。但是，如果使用的是font关键字属性值，就完全不会有这样的问题，网站字体能时时刻刻与时俱进。
书摘 css 前端
#书摘 #css #前端
《CSS 世界》font-family 等宽字体的好处
1. 等宽字体利于代码呈现
2. ch和em、rem、ex一样，是CSS中和字符相关的相对单位。和ch相关的字符是0，没错，就是阿拉伯数字0。（第一次听说）
- 1ch表示一个0字符的宽度，所以6个0所占据的宽度就是6ch。 但是我们网页内容的字符不可能都是 0，所以这个单位乍看就显得很鸡肋。但是，如果和等宽字体在一起使用，它就可以发挥不一样的威力
- 例如，有些输入框是输入手机号的，在中国，手机号是 11 位，因此我们可以设置该输入框宽度为 11ch，同时让字体等宽，则用户一眼就能看出自己是否少输入或者多输入了 1 位数字。又如，我们想实现一个屏幕上代码一个一个出现的动效，如果代码是等宽字体，此时使用 ch 单位来控制宽度，配合 overflow 属性和 CSS animation就能在完全不使用JavaScript的情况下将此效果模拟出来。
书摘 css 前端
#书摘 #css #前端
《CSS 世界》font-family 详解
font-family支持两类属性值，一类是“字体名”，一类是“字体族”。
1. “字体名”很好理解，就是使用的对应字体的名称。如果字体名包含空格，需要使用引号包起来
body {
font-family: 'Microsoft Yahei';
}

2. “字体族”分为很多类，MDN上文档分类如下：
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
具体含义解释如下。
- serif：衬线字体
- sans-serif：无衬线字体
- monospace：等宽字体
- cursive：手写字体
- fantasy：奇幻字体
- system-ui：系统UI字体。
对于中文网站，cursive和fantasy应用场景有限，因此这里不予探讨，这里着重介绍一下衬线字体、无衬线字体和等宽字体。
- 衬线字体，通俗讲就是笔画开始、结束的地方有额外装饰而且笔画的粗细会有所不同的字体。网页中常用中文衬线字体是“宋体”，常用英文衬线字体有Times New Roman、Georgia等。
- 无衬线字体没有这些额外的装饰，而且笔画的粗细差不多，如中文的“雅黑”字体，英文包括Arial、Verdana、Tahoma、Helivetica、Calibri等。以前人们排正文喜欢使用衬线字体，但是如今，不知是审美疲劳还是人们更加追求简洁干净的缘故，更喜欢使用无衬线字体，
- 所谓等宽字体，一般是针对英文字体而言的。据我所知，东亚字体应该都是等宽的，就是每个字符在同等 font-size 下占据的宽度是一样的。（这个踩过坑，英文字体不等宽的很多）
但是需要注意的是，serif 和 sans-serif 一定要写在最后，因为在大多数浏览器下，写在serif和sans-serif后面的所有字体都会被忽略。例如： body {
font-family: sans-serif, "Microsoft Yahei";
}
书摘 css 前端
#书摘 #css #前端
《CSS 世界》 font-size 踩过的坑
「桌面 Chrome 浏览器下有个 12px 的字号限制，就是文字的 font-size 计算值不能小于12px，我猜是因为中文，如宋体，要是小于12px，就会挤成成一团，略丑，Chrome看不下去…
实际上，并不是所有小于12px的font-size都会被当作12px处理，有一个值例外，那就是 0，也就是说，如果 font-size:0 的字号表现就是 0，那么文字会直接被隐藏掉，并且只能是 font-size:0，哪怕设置成 font-size:0.0000001px，都还是会被当作12px处理的。」
书摘 css 前端
#书摘 #css #前端
《CSS 世界》
font-size 支持长度值，如1em，也支持百分比值，如100%。这两点想必众所周知，但 font-size 还支持关键字属性值这一点怕是就有不少人不清楚了。

（1）相对尺寸关键字。指相对于当前元素font-size计算，包括：
- larger：大一点，是<big>元素的默认font-size属性值。
- smaller：小一点，是<small>元素的默认font-size属性值。

（2）绝对尺寸关键字。与当前元素 font-size 无关，仅受浏览器设置的字号影响。注意这里的措辞，是“浏览器设置”，而非“根元素”，两者是有区别的。
- xx-large：好大好大，和 <h1> 元素计算值一样。
- x-large：好大，和 <h2> 元素计算值一样。
- large：大，和 <h3> 元素计算值近似（“近似”指计算值偏差在1像素以内，下同）。
- medium：不上不下，是 font-size 的初始值，

其中，相对尺寸关键字larger和smaller由于计算的系数在不同浏览器下差异很大，因此实用价值有限，只有类似文档页、帮助页这类对文字尺寸要求不高的场合才有用；而绝对尺寸关键字的实用性要大一些，而且在某些场合是推荐使用的关键字属性值
书摘 css 前端
#书摘 #css #前端
《CSS 世界》z-index“不犯二”准则

此准则内容如下：对于非浮层元素，避免设置z-index值，z-index值没有任何道理需要超过2。由于z-index不能超过2，因此，我称其为“不犯二”准则。 这是一条经验准则，可以有效降低日后遇到z-index样式问题的风险。 先讲一下为什么需要这个准则。
（1）定位元素一旦设置了 z-index 值，就从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了根本的变化，很容易出现设置了巨大的 z-index 值也无法覆盖其他元素的问题。
（2）避免 z-index“一山比一山高”的样式混乱问题。此问题多发生在多人协作以及后期维护的时候。例如，A小图标定位，习惯性写了个z-index:9；B一看，自己原来的实现被覆盖了，立马写了个z-index:99；结果比弹框组件层级还高，那还得了，立马弹框组件来一个z-index:999999；谁知后来，弹框中又要有出错提示效果……显然，最后项目的 z-index层级管理就是一团糟。

对于 JavaScript 驱动的浮层组件，我会借助“层级计数器”来管理，原因如下：
（1）总会遇到意想不到的高层级元素；
（2）组件的覆盖规则具有动态性。所谓“层级计数器”，实际上就是一段 JavaScript 脚本，会遍历所有 <body> 处于显示状态的子元素，并得到最大z-index值，和默认的z-index做比较。如果超出，则显示的组件的z-index自动加1，这样就不会出现有组件被其他组件覆盖的问题；如果不超出，就使用默认的z-index值，我习惯设成9，因为遵循“不犯二”准则的情况下，9已经是个足够安全的值了，浮层组件根本无须担心会被页面上某个元素层级覆盖
书摘 css 前端
#书摘 #css #前端
《CSS 世界》理解CSS世界的层叠上下文和层叠水平
1. 层叠上下文，英文称作 stacking context，是 HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。

2. 层叠水平，英文称作 stacking level，决定了同一个层叠上下文中元素在z轴上的显示顺序。对普通元素的层叠水平探讨只局限在当前层叠上下文元素中。

3. 千万不要把层叠水平和CSS的 z-index 属性混为一谈。尽管某些情况下 z-index 确实可以影响层叠水平，但是只限于定位元素以及 flex 盒子的孩子元素；而层叠水平所有的元素都存在。

4. 层叠顺序，英文称作 stacking order，表示元素发生层叠时有着特定的垂直显示顺序。注意，这里跟上面两个不一样，上面的“层叠上下文”和“层叠水平”是概念，而这里的“层叠顺序”是规则。（p2）

5. 下面这两条是层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面两条准则：
（1）谁大谁上：当具有明显的层叠水平标识的时候，如生效的 z-index 属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
（2）后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在 DOM 流中处于后面的元素会覆盖前面的元素。

6. 层叠上下文元素有如下特性。
- 层叠上下文的层叠水平要比普通元素高
- 层叠上下文可以阻断元素的混合模式（参见http://www.zhangxinxu.com/wordpress/?p=5155 的这篇文章的第二部分说明）。
- 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
- 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。
- 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

7. 和块状格式化上下文一样，层叠上下文也基本上是由一些特定的CSS属性创建的。我将其总结为3个流派。
（1）天生派：页面根元素天生具有层叠上下文，称为根层叠上下文
（2）正统派：z-index值为数值的定位元素的传统“层叠上下文”。当其z-index值不是auto的时候，会创建层叠上下文
（3）扩招派：其他CSS3属性（flex等）
书摘 css 前端
#阮一峰的科技周刊 #优质博文 #前端
科技爱好者周刊（第 270 期）："精益开发"的精益是什么？

「"精益开发"指的是创建一个最小的产品原型，交付给客户，观察他们如何使用它，再快速推出小幅改进的下一代产品。这样就能迎合快速变化的需求，不会引入无用功能。
作为比较，福特方法则是详细计划所有功能，全部开发出来，然后一次性交付。」

#tools
1. Figma.Pub： 为 figma 设计稿生成可自动更新的图片链接，支持 jpg 、png 、svg 格式和 scale 参数
2. Whisper Web： 不必登录，将英语音频转成文本的在线工具。

好像没别的感兴趣的了´_>`
阮一峰的科技周刊 优质博文 前端 tools
Before
After
Back to Top