Want to fish? Master these 19 CSS tricks first!

Author: Matt Maribojoc
Translator: Front-end Xiaozhi
Source: stackabuse

If you have dreams and dry goods, search [Moving the World] pay attention to this brush bowl wisdom who is still washing dishes in the early morning.

This article has been included in GitHub https://github.com/qq449245884/xiaozhi . There are complete test sites, materials and my series of articles for interviews with first-line manufacturers.

Modify placeholder style, multi-line text overflow, hide scrollbar, modify cursor color, center horizontally and vertically. These familiar scenarios! Front-end developers deal with them almost every day, here are 20 CSS tricks, let's take a look.

1. Solve the problem of img 5px spacing

Do you often encounter the problem of 5p x spacing at the bottom of the image? Don't worry, here are 4 ways to fix it.

Scheme 1: Set parent element font size to 0

Key code:

.img-container{
  font-size: 0;
}

Case address: https://codepen.io/qianlong/pen/VwrzoyE

Scenario 2: Set img element to display: block

Key code:

img{
  display: block;
}

Case address: https://codepen.io/qianlong/pen/eYeGONM

Scenario 3: Set img element to vertical-align: bottom

Key code:

img{
  vertical-align: bottom;
}

Case address: https://codepen.io/qianlong/pen/jOaGNWw

Solution 4: Set line-height: 5px to parent element

Key code:

.img-container{
  line-height: 5px;
}

Case address: https://codepen.io/qianlong/pen/PoOJYzN

2. The height of the element is the same as the height of the window

How can I make the element as tall as the window? The answer uses height: 100vh;

Example address: https://codepen.io/qianlong/pen/xxPXKXe

3. Modify the input placeholder style

Key code:

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

Case address: https://codepen.io/qianlong/pen/JjOrPOq

4. Use :not selector

All but the last element need some styling, which is very easy to do with the not selector.

As shown in the image below: The last element has no bottom edge.

key code

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

Case address: https://codepen.io/qianlong/pen/QWOqLQO

5. Use flex layout to intelligently anchor an element to the bottom

When there is not enough content, the button should be at the bottom of the page. When there is enough content, the button should follow the content. When you have a similar problem, use flex for smart layout.

Case address: https://codepen.io/qianlong/pen/ZEaXzxM

6. Use caret-color to modify the color of the cursor

The color of the cursor can be modified using caret-color as follows:

caret-color: #ffd476;

Case address: https://codepen.io/qianlong/pen/YzErKvy

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

By default, a small arrow appears at the end of type="number" , but sometimes we need to remove it. What should we do?

Key code:

.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

Case address: https://codepen.io/qianlong/pen/OJOxLrg

8. outline:none remove input status line

When the input box is selected, it will have a blue status line by default, which can be removed by using outline: none .

As shown in the figure below: the second input box is removed, the first input box is not removed.

Event address: https://codepen.io/qianlong/pen/YzErzKG

9. Solve the problem that the iOS scroll bar is stuck

On iPhones, it often happens that elements get stuck while scrolling. In this case, you can use the following CSS to support elastic scrolling.

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

10. Draw the triangle

.box {
  padding: 15px;
  background-color: #f5f6f9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.triangle {
  display: inline-block;
  margin-right: 10px;
  /* Base Style */
  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;
}

Case address: https://codepen.io/qianlong/pen/rNYGNRe

11. Draw small arrows,

Key code:

.box {
  padding: 15px;
  background-color: #ffffff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow {
  display: inline-block;
  margin-right: 10px;
  width: 0;
  height: 0;
  /* Base Style */
  border: 16px solid;
  border-color: transparent #cddc39 transparent transparent;
  position: relative;
}

.arrow::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -16px;
  border: 16px solid;
  border-color: transparent #fff transparent transparent;
}
/*下*/
.arrow.bottom {
  transform: rotate(270deg);
}
/*上*/
.arrow.top {
  transform: rotate(90deg);
}
/*左*/
.arrow.left {
  transform: rotate(180deg);
}
/*右*/
.arrow.right {
  transform: rotate(0deg);
}

Example address: https://codepen.io/qianlong/pen/ZEaXEEP

12. Image fit window size

Case address: https://codepen.io/qianlong/pen/PoOJoPO

13. Hide scrollbar

The first scrollbar is visible and the second scrollbar is hidden. This means that the container can be scrolled, but the scrollbar is hidden as if it were transparent.

Key code:

.box-hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

Case address: https://codepen.io/qianlong/pen/yLPzLeZ

14. Customize the selected text style

Key code:

.box-custom::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}

Case address: https://codepen.io/qianlong/pen/jOaGOVQ

15. Text selection not allowed

Key code:

.box p:last-child {
  user-select: none;
}

Case address: https://codepen.io/qianlong/pen/rNYGNyB

16. Center an element horizontally and vertically

Key code:

display: flex;
align-items: center;
justify-content: center;

Case address: https://codepen.io/qianlong/pen/VwrMwWb

17. Display ellipsis when single line text overflows

Key code:

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 375px;

Case address: https://codepen.io/qianlong/pen/vYWeYJJ

18. Display ellipsis when multiline text overflows

Key code:

  overflow: hidden;
  text-overflow: ellipsis;

  display: -webkit-box;
  /* set n lines, including 1 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

Case address: https://codepen.io/qianlong/pen/ZEaXEJg

19. Use "filter:grayscale(1)" to make the page in gray mode.

Key code:

body{
  filter: grayscale(1);
}

---

The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool Fundebug .

Original: https://javascript.plainenglish.io/20-css-tips-and-tricks-to-make-you-a-better-developer-d80ae5c09617

communicate with

If you have dreams and dry goods, search [Moving the World] attention to this Shawanzhi who is still washing dishes in the early morning.

This article has been included in GitHub https://github.com/qq449245884/xiaozhi , and there are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.