1. Hide files:

Ensure that search engines will not be considered spam and ignored; So that screen readers do not ignore hidden text.

.text-hidden {
  display:block; 
  overflow: hidden;
  width: 0;
  height: 0;
}Copy the code



2. Make the padding inside the container not extend the width and height of the container 

div{
  box-sizing: border-box;
}Copy the code

 


3. Make out-of-width text to… hidden 

div{
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}Copy the code

Can only be used on a single line and width must be set


4. Know the float technique

Add Clearfix to the parent element to make it easy to use

.clearfix:after {
  display: table;
  content: ' ';
  clear: both;
  overflow: hidden;
}
.clearfix {  
  *zoom: 1;
}Copy the code

5. The image grays

img {
  filter: grayscale(100%); 
  -webkit-filter: grayscale(100%); 
  -moz-filter: grayscale(100%); 
  -ms-filter: grayscale(100%); 
  -o-filter: grayscale(100%);
}Copy the code



You don’t need to use one more image to achieve the graying effect


6. Shadow at the top of the page 

body:before {
  content: "";  
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px; 
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  box-shadow: 0px 0px 10px rgba(0,0,0,.8);  z-index: 100;
}Copy the code



7. Comma-separated lists

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


8. Optimize display text
Sometimes fonts don’t work best on all devices, so let the device browser help you: 

html { 
  -moz-osx-font-smoothing: grayscale;  
  -webkit-font-smoothing: antialiased; 
  text-rendering: optimizeLegibility;
}Copy the code

Note: IE /Edge does not support text-rendering


9. Use property pickers for empty links
Display a link when the a element has no text value but the href attribute has a link: 

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



10. Use of CSS3 calc()
Calc () is used like a function to assign dynamic values to elements: 

.complexBlock {
  width: calc(100% - 50% / 3);
  padding: 5px calc(3% - 2px);
  margin-left: calc(10% + 10px);
}Copy the code



11. Disable the mouse event

CSS3 has a new pointer-Events feature that allows you to disable mouse events for elements, for example, so that a link cannot be clicked if the following style is set. 

.noclick { pointer-events: none; }Copy the code

12. A P label with the left and right lines drawn before and after

p{  
  text-align: center;
}

p:after, 
p:before{  
  content: "";  
  position: absolute;  
  top:10px;  
  height: 1px; 
  background: red; 
  width: 200px
}

p:after{  
  left: 0;
}

p:before{  
  right:0;
}Copy the code




13. The counter 

<div class="choose">
  <label><input type="checkbox">111</label>
  <label><input type="checkbox">222</label>
  <label><input type="checkbox">333</label>
  <label><input type="checkbox">444</label>
  <label><input type="checkbox">555</label>
</div>
<p class="count"></p>Copy the code



.choose{
  counter-reset: fruit;
}

.choose input:checked{
  counter-increment: fruit;
}

.count:before{
  content: counter(fruit);
}Copy the code




14. User-select Disables the user from selecting text

div {
    user-select: none;
}Copy the code


15. A highlight that appears after clearing the phone tap event

* {- its - tap - highlight - color: rgba (0,0,0,0); }Copy the code



16. Touch screen elements scrolling

If you need to scroll through elements on a touch screen, you don’t just need to
overflow: scroll / auto, you also need to
-webkit-overflow-scrolling: touch;
Mobile browsers sometimes do not execute overflow: Scroll/auto correctly and it may scroll the entire page instead of the part you want. – Webkit-overflow-scrolling solves this problem, which you can experience in your actual projects.


17. Use hardware acceleration

Sometimes animations can cause the user’s computer to freeze up. You can avoid this problem by using hardware acceleration in certain elements: 

.block {
    transform: translateZ(0);
}Copy the code

The browser will do 3D hardware acceleration for this element.


18. Move the mouse over the button with a white light sweep

button{
  width: 200px;
  height: 50px;
  border-radius: 4px;
  background: #ea6f5a;
  border: none;
  color: #fff;
  position: relative;
}

button:after{
  background: #fff;
  content:"";
  position: absolute;
  width: 50px;
  height: 155px; 
  left: -70px;
  top: -60px;
  opacity:.3;
  transform: rotate(40deg);
  transition: all 1.4 s cubic-bezier(0.2, 1, 0.2, 1);
}

button:hover:after{
  left: 60%;
}Copy the code




19. The CSS draws a small triangle icon 

.arrow {  
  width:0px;  
  height:0px;  
  border-left:10px solid transparent;   
  border-right:10px solid transparent;   
  border-bottom:10px solid red; 
  font-size:0px;  line-height:0px;
}Copy the code

Change the direction of the triangle by changing the value of the edge


20. Page center pop-up layer

.popup{  
  position: fixed;  
  margin: auto;  
  top:0; 
  left: 0; 
  right: 0;
  bottom:0;
  z-index:1;
}Copy the code

To make the pop-up layer absolutely centered on the screen, remember to set the width and height of your pop-up layer

                                                                                         


                                                                                          to be continued…