CSS 的不斷發(fā)展，為網(wǎng)頁(yè)設(shè)計(jì)師和開(kāi)發(fā)者帶來(lái)創(chuàng)新的工具與技術(shù)，使得構(gòu)建視覺(jué)效果卓越且功能豐富的網(wǎng)站成為可能。緊跟最新的趨勢(shì)和最佳實(shí)踐成為開(kāi)發(fā)者們至關(guān)重要的事情。以下是在 2024 年你不可不知的 10 個(gè) CSS 技巧，它們將助力你提升 Web 開(kāi)發(fā)技能，并打造出引領(lǐng)潮流的設(shè)計(jì)。
1. :has() 偽類(lèi)選擇器
:has() 偽類(lèi)選擇器是 CSS 領(lǐng)域的一項(xiàng)創(chuàng)新特性，它賦予了開(kāi)發(fā)者一種前所未有的能力：根據(jù)元素的后代或特定條件來(lái)定義元素的樣式。使用這一選擇器，你可以靈活地為那些包含特定子元素或滿足特定條件的父元素應(yīng)用樣式。例如，你可以輕松地為包含圖片的div元素添加高亮顯示，或者改變那些包含鏈接的列表項(xiàng)的背景色。:has()選擇器極大地增強(qiáng)了 CSS 的靈活性和精確度，讓開(kāi)發(fā)者能夠更加便捷地創(chuàng)建動(dòng)態(tài)的、基于條件的樣式布局。
示例 - 使用 :not() 選擇器實(shí)現(xiàn)卡片懸停效果
- 創(chuàng)建
index.html 和 style.css 文件:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</body>
</html>
style.css 文件 :
.cards {
display: flex;
gap: 1rem;
}
.card {
width: 100%;
height: 300px;
background-color: rgb(12, 22, 164);
transition: opacity 0.4s ease;
}
.cards:hover > :not(:hover) {
opacity: 0.5;
}
現(xiàn)在我們?cè)谝粋€(gè) flex 容器中有 6 個(gè)卡片
.cards:hover > :not(:hover) {
opacity: 0.5;
}
現(xiàn)在我們遇到了一個(gè) bug。當(dāng)你在卡片之間懸停時(shí),所有卡片的透明度都會(huì)變成 0.5,而沒(méi)有卡片被選中。要修復(fù)這個(gè)問(wèn)題,我們需要在 .card 選擇器中添加 visible 屬性。
.cards {
display: flex;
gap: 1rem;
visibility: hidden;
}
.card {
visibility: visible;
width: 100%;
height: 300px;
background-color: rgb(12, 22, 164);
transition: opacity 0.4s ease;
}
.cards:hover > :not(:hover) {
opacity: 0.5;
}
2. :focus-within 偽類(lèi)
CSS 的:focus-within選擇器是一個(gè)極具潛力的工具，它使得開(kāi)發(fā)者能夠在任何子元素獲得焦點(diǎn)時(shí)，為其父元素添加特定的樣式。這一特性在增強(qiáng)表單、菜單以及交互式組件的用戶(hù)體驗(yàn)方面尤為突出。通過(guò)使用:focus-within，用戶(hù)通過(guò)鍵盤(pán)或鼠標(biāo)與頁(yè)面進(jìn)行交互時(shí)，可以高亮顯示或調(diào)整整個(gè)頁(yè)面區(qū)域的樣式，這樣不僅提升了網(wǎng)站的可訪問(wèn)性，也極大地豐富了用戶(hù)體驗(yàn)。
在創(chuàng)建自定義單選按鈕方面，傳統(tǒng)的做法通常是利用相鄰兄弟組合器（+）來(lái)實(shí)現(xiàn)，這可能已經(jīng)為你所熟知。然而，隨著 CSS 技術(shù)的不斷進(jìn)步，現(xiàn)代 CSS 特性為我們提供了另一種更為高效且靈活的方法。
示例: 使用 :focus-within 實(shí)現(xiàn)單選按鈕
創(chuàng)建 html 和 css 文件:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="radio-button">
<input id="rb-1" class="radio-button__input sr-only" type="radio" name="radio" checked />
<label for="rb-1" class="radio-button__label">Example 1</label>
</div>
<div class="radio-button">
<input id="rb-2" class="radio-button__input sr-only" type="radio" name="radio" />
<label for="rb-2" class="radio-button__label">Example 2</label>
</div>
</body>
</html>
style.css
body {
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.sr-only {
width: 1px;
height: 1px;
clip-path: inset(50%);
overflow: hidden;
position: absolute;
white-space: nowrap;
}
.radio-button {
--radio-button-size: 1rem;
--radio-button-gap: 1rem;
--radio-button-dot-size: 0.5rem;
display: inline-flex;
align-items: center;
position: relative;
isolation: isolate;
}
.radio-button::before {
content: '';
box-sizing: border-box;
width: var(--radio-button-size);
height: var(--radio-button-size);
border: 1px solid #242424;
border-radius: 100%;
position: absolute;
z-index: -1;
}
.radio-button\_\_label {
display: grid;
padding-left: calc(var(--radio-button-dot-size) + var(--radio-button-gap));
}
.radio-button**label::before,
.radio-button**label::after {
content: '';
border-radius: 100%;
opacity: 0;
position: absolute;
align-self: center;
left: var(--radio-button-dot-size);
transform: translateX(-50%);
scale: 0;
transform-origin: left center;
}
.radio-button\_\_label::before {
border-top: var(--radio-button-dot-size) solid #242424;
border-left: var(--radio-button-dot-size) solid #242424;
transition: 0.3s;
}
.radio-button\_\_label::after {
width: var(--radio-button-dot-size);
height: var(--radio-button-dot-size);
background-color: #2500e0;
transition: 0.6s;
}
我們已經(jīng)創(chuàng)建了簡(jiǎn)單的按鈕,現(xiàn)在只剩最后一步。我們需要編寫(xiě)當(dāng)單選按鈕獲得焦點(diǎn)或被選中時(shí)的狀態(tài)代碼。如我之前提到的,這將基于相鄰兄弟組合器(+)來(lái)實(shí)現(xiàn)。
很好，你已經(jīng)完成了按鈕的基本創(chuàng)建?，F(xiàn)在，讓我們來(lái)添加一些交互性，使得當(dāng)單選按鈕獲得焦點(diǎn)或被選中時(shí)，能夠有視覺(jué)上的反饋。這將增強(qiáng)用戶(hù)體驗(yàn)，讓用戶(hù)清楚地知道哪個(gè)選項(xiàng)是當(dāng)前選中的。整我上面提到的，使用相鄰兄弟組合器（+），我們可以針對(duì)單選按鈕的選中狀態(tài)或焦點(diǎn)狀態(tài)編寫(xiě) CSS 代碼。
.radio-button**input:checked + .radio-button**label::before {
opacity: 1;
scale: 1;
}
.radio-button**input:focus + .radio-button**label::after {
scale: 3.6;
opacity: 0.2;
}
問(wèn)題的核心在于，如果在 HTML 標(biāo)簽中，類(lèi)名為.radio-button-input 的元素意外地沒(méi)有在.radio-button-label 元素之前，那么依賴(lài)于相鄰兄弟組合器（+）的 CSS 樣式就會(huì)失效。這種情況凸顯了使用相鄰兄弟組合器的一個(gè)潛在缺陷：它要求元素之間必須有嚴(yán)格的順序關(guān)系。
現(xiàn)代 CSS 的解決方案可以避免這種問(wèn)題，因?yàn)樗昧?has()和:focus-within 偽類(lèi)，這些偽類(lèi)不依賴(lài)于元素的順序，從而提供了更靈活和健壯的樣式控制。
為了增強(qiáng)樣式的健壯性，我們可以添加:focus-within 選擇器，
.radio-button:has(:checked) .radio-button\_\_label::before {
opacity: 1;
scale: 1;
}
.radio-button:focus-within .radio-button\_\_label::after {
scale: 3.6;
opacity: 0.2;
}
## 3. inset 屬性
當(dāng)我們的目標(biāo)是讓一個(gè)元素通過(guò)`position: absolute`填滿所有可用空間時(shí)，傳統(tǒng)代碼實(shí)現(xiàn)通常如下所示：
```css
.parent {
position: relative;
}
.parent::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
這段代碼已經(jīng)顯得有些陳舊，因?yàn)樗梢员贿M(jìn)一步簡(jiǎn)化。inset屬性提供了一種便捷的方式，允許你一次性定義元素四邊的位置，從而替代了分別設(shè)置top、right、bottom和left屬性的需要。
要對(duì)這個(gè)例子進(jìn)行現(xiàn)代化的更新，你可以省略width和height屬性。由于.parent元素已經(jīng)設(shè)置了position: absolute，它的尺寸可以通過(guò)指定的偏移量來(lái)自動(dòng)確定。
在這種情況下，我們僅需使用inset: 0即可輕松實(shí)現(xiàn)相同的效果。
.parent {
position: relative;
}
.parent::before {
content: '';
position: absolute;
inset: 0;
}
4. CSS 變量
CSS 變量（也被稱(chēng)為自定義屬性）是一個(gè)極其強(qiáng)大的功能，它允許你在樣式表中存儲(chǔ)和重復(fù)使用特定的值。借助這一特性，你可以在一個(gè)集中的位置定義顏色、字體、尺寸等值，從而使你的代碼更加易于維護(hù)和靈活。
在開(kāi)發(fā)項(xiàng)目時(shí)，我們常常需要在媒體查詢(xún)中編寫(xiě)大量規(guī)則，這有時(shí)會(huì)使代碼變得難以管理和導(dǎo)航。為了闡釋這一問(wèn)題，我將展示如何為兩個(gè)具有類(lèi)名.heading和.description的元素提供樣式。
.heading {
font-size: 2rem;
}
.description {
font-size: 0.75rem;
}
@media (min-width: 641px) {
.heading {
font-size: 3rem;
}
.description {
font-size: 1.25rem;
}
}
@media (min-width: 1025px) {
.heading {
font-size: 3.5rem;
}
.description {
font-size: 1.5rem;
}
}
在過(guò)去，我們不得不為每個(gè)屬性的改變編寫(xiě)單獨(dú)的規(guī)則。例如，如果要在不同的媒體查詢(xún)中調(diào)整字體大小，我們必須分別為.heading和.description編寫(xiě)兩條規(guī)則。在自定義屬性出現(xiàn)之前，這種方法的效率相當(dāng)?shù)汀?/p>
現(xiàn)在，借助自定義屬性，我們可以設(shè)置基礎(chǔ)值，并在媒體查詢(xún)中通過(guò)修改父元素的屬性來(lái)調(diào)整它們。這樣，我們?cè)诿總€(gè)媒體查詢(xún)中只需要編寫(xiě)一條規(guī)則，而不是多條，大大提高了代碼的效率和可維護(hù)性。
.heading {
font-size: var(--heading-font-size, 2rem);
}
.description {
font-size: var(--hint-font-size, 0.75rem);
}
@media (min-width: 648px) {
.text {
--heading-font-size: 3rem;
--hint-font-size: 1.25rem;
}
}
@media (min-width: 1280px) {
.text {
--heading-font-size: 3.5rem;
--hint-font-size: 1.5rem;
}
}
5. place-items 屬性
長(zhǎng)期以來(lái)，transform屬性一直是與position: absolute配合使用以實(shí)現(xiàn)元素居中的首選方法。這種技術(shù)主要涉及兩個(gè)關(guān)鍵步驟。
首先，通過(guò)設(shè)置top和left屬性，將元素從其容器的頂部和左側(cè)邊緣移動(dòng) 50%，使其中心點(diǎn)與容器的中心點(diǎn)對(duì)齊。接著，應(yīng)用translate(-50%, -50%)變換，將元素向左和向上偏移其自身寬度和高度的一半，從而實(shí)現(xiàn)精確的居中對(duì)齊。這種方法利用了transform屬性的靈活性，使得元素在視覺(jué)上能夠準(zhǔn)確地居中于其容器內(nèi)。
.elem {
width: 200px;
height: 200px;
position: relative;
}
.elem::before {
width: 22px;
height: 22px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
現(xiàn)在，我們有了一個(gè)更簡(jiǎn)單的方法：place-items 屬性。
.elem {
width: 20rem;
height: 20rem;
display: grid;
place-items: center;
}
.elem::before {
width: 2rem;
height: 2rem;
position: absolute;
}
6. scrollbar-gutter 屬性
scrollbar-gutter屬性是一個(gè)有用的CSS特性，它允許開(kāi)發(fā)者控制布局中為滾動(dòng)條預(yù)留的空間。這個(gè)屬性對(duì)于管理滾動(dòng)條對(duì)整體布局的影響至關(guān)重要，尤其是在處理滾動(dòng)條的寬度以及避免因滾動(dòng)條的出現(xiàn)或消失而引起的布局偏移方面。
通過(guò)使用scrollbar-gutter屬性，可以確保即使在滾動(dòng)條顯示時(shí)，頁(yè)面內(nèi)容也不會(huì)發(fā)生偏移，從而提供了一個(gè)更加穩(wěn)定和一致的用戶(hù)體驗(yàn)。這個(gè)屬性幫助開(kāi)發(fā)者在設(shè)計(jì)時(shí)考慮到滾動(dòng)條的空間需求，避免了滾動(dòng)條突然出現(xiàn)時(shí)可能導(dǎo)致的布局混亂。
body {
scrollbar-gutter: stable;
}
7. system-ui 字體
現(xiàn)在你可以將這樣的代碼：
body {
font-family: var(
--main-font,
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Open Sans,
Ubuntu,
Fira Sans,
Helvetica Neue,
sans-serif
);
}
簡(jiǎn)化為：
body {
font-family: var(--main-font, system-ui);
}
8. :lang() 偽類(lèi)
如何使用 :lang() 偽類(lèi) 語(yǔ)法：
:lang(en) {
font-style: italic;
}
language 指定語(yǔ)言代碼（如 en、fr、de）。
使用示例：
:lang(fr) {
font-family: 'Courier New', monospace;
text-align: center;
}
HTML 示例：
<p lang="en">This is an English paragraph.</p>
<p lang="fr">Ceci est un paragraphe en fran?ais.</p>
將 :lang() 偽類(lèi)與 :not() 組合使用：
:not(:lang(fr)) {
font-style: italic;
}
在上述HTML示例中，段落的樣式將依據(jù)其lang屬性進(jìn)行調(diào)整，這展示了:lang()偽類(lèi)如何被有效地用來(lái)針對(duì)特定語(yǔ)言應(yīng)用不同的樣式。這種方法使得網(wǎng)頁(yè)能夠更精細(xì)地控制多語(yǔ)言?xún)?nèi)容的顯示，從而提升國(guó)際化網(wǎng)站的用戶(hù)體驗(yàn)。
9. aspect-ratio 屬性
CSS中的aspect-ratio屬性是一個(gè)強(qiáng)大的工具，它允許開(kāi)發(fā)者控制元素的寬高比，確保元素在寬度和高度之間保持特定的比例。這個(gè)屬性在響應(yīng)式設(shè)計(jì)中尤其有用，它能夠在不同屏幕尺寸下保持元素的比例不變，從而確保布局的一致性和視覺(jué)的協(xié)調(diào)性。
.img {
aspect-ratio: 1/3;
}
使用示例：
.media {
aspect-ratio: 12 / 8; /* 每8個(gè)高度單位對(duì)應(yīng)12個(gè)寬度單位 */
width: 100%;
background-color: 'red';
}
利用aspect-ratio屬性，你可以打造出更加靈活的響應(yīng)式設(shè)計(jì)，確保元素在各種設(shè)備和屏幕尺寸上都能保持其固有比例。這一屬性對(duì)于維持視覺(jué)元素的完整性至關(guān)重要，無(wú)論是在桌面顯示器還是在移動(dòng)設(shè)備的小屏幕上。
10. :is() 偽類(lèi)
CSS中的:is()偽類(lèi)提供了一種高效的方式來(lái)簡(jiǎn)化樣式的應(yīng)用，它允許你在一個(gè)規(guī)則中組合多個(gè)選擇器。這種方法不僅使你的CSS代碼更加清晰易讀，而且也更易于管理，尤其是在你需要對(duì)多個(gè)不同的元素應(yīng)用相同樣式時(shí)。:is()偽類(lèi)通過(guò)減少重復(fù)的代碼，幫助你維護(hù)一個(gè)更加簡(jiǎn)潔和高效的樣式表。
使用示例
:is(h1, h2, h3) {
text-transform: uppercase;
}
在這個(gè)例子中，所有的 h1、h2 和 h3 元素都會(huì)變成大寫(xiě)文本。
與其他選擇器組合：
:is(.button, .link) {
color: white;
padding: 1rem;
}
:is()偽類(lèi)通過(guò)讓你將多個(gè)選擇器組合在一起，有效減少了代碼的重復(fù)性，使得CSS更加簡(jiǎn)潔和高效。
總結(jié)
掌握這10個(gè)CSS技巧，你將能夠在2024年打造出現(xiàn)代化、響應(yīng)式和動(dòng)態(tài)的網(wǎng)頁(yè)設(shè)計(jì)。無(wú)論你是在開(kāi)發(fā)個(gè)人項(xiàng)目還是為客戶(hù)設(shè)計(jì)網(wǎng)站，這些技巧都能幫助你編寫(xiě)出更清晰、更高效的CSS代碼，讓你的作品在眾多設(shè)計(jì)中脫穎而出。這些技術(shù)不僅提升了你的開(kāi)發(fā)效率，也為用戶(hù)提供了更加豐富和流暢的網(wǎng)頁(yè)體驗(yàn)。
原文地址：https://jsdev.space/10-css-tips/
該文章在 2024/11/15 11:58:20 編輯過(guò)
400 186 1886
