分享 5 个你可能不知道的前端小技巧

95 阅读2分钟

1、使用CSS的inset简写 使用简写方式使CSS代码更简洁是一个不错的主意。

在CSS中,属性inset是一个非常方便的简写,它代表了left(左)、right(右)、bottom(下)和top(上)这四个属性。

所以,你可以用下面的CSS片段来替代原来的代码:

.element{ position: absolute; bottom: 0; right: 0; top: 0; left: 0; } 你可以使用以下简单的代码片段,使用inset属性:

.element{ position: absolute; inset: 0; } 2、在不使用CSS和JavaScript的情况下隐藏元素 你知道吗,在不使用任何CSS或JavaScript代码的情况下,你可以从页面中隐藏一个HTML元素吗?

实际上,属性hidden允许你在任何网页中本地快速隐藏任何HTML元素。

看一下这个代码示例:

This header won't show up. It's natively hidden. 正如你所看到的,属性hidden可以在我们的网页中本地隐藏元素。

3、禁用下拉刷新功能 我们可以只使用CSS来禁用移动设备上的下拉刷新功能。这得益于属性 overscroll-behavior-y。

只需将该属性的值设置为contain即可。

以下是CSS代码示例:

body { overscroll-behavior-y: contain; } 通过上述代码,我们可以禁用移动设备上的下拉刷新功能。

4、轻松检测网络带宽 网络带宽简单来说就是在一定时间内通过互联网连接传输的数据量。

通过使用JavaScript中的navigator对象,我们可以轻松检测网络带宽。

请看下面的JavaScript代码示例:

navigator.connection.downlink; 如果你在浏览器控制台中输入这段代码,你将会得到类似以下的结果:

我们所做的是使用了navigator对象,并从中获取了一个名为downlink的属性。

downlink属性告诉我们互联网连接的速度,单位是兆位每秒(Mbps)。

当我尝试运行代码时,我得到了一个值为5.65的结果,但你的结果可能会因为你的互联网速度和所使用的浏览器而有所不同。你可以在浏览器控制台中自己试一试。

5、使用JavaScript轻松震动手机 我们可以再次使用JavaScript中的navigator对象来使手机设备震动。navigator对象中的vibrate()方法允许我们实现这一功能。

//making the mobile device vibrate for 600 milliseconds

window.navigator.vibrate(600); 正如你在代码中所看到的,在这个例子中,设备将会以600毫秒的时长进行震动。你可以将这段JavaScript应用到任何网页中,然后使用你的手机设备进行尝试。