整理之前录的视频，发现一个漏掉没有上传的：
这个视频里，我演示了如何使用纯 HTML + CSS 制作工序流程图。涉及到的技术包括：
display:flexFlex 布局- 使用
order: N调整显示顺序，以实现响应式 - 使用
position:XX调整定位
虽然项目不大，不过大部分布局相关的技术都有所涉及，很适合刚入门和初级同学学习。
今年想继续在直播、视频方面发力，希望大家支持。如果有什么想听的想看的想学的，也欢迎点菜。
分类： 前端
以html+css为主的网页技术
早上起来日常刷技术新闻，看到两个对我和我厂影响比较大的消息，简单写几句。
Webpack 5 发布
Webpack 5 于今天（北京时间10月11日，美国时间10月10日）发布。这是个大版本更新，会有很多破坏性变更。所以不要轻易升级，否则可能遭遇各种问题。不过，对于像我这种三天两头主动升级依赖的人来说，是否可以平滑升级还未为可知。
这次的升级主要有以下几点变化：
- 使用持久缓存提升性能
- 通过替换更好的算法和缺省值，提升长期缓存的效果
- 使用更好的 Tree Shaking 算法和代码生成方式，减少打包后的提及
- 提升 web 平台的兼容性
- 在不引入破坏性变更的前提下，清理掉为实现 v4 功能而遗留下的奇怪的内部架构
- 现在的破坏性变更是为将来实现更多的功能打好基础，让我们可以在 v5 版停留尽可能长的时间
- （我加的）多页面 css 合并的时候，不再需要 all.js
更详细的内容大家请移步官网了解：Webpack 5 release (2020-10-10)。英语苦手的同学稍微等两天，估计中译版和各种解读版也会很快问世。
我只有两个建议：
- 尽快升级你的项目到 webpack 5
- 不要再学/用以前的版本了
Chrome 86 开始支持本地文件系统
很久很久以前，我在上一家公司做创业项目肉大师（Web 创作工具），不小心踏入了 FileSystem API 这个大坑。还留下一篇长文《HTML5的File API应用》，可能是为数不多的中文资料。
时隔八年，如今文件系统 API 终于有了比较靠谱的实现，并且被 Chrome 正式支持。一般来说，Chrome 的统治地位会帮助这个 API 成为事实标准，所以如果你对操作本地文件有需求，那么就可以开始使用这个 API 了，将来它会慢慢普及到其它浏览器上。
简单来说，这个 API 允许用户选择若干文件或者目录，相当于用户主动授权某些文件或目录给当前网站，然后 JS 就可以从文件里读内容，或者把内容写入文件。当然，从安全角度出发，网页不能任意访问文件，一定要用户主动选择。
对于我厂来说，这意味着 QA 产品可以更容易的编辑、保存文件，可以大大提升用户体验。一些 Web 工具也可以直接保存内容到用户本地，感觉网页生态更强大了。
更详细的内容可以阅读这两篇文章：
总结
学无止境，勤为径苦作舟吧。
Bootstrap 团队一边开发 Bootstrap 5，一边发布了 Bootstrap Icons 1.0（以下简称 BI）。官方全文见此：Bootstrap Icons v1.0.0。这个版本里包含 1100 个图标，涵盖范围很广，全免费（MIT），可以自由使用、修改。
真正引起我注意的是，这个仓库不再使用 Webfont，而是全部使用 SVG。官方文档 介绍了三种使用方式：
- 直接嵌入 SVG 代码
- 在
<svg>中引用 BI 库并配合<use>使用 - 通过
bootstrap-icons/icons/*.svg直接使用
如果你非常怀念 Webfont 方式，可以用（3）结合 CSS background-image 的方式近似的模拟。
其实，GitHub 很早以前就开始从 Webfont（Icon font） 向 SVG 切换了，他们还特地写了篇博客解释这件事情：Delivering Octicons with SVG，在里面列举了六个理由：
- Icon font 本身存在一些渲染问题，Webkit 内核的浏览器会使其边缘模糊，不利于辨识
- Icon font 一般会延后加载，而字体在完成加载之前无法判定大小，所以加载完成之后，需要重新计算布局并且重新进行渲染，造成不必要的性能损耗
- 可用性。参考这篇 Slide：Death to Icon Fonts，每十个人当中就有一个人存在阅读障碍，他们很难使用普通字体，必须使用专为他们设计的特殊字体，而这个时候，icon font 就会变成没有意义的方块。对使用阅读器的人更甚：icon font 是一种 hack，通常来说，我们并不会真的写文字进去，所以在他们看起来，图标会变得完全不可读。
- 合适的图标尺寸
- 方便重构字体文件
- 方便制作动画
所以，如今 Bootstrap 放弃 webfont，使用 SVG 作为主要格式，应该说是大势所趋。这几年使用 Webfont，的确很方便，给开发带来很大的效率提升，但与此同时，也存在不少问题：
- fontawesome 体积越来越大，现在一组字体要 1M+，加载很耗时，但是拆分非常困难，即使只用几个图标，也需要加载整个字体库
- 无法对图标进行稍微复杂的操作，比如双色，或者特定部位的动画
- 放大之后，图标比较丑，也不好加工
- 前面说过的那些问题
所以未来我和我厂也要慢慢从 webfont 切回 SVG。这样也有助于提升我厂产品的可用性。其实，互联网行业的可用性一直都做得不错，软件开发目前也算是残障人士最有机会获得体面收入的机会，所以，我辈仍需努力呀。
分类
零宽空格的问题与使用
今天有同学在群里提问：
我的第一反应是“零宽空格”，然后该同学试着手动敲了一遍 url 地址，问题果然解决了。看起来，就是因为原来的 URL 里含有零宽空格，直接复制过来，虽然看起来没问题，但是在发起请求时，非标准字符被 encode 之后就出错了。
我们姑且不管为啥他的复制来源里会有零宽空格，聊一聊什么是“零宽空格”，以及“零宽空格”能干什么。
零宽空格定义
零宽空格是空格的一种空格，但是它的宽度为零，即不显示，所以看起来跟没有一样。我们可以在浏览器里启动开发者工具，然后切换到 Console 面板，输入以下代码：
> a = '\u200b'; // 即零宽空格
"" // 其实是有内容的，只是看不到
> a.length
1 // 长度为 1，说明有东西
> encodeURIComponent(a)
"%E2%80%8B" // encode 之后跟截图里一样，破案了维基百科的解释：
零宽空格（zero-width space, ZWSP）是一种不可打印的Unicode字符，用于可能需要换行处。
它的用法：
在HTML页面中，零宽空格可以替代
<wbr>。但是在一些网页浏览器（例如 Internet Explorer的版本6或以下）不支持零宽空格的功能。
MDN 上没有零宽空格的定义，但是有 <wbr> 的内容。之前我也写过一篇文章：使用 <wbr> 解决长 URL 的换行问题，里面介绍了 HTML 换行算法，以及我选择 <wbr> 的思路，建议大家看一下。
用途一：在特定位置换行
比如一首古诗：
锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。
我们有时候会希望：
- 在宽度足够的时候，放一行
- 如果宽度不够，就在标点符号处换行
这个时候，我们可以先设置这段文字 word-break: keep-all，避免在汉字后断句换行；然后在每个标点后面加上零宽空格，这样，一行的时候就不会看到奇怪的空格，而宽度不够的时候，又能根据 white-space 属性正常换行。
用途二：特殊标记
我厂有一个产品，要输出大量日志，包含大量数字。为方便阅读，需要给数字添加千位分隔符；为了方便复制，又希望剪贴板上的是纯数字，不要千位分隔符；但是如果本来就是千位分隔符的，比如在别的软件里格式化的数字，就原样复制，不需要去掉千位分隔符。
这个时候就可以用到零宽空格。我先找出来足够长的数字，然后添加千位分隔符，然后在两头加上零宽空格。这样在用户眼里，看到的是千位分隔过的数字；等他们复制的时候，我就检查两端的零宽空格，如果有的话，就复原数字；如果没有的话，就原样返回。
其它零宽字符
除了零宽空格之外，还有很多零宽字符，可以用来在页面中加入特殊标记，或者实现一些控制功能。大家如果发现 url encode 之后的内容和之前肉眼看到的不符，那么多半是存在零宽字符，可以试着干掉它们，多半问题就能解决。
无意中看到 Font Awesome 发布了 Duotone 双色字体，感觉很神奇，我还不知道 WebFont 竟然支持多种颜色，于是赶紧看了看。
首先，这是旧闻，实际上，去年，也就是2019年7月30日，Font Awesome 就发布了 Duotone。
关于 Duotone 的介绍，大家可以看这篇官方博客：Introducing Duotone。借张图直观地展现 Duotone 的效果：
然后我就很好奇它们是怎么实现的，据我所知 WebFont 不支持多颜色。研究了半天，发现原来是这样：
2019年5月30日，Font Awesome 发布了 Font Awesome Kits（工具包）。Kits 是一个 JS，用来取代之前直接使用 CSS 引用字体的方式。这样做有几个好处：
- 根据字体使用情况按需加载
- 可以在客户端管理缓存，避免重复下载图标
- 可以自动更新图标，跟 Font Awesome 发布同步
- 可以帮助开发者处理可用性问题（关于这一点，GitHub 曾经发布过一篇博客，解释他们为什么要从 Icon Font 切换回 图标：https://github.blog/2016-02-22-delivering-octicons-with-svg/）
- 可以更快应用新技术，比如 HTTP2，SRI 等
上面几个好处都是 Font Awesome 官博《Introducing Font Awesome Kits》中列出来的，还有一个好处它们没说：可以修改 DOM。Duofont 正是藉此实现双色的。打开开发者工具，我们可以看到，所有图标 <i class="fad fa-*"></i> 都被替换成了 inline <svg>，包含两个图层，自然可以通过 CSS 控制颜色等样式。
这个思路很有意思，布局也一步一步规划的很好，虽然不知道最终效果如何，但还是学到不少东西。
Font Awesome 提供免费版，我一直在用。付费版一年 $99，我觉得还是贵了点，所以一直没用，有需求的同学应该试一下。
其实是个小需求，以前也搞过很多次，没想到前几天被坑了一下，记一笔。
以前，如果想要页面在内容任意多的时候都能占满浏览器，可以简单设置：
html,
body {
height: 100%;
}但是这样设置，在 Safari 浏览器上，会将 <body> 固定为窗口高度，如果内容多，就会被底部挡住内容。解决方案是 body 高度用 min-height:100%。
如果是三行一列的结构，即上面是导航条，下面是脚部，中间随内容自适应，可以用：
body {
display: flex;
flex-direction: column;
}这个时候，不能用 flex-basis，在 Safari 上会失去弹性，也要用 min-height。所以，最终样式大概就是：
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
#nav {
height: 4rem;
}
#bottom {
height: 10rem;
}
#content {
flex-grow: 1;
min-height: 40rem;
}另外，因为基本只有桌面浏览器需要这个功能，所以可以考虑加一个 @media (min-width: 576px) 做限制。
在 markdown 里添加图片很容易，用这个语法即可：
但是如果图片需要一些特殊样式，就不太好搞。比如前两天，老板觉得博文中的二维码太大，不好看，让我改小点。我一开始只知道可以用 HTML 来做，因为 Markdown 内建支持所有 HTML，但总觉得不够优雅，尤其是，不知道怎么要求将来写博客的人都用 HTML 来写。
于是 Google 之，找到这篇文章：How to Style Images With Markdown，写得非常好，列举了很多添加样式的方法，尤其是使用 #hash + CSS 选择器的方法，很有想象力，推荐给大家。
首先，在 Markdown 里，给图片的 URL 添加 hash。这个动作并不会造成任何实质性的影响。
然后，在 CSS 里，定义“src 里包含字符串 #thumbnail”的规则即可：
img[src*="#thumbnail"] {
max-width: 10rem;
}[attr*=val] 选择器的意思是 attr 属性里包含 val 字符串。这里用 [src$="#thumbnail"] 效果是一样的。如果你想了解所有 CSS 属性选择器，还是推荐看 MDN 文档。
我厂最新也是最重要的产品 OpenResty XRay 即将开始邀请测试，所以官网上自然要添加对应的网页。目前该网页已经部署到生产环境，大家可以访问 https://openresty.com.cn/cn/xray/ 简单了解一下。
这个页面的最下面，“信任与合规”区块是一些标准化组织的认证，按照需求应该放几个 logo。然后我就很自然的用 display: flex 来做了。在桌面浏览器显示正常。
但是在 iPhone Safari 上，上面的两个图标会变得瘦长，看起来是高度计算有问题。我尝试修复这个问题，却除了写明高度，只有 height: intrinsic 可以让它显示正常。去 MDN 一搜，竟然没有这个属性？！只提到 max-content 和 min-content 两种“intrinsic”的属性。
在 caniuse 上，可以看到 intrinsic 是个非标准化的属性，应该是以前浏览器自发实现过，后来被 max-content 和 min-content 取代。但是为何 Safari 明明支持这几个属性，但是只有 height: intrinsic 能显示正常，我就不知道了，也没有查到。
先记一下吧，将来再看。如果有同学遇到类似的，图片在 display:flex 横排时尺寸出现问题，可以试试这个。
最近比较忙，博客有些荒废。忙过这阵子再写吧。
接下来的三周，会强迫自己把开发浏览器切到 Firefox，争取从现有项目中找到兼容性问题，并且修复。
再接下来如是反复，Chrome > Firefox > Edge > Safari > Chrome……
以后客户越来越多了，兼容性得多费心了。
下午4点更新
Firefox 不支持 SourceMap……已经切回 Chrome 了，晚上继续尝试。
8-14 更新
Firefox 团队曾经抱怨 Google Chrome 不正当竞争，故意在几个大型产品中给 Firefox 挖坑，打压他们在用户心目中的地位。然而经过我这一周来的使用，我觉得 Firefox 实在做得不够好，很难让开发者选择它作为主力开发工具。
- 使用 Vue Cli 会不停报错，找不到 sw.js，连接不到 sockjs-node 等等
- 使用 webpack 无法加载到 sourcemap，无法 debug。（应该是配置问题，因为 Vue Cli 3 可以。
- 报错多了就影响性能，各种卡顿。
- 断点不会自动跳过去，屏幕没有明显的视觉效果，开始被迫重启好几次
- 断点不会自动更新堆栈、变量状态，需要点击一次“Step over”
问题很多，很影响开发效率。可惜我厂老板特别爱用 Firefox，所以我还必须照顾下 Firefox，经过一周的挣扎，现在倒是好一些了，Windows 10 的表现还不错。
position 属性非常重要，它有五个可选值。“这五个选项是哪些？它们的作用如何？”是我非常喜欢的面试题。以我的经验，凡是这道题答得好的，后面多半没啥问题；这道题答不出或者错漏的，后面能翻盘的概率很低。
属性及释义大家请看 MDN，本文不再赘述。
position: sticky 比较复杂，简单来说，它包含以下特性：
- 当它的位置让它可以正常呈现的时候，它的定位等同于
position: static，随着正常的文档流滚动 - 当它的位置不足以让它正常显示，但它的父元素有足够多让它显示的空间，它的定位等同于
position: fixed - 当它的父元素的空间不够让它显示，它的定位等同于
position:absolute
言说太复杂，大家可以看下这个演示，基本上就能明白了：