HTML direction

Call system functions

Use < a > to quickly call the mobile device's three communication functions of phone / SMS / email, and use < input > to quickly call the mobile device's Library / file.

These functions facilitate the interaction between the page and the system. The key is that the call format must be accurate, otherwise it will be ignored by the mobile browser.

<!-- Make a call -->
<a href="tel:10086">Call 10086 little sister</a>

<!-- Send SMS -->
<a href="sms:10086">Send SMS to 10086 little sister</a>

<!-- Send mail -->
<a href="mailto:young.joway@aliyun.com">Send mail to JowayYoung</a>

<!-- Select a photo or take a photo -->
<input type="file" accept="image/*">

<!-- Select video or capture video -->
<input type="file" accept="video/*">

<!-- Multiple selected files -->
<input type="file" multiple>
Copy code

Ignore automatic recognition

Some mobile browsers will automatically recognize alphanumeric symbols as phones / mailboxes and render them as < a > in the above calling system functions. Although very convenient, it may go against the demand.

<!-- Ignore auto identification phone -->
<meta name="format-detection" content="telephone=no">

<!-- Ignore auto identify mailboxes -->
<meta name="format-detection" content="email=no">

<!-- Ignore automatic identification of phone and mailbox -->
<meta name="format-detection" content="telephone=no, email=no">
Copy code

Pop up numeric keypad

Using < input type = "Tel" > to pop up the numeric keypad will bring # and *, which is suitable for entering the phone. It is recommended to use < input type = "number" pattern = "\ d *" > to pop up the numeric keyboard, which is suitable for entering pure numeric formats such as verification code.

<!-- Pure digital band#And * -- >
<input type="tel">

<!-- Pure number -->
<input type="number" pattern="\d*">
Copy code

Wake up native applications

Establish a communication channel with the native application through location.href. This communication method between the page and the client is called URL Scheme. Its basic format is scheme://[path][?query]. The author has published it Communication mode between H5 and App Describe the use of URL Scheme.

• scheme: application ID, which represents the unique ID of the application in the system
• path: application behavior, indicating the application of a page or function
• query: application parameters, indicating the condition parameters required by the application page or application function

The URL Scheme is generally negotiated by the front end and the client. The premise of waking up the native application is that the application must be installed in the mobile device. Some mobile browsers cannot wake up the native application even if the application is installed, because they think that URL Scheme is a potentially dangerous behavior and disable it, such as Safari and wechat browsers. Fortunately, wechat browser can open the whitelist to make the URL Scheme valid.

If the URL Schema of the third-party native application is referenced on the page, its URL can be obtained by capturing the third-party native application.

<!-- Open wechat -->
<a href="weixin://"> open wechat</a>

<!-- Open Alipay -->
<a href="alipays://> > Open Alipay </a>.

<!-- Open the sweep of Alipay -->
<a href="alipays://Platformapi/startapp? SaId=10000007 > > Open Alipay's sweep </a>

<!-- Open the ant forest of Alipay -->
<a href="alipays://Platformapi/startapp? AppId=60000002 > > open the ant forest </a> of Alipay.
Copy code

Disable page scaling

With the popularity of smart phones, many websites have desktop and mobile browsing versions, so there is no need to double-click and zoom to view the page. Prohibiting page scaling can ensure that the mobile browser can show all the layout of the page without omission.

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
Copy code

Disable page caching

Cache control specifies the caching mechanism followed by requests and responses. It is forbidden if you don't want to use browser caching!

<meta http-equiv="Cache-Control" content="no-cache">
Copy code

Capital letters are prohibited

Sometimes when you enter text in the input box, the first letter capitalization correction will be enabled by default, that is, the first letter lowercase will be automatically corrected to uppercase, which is very annoying. Directly declare autocapitalize=off to turn off the initial capitalization function and autocorrect=off to turn off the correction function.

<input autocapitalize="off" autocorrect="off">
Copy code

Configuration for Safari

Post some scattered and less used Safari configurations.

<!-- set up Safari Full screen, in iOS7+invalid -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- change Safari Status bar style, optional default/black/black-translucent，It is valid only in the above full screen mode -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- Add page startup bitmap -->
<link rel="apple-touch-startup-image" href="pig.jpg" media="(device-width: 375px)">

<!-- Add icon when saving website to desktop -->
<link rel="apple-touch-icon" sizes="76x76" href="pig.jpg">

<!-- Add Icon and clear default gloss when saving website to desktop -->
<link rel="apple-touch-icon-precomposed" href="pig.jpg">
Copy code

For other browser configurations

Paste some scattered and less used configurations of other browsers, mainly the commonly used QQ browser, UC browser and 360 browser. According to the test data of Netease MTL, the following < meta > statements are no longer supported by the new QQ browser and UC browser.

<!-- force QQ Browser vertical screen -->
<meta name="x5-orientation" content="portrait">

<!-- force QQ Browser full screen -->
<meta name="x5-fullscreen" content="true">

<!-- open QQ Browser application mode -->
<meta name="x5-page-mode" content="app">

<!-- force UC Browser vertical screen -->
<meta name="screen-orientation" content="portrait">

<!-- force UC Browser full screen -->
<meta name="full-screen" content="yes">

<!-- open UC Browser application mode -->
<meta name="browsermode" content="application">

<!-- Turn on 360 browser speed mode -->
<meta name="renderer" content="webkit">
Copy code

Make: active valid and: hover invalid

The: active of some elements may be invalid, while the: hover of elements will always be in the click state after clicking. You need to click other positions to release the click state. Registering an empty touchstart event for < body > can reverse the two states.

<body ontouchstart></body>
Copy code

CSS direction

Auto fit layout

For the mobile terminal, the author will usually combine JS to dynamically declare the font size of < HTML > according to the ratio of screen width to design drawing width, and declare the geometric attributes of all nodes in rem as the length unit. In this way, the pages of most mobile devices can be compatible, and the compatible places with large access can be handled through media query.

The author usually sets the REM layout scale to 1rem=100px, that is, the length of 100px on the design drawing is represented by 1rem on the CSS code.

function AutoResponse(width = 750) {
    const target = document.documentElement;
    if (target.clientWidth >= 600) {
        target.style.fontSize = "80px";
    } else {
        target.style.fontSize = target.clientWidth / width * 100 + "px";
    }
}
AutoResponse();
window.addEventListener("resize", () => AutoResponse());
Copy code

Of course, you can also use calc() to dynamically declare the font size of < HTML > according to the ratio of screen width to design drawing width, so as to save the above code. No, it completely replaces the above code.

html {
    font-size: calc(100vw / 7.5);
}
Copy code

If the iPad Pro resolution 1024px is used as the breakpoint of mobile terminal and desktop terminal, it can also be combined with media query for breakpoint processing. Use rem layout below 1024px, otherwise do not use rem layout.

@media screen and (max-width: 1024px) {
    html {
        font-size: calc(100vw / 7.5);
    }
}
Copy code

Auto adapt to background

Use the rem layout to declare an element background. In most cases, the background size will be declared as cover. The background may fit perfectly under the mobile device with the corresponding resolution in the design drawing, but there will be a gap of 1px to npx left and right under the mobile device with other resolution.

At this time, declare the background size as 100%, which changes with the changes of width and height. Anyway, width and height are measured actual dimensions.

.elem {
    width: 1rem;
    height: 1rem;
    background: url("pig.jpg") no-repeat center/100% 100%;
}
Copy code

Monitor screen rotation

Are you still using JS to determine the horizontal and vertical screen adjustment style? That's really Out.

/* Vertical screen */
@media all and (orientation: portrait) {
    /* custom style */
}
/* Horizontal screen */
@media all and (orientation: landscape) {
    /* custom style */
}
Copy code

Support elastic scrolling

On the apple system, there may be a jam in the scrolling operation of non < body > elements, but this will not happen on the Android system. By declaring overflow scrolling: touch, call the system's native scrolling event to optimize elastic scrolling and increase the smoothness of page scrolling.

body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}
Copy code

No rolling propagation

Unlike desktop browsers, mobile browsers have a strange behavior. When the page contains multiple scrolling areas, if there is still scrolling momentum after scrolling one area, these residual momentum will be propagated to the next scrolling area, causing the area to scroll too. This behavior is called rolling propagation.

If you do not want to produce such strange behavior, you can directly prohibit it.

.elem {
    overscroll-behavior: contain;
}
Copy code

Disable screen dithering

For some pages with sudden scroll bars, it may have the adverse effect of left-right jitter. In a scroll container, open the pop-up window to hide the scroll bar, and close the pop-up window to display the scroll bar. Back and forth operation will shake the screen. Declaring the padding right of the scroll container as the scroll bar width in advance can effectively eliminate this adverse effect.

The scroll bar width of each mobile browser may not be consistent or even occupy a position. The scroll bar width can be calculated indirectly in the following ways. 100vw is the window width and 100% is the content width of the scroll container. Subtraction is the width of the scroll bar. Proper dynamic calculation.

body {
    padding-right: calc(100vw - 100%);
}
Copy code

Long press operation is prohibited

Sometimes you don't want users to press the element call out menu for long-term operations such as clicking links, making calls, sending emails, saving pictures or scanning QR codes. You declare that touch callout: none prohibits users from long-term pressing operations.

Sometimes you don't want users to copy and paste stolen copies. You declare user select: none to prohibit users from long-term pressing and selecting copying.

* {
    /* pointer-events: none; */ /* Wechat browser needs to attach this attribute to be valid */
    user-select: none; /* Prohibit long press to select text */
    -webkit-touch-callout: none;
}
Copy code

However, declaring user select: none will make < input > and < textarea > unable to enter text, and user select: Auto can be declared to exclude them.

input,
textarea {
    user-select: auto;
}
Copy code

Disable font adjustment

Rotating the screen may change the font size. Declare text size adjust: 100% to keep the font size unchanged.

* {
    text-size-adjust: 100%;
}
Copy code

Suppress highlighting

Touch the element and a translucent gray mask will appear. Don't want it!

* {
    -webkit-tap-highlight-color: transparent;
}
Copy code

Disable animation flashing

When adding animation on mobile devices, there will be a flash screen in most cases. Constructing a 3D environment for the parent element of the animation element can make the animation run stably.

.elem {
    perspective: 1000;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}
Copy code

Beautify form appearance

The form element style is too ugly. I hope you can customize it. appearance:none will help you.

button,
input,
select,
textarea {
    appearance: none;
    /* custom style */
}
Copy code

Beautification rolling space occupation

The style of scroll bar is too ugly. I hope to customize it and help you with:: - WebKit scrollbar - *. Remember the following three key words to be flexible.

• :: - WebKit scrollbar: the whole part of the scroll bar
• :: - WebKit scrollbar track: track part of scroll bar
• :: - WebKit scrollbar thumb: scroll bar slider part

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-image: linear-gradient(135deg, #09f, #3c9);
}
Copy code

Beautification input space occupation

The placeholder text of the input box is too ugly, and the:: - WebKit input placeholder will help you.

input::-webkit-input-placeholder {
    color: #66f;
}
Copy code

Align input placeholders

Students with obsessive-compulsive disorder always feel that the text position of the input box is on the upper side as a whole, and they feel itchy when they are not in the center. It can be solved by declaring that line height is equal to height in the desktop browser, but it still fails to be solved in the mobile browser. It is necessary to declare line height as normal.

input {
    line-height: normal;
}
Copy code

Align drop-down options

The drop-down box options are aligned to the left by default. It's time to change the alignment to the right.

select option {
    direction: rtl;
}
Copy code

Invalid repair Click

On the apple system, in some cases, non clickable elements listening to click events may be invalid. In this case, you only need to declare cursor:pointer on the elements that do not trigger click events.

.elem {
    cursor: pointer;
}
Copy code

Recognize text wrap

In most cases, JS will be used to wrap text, which is really Out. If the returned field of the interface contains \ n or < br >, do not replace it. You can declare white space: pre line and submit it to the browser for line breaking.

* {
    white-space: pre-line;
}
Copy code

Turn on hardware acceleration

Want to make the animation smoother? Turn on GPU hardware acceleration!

.elem {
    transform: translate3d(0, 0, 0);
    /* transform: translateZ(0); */
}
Copy code

Draw pixel border

Ten thousand year topic, how to describe a pixel border?

.elem {
    position: relative;
    width: 200px;
    height: 80px;
    &::after {
        position: absolute;
        left: 0;
        top: 0;
        border: 1px solid #f66;
        width: 200%;
        height: 200%;
        content: "";
        transform: scale(.5);
        transform-origin: left top;
    }
}
Copy code

Control overflow text

How to control single line overflow and multi line overflow of text?

.elem {
    width: 400px;
    line-height: 30px;
    font-size: 20px;
    &.sl-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    &.ml-ellipsis {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
}
Copy code

JS direction

No click penetration

It is well known that there is a 300ms delay in the click operation in the mobile browser, which often causes the click delay or even invalid click.

In 2007, Apple released the first Safari equipped with iPhone. In order to better display the desktop website on the mobile browser, it used double-click zoom. This scheme is the main reason for the above 300ms delay. When the user clicks for the first time, 300ms will be reserved to detect whether the user continues to click. If so, the zoom operation will be executed. Otherwise, the click operation will be executed. In view of the success of this scheme, other mobile browsers have also copied this scheme. Now almost all mobile browsers are equipped with this function. The click delay caused by this scheme is called click penetration.

In the front-end field, the earliest solution to click penetration is zepto in the jQuery era. It is estimated that most students have not used zepto. In fact, it is the mobile version of jQuery. Zepto encapsulates the tap event, which can effectively solve the click penetration. It completes the simulation of the tap event by listening to the touch event on the document, and bubbles the tap event on the document to trigger.

The reason why the touch event is used instead of the click event on the mobile browser is that the click event has an obvious delay, followed by fastclick. The solution monitors whether the user has made a double-click operation, which can normally use the click event, and the click penetration is handed over to fastclick for automatic judgment. More fastclick principles can be applied to Baidu. I won't introduce them here.

fastclick There are ready-made NPM packages that can be installed directly into the project. By introducing fastclick, you can use click event instead of tap event, and the access method is very simple.

import Fastclick from "fastclick";

FastClick.attach(document.body);
Copy code

No sliding penetration

When a pop-up window appears in the mobile browser, it is well known that sliding on the screen can trigger the content under the pop-up window to scroll.

First, specify the interactive behaviors to be maintained for sliding penetration, that is, except that the pop-up content can be clicked or scrolled, other content can not be clicked or scrolled. At present, many solutions can not do this. All solutions can prohibit the rolling behavior of < body >, but cause other problems.

• After the pop-up window is opened, the internal content cannot be scrolled
• The page scroll position is lost after the pop-up window is closed
• Webview can slide up and down to reveal the background color

Declare position:fixed to < body > when the pop-up window is opened; left:0; Width: 100% and dynamically declare top. Declaring position:fixed will cause the < body > scroll bar to disappear. At this time, it will be found that although there is no sliding penetration, the page scroll position has already been lost. Get the current scroll bar offset of the page through scrollingElement, take a negative value and assign it to top, then there will be no visual change. Remove position:fixed when the pop-up window is closed; left:0; Width: 100% and dynamic top.

scrollingElement can obtain scrollTop, scrollHeight and other attributes compatibly, which has been tried repeatedly in the mobile browser. document.scrollingElement.scrollHeight can perfectly replace the former document.documentelement.scrollHeight | document.body.scrollHeight. At a glance, it seems that the code is reduced.

The solution has no visual changes. To complete other solutions is actually a kind of reverse thinking and deception. This solution perfectly solves the impact of fixed pop-up windows and rolling pop-up windows on < body > Global scrolling. Of course, it can also be used in local scrolling containers, so it is worth popularizing.

body.static {
    position: fixed;
    left: 0;
    width: 100%;
}
Copy code

const body = document.body;
const openBtn = document.getElementById("open-btn");
const closeBtn = document.getElementById("close-btn");
openBtn.addEventListener("click", e => {
    e.stopPropagation();
    const scrollTop = document.scrollingElement.scrollTop;
    body.classList.add("static");
    body.style.top = `-${scrollTop}px`;
});
closeBtn.addEventListener("click", e => {
    e.stopPropagation();
    body.classList.remove("static");
    body.style.top = "";
});
Copy code

Round trip refresh is supported

Clicking the forward button or back button of the mobile browser sometimes does not automatically execute the JS code of the old page, which is related to round-trip caching. This situation is particularly obvious on Safari. A simple summary is that the round-trip page cannot be refreshed.

Round trip cache refers to a strategy for browsers to have a smoother experience when performing forward and backward operations between pages, hereinafter referred to as BFCache. The specific performance of this strategy is as follows: when the user goes to the new page, the DOM state of the old page is saved in BFCache, and when the user returns to the old page, the DOM state of the old page is taken out of BFCache and loaded. Most mobile browsers deploy BFCache, which can greatly save the time and bandwidth of interface requests.

Understand what BFCache is, and then apply the right medicine. The solution is to write an article on window.onunload.

// Listen for page destruction events on a new page
window.addEventListener("onunload", () => {
    // Execute old page code
});
Copy code

If using keep alive on Vue SPA cannot refresh the page, you can put the interface request in beforeRouteEnter().

Of course, there is another solution. The pageshow event is triggered every time a page is loaded, whether it is loaded for the first time or again, which is the difference between it and the load event. The persistent exposed by the pageshow event can determine whether the page is fetched from the BFCache.

window.addEventListener("pageshow", e => e.persisted && location.reload());
Copy code

If the browser does not use < meta http equiv = "cache control" content = "no cache" > to disable caching, this solution is still worth using.

Parse valid date

Parsing the date format YYYY-MM-DD HH:mm:ss on the apple system will report an error Invalid Date, but there is no problem parsing this date format on the Android system.

new Date("2019-03-31 21:30:00"); // Invalid Date
 Copy code

Check the relevant development manuals of Safari and find that the date format of YYYY/MM/DD HH:mm:ss can be used. A simple summary is that the date must be used / connected instead of - connected. Of course, the Android system also supports this format. However, the date format of the field returned by the interface is usually YYYY-MM-DD HH:mm:ss, so - should be replaced with /.

const date = "2019-03-31 21:30:00";
new Date(date.replace(/\-/g, "/"));
Copy code

Repair high collapse

When the following three conditions appear on the page at the same time, the keyboard occupation will compress the height of the page by a part. When the keyboard occupation disappears after the input is completed, the page height may not return to the original height, resulting in collapse, resulting in the background color of Webview. A simple summary is that the page does not rebound after the input box is out of focus.

• Page height too small
• The input box is at the bottom of the page or at the bottom of the window
• Input box focus input text

As long as the offset of the front and rear scroll bars is consistent, the above problem will not occur. Obtain the current scroll bar offset of the page when the input box is focused, and assign the scroll bar offset obtained before the page when the input box is out of focus, so as to indirectly restore the page scroll bar offset and solve the page height collapse.

const input = document.getElementById("input");
let scrollTop = 0;
input.addEventListener("focus", () => {
    scrollTop = document.scrollingElement.scrollTop;
});
input.addEventListener("blur", () => {
    document.scrollingElement.scrollTo(0, scrollTop);
});
Copy code

Fix input listening

Enter text in the input box on the apple system, and the keyup/keydown/keypress event may be invalid. When the input box listens to the keyup event, it will be valid to enter English and numbers one by one, but it will not be valid to enter Chinese one by one. It will be valid only by pressing enter.

In this case, the input event can be used instead of the keyup/keydown/keypress event in the input box.

Simplify back to top

Once upon a time, writing a return top function was so troublesome that it needed the cooperation of scrollTop, timer and condition judgment. In fact, a useful function is hidden in the DOM object, which can complete the above functions, and one line of core code can do it.

This function is scrollIntoView , it will scroll the parent container of the target element to make it visible to the user. A simple generalization is to scroll the container to the position of the target element relative to the window. It has three optional parameters to make scrollIntoView scroll more gracefully.

• behavior: animation transition effect, default auto none, optional smooth smoothing
• inline: horizontal alignment. The default alignment is closest. You can select start top alignment, center Middle alignment and end bottom alignment
• block: vertical alignment, default start top alignment, optional center middle alignment, end bottom alignment, and nearest alignment

const gotopBtn = document.getElementById("gotop-btn");
openBtn.addEventListener("click", () => document.body.scrollIntoView({ behavior: "smooth" }));
Copy code

Of course, you can also scroll to the location of the target element by changing document.body to the DOM object of the target element. Why do you write so much code to complete things that can be solved by one line of core code? Aren't you tired?

Simplified lazy loading

Like the above simplification, writing a lazy loading function also requires the cooperation of scrollTop, timer and condition judgment. In fact, a useful function is hidden in the DOM object to complete the above functions. This function does not need to listen to the scroll event of the container, and completes the scroll listening through the browser's own mechanism.

This function is IntersectionObserver , it provides a way to asynchronously observe the cross state of the target element and its ancestor elements or top-level document windows. For details, please refer to MDN document , I will not make too much introduction here.

The first usage scenario of lazy loading: lazy loading of pictures. Just confirm that the picture enters the visual area, assign and load the picture, and stop listening to the picture after the assignment is completed.

<img data-src="pig.jpg">
<!-- quite a lot<img> -->
Copy code

const imgs = document.querySelectorAll("img.lazyload");
const observer = new IntersectionObserver(nodes => {
    nodes.forEach(v => {
        if (v.isIntersecting) { // Determine whether to enter the visual area
            v.target.src = v.target.dataset.src; // Assign load picture
            observer.unobserve(v.target); // Stop listening for loaded pictures
        }
    });
});
imgs.forEach(v => observer.observe(v));
Copy code

The second usage scenario of lazy loading: drop-down loading. Deploy a placeholder element at the bottom of the list without any height or entity appearance. Just confirm that the placeholder element enters the visual area and request the interface to load data.

<ul>
    <li></li>
    <!-- quite a lot<li> -->
</ul>
<!-- You can also#The bottom is inserted into the last position inside the < UL > in the form of < li > -- >
<div id="bottom"></div>
Copy code

const bottom = document.getElementById("bottom");
const observer = new IntersectionObserver(nodes => {
    const tgt = nodes[0]; // There's only one anyway
    if (tgt.isIntersecting) {
        console.log("The interface has been requested to the bottom");
        // Execute interface request code
    }
})
observer.observe(bottom);
Copy code

Optimized code scanning recognition

Generally, the mobile browser will be equipped with the function of long pressing the QR code image to identify the link, but long pressing the QR code may not be recognized or incorrectly recognized. The surface of QR code looks like a picture, but there are various ways to generate QR code. There are three ways to generate QR code.

• Render with < img >
• Render with < SVG >
• Render with < canvas >

According to the test data of Netease MTL, most mobile browsers can only recognize the QR code rendered by < img >. In order for all mobile browsers to recognize the QR code, they can only use < img > to render the QR code. If the two-dimensional code is generated by SVG and Canvas, try every means to convert the two-dimensional code data into Base64 and assign it to the src of < img >.

There may be multiple QR codes on a page. If long pressing the QR code can only identify the last one, it can only control that there is only one QR code on each page.

Auto play media

Common media elements include audio < audio > and video < video >. In order to make users get a better media playing experience and not waste user traffic blindly, most mobile browsers clearly stipulate that media cannot be played automatically or autoplay is blocked by default. In order to make the media play automatically after the page is loaded, you can only explicitly declare the play.

const audio = document.getElementById("audio");
const video = document.getElementById("video");
audio.play();
video.play();
Copy code

For built-in browsers such as wechat browser, the above code can be triggered only after the application SDK is loaded, so as to ensure the normal rendering of WebView. The same is true for other built-in browsers, which will not be introduced here.

document.addEventListener("WeixinJSBridgeReady", () => {
    // Execute the above media auto play code
});
Copy code

It is clearly stipulated on the apple system that the media can be played only after the user interaction starts. If the user does not respond, it will be automatically intercepted by Safari. Therefore, it is necessary to monitor the user's first touch operation and trigger the automatic play of the media, and this monitoring is only once.

document.body.addEventListener("touchstart", () => {
    // Execute the above media auto play code
}, { once: true });
Copy code

summary

If there are unrecorded pits, they can be lifted PR Let's merge and record more mobile end pits together, so that more front-end developers can avoid detours. This article is also the author's first article in the Nuggets community in 2021. I hope to produce more high-quality articles this year. From the author's point of view, an article is not summarized as a good article because of its great technology and elegant style, but because its overall content can help itself and more people make progress. Go in this direction and Call yourself.

The above pits are divided into three types: HTML direction, CSS direction and JS direction, which can more efficiently distinguish the use scenarios and solutions of each pit and reduce confused memory. It mentioned many holes in the CSS direction, which also belong to some CSS development skills. If you like CSS, you can learn about the first CSS album of nuggets community that I put on the shelves Playing with the artistic beauty of CSS Do further study.

Looking back at my previous highly praised articles, I may be able to gain more!

• 15000 words to summarize all features of ES6 : 4100 + likes, 15w + reads
• Flexible use of CSS development skills : 4200 + likes, 13w + reads
• Flexible use of JS development skills : 1600 + likes, 5w + reads
• 25 advanced usage of array reduce you have to know : 700 + likes, 2.2w + reads
• "8 hard core skills take you to quickly improve CSS Technology ｜ summary of nuggets live broadcast" : 600 + likes, 1.6w + reads
• Wonderful use of CSS variables to make your CSS more exciting : 500 + likes, 1.5w + reads

Author: JowayYoung
Link: https://juejin.cn/post/6921886428158754829
Source: rare earth Nuggets
The copyright belongs to the author. For commercial reprint, please contact the author for authorization, and for non-commercial reprint, please indicate the source.