到目前为止，我在 2020 年学到的 4 件 Web 开发事情

我最喜欢 Web 开发的地方在于，你永远都不会停止学习新的属性和技巧。过去几个月过得很奇怪：在家办公，工作了三年的公司停业，我开始做自由职业者。由于所有这些原因，距离我上次写博文已经有一段时间了，但今天我决定重新拿起它，写下我今年学习新事物时所获得的所有小小成就！

可用填充

在 Safari iOS 浏览器中，无论底部导航栏是否可见，100vh 都是根据视口高度计算的。虽然这在大多数情况下都没有问题，而且可能比另一种方案（即元素高度在稍微向上滚动时重新计算）更可取，但对于固定滚动容器（例如以下示例中的弹出窗口）来说，这可能是一个非常奇怪的 bug。多年来，许多 开发人员一直在努力修复这个 bug 。 后来，Matt Smith 在四月份发了一条推文，几乎弥补了当时一个月的社交孤立。

马特·史密斯

@allthingssmitty

🔥 今天终于找到一个#CSS技巧来处理 WebKit（iOS Safari）中恼人的移动视口 bug：100vh！#WebDev #专业技巧

2020年4月25日 晚上8点53分

998 5232

我认为实现这一点的最佳方式是像 Matt 那样，例如为尚不理解此属性的浏览器提供备份；

.container {
  height: 100vh;
  height: -webkit-fill-available;
  height: fill-available;
}

基于交互的媒体查询

我觉得我有点晚了，但这或许是我今年最喜欢的 CSS 发现。它支持所有现代浏览器，并允许你根据用户的主要输入机制进行样式设置。这类媒体查询的优点在于，你不必依赖于屏幕尺寸媒体查询，因为这些查询并不总是与现代设备（比如 iPad Pro）兼容。

可能的选项包括pointer、any-pointer、hover和any-hover，它的妙处pointer在于它接受coarse、fine或 ，none并考虑到指针设备输入的特殊性。这将允许您为具有粗指针输入的设备创建稍大的 CTA、输入或复选框，以创建更易于访问的体验✨。我相信细指针值是在用户使用手写笔时实现的，但我不确定。
我已经使用过该hover属性几次了，主要用于创建自定义光标，这些光标显然不必在触摸设备上显示。

例子：

@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
  }
}

交叉口观察器 API

这是创建基于滚动位置的动画的最佳方法之一，我可以就此写一篇文章。我从这篇Mozilla 文章中学到了很多。
它在所有现代浏览器中都受支持，并允许您在元素进入视图（或与视图相交）时调用函数。

const header = document.querySelector('.header');
const inView = (entries) => {
  for (const entry of entries) {
    // try logging entry to view all the possible values
    if (entry.boundingClientRect.y < -32) {
      header.classList.add('background--dark'); // for example change the background of the header when the page has scrolled 32 px.
    } else {
      header.classList.remove('background--dark'); 
    }
  }
};
// threshold is just one of the options you can pass in the InteractionObserver
// It determines the amount of triggers while scrolling, it allows an array of numbers between 0 and 1
let threshold = []; 
for (let i = 0; i <= 100; i++) {
  threshold.push(i / 100);
}

const observePageHeader = new IntersectionObserver(inView, { threshold });

// observing the element that has .header as a class
observePageHeader.observe(header);

它可以用来创建延迟加载的图片或仅在视频可见时播放。或者为元素在特定的滚动位置添加样式和动画。
更让我惊喜的是，在使用 Locomotive 滚动库时，它仍然有效！

看法

显然，当你设置 cssperspective属性并创建一个可水平滚动的容器时，它会创建一种开箱即用的滚动动画？很奇怪的东西！

在研究创建一种可滚动时间线的方法时发现了这个意想不到的功能：

奖励：从我的错误中吸取教训

我花了好多好多时间试图修复一个“bug”，导致容器在 iOS 移动端无法滚动，但在桌面端却可以。看来pointer-events: none在 iOS 上，在父元素上使用 会严重影响可滚动容器内部的滚动功能。

想和我一起工作吗？

查看我的投资组合