13 practical CSS tips to help you improve front-end development efficiency!

This article compiles and shares 13 CSS techniques that may be useful on the front end, including modifying input placeholder styles, multi-line text overflow, hiding scroll bars, modifying cursor colors, etc. I hope it will be helpful to everyone!

Modify input placeholder style, multi-line text overflow, hide scroll bars, modify cursor color, horizontal and vertical centering. What a familiar scene! Front-end developers deal with them almost every day. This article collects 13 CSS skills, let’s review them together.

1. Solve the problem of 5px spacing in images

Do you often encounter the problem of extra 5px spacing at the bottom of images? Don't worry, there are 4 ways to solve it. [Recommended learning: css video tutorial]

• Solution 1: Solve the font-size:0px
• of its parent element Solution 2: Add the style of img to display:block
• Solution 3: Add the style of img to vertical-align:bottom
• Solution Solution 4: Increase the style of the parent element by line-height:5px

2. How to make the height of the element the same as the window

In the current front-end, the CSS unit is vh, set the element height style to height:100vh

3. Modify the input box placeholder style

This is the placeholder attribute of the form input box. How to modify the default style is as follows:

input::-webkit-input-placeholder {
  color: #babbc1;
  font-size: 12px;
}

4. Use :not selector

Every element except the last one needs some styling, which is very easy to achieve using the not selector.

For example, to implement a list, the last element does not need to be underlined, as follows:

li:not(:last-child) {
  border-bottom: 1px solid #ebedf0;
}

5. Use caret-color to modify the cursor color

Sometimes it is necessary to modify the color of the cursor. It's caret color time.

.caret-color {
  width: 300px;
  padding: 10px;
  margin-top: 20px;
  border-radius: 10px;
  border: solid 1px #ffd476;
  box-sizing: border-box;
  background-color: transparent;
  outline: none;
  color: #ffd476;
  font-size: 14px;
  /* 关键样式 */
  caret-color: #ffd476;
}

.caret-color::-webkit-input-placeholder {
  color: #4f4c5f;
  font-size: 14px;
}

6. Use flex layout to intelligently pin elements to the bottom

When the content is not enough, the button should be at the bottom of the page. When there is enough content, the button should follow the content. When encountering similar problems, you can use flex to achieve smart layout!

<div class="container">
  <div class="main">这里为内容</div>
  <div class="footer">按钮</div>
</div>

CSS code is as follows:

.container {
  height: 100vh;
  /* 关键样式 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main {
  /* 关键样式 */
  flex: 1;
  background-image: linear-gradient(
    45deg,
    #ff9a9e 0%,
    #fad0c4 99%,
    #fad0c4 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.footer {
  padding: 15px 0;
  text-align: center;
  color: #ff9a9e;
  font-size: 14px;
}

7. Remove the arrow at the end of type="number"

By default , a small arrow will appear at the end of the input type type="number", but sometimes it needs to be removed. You can use the following style:

input {
  width: 300px;
  padding: 10px;
  margin-top: 20px;
  border-radius: 10px;
  border: solid 1px #ffd476;
  box-sizing: border-box;
  background-color: transparent;
  outline: none;
  color: #ffd476;
  font-size: 14px;
  caret-color: #ffd476;
  display: block;
}

input::-webkit-input-placeholder {
  color: #4f4c5f;
  font-size: 14px;
}
/* 关键样式 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

8. Use outline:none Delete the input status line

When the input box is selected, there will be a blue status line by default, which can be changed using outline:none Remove.

9. Solve the problem of iOS scroll bar getting stuck

On Apple phones, elements often get stuck when scrolling. At this time, only one line of CSS will Support elastic scrolling.

body,html{
  -webkit-overflow-scrolling: touch;
}

10. Draw a triangle

.triangle {
  display: inline-block;
  margin-right: 10px;
  /* 基础样式 */
  border: solid 10px transparent;
}
/* 向下三角形 */
.triangle.bottom {
  border-top-color: #0097a7;
}
/* 向上三角形 */
.triangle.top {
  border-bottom-color: #b2ebf2;
}
/* 向左三角形 */
.triangle.left {
  border-right-color: #00bcd4;
}
/* 向右三角形 */
.triangle.right {
  border-left-color: #009688;
}

11. Customize the selected text style

Can be customized through styles The color and style of text selection, the key styles are as follows:

::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}

12. Text that is not allowed to be selected

Use styleuser-select: none;

13 Use filter:grayscale(1) Put the page in gray mode

One line of code will put the page in gray mode.

body{
  filter: grayscale(1);
}

(Learning video sharing: web front-end)

The above is the detailed content of 13 practical CSS tips to help you improve front-end development efficiency!. For more information, please follow other related articles on the PHP Chinese website!