These CSS efficiency tips, you need to know!

Author: knaagar
Translator: Front-end Xiaozhi Source: dev

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

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

gradient text

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

Modify media defaults

When writing a css reset, add these properties to improve media defaults.

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

column count

Use column properties to make beautiful column layouts for text elements.

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

Use position to center an element

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

comma separated list

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

smooth scrolling

 html {
  scroll-behavior: smooth;
}

hyphens

hyphens tells the browser how to use hyphens to connect words when wrapping lines. You can completely block the use of hyphens, or you can control when the browser uses it, or let the browser decide when to use it.

first letter

Avoid unnecessary span and use pseudo-elements to design your content, same pseudo-element for first letter, we also have pseudo-element for first line.

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

accent-color

accent-color property enables the use of a custom color value to recolor the accent color of form controls provided by the browser's default styles.

Image filled text

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

placeholder pseudo-element

Use the placeholder pseudo-element to change the placeholder style:

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

colors animation

Use the Color Rotation filter to change element colors.

 button{
  animation: colors 1s linear infinite;
}

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

clamp() function

clamp() The function of the function is to limit a value between an upper limit and a lower limit. When the value exceeds the range of the minimum and maximum values, select a value between the minimum and maximum values to use. It accepts three parameters: minimum value, preferred value, maximum value.

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

selection pseudo-class

Sets the style of the selected element.

 ::selection{
  color:coral;
}

decimal leading zero

Set the list style type to decimal leading zeros.

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

custom cursor

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

caret-color

caret-color attribute is used to define the color of the caret. The caret here is the one in the editable area of the web page that indicates where the user's input will be inserted. Something flashing like a vertical bar | .

only-child

CSS pseudo-class :only-child matches elements without any siblings. The equivalent selector can also be written as :first-child:last-child or :nth-child(1):nth-last-child(1) , of course, the former will have a lower weight.

Use grid to center elements

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

text-indent

text-indent attribute defines the amount of indentation before the first line of text in a block element.

 p{
  text-indent:5.275rem;
}

list style type

CSS properties list-style-type can set markers for list elements (such as dots, symbols, or custom counter styles).

 li{
  list-style-type:'🟧';
}

Original: https://dev.to/devsyedmohsin/css-tips-ad-tricks-you-will-add-to-cart-163p

comminicate

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

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