current position:Home>These CSS efficiency improvement skills, you need to know!

These CSS efficiency improvement skills, you need to know!

2022-04-29 10:10:47Front end Xiaozhi

author :knaagar translator : The front end little wisdom source :dev

Have dreams , There are dry goods , WeChat search 【 The big move the world 】 Pay attention to this dish washing wisdom who is still washing dishes in the early morning .

this paper GitHub github.com/qq449245884… Included , There is a complete interview site for a large factory 、 Materials and my series .

Gradient text

h1{
  background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
 Copy code 

001.png

modify media defaults

To write css When reset , Add these attributes to improve media defaults .

img, picture, video, svg {
  max-width: 100%;
  object-fit: contain;  /* preserve a nice aspect-ratio */
}
 Copy code 

column count

Use column attributes to make a beautiful column layout for text elements .

p{
  column-count: 3;
  column-gap: 5rem;          
  column-rule: 1px solid salmon; /* border between columns */
}

 Copy code 

002.png

Use position Center elements

div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
 Copy code 

A comma separated list

li:not(:last-child)::after{
  content: ',';
}
 Copy code 

003.png

Smooth rolling

 html {
  scroll-behavior: smooth;
}
 Copy code 

004.gif

hyphens

hyphens Tell the browser how to use hyphens to connect words when wrapping . Hyphens can be completely blocked , You can also control when the browser is used , Or let the browser decide when to use it .

005.gif

first letter

Avoid unnecessary span , And use pseudo elements to design your content , Similarly, the pseudo element of the first letter , We also have the pseudo element in the first line .

 h1::first-letter{
   color:#ff8A00;
}
 Copy code 

006.png

accent-color

accent-color Property can re color the accent color of the form control provided by the browser's default style with a custom color value .

007.gif

Image filled text

h1{
  background-image: url('illustration.webp');
  background-clip: text;
  color: transparent;
}
 Copy code 

008.png

placeholder Pseudo elements

Use placeholder Pseudo elements to change placeholder style :

input::placeholder{
  font-size:1.5em;
  letter-spacing:2px;
  color:green;
  text-shadow:1px 1px 1px black;
}
 Copy code 

009.png

colors Animation

Use the color rotation filter to change the element color .

button{
  animation: colors 1s linear infinite;
}

@keyframes colors {
  0%{
    filter: hue-rotate(0deg);
  }
  100%{
    filter: hue-rotate(360deg);
  }
}
 Copy code 

009.png

clamp() function

clamp() The function limits a value between an upper limit and a lower limit , When this value exceeds the range of minimum and maximum , Choose a value between the minimum value and the maximum value to use . It takes three parameters : minimum value 、 Preferred value 、 Maximum .

h1{
  font-size: clamp(5.25rem,8vw,8rem);
}
 Copy code 

010.gif

selection pseudo-classes

Set the style of the selected element .

::selection{
  color:coral;
}
 Copy code 

011.gif

decimal leading zero

Set the list style type to decimal leading zero .

li{
  list-style-type:decimal-leading-zero;
}
 Copy code 

012.gif

Custom cursor

html{
  cursor:url('no.png'), auto;
}
 Copy code 

013.png

caret-color

caret-color Property is used to define the insertion cursor (caret) The color of the , Insert cursor here , It's the one in the page's editable area , The flash like vertical bar used to indicate where the user's input will be inserted | Things that are .

014.gif

only-child

CSS pseudo-classes :only-child Match elements that don't have any sibling elements . The equivalent selector can also be written as :first-child:last-child perhaps :nth-child(1):nth-last-child(1) , Of course , The weight of the former will be lower .

015.gif

Use grid Center elements

.parent{
  display: grid;
  place-items: center;
}
 Copy code 

text-indent

text-indent Attribute can define the amount of indentation before the first line of text content of a block element .

p{
  text-indent:5.275rem;
}
 Copy code 

image.png

list style type

CSS attribute list-style-type You can set the marker( Like dots 、 Symbol 、 Or custom counter style ).

li{
  list-style-type:'*';
}
 Copy code 

019.png

original text : dev.to/devsyedmohs…

communication

Have dreams , There are dry goods , WeChat search 【 The big move the world 】 Pay attention to this dish washing wisdom who is still washing dishes in the early morning .

this paper GitHub github.com/qq449245884… Included , There is a complete interview site for a large factory 、 Materials and my series .

copyright notice
author[Front end Xiaozhi],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/04/202204291010430248.html

Random recommended