Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what practical front-end development skills". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Override the default style with CSS interpenetration

Common scenarios: if we need to upload files through input,type= "file", and the default style of this input can be said to be very ugly. So we want to cover it with a picture that is the same size as this input. At this time, obviously, clicking on the picture at this time, input will not work. It is because img blocks the penetration of click, and what we hope is that this img only visually obscures the style of input, but still clicks to input when clicked. So, just make img impenetrable.

The css code is as follows:

Img {pointer-events: none;}

two。 Implement the style of custom native select controls

Because the native style of select mobile is ugly, but the native pop-up effect is in line with our design principles. When you directly modify the style of select, a strange phenomenon arises. When debugging on chrome, the self-defined style works, and it also works on Android phone, but it doesn't work on ios phone. Typical incompatibility problem, you can disable the native style at this time.

The css code is as follows:

Select {- webkit-appearance: none;}

3. Text overflow processing

Mobile devices have relatively small pages, and many times some of the information displayed needs to be omitted. The most common ones are single-line header overflow ellipsis and multi-line detail introduction overflow ellipsis. Now that they are all developed in the framework, this suggestion requires the formation of a basic component that is convenient and quick.

The css code is as follows:

/ / single {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} / / multiple lines. More {display:-webkit-box! important; overflow: hidden; text-overflow: ellipsis; work-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 2; / / specify the number of lines}

4. Turn on elastic scrolling

The css code is as follows:

Body {overflow: scroll;-webkit-overflow-scrolling: touch;}

Note: Android does not support native elastic scrolling, but it can be achieved with the help of a third-party library, iScroll.

5. One pixel border setting

Most of the time, you want to keep the size of the border 1px in any setting, but because 1px is rendered using 2dp, that is, it will be displayed as 2px size. So, use css3 to zoom.

The css code is as follows:

Folder li {position: relative; padding: 5px;} .folder li + li:before {position: absolute; top:-1px; left: 0; content: "; width: 100%; height: 1px; border-top: 1px solid # ccc;-webkit-transform: scaleY (0.5);}

6. Prevent mouse selection events

Function CheckInfo () {if (event.keyCode==13) {alert (textbox1.text);}}

12. Chrome debug shortcut key

① ctrl+shift+f full text search

② ctrl+o lookup filename

③ ctrl+shift+o looks up the js function name

This is the end of the content of "what are the practical front-end development skills"? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.