Five front-end tips that make people shine

In order to make programming easier for everyone, this book selects some useful but relatively rare and useful techniques. Without further ado, let’s drive.

1. Quick Hide

To hide a DOM element, no JavaScript is required. A native HTML attribute is enough to hide. The effect is similar to adding a styledisplay: none;.

However, this trick does not work on pseudo-elements.

2. Quick positioning

Are you familiar with the `inset` CSS property? It is the abbreviated version of `top`, `left`, `right` and `bottom`. Similar to the shorthand `margin` and `padding`, we can set all offsets of an element in a row.

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

3. Front-end network speed test

Chrome browser provides the original APInavigator.connection.downlinkto access the user’s current network environment network bandwidth.

navigator.connection.downlink;

connection.downlink does not return the network transmission speed displayed in the user's current environment, but the bandwidth of the current network. The official statement is: Returns the effective transmission speed in units ofMb/sbandwidth, and keep this value to the nearest integer multiple of 25kb/s.

For example, I ran the statement navigator.connection.downlink in my home Chrome browser console, and the result returned was 10, which means the download bandwidth is 10M.

4. Disable pull to refresh

CSSoverscroll-behaviorattribute allows developers to Overrides the browser's default overflow scrolling behavior when top/bottom. Use cases for this include disabling the "pull to refresh" feature on mobile devices, removing the over-scroll glow and rubber band effects, and preventing page content from scrolling under the modal/overlay

body { overscroll-behavior-y: contain; }

This property is useful for organizing modals In-window scrolling is also very useful - it prevents the main page from intercepting scrolling when it reaches the boundary.

5. Insertion of text is prohibited

When the user initiates a "paste" operation in the browser user interface, the paste event will be triggered.

Sometime, I want to prohibit users from pasting text copied from somewhere into the input box. This can be easily done by listening to the paste event and calling its methodpreventDefault().

It is impossible to know the possible bugs in real time after the code is deployed. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring toolFundebug.

Recommended learning:css video tutorial

The above is the detailed content of Five front-end tips that make people shine. For more information, please follow other related articles on the PHP Chinese website!