今年我在 Web 开发中学到的 5 件事

今年很奇怪但很好，在我突然成为我所在的公司Matise中最有经验的前端开发人员之后，我真的必须加把劲。

在本文中，我列出了今年学到的有关 Web 开发的 5 件事。

1. 混合混合模式

好吧，我听说过这个，但从未真正深入研究过。mix-blend-mode它是一个 CSS 属性，用于确定元素的内容如何与其父元素的内容以及元素的背景[1]混合。例如，它可以为图像添加动画效果或实现暗黑模式。

2. CSS 过滤器

CSS 滤镜太棒了，我建议只在需要动画效果的图片上使用滤镜。因为虽然浏览器处理滤镜的能力已经提升了，但这仍然会对性能造成一定的影响[2]。我之前其实用 SVG 滤镜做过双色调效果，后来才意识到用混合模式和伪元素（其实是可以动画的）会更容易。

3. 线路夹紧

很多客户喜欢博客预览中的摘录高度一致，我一直跟他们解释这是不可能的，因为文本长度不一，而且没有使用 Monotype 字体等等。今年我发现我错了！这可以作为一种增强功能，但在非 WebKit 浏览器中无法使用，例如将文本“行限”为三行。我仍然会指导客户保持摘录简短扼要，但这对他们来说是一个不错的额外功能。

.text-excerpt {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

4. CSS变量很有趣

今年我经常用 CSS 变量（或者如果你喜欢老派的话，也可以叫它自定义属性）来给元素添加动画，而且讨论得让人厌烦，我可能是它最大的拥护者。
它们可以是全局的，可以是作用域的，也可以是在较小作用域内更改的，这太棒了。

我喜欢使用style.setProperty方法，而不是直接使用 JavaScript 添加 CSS 属性。我总是讨厌在需要覆盖这些 JavaScript 设置属性时必须使用!importants 语句。我也很喜欢我的逻辑保留在 SCSS 文件中，并且变量在所有子元素中都可用。如果你想在多个元素上设置样式，这非常有用，不再需要 JavaScript 循环，你只需在父元素上设置属性，然后使用类选择器将其添加到所有元素即可。

5. 文字笔触

这是我今年发现的一个非常有趣的事情，就像线夹一样，由于它的浏览器支持，它应该真正被用作一种增强功能。

奖金

我早在 2018 年就了解了 clip-path。但今年我仍然经常使用它们，并且学到了一些关于动画的新知识。例如，你不能在两种不同类型的 clip-path（例如 acircle和polygon类型）之间创建动画，这可以理解，但仍然很遗憾。你可以先创建一个正方形，然后用圆形类型替换多边形类型，稍微模拟一下，但这并不理想。

今年你学到了什么？

来源

1. https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
2. https://www.smashingmagazine.com/2016/05/web-image-effects-performance-showdown/