一小部分关于HTML,CSS和Javscript鲜为人知的技巧。
前端是网站的第一条防线(更准备地说，用户最先冲击的地方),所以前端开发总数有很多工作去做。为了生活更加轻松，我们挑选一些有用但是又很少知道的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,let,right和bottom的简写版本。类似于简单的语法margin或者padding属性。你可以用一行代码设置所有位置。
// Before
div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
// After
div {
position: absolute;
inset: 0;
}
使用简单的语法可以减少css文件的体积,代码看起来也很简洁。
3.查询网速
使用javascript对象navigator你可以很容易到用户的网速速度
navigator.connection.downlink;
目前处于实验技术阶段,尽管在很多浏览器上支持使用，但谨慎使用。
4.启用手机震动
window.navigator的vibrate()方法可以在移动端开启震动
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>
现在你不可以复制粘贴了，只能通过手动输入内容。
这些技术不是经常用到，适用于少数特定场景。希望上面6个介绍可以找到你感兴趣的。
翻译于此处
