CSS 的不斷發(fā)展，為網(wǎng)頁設(shè)計師和開發(fā)者帶來創(chuàng)新的工具與技術(shù)，使得構(gòu)建視覺效果卓越且功能豐富的網(wǎng)站成為可能。緊跟最新的趨勢和最佳實踐成為開發(fā)者們至關(guān)重要的事情。以下是在 2024 年你不可不知的 10 個 CSS 技巧，它們將助力你提升 Web 開發(fā)技能，并打造出引領(lǐng)潮流的設(shè)計。
1. :has() 偽類選擇器
:has() 偽類選擇器是 CSS 領(lǐng)域的一項創(chuàng)新特性，它賦予了開發(fā)者一種前所未有的能力：根據(jù)元素的后代或特定條件來定義元素的樣式。使用這一選擇器，你可以靈活地為那些包含特定子元素或滿足特定條件的父元素應(yīng)用樣式。例如，你可以輕松地為包含圖片的div元素添加高亮顯示，或者改變那些包含鏈接的列表項的背景色。:has()選擇器極大地增強(qiáng)了 CSS 的靈活性和精確度，讓開發(fā)者能夠更加便捷地創(chuàng)建動態(tài)的、基于條件的樣式布局。
示例 - 使用 :not() 選擇器實現(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)在我們在一個 flex 容器中有 6 個卡片
.cards:hover > :not(:hover) {
opacity: 0.5;
}
現(xiàn)在我們遇到了一個 bug。當(dāng)你在卡片之間懸停時,所有卡片的透明度都會變成 0.5,而沒有卡片被選中。要修復(fù)這個問題,我們需要在 .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 偽類
CSS 的:focus-within選擇器是一個極具潛力的工具，它使得開發(fā)者能夠在任何子元素獲得焦點(diǎn)時，為其父元素添加特定的樣式。這一特性在增強(qiáng)表單、菜單以及交互式組件的用戶體驗方面尤為突出。通過使用:focus-within，用戶通過鍵盤或鼠標(biāo)與頁面進(jìn)行交互時，可以高亮顯示或調(diào)整整個頁面區(qū)域的樣式，這樣不僅提升了網(wǎng)站的可訪問性，也極大地豐富了用戶體驗。
在創(chuàng)建自定義單選按鈕方面，傳統(tǒng)的做法通常是利用相鄰兄弟組合器（+）來實現(xiàn)，這可能已經(jīng)為你所熟知。然而，隨著 CSS 技術(shù)的不斷進(jìn)步，現(xiàn)代 CSS 特性為我們提供了另一種更為高效且靈活的方法。
示例: 使用 :focus-within 實現(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)建了簡單的按鈕,現(xiàn)在只剩最后一步。我們需要編寫當(dāng)單選按鈕獲得焦點(diǎn)或被選中時的狀態(tài)代碼。如我之前提到的,這將基于相鄰兄弟組合器(+)來實現(xiàn)。
很好，你已經(jīng)完成了按鈕的基本創(chuàng)建。現(xiàn)在，讓我們來添加一些交互性，使得當(dāng)單選按鈕獲得焦點(diǎn)或被選中時，能夠有視覺上的反饋。這將增強(qiáng)用戶體驗，讓用戶清楚地知道哪個選項是當(dāng)前選中的。整我上面提到的，使用相鄰兄弟組合器（+），我們可以針對單選按鈕的選中狀態(tài)或焦點(diǎn)狀態(tài)編寫 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;
}
問題的核心在于，如果在 HTML 標(biāo)簽中，類名為.radio-button-input 的元素意外地沒有在.radio-button-label 元素之前，那么依賴于相鄰兄弟組合器（+）的 CSS 樣式就會失效。這種情況凸顯了使用相鄰兄弟組合器的一個潛在缺陷：它要求元素之間必須有嚴(yán)格的順序關(guān)系。
現(xiàn)代 CSS 的解決方案可以避免這種問題，因為它利用了:has()和:focus-within 偽類，這些偽類不依賴于元素的順序，從而提供了更靈活和健壯的樣式控制。
為了增強(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)是讓一個元素通過`position: absolute`填滿所有可用空間時，傳統(tǒng)代碼實現(xiàn)通常如下所示：
```css
.parent {
position: relative;
}
.parent::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
這段代碼已經(jīng)顯得有些陳舊，因為它可以被進(jìn)一步簡化。inset屬性提供了一種便捷的方式，允許你一次性定義元素四邊的位置，從而替代了分別設(shè)置top、right、bottom和left屬性的需要。
要對這個例子進(jìn)行現(xiàn)代化的更新，你可以省略width和height屬性。由于.parent元素已經(jīng)設(shè)置了position: absolute，它的尺寸可以通過指定的偏移量來自動確定。
在這種情況下，我們僅需使用inset: 0即可輕松實現(xiàn)相同的效果。
.parent {
position: relative;
}
.parent::before {
content: '';
position: absolute;
inset: 0;
}
4. CSS 變量
CSS 變量（也被稱為自定義屬性）是一個極其強(qiáng)大的功能，它允許你在樣式表中存儲和重復(fù)使用特定的值。借助這一特性，你可以在一個集中的位置定義顏色、字體、尺寸等值，從而使你的代碼更加易于維護(hù)和靈活。
在開發(fā)項目時，我們常常需要在媒體查詢中編寫大量規(guī)則，這有時會使代碼變得難以管理和導(dǎo)航。為了闡釋這一問題，我將展示如何為兩個具有類名.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;
}
}
在過去，我們不得不為每個屬性的改變編寫單獨(dú)的規(guī)則。例如，如果要在不同的媒體查詢中調(diào)整字體大小，我們必須分別為.heading和.description編寫兩條規(guī)則。在自定義屬性出現(xiàn)之前，這種方法的效率相當(dāng)?shù)汀?/p>
現(xiàn)在，借助自定義屬性，我們可以設(shè)置基礎(chǔ)值，并在媒體查詢中通過修改父元素的屬性來調(diào)整它們。這樣，我們在每個媒體查詢中只需要編寫一條規(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 屬性
長期以來，transform屬性一直是與position: absolute配合使用以實現(xiàn)元素居中的首選方法。這種技術(shù)主要涉及兩個關(guān)鍵步驟。
首先，通過設(shè)置top和left屬性，將元素從其容器的頂部和左側(cè)邊緣移動 50%，使其中心點(diǎn)與容器的中心點(diǎn)對齊。接著，應(yīng)用translate(-50%, -50%)變換，將元素向左和向上偏移其自身寬度和高度的一半，從而實現(xiàn)精確的居中對齊。這種方法利用了transform屬性的靈活性，使得元素在視覺上能夠準(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)在，我們有了一個更簡單的方法：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屬性是一個有用的CSS特性，它允許開發(fā)者控制布局中為滾動條預(yù)留的空間。這個屬性對于管理滾動條對整體布局的影響至關(guān)重要，尤其是在處理滾動條的寬度以及避免因滾動條的出現(xiàn)或消失而引起的布局偏移方面。
通過使用scrollbar-gutter屬性，可以確保即使在滾動條顯示時，頁面內(nèi)容也不會發(fā)生偏移，從而提供了一個更加穩(wěn)定和一致的用戶體驗。這個屬性幫助開發(fā)者在設(shè)計時考慮到滾動條的空間需求，避免了滾動條突然出現(xiàn)時可能導(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
);
}
簡化為：
body {
font-family: var(--main-font, system-ui);
}
8. :lang() 偽類
如何使用 :lang() 偽類 語法：
:lang(en) {
font-style: italic;
}
language 指定語言代碼（如 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() 偽類與 :not() 組合使用：
:not(:lang(fr)) {
font-style: italic;
}
在上述HTML示例中，段落的樣式將依據(jù)其lang屬性進(jìn)行調(diào)整，這展示了:lang()偽類如何被有效地用來針對特定語言應(yīng)用不同的樣式。這種方法使得網(wǎng)頁能夠更精細(xì)地控制多語言內(nèi)容的顯示，從而提升國際化網(wǎng)站的用戶體驗。
9. aspect-ratio 屬性
CSS中的aspect-ratio屬性是一個強(qiáng)大的工具，它允許開發(fā)者控制元素的寬高比，確保元素在寬度和高度之間保持特定的比例。這個屬性在響應(yīng)式設(shè)計中尤其有用，它能夠在不同屏幕尺寸下保持元素的比例不變，從而確保布局的一致性和視覺的協(xié)調(diào)性。
.img {
aspect-ratio: 1/3;
}
使用示例：
.media {
aspect-ratio: 12 / 8; /* 每8個高度單位對應(yīng)12個寬度單位 */
width: 100%;
background-color: 'red';
}
利用aspect-ratio屬性，你可以打造出更加靈活的響應(yīng)式設(shè)計，確保元素在各種設(shè)備和屏幕尺寸上都能保持其固有比例。這一屬性對于維持視覺元素的完整性至關(guān)重要，無論是在桌面顯示器還是在移動設(shè)備的小屏幕上。
10. :is() 偽類
CSS中的:is()偽類提供了一種高效的方式來簡化樣式的應(yīng)用，它允許你在一個規(guī)則中組合多個選擇器。這種方法不僅使你的CSS代碼更加清晰易讀，而且也更易于管理，尤其是在你需要對多個不同的元素應(yīng)用相同樣式時。:is()偽類通過減少重復(fù)的代碼，幫助你維護(hù)一個更加簡潔和高效的樣式表。
使用示例
:is(h1, h2, h3) {
text-transform: uppercase;
}
在這個例子中，所有的 h1、h2 和 h3 元素都會變成大寫文本。
與其他選擇器組合：
:is(.button, .link) {
color: white;
padding: 1rem;
}
:is()偽類通過讓你將多個選擇器組合在一起，有效減少了代碼的重復(fù)性，使得CSS更加簡潔和高效。
總結(jié)
掌握這10個CSS技巧，你將能夠在2024年打造出現(xiàn)代化、響應(yīng)式和動態(tài)的網(wǎng)頁設(shè)計。無論你是在開發(fā)個人項目還是為客戶設(shè)計網(wǎng)站，這些技巧都能幫助你編寫出更清晰、更高效的CSS代碼，讓你的作品在眾多設(shè)計中脫穎而出。這些技術(shù)不僅提升了你的開發(fā)效率，也為用戶提供了更加豐富和流暢的網(wǎng)頁體驗。
原文地址：https://jsdev.space/10-css-tips/
該文章在 2024/11/15 11:58:20 編輯過
400 186 1886
