助力性能優化：100個CSS優化技巧分享！
Hello，大家好，我是 Sunday。
當各種框架以及復雜的 JS 知識開始充斥著我們的工作環境時。誰還能夠記得，以 CSS 來構建更加良好的用戶體驗，也是前端的一個重要組成部分。
所以說，今天咱們就來看看 css 的優化方案-終極合集。一共一百條，有點多，適合收藏（點個贊和分享自然更好了????）
01. 啟動平滑滾動
添加scroll-behavior：smooth到元素中<html>，使整個頁面能夠平滑滾動。
html{
scroll-behavior: smooth;
}02. 鏈接的屬性選擇器
此選擇器以href屬性以“https”開頭的鏈接為目標。
a[href^="https"] {
color: blue;
}03. ~用于合并節點
選擇作為<h2>同級元素的所有<p>元素。
h2 ~ p {
color: blue;
}04. :not()偽類
此選擇器將樣式應用于不具有類“Special”的 li。
li:not(.special) {
font-style: italic;
}05. 響應式排版的視窗單位 vw
使用視區單位(vw, vh, vmin, vmax)可以使字體大小與視區大小相對應。
h1 {
font-size: 5vw;
}06. :empty 對于空元素
此選擇器以空的<p>元素為目標并隱藏它們。
p:empty {
display: none;
}07. 自定義特性(變量)
可以定義和使用自定義特性，以便更輕松地創建主題和進行維護。
:root {
--main-color: #3498db;
}
h1 {
color: var(--main-color);
}08. Object-fit 圖像控件的適配性
object-fit 控制替換元素(如<img>)的內容應該如何調整大小。
img {
width: 100px;
height: 100px;
object-fit: cover;
}09. 簡化布局的網格
Css網格提供了一種功能強大的方式來以更直接的方式創建布局。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}10. :focus-within 偽類
如果一個元素包含任何帶有:focus的子元素，則:focus-Win會選擇該元素。
form:focus-within {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}11. 使用Flexbox垂直居中
使用FlexBox可輕松地將內容在容器中水平和垂直居中。
.container {
display: flex;
align-items: center;
justify-content: center;
}12. 自定義選定內容的突出顯示顏色
自定義在網頁上選擇文本時的突出顯示顏色。
::selection {
background-color: #ffcc00;
color: #333;
}13. 設置占位符文本的樣式
設置輸入字段內占位符文本的樣式。
::placeholder {
color: #999;
font-style: italic;
}14. 漸變邊界
使用Backback-Clip屬性創建漸變邊框。
.element {
border: 2px solid transparent;
background-clip: padding-box;
background-image: linear-gradient(to right, red, blue);
}15. 使用vw實現可變字體大小
根據視口寬度調整字體大小，實現更加響應式的排版。
body {
font-size: calc(16px + 1vw);
}16. 使用錐形漸變創建多彩元素
利用錐形漸變創建豐富多彩且動態的背景。
.element {
background: conic-gradient(#ff5733, #33ff57, #5733ff);
}17. 使用clamp()函數實現響應式文本
使用clamp()函數設置字體大小的范圍，確保在不同屏幕尺寸下的可讀性。
.text {
font-size: clamp(16px, 4vw, 24px);
}18. 使用font-display: swap;優化字體加載
使用font-display: swap;屬性提高網頁字體性能，讓自定義字體加載時顯示備用字體。
@font-face {
font-family: 'YourFont';
src: url('your-font.woff2') format('woff2');
font-display: swap;
}19. 自定義滾動吸附點
為了實現更順暢的滾動體驗，特別是在圖庫或滑塊中，實現自定義滾動吸附點。
.scroll-container {
scroll-snap-type: y mandatory;
}
.scroll-item {
scroll-snap-align: start;
}20. 使用字體變體設置進行可變字體樣式
利用可變字體和font-variation-settings屬性對字體的粗細、樣式等進行精細調節。
.text {
font-family: 'YourVariableFont', sans-serif;
font-variation-settings: 'wght' 500, 'ital' 1;
}21. 自定義下劃線樣式
使用border-bottom和text-decoration的組合來自定義鏈接的下劃線樣式。
a {
text-decoration: none;
border-bottom: 1px solid #3498db;
}22. 隱藏無障礙文本
使用class sr-only來在視覺上隱藏元素，但保持其對屏幕閱讀器的可訪問性。
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}23. 保持元素縱橫比
通過使用padding來保持元素（如圖片或視頻）的縱橫比。
.aspect-ratio-box {
position: relative;
width: 100%;
padding-bottom: 75%; /* 根據需要調整 */
}
.aspect-ratio-box > iframe {
position: absolute;
width: 100%;
height: 100%;
}24. 選擇偶數和奇數元素
使用:nth-child偽類來為交替元素設置樣式。
li:nth-child(even) {
background-color: #f2f2f2;
}
li:nth-child(odd) {
background-color: #e6e6e6;
}25. CSS計數器
使用counter-reset和counter-increment屬性在列表中創建自動編號。
ol {
counter-reset: item;
}
li {
counter-increment: item;
}
li::before {
content: counter(item) ". ";
}26. 多重背景圖片
使用不同屬性為元素應用多個背景圖片。
.bg {
background-image: url('image1.jpg'), url('image2.jpg');
background-position: top left, bottom right;
background-repeat: no-repeat, repeat-x;
}27. 優化文本流暢性的連字符
通過使用hyphens屬性允許自動連字符以提高文本的可讀性。
p {
hyphens: auto;
}28. 使用CSS變量進行動態樣式
利用CSS變量創建動態且可重用的樣式。
:root {
--main-color: #3498db;
}
.element {
color: var(--main-color);
}29. 鍵盤導航的焦點樣式
改善焦點樣式以提高鍵盤導航和可訪問性。
:focus {
outline: 2px solid #27ae60;
}30. 平滑漸變過渡
為漸變背景應用平滑過渡效果，增強視覺效果。
.gradient-box {
background: linear-gradient(45deg, #3498db, #2ecc71);
transition: background 0.5s ease;
}
.gradient-box:hover {
background: linear-gradient(45deg, #e74c3c, #f39c12);
}31. 文本描邊效果
為文本添加描邊，產生獨特的視覺效果。
h1 {
color: #3498db;
-webkit-text-stroke: 2px #2c3e50;
}32. 純CSS漢堡菜單
創建一個簡單的漢堡菜單，無需使用JavaScript。
.menu-toggle {
display: none;
}
.menu-toggle:checked + nav {
display: block;
}
/* 在這里添加漢堡菜單圖標和菜單樣式 */33. CSS :is()選擇器
使用:is()偽類簡化復雜的選擇器。
:is(h1, h2, h3) {
color: blue;
}34. CSS變量中的計算
在CSS變量中進行計算，實現動態樣式。
:root {
--base-size: 16px;
--header-size: calc(var(--base-size) * 2);
}
h1 {
font-size: var(--header-size);
}35. attr()函數用于內容
使用attr
()函數檢索和顯示屬性值。
div::before {
content: attr(data-custom-content);
}36. CSS遮罩效果
為圖像應用遮罩，創造出獨特的效果。
.masked-image {
mask: url(mask.svg);
mask-size: cover;
}37. 混合模式
嘗試使用混合模式創建有趣的色彩效果。
.blend-mode {
background: url(image.jpg);
mix-blend-mode: screen;
}38. 縱橫比屬性
使用縱橫比屬性簡化縱橫比盒子的創建。
.aspect-ratio-box {
aspect-ratio: 16/9;
}39. shape-outside實現文本環繞
使用shape-outside屬性使文本圍繞指定形狀，實現更動態的布局。
.shape-wrap {
float: left;
width: 150px;
height: 150px;
shape-outside: circle(50%);
}40. ch單位用于一致的尺寸
ch單位表示所選字體中字符“0”的寬度，可用于創建一致且響應式的布局。
h1 {
font-size: 2ch;
}41. ::marker偽元素
使用::marker偽元素為列表項標記設置樣式。
li::marker {
color: blue;
}42. element()函數用于背景
使用element()函數動態引用元素作為背景。
.background {
background: element(#targetElement);
}43. Flexbox實現粘性底部
使用Flexbox創建粘性底部布局。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}44. scroll-padding實現平滑滾動
通過調整scroll padding來改善滾動行為。
html {
scroll-padding: 20px;
}45. 交互式高亮效果
使用CSS變量創建交互式高亮效果。
.highlight {
--highlight-color: #e74c3c;
background-image: linear-gradient(transparent 0%, var(--highlight-color) 0%);
background-size: 100% 200%;
transition: background-position 0.3s;
}
.highlight:hover {
background-position: 0 100%;
}46. 自定義單選框和復選框樣式
無需圖像，樣式化單選框和復選框。
input[type="radio"] {
appearance: none;
-webkit-appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #3498db;
}
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 2px solid #e74c3c;
}47. textarea的resize屬性
使用resize屬性控制textarea的調整大小行為。
textarea {
resize: vertical;
}48. 文本漸變效果
使用background-clip和text-fill-color屬性為文本創建漸變效果。
.gradient-text {
background-image: linear-gradient(45deg, #3498db, #2ecc71);
background-clip: text;
color: transparent;
}49. 對長單詞使用word-break屬性
使用word-break屬性控制長單詞或沒有空格的字符串的斷行和換行。
.long-words {
word-break: break-all;
}50. font-variation-settings用于可變字體
使用font-variation-settings屬性微調可變字體樣式。
.custom-font {
font-family: 'MyVariableFont';
font-variation-settings: 'wght' 600, 'ital' 1;
}51. 混合模式用于創意疊加效果
使用混合模式為元素應用疊加效果，創造出有趣的視覺效果。
.overlay {
mix-blend-mode: overlay;
}52. 為損壞的圖像應用樣式
使用:broken偽類為損壞的圖像應用樣式。
img:broken {
filter: grayscale(100%);
}53. CSS形狀
使用CSS形狀為設計創建有趣的效果。
.shape {
shape-outside: circle(50%);
}54. 屬性選擇器用于子字符串匹配
使用*=操作符的屬性選擇器進行子字符串匹配。
[data-attribute*="value"] {
/* 樣式 */
}55. backdrop-filter用于模糊背景
使用backdrop-filter為背景應用模糊效果，實現毛玻璃效果。
.element {
backdrop-filter: blur(10px);
}56. CSS環境變量
使用env()函數在CSS中訪問環境變量。
.element {
margin-top: env(safe-area-inset-top);
}57. CSS屬性計數器
使用:nth-child選擇器計算特定屬性值的出現次數。
[data-category="example"]:nth-child(3) {
/* 第三次出現的樣式 */
}58. CSS形狀實現文本環繞
使用shape-outside結合polygon()函數精確地控制文本圍繞不規則形狀的布局。
.text-wrap {
shape-outside: polygon(0 0, 100% 0, 100% 100%);
}59. 自定義鼠標樣式
使用cursor屬性更改鼠標樣式。
.custom-cursor {
cursor: pointer;
}60. HSLA用于透明顏色
使用HSLA值表示透
明顏色，對alpha通道進行更精細的控制。
.transparent-bg {
background-color: hsla(120, 100%, 50%, 0.5);
}61. text-orientation實現縱向文本
使用text-orientation屬性將文本垂直旋轉。
.vertical-text {
text-orientation: upright;
}62. font-variant用于小型大寫字母
使用font-variant屬性應用小型大寫字母樣式。
.small-caps {
font-variant: small-caps;
}63. box-decoration-break用于背景分割
使用box-decoration-break屬性控制跨多行斷開的元素的背景，實現更靈活的文本環繞。
.split-background {
box-decoration-break: clone;
}64. :focus-visible用于特定焦點樣式
僅在元素處于焦點且焦點不是由鼠標單擊提供時應用樣式。
input:focus-visible {
outline: 2px solid blue;
}65. text-rendering實現最佳字體呈現
通過text-rendering屬性改善文本呈現效果。
.optimized-text {
text-rendering: optimizeLegibility;
}66. initial-letter用于大寫字母
使用initial-letter為塊級元素的第一個字母應用樣式。
p::first-letter {
font-size: 2em;
}67. overscroll-behavior用于滾動過度
控制用戶滾動超出滾動容器邊界時的行為。
.scroll-container {
overscroll-behavior: contain;
}68. writing-mode實現縱向布局
使用writing-mode屬性創建縱向布局。
.vertical-layout {
writing-mode: vertical-rl;
}69. ::cue用于HTML5標題樣式
使用::cue偽元素為HTML5字幕文本應用樣式。
::cue {
color: blue;
}70. line-clamp截斷多行文本
使用line-clamp屬性限制元素中顯示的行數。
.truncated-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}71. scroll-snap-align
scroll-snap-align屬性控制滾動容器內滾動捕捉點的對齊方式，確保對滾動行為進行精確控制，提升用戶體驗。
.container {
scroll-snap-type: x mandatory;
}
.item {
scroll-snap-align: center;
}72. overscroll-behavior
overscroll-behavior使您可以定義瀏覽器在滾動超出范圍時的處理方式，從而避免不必要的滾動效果，提升整體滾動體驗。
.scrollable {
overscroll-behavior: contain;
}73. font-kerning
font-kerning允許對字符間距進行微調，通過調整文本元素中字符之間的間距，確保最佳的可讀性。
p {
font-kerning: auto;
}74. shape-margin
與CSS形狀一起使用時，shape-margin指定浮動元素形狀周圍的邊距，可以更精確地控制文本環繞和布局。
.shape {
shape-margin: 20px;
}75. scroll-margin
scroll-margin設置滾動容器邊緣與滾動內容開始之間的邊距，提升用戶體驗，為滾動提供緩沖空間。
.container {
scroll-margin-top: 100px;
}76. tab-size
tab-size屬性控制文本區域中制表符的寬度，確保在不同用戶代理中一致的顯示。
pre {
tab-size: 4;
}77. text-align-last
text-align-last決定塊級元素中最后一行文本的對齊方式，為多行塊文本提供對齊控制。
p {
text-align-last: justify;
}78. text-justify
此屬性控制文本兩端對齊的行為，指定是使用單詞間還是字符間距進行文本對齊。
p {
text-align: justify;
text-justify: inter-word;
}79. column-fill
column-fill決定如何在多列布局中分配內容，允許內容依次或平衡分布在列中。
.container {
column-count: 3;
column-fill: auto;
}80. outline-offset
outline-offset調整輪廓與元素邊緣之間的空間，不影響布局，為輪廓的外觀提供更細致的控制。
button {
outline: 2px solid blue;
outline-offset: 4px;
}81. font-variant-numeric
此屬性允許精細控制數字字體渲染，啟用特性如數字大小寫和分數、序數指示器等。
p {
font-variant-numeric: lining-nums;
}82. font-optical-sizing
啟用或禁用字體光學大小調整，以調整字符的間距和比例，實現在不同字體大小下更好的視覺和諧。
p {
font-optical-sizing: auto;
}83. text-decoration-thickness
精確控制文本裝飾（如下劃線、上劃線和刪除線）的粗細，實現精細化定制。
p {
text-decoration-thickness: 2px;
}84. text-decoration-skip-ink
text-decoration-skip-ink屬性控制文本裝飾（如下劃線）在被墨水遮擋的情況下是否繼續繪制，提升可讀性。
a {
text-decoration-skip-ink: auto;
}85. word-spacing
word-spacing屬性控制字詞間距，調整文本的緊湊度和可讀性。
p {
word-spacing: 2px;
}86. hyphenation
通過調整斷字點和斷字行為，提高文本在窄列中的美觀度和可讀性。
p {
hyphens: auto;
}87. background-blend-mode
background-blend-mode屬性允許背景圖像與其下方的背景顏色進行混合，產生出獨特的視覺效果。
.element {
background-image: url('image.jpg');
background-color: #3498db;
background-blend-mode: multiply;
}88. text-decoration-color
text-decoration-color屬性控制文本裝飾的顏色，為鏈接和裝飾文本提供更靈活的樣式。
a {
text-decoration: underline;
text-decoration-color: red;
}89. overflow-anchor
overflow-anchor屬性指定了在容器的滾動范圍內滾動時哪些內容應保持可見，提升用戶體驗。
.container {
overflow-anchor: none;
}90. contain-intrinsic-size
contain-intrinsic-size屬性定義了內聯大小計算函數的大小，實現更精確的布局控制。
img {
contain-intrinsic-size: 200px 300px;
}91. line-gap
line-gap屬性定義了元素的行間距，可以為文字和其他行內元素提供更大的空間。
p {
line-gap: 1.5;
}92. text-underline-offset
text-underline-offset屬性控制文本下劃線相對于基線的垂直偏移量，實現更加精確的下劃線定位。
a {
text-decoration: underline;
text-underline-offset: 3px;
}93. text-decoration-line
text-decoration-line屬性指定要繪制的裝飾線的類型，可用于單獨控制上劃線、下劃線、刪除線等。
a {
text-decoration-line: underline overline;
}94. text-emphasis
text-emphasis屬性為文本設置強調標志，用于提高關鍵字的可讀性。
em {
text-emphasis: filled circle;
}95. text-orientation
text-orientation屬性控制文本的方向，適用于縱向文本和日文排版等情況。
.vertical-text {
text-orientation: sideways-right;
}96. background-origin
background-origin屬性確定背景圖片的起始位置，影響背景圖片與邊框的相對位置。
.element {
background-image: url('image.jpg');
background-origin: content-box;
}97. counter-set
counter-set屬性在使用counter-reset創建的計數器值基礎上，顯式設置一個新的值。
ol {
counter-set: section 1;
}98. hanging-punctuation
hanging-punctuation屬性控制標點符號是否在行框之外懸掛，以提高排版的美觀度和可讀性。
p {
hanging-punctuation: last allow-end;
}99. line-break
line-break屬性控制文本換行行為，確保在指定的斷點處進行斷行。
p {
line-break: anywhere;
}100. text-justify
text-justify屬性指定如何分配額外的空間，以便充分利用容器的寬度。
p {
text-align: justify;
text-justify: inter-word;
}
