CSS 4 中的一些新特性
- DDD原創
- 2024-10-30 17:01:02834瀏覽
在本文中，我們將探討 2024 年的一些新 CSS 功能。
如果你喜歡我的文章，可以請我一杯咖啡:)
1.CSS容器查詢
容器查詢可讓您根據項目容器的大小將樣式套用至項目。容器查詢的工作方式類似於媒體查詢。
使用容器查詢
使用容器查詢，您可以根據父元素內的子元素的大小動態調整子元素的樣式。
為此，您必須先為父元素定義一個容器上下文。您可以使用容器類型屬性來指定它。
容器類型：尺寸；設定為 時，可以同時依寬度和高度值查詢。
容器類型：內聯大小；設定為 時，僅對寬度（水平尺寸）進行查詢。
借助此功能，子元素的樣式屬性可以根據父元素的大小進行變更。
範例 :
<div class="post">
<div class="card">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
.post {
container-type: size;
}
.card h2 {
font-size: 1em;
color: blue;
}
@container (min-width: 700px) {
.card h2 {
font-size: 5em;
color: purple;
}
}
輸出 :
2.CSS嵌套
使用 CSS 巢狀，您可以將一個規則放置在另一個規則中。這對於管理依賴上下文的樣式特別有用。例如，如果您有一個 .container 類別並且想要為其 .item 元素設定樣式，您可以直接在 .container 規則內編寫 .item 規則。 CSS 巢狀由瀏覽器直接解析。 這表示您不需要預處理器來編譯巢狀規則；它們在瀏覽器中本機工作。
範例 :
<form>
<label for="name">Name:
<input type="text" id="name" />
</label>
<label for="surname">Surname:</label>
<input type="text" id="surname" />
</form>
input {
border: red 2px solid;
}
label {
font-family: system-ui;
font-size: 1.25rem;
& input {
border: purple 2px solid;
}
}
輸出 :
3. :scope 偽類
範圍選擇器用來定義 CSS 中樣式的範圍。
用法：
- 如果 :scope 位於 CSS 的 根級別，則相當於 :root
範例 :
<html></html>
:scope {
background-color: orange;
}
輸出 :
- 在 @scope 區塊中使用 :scope 可以根據類別名稱定義的上下文實現清晰且有針對性的樣式。
範例 :
<div class="post">
<div class="card">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
.post {
container-type: size;
}
.card h2 {
font-size: 1em;
color: blue;
}
@container (min-width: 700px) {
.card h2 {
font-size: 5em;
color: purple;
}
}
輸出 :
4. :has() 偽類
CSS 中的 :has() 選擇器可讓您設定 父元素的樣式（如果它包含特定的子元素。
）範例 :
<form>
<label for="name">Name:
<input type="text" id="name" />
</label>
<label for="surname">Surname:</label>
<input type="text" id="surname" />
</form>
input {
border: red 2px solid;
}
label {
font-family: system-ui;
font-size: 1.25rem;
& input {
border: purple 2px solid;
}
}
輸出 :
5. 顏色函數
您可以使用新的顏色函數，例如 color-mix() 和 color-contrast() 來更好地控制 顏色
的色調和對比度範例 :
<html></html>
6. 錨點定位
CSS 錨點定位模組定義了允許您將元素連接在一起的功能。某些元素被定義為錨元素；然後，錨定位的元素可以根據它們所綁定的錨元素的大小和位置設定其大小和位置。
結論
在本文中，我們探討了 2024 年 CSS 的一些新功能。您可以將此功能用於應用程式。
以上是CSS 4 中的一些新特性的詳細內容。更多資訊請關注PHP中文網其他相關文章！