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