文章
从 <input type="number"> 到 <input type="text" inputmode="numeric" pattern="[0-9]*">
最近英國政府網站 GOV.UK 设计团队对设计规范做了修改。之前使用 <input type="number"> 输入数字的地方，代之以更好的 <input type="text" inputmode="numeric" pattern="[0-9]*"> 的写法。避免了使用 type="number" 输入框带来的一些问题。
举个例子：在 Chrome 79 中使用上下按键控制 type=number 输入框，发现当数字过大时，会转换成科学计数法的形式。
不知道吧。
其实这是我们错误使用了 type="number" 的结果：像手机号、银行卡、邮政编码这种有数字组成的字段，实质上并不是单纯的数字含义，而是一种编码，在这种情况下，使用 <input type="text"> 才是比较合适的。
浏览器已经原生支持图片懒加载
从 Chrome 76 版本开始，<img> 标签支持设置 loading 属性，启用图片懒加载功能。
<img src="…" loading="lazy" alt="…" width="200" height="200">
<img src="…" loading="lazy" alt="…" style="height:200px; width:200px;">
<!-- lazy-loaded -->
效果如下：
下面以 lazysizes 这个懒加载库作为回退方案，举个例子：
<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">
<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">
<script>
if ('loading' in HTMLImageElement.prototype) {
const images = document.querySelectorAll('img[loading="lazy"]');
images.forEach(img => {
img.src = img.dataset.src;
});
} else {
// Dynamically import the LazySizes library
const script = document.createElement('script');
script.src =
'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
document.body.appendChild(script);
}
</script>
- 使用
<img data-src>替换<img src>。 - 如果浏览器支持
loading属性，将data-src设置为src。 - 如果浏览器不支持
loading属性，使用回退方案（lazysizes），每个需要懒加载的资源，都加了lazyload这个类名，这是 lazysizes 默认使用的、作为懒加载资源的标记。
多行文本截断
单行文本截断的技巧，大家可能都用过。
.truncate {
text-overflow: ellipsis;
/* Needed to make it work */
overflow: hidden;
white-space: nowrap;
}
那么多行文本截断怎么做呢？答案是使用 line-clamp 属性：
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
使用时还需要加 -webkit- 前缀。除了 IE 浏览器，其他主流浏览器都已经支持了。
工具
LuLu UI
一个适用于 PC、面向外部用户的网站开发框架，代码主要由 张鑫旭 老师维护。
GOV.UK 样式指南
英國政府網站使用的样式指南。
在 VS Code 中安装 Fire Code 字体
Fire Code 是一款非常酷的编程字体，提供了各种编程语言中常用符号的合并样式。
以在 Widows 下安装为例。
- 下载字体库
.ttf文件，挨个点击进行安装
- 然后在 VSCode 中设置字体
- 重启 VS Code 编辑器即可。
一句话技巧
- JavaScript 模块默认是延迟（defer）执行的，效果等同于
<script defer>（出处）。
- 为
target="_blank"链接添加rel="noopener"，避免安全和性能问题（出处）。
<a href="https://web.dev" target="_blank" rel="noopener">web.dev</a>
- 去掉
<input type="number">里的 Spinners。
::-webkit-inner-spin-button {
-webkit-appearance: none;
}
- 用
var声明的变量不是只能存在于全局或者函数作用域下的——还受限于catch块作用域。
try {
var t1 = 't1'
} catch {
var t2 = 't2'
} finally {
var t3 = 't3'
}
t1 // "t1"
t2 // undefined
t3 // "t3"
- 在 Sublime 中设置字体使用“font_face”（出处）
（正文完）
广告时间（长期有效）
我有一位好朋友开了一间猫舍，在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个爱猫人士并且有需要的话，不妨扫一扫她的【闲鱼】二维码。不买也不要紧，看看也行。
（完）
