見證CSS 的演變，我們似乎正處於CSS 歷史上最激動人心的創新時期之一。當所有瀏覽器都支持flexbox，隨後不久又支持grid 時，這真是令人振奮。它們徹底改變了CSS，使其不再是笨拙的技巧集合，而變成了更合理、更符合時代潮流的東西。
這種感覺越來越強烈。就在最近的一段時間裡，發生了以下幾件事。
⚠️? 最終發布的語法可能與以下代碼片段略有不同。 ?⚠️
原生嵌套已成為第一個公開工作草案，這意味著它比以往任何時候都更接近成為現實。許多人僅僅為了嵌套的方便性而使用預處理器，這對於那些希望簡化構建工具以避免這種情況的人來說應該很有幫助。
我尤其喜歡如何嵌套條件規則。
<code>.card { & .title { } & .body { } @media (min-inline-size > 1000px) { & { } } @nest body.dark & { } }</code>我聽說過這種可行方案的傳聞，它避免了在簡單選擇器上需要&，也完全避免了@nest。
<code>.card {{ .title { } .body { } body.dark & { } }}</code>容器查詢目前只是一個編輯器草案（CSS Containment Module Level 3），但Chrome 中已經有實現（需要啟用標誌）。它們意義重大，因為它們允許我們根據容器本身的大小做出樣式決策，在當今的組件驅動世界中，這是一個非常好的主意。
查看一個簡單示例站點的代碼（如果您在Chrome 中沒有啟用標誌，它可能看起來很奇怪）。
<code>/* 在您要查询的父元素上设置containment */ .card-container { /* 目前两者都有效，不确定哪个是正确的*/ contain: style layout inline-size; container: inline-size; } .card { display: flex; } @container (max-width: 500px) { /* 必须设置子元素的样式，而不是容器*/ .card { flex-direction: column; } }</code>容器單位也有一個草案規範，對我來說，它幾乎使容器查詢的實用性翻倍。其思想是，您有一個基於容器大小（寬度、高度或“inline-size”/“block-size”）的單位。我認為qi 單位最有用。
希望很快，我們將編寫基於自身大小進行樣式設置並可以傳遞該大小以供內部其他屬性使用的容器範圍CSS。 font-size 屬性就是一個簡單的實用示例（根據其容器縮放大小的字體），但我相信容器單位將用於各種用途，例如gap、padding，以及其他各種用途。
<code>/* 在您要查询的父元素上设置containment */ .card-container { /* 目前两者都有效，不确定哪个是正确的*/ contain: style layout inline-size; container: inline-size; } .card h2 { font-size: 1.5rem; /* 备用*/ } @container type(inline-size) { .card h2 { font-size: clamp(14px, 1rem 2qi, 56px) } }</code>級聯層（在工作草案規範中）引入了一種全新的範例，用於確定CSS 選擇器在級聯中的獲勝者。目前，它主要是一個特異性競賽。具有最高特異性的選擇器獲勝，只有內聯樣式和帶有!important 子句的特定規則才能勝過它。但是有了層，更高層上的任何匹配選擇器都會獲勝。
<code>@layer base; @layer theme; @layer utilities; /* 没有层的重置样式（超低）*/ * { box-sizing: border-box; } @layer theme { .card { background: var(--card-bg); } } @layer base { /* 大多数样式？*/ } @layer utilities { .no-margin { margin: 0; } }</code>Tab Atkins 提出的CSS When/Else 規則已被接受，它是一種表達@media 和@supports 查詢的方式，您可以更輕鬆地表達else 條件。雖然媒體查詢已經具有一定的邏輯能力，但表達相互排斥的查詢長期以來一直很困難，而這使得它非常簡單。
<code>@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */ } @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */ } @else { /* C */ }</code>作用域樣式（這是一個編輯器草案）的想法是，它提供了一種語法來編寫僅應用於特定選擇器和內部的選擇器塊的樣式，但也具有停止作用域的能力，從而創建作用域環。
我最喜歡的是“鄰近性”強度的東西。 Miriam 這樣解釋：
<code>.light-theme a { color: purple; } .dark-theme a { color: plum; }</code><code><div>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">plum</a>
<div>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">也可能是plum？ ？ ？</a>
</div>
</div></code>對吧？ ！沒有很好的方法來表達您希望該鏈接與.light-theme 的鄰近性獲勝。目前，兩個主題的特異性相同，但.dark-theme 位於後面——因此它獲勝。希望作用域樣式也能解決這個問題。
<code>@scope (.card) to (.content) { :scope { display: grid; grid-template-columns: 50px 1fr; } img { filter: grayscale(100%); border-radius: 50%; } .content { ... } }</code> <code>/* 邻近性帮助！*/ @scope (.light-theme) { a { color: purple; } } @scope (.dark-theme) { a { color: plum; } }</code>您目前無法在生產網站上使用此列表中的任何內容。在嘗試遵循這種事情多年之後，我仍然不知道這一切最終是如何進行的。我認為規範需要首先完成並達成一致。然後瀏覽器會選擇它們，希望不止一個。我認為一旦它們有了，規範就可以最終確定了嗎？
我不知道。也許其中一些會消失。也許其中一些會發生得非常快，而另一些則非常慢。可能，其中一些會在某些瀏覽器中出現，而在其他瀏覽器中則不會。嘿，至少我們現在有了常青瀏覽器，因此當事情發生時，它會很快發生。我覺得現在我們正處於大多數最大最好的CSS 功能都受到所有瀏覽器支持的階段，但隨著所有這些即將到來，我們將進入一個對最新技術的支持更加零散的階段。
以上是CSS正在狂熱地野性豬，我告訴你什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
