前端日刊（200309）

zhangbao90s
370 阅读3分钟

文章

从 <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 输入框，发现当数字过大时，会转换成科学计数法的形式。

GIF.gif

不知道吧。

其实这是我们错误使用了 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 -->

效果如下：

lazyload.webm (2.41MB)
对还不支持的浏览器，可以做个特性判断，使用 polyfill/第三方库。

下面以 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 浏览器，其他主流浏览器都已经支持了。

GIF.gif

工具

LuLu UI

一个适用于 PC、面向外部用户的网站开发框架，代码主要由 张鑫旭 老师维护。

GOV.UK 样式指南

英國政府網站使用的样式指南。

在 VS Code 中安装 Fire Code 字体

Fire Code 是一款非常酷的编程字体，提供了各种编程语言中常用符号的合并样式。

fira_code_logo.svg

以在 Widows 下安装为例。

  1. 下载字体库 .ttf 文件，挨个点击进行安装

image.png

  1. 然后在 VSCode 中设置字体

image.png

  1. 重启 VS Code 编辑器即可。

一句话技巧

  • JavaScript 模块默认是延迟（defer）执行的，效果等同于 <script defer>（出处）。

ER15oaAUwAApDSN.jpg

  • 为 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”（出处）

（正文完）

广告时间（长期有效）

我有一位好朋友开了一间猫舍，在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个爱猫人士并且有需要的话，不妨扫一扫她的【闲鱼】二维码。不买也不要紧，看看也行。

（完）

avatar
文章
阅读
粉丝