Collection of commonly used CSS code snippets, recommended collection

Share the common CSS codes encountered in the daily development process, and see if there is any code you are familiar with. I believe that so many scenarios can save you some time. It is recommended to collect them, maybe you will use them someday~

overscroll-behavior-x

When the inner box scrolls to the border, it will trigger the entire page to scroll, which can be prevented by setting overscroll-behavior-x

 div {
  height: 300px;
  width: 500px;
  overflow: auto;
  overscroll-behavior-x: contain;
}

Optimize scrolling with sroll-snap-type

In practical applications, the application has many uses in full-screen scrolling or banners, and does not require the original various size position calculations

 ul {
    scroll-snap-type: x mandatory;
}
 
li {
    scroll-snap-align: center;
}

Horizontal and vertical dotted lines

The dotted line that comes with CSS is not enough in some design scenarios, so draw a dotted line by linear-gradient .

 // 横虚线
.dashed {
  height: 1px;
  width: 100px;
    background: linear-gradient(to right, #000, #000 5px, transparent 5px, transparent);
    background-size: 10px 100%;
}

// 竖虚线
.dashed {
  background: linear-gradient(to bottom, #000, #000 3.2px,transparent 3.2px, transparent);
  background-size: 100% 10px;
  width: 1px;
  height: 100px;
}

draw a grid

Based on the linear-gradient gradient drawing grid, the angle of the grid and the gap between the stripes can be adjusted by yourself.

 background-image:
  linear-gradient(
    90deg, 
    rgba(52,83,139,.5) 50%, 
    transparent 50%), 
  linear-gradient(
    rgba(52,83,139,.5) 50%, 
    transparent 50%)

Change the color of the input box cursor

 caret-color: #0ff;

Solve the IOS scroll bar stuck

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

hide scrollbar

 .box::-webkit-scrollbar {
  display: none;
}

Modify the scroll bar style under webkit

::-webkit-scrollbar The whole part of the scroll bar
::-webkit-scrollbar-button Buttons at both ends of the scrollbar
:-webkit-scrollbar-track outer track
::-webkit-scrollbar-track-piece inner scrollbar
::-webkit-scrollbar-thumb scroll bar
::-webkit-scrollbar-corner corner

::-webkit-resizer defines the style of the drag block in the lower right corner

 ::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}

Enable hardware acceleration

After the 3D mode is turned on transition the transition in IOS flashes and freezes, you can set to turn on hardware acceleration to solve the problem

 .dom {
 backface-visibility: hidden;
 perspective: 1000;
}

In webkit-core browsers, another method that works well is

 .dom {
 transform: translate3d(0, 0, 0);
}

clear float

 @mixin clearfix() {
&::after {
  content: '';
  display: table;
  clear: both;
}
}

Text overflow shows ellipsis

Single-line text overflow, define ellipsis function for easy calling

 @mixin ellipsis() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.ellipsis {
@include ellipsis();
}

Multi-line text overflow, define multi-ellipsis function for easy calling, line is the corresponding number of lines

 @mixin multi-ellipsis($line: 1) {
@if $line <= 0 {
    $line: 1;
}

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $line;
-webkit-box-orient: vertical;
}

.ellipsis-1 {
@include multi-ellipsis(1);
}

.ellipsis-2 {
@include multi-ellipsis(2);
}

Use :not() to resolve last element special style

 // before
.nav li {    
  border-right: 1px solid #666;  
}
.nav li:last-child {    
  border-right: none;  
}

// after
.nav li:not(:last-child) {    
  border-right: 1px solid #666;  
}

Make the list items look like a real comma-separated list

 ul > li:not(:last-child)::after {
content: ",";
}

Android CSS does not recognize the border 0.5px solution

 // 按钮边框
.border {
position: relative;

&::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    left: -50%;
    top: -50%;
    border: 1px solid #000;
    border-radius: 4px;
    transform: scale(0.5);
    box-sizing: border-box;
  }
}

CSS3 nth-child() selector

1. Select even labels in the list: nth-child(2n)
2. Select the odd label in the list: nth-child(2n-1)
3. Select from the 6th to the end: nth-child(n+6)
4. Select the 1st to the 6th: nth-child(-n+6)
5. The combination of the two can limit the selection of a certain range, and select the 6th to 9th: nth-child(n+6):nth-child(-n+9)

Disable text selection

 *:not(input,textarea) {
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:rgba(255,0,0,0);
}

Display the link name and display the current URL

 <a href="http://www.baidu.com">baidu</a>
<style>
a::after {
  content: " (" attr(href) ")";
}
</style>

Show a link when the a tag has no text value, but the href attribute has a link

 a[href^="http"]:empty::before {
  content: attr(href);
}

Use border to realize triangle

To realize the code of changing the border of triangles in different directions, the color of the corresponding sides of the bottom of the triangle is transparent.

 .arrow-up {
  width: 0px;
  height: 0px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #2f2f2f;
  font-size: 0px;
  line-height: 0px;
}

Image grayscale filter

 img {
    filter: gray; 
    -webkit-filter: grayscale(1);
}

Customize selected text color

 ::selection {
     background: #00ff00;
}
 ::-moz-selection {
     background: #00ff00;
}
 ::-webkit-selection {
     background: #00ff00;
}

Disable mouse events

 .disabled { 
  pointer-events: none; 
}

refer to

Focus on front-end development, share dry goods related to front-end technology, public account: Nancheng Front-end (ID: nanchengfe)