慢速运动

不要追逐瀑布

我说的是忽视，因为我相信在我们认为自己了解的前端语言和我们实际上应该了解的东西之间存在着巨大的差距。

HTML

检查网站并评估其前端质量是我的工作的一部分，也是我的爱好。我查看了许多网站的底层代码，并且只能证实网络无障碍专家每天都在宣讲的内容：大多数 HTML 文档都处于糟糕的状态。如果你不相信我，只需查看数据即可。

• 98.1% 的前 1,000,000 个主页都存在可检测到的 WCAG 2 故障。
• 数千个网站包含<h7> 和 <h8> 元素。
• 在标题和元数据之后，div 是最受欢迎的元素。
• 平均而言，我们只使用了 110 多个可用元素中的大约 30 个。

了解 HTML 语法和了解如何正确使用它之间存在巨大差异。在编写结构良好、语义化的 HTML 文档方面，我们都可以进行一些复习。在 2020 年，我花费了大量时间学习 HTML，我希望我构建的网站用户能够从我的见解中受益。

我在 2020 年学习到的两件关于 HTML 的最喜欢的事情

可以通过在download 属性中定义一个值来更改可下载文件的名称。

<a href="files/yxcvc27.pdf" download="report.pdf">Download (2MB)</a>

可以使用value 属性更改有序列表中的编号。

<ol>
  <li value="3">C</li>
  <li value="2">B</li>
  <li value="1">A</li>
</ol>

CSS

几乎每次我在MDN 或CSS-Tricks 上查找 CSS 属性时，我都会发现一些新东西。自己试试。搜索margin、list-style-type 或color。我相信你会学到一些东西。

我在 2020 年学习到的关于 CSS 的内容列表很长，以下是我最喜欢的两点。

可以使用url() 函数作为content 属性的值（的一部分）。

div::before {
  content: url('marker-icon.png');
}

可以在 CSS 中实现原生平滑滚动。

// Animate scrolling only if users don’t prefer reduced motion
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  
  // Add some spacing between the target and the top of the viewport
  :target {
    scroll-margin-top: 0.8em;
  }
}

JavaScript

我定期编写 JavaScript，但它不是我的核心优势，因此我一直在学习关于它的新东西。以下是我今年最喜欢的两点

可以使用nomodule 属性仅在不支持 JavaScript 模块的浏览器中运行 JavaScript 代码。

<script nomodule>
  console.log('This browser doesn’t support JS Modules.');
</script>
<script type="module">
  console.log('This browser supports JS Modules.');
</script>