你可能不知道的 6 种有用的前端技术

一些鲜为人知的 HTML、CSS 和 JavaScript 技术。

前端是网站的第一道防线（或者更准确地说，是“攻击”用户的第一道防线），因此前端开发人员总是有很多工作要做。为了让他们的工作更轻松一些，我们挑选了一些有用但不太知名的 HTML、CSS 和 JavaScript 技术。

1.快速隐藏

要隐藏 DOM 元素，无需 JavaScript。原生 HTML 属性即可hidden。效果类似于添加样式display: none;。元素会从页面中消失。

<p hidden>This paragraph is not visible on the page, it is hidden from the HTML.</p>

当然，这个技巧对于伪元素不起作用。

2.快速定位

你熟悉CSS 属性inset吗？它是我们熟悉的 、top和的缩写版本。类似于或 属性的简短语法，你可以在一行代码中设置元素的所有偏移量。leftrightbottommarginpadding

// Before
div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

// After
div {
  position: absolute;
  inset: 0;
}

使用简洁的语法有助于缩减 CSS 文件的大小，并使代码看起来更简洁。但是，别忘了 inset 是一个布尔属性，它会考虑电子邮件的方向。换句话说，如果您的网站使用支持 rtl 方向的语言，那么 left 将会变成 right，反之亦然。

3. 了解你的网速

您可以使用对象轻松地从 JavaScript 代码中确定用户的互联网速度navigator。

navigator.connection.downlink;

尽管许多流行的浏览器都支持该技术，但目前它仍是一项实验性技术，因此请谨慎使用。

4. 开启智能手机的振动功能

是的，这也是可以的。对象的vibrate()方法window.navigator可以在移动设备上启用振动模式。

window.navigator.vibrate(500);

您可以将振动时间（以毫秒为单位）传递给该方法。或者，您甚至可以指定一个模式——振动间隔和暂停的交替。为此，请将一个数字数组传递给该方法。

5. 禁止下拉刷新

下拉刷新是一种流行的移动开发模式。如果您不喜欢它，只需使用CSS 属性overscroll-behavior-y并将其设置为即可禁用此效果contain。

body {
 overscroll-behavior-y: contain;
}

此属性对于组织模式窗口内的滚动也非常有用 - 它可以防止主页面在到达边界时拦截滚动。

6.禁止插入文字

您可能希望阻止用户在输入字段中粘贴从某处复制的文本（请仔细考虑是否值得）。这很容易实现，只需跟踪事件paste并调用其方法即可preventDefault()。

<input type="text"></input>
<script>
  const input = document.querySelector('input');

  input.addEventListener("paste", function(e){
    e.preventDefault()
  })

</script>

哎呀，现在您将无法复制粘贴，您必须手动书写和输入所有内容。

这些技巧并不常用，但在很多情况下都很有用。希望你能从中有所收获。