Original author: knaagar
Original link: dev.to/devsyedmohsin/css-tips-and-tricks-you-will-add-to-cart-163p
Translation: The wolf at the end of the desert
既然我们已经完成了 HTML 和 JavaScript 技巧，现在是时候介绍 CSS 技巧和技巧了 💖✨
1. Print media query
You can use Print Media Query to set styles for a printable version of your website.
@media print {
* {
background-color: transparent;
color: #000;
box-shadow: none;
text-shadow: none;
}
}
2. gradient text
h1 {
background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
3. Modify media defaults
Add these attributes to improve media defaults when writing css resets.
img,
picture,
video,
svg {
max-width: 100%;
object-fit: contain; /* preserve a nice aspect-ratio */
}
4. column count
Use column properties to create beautiful column layouts for text elements.
p {
column-count: 3;
column-gap: 5rem;
column-rule: 1px solid salmon; /* border between columns */
}
5. Use position to center elements
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
6. comma-separated list
li:not(:last-child)::after {
content: ",";
}
7. Smooth scrolling
html {
scroll-behavior: smooth;
}
8. hyphens
Hyphens tells the browser how to use hyphens to connect words when wrapping. You can completely block the use of hyphens, or you can control when the browser uses them, or let the browser decide when to use them.
9. first letter
避免不必要的 span ，并使用伪元素来设计你的内容，同样第一个字母的伪元素，我们还有第一行的伪元素。
h1::first-letter {
color: #ff8a00;
}
10. accent-color
accent-color 属性能够使用自定义颜色值重新着色浏览器默认样式提供的表单控件的强调颜色。
11. Image filled text
h1 {
background-image: url("illustration.webp");
background-clip: text;
color: transparent;
}
12. placeholder pseudo-element
使用 placeholder 伪元素来改变 placeholder 样式：
input::placeholder {
font-size: 1.5em;
letter-spacing: 2px;
color: green;
text-shadow: 1px 1px 1px black;
}
13. colors animation
Use the Color Rotation Filter to change the color of the element.
button {
animation: colors 1s linear infinite;
}
@keyframes colors {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
14. Use margin to center
.parent {
display: flex; /* display: grid; also works */
}
.child {
margin: auto;
}
15. clamp() function
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
h1 {
font-size: clamp(5.25rem, 8vw, 8rem);
}
16. selection pseudo-class
Sets the style of the selected element.
::selection {
color: coral;
}
17. decimal leading zero
Set the list style type to decimal leading zeroes.
li {
list-style-type: decimal-leading-zero;
}
18. Use Flex to center
.parent {
display: flex;
justify-content: center;
align-items: center;
}
19. custom cursors
html {
cursor: url("no.png"), auto;
}
20. caret-color
caret-color 属性用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。
22. resize attribute
Set the resize property to none to avoid resizing the textarea
textarea {
resize: none;
}
23. only-child
CSS 伪类 :only-child 匹配没有任何兄弟元素的元素。等效的选择器还可以写成 :first-child:last-child 或者 :nth-child(1):nth-last-child(1) ,当然,前者的权重会低一点.
24. Use grid to center elements
.parent {
display: grid;
place-items: center;
}
25. text-indent
text-indent 属性能定义一个块元素首行文本内容之前的缩进量。
p {
text-indent: 5.275rem;
}
26. list style type
CSS 属性 list-style-type 可以设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）。
li {
list-style-type: "🟧";
}
