立即可用的實用 CSS 工具，不僅功能強大、功能強大，而且也相當穩定。
我認為每個前端開發人員應該知道 :has() 不只是「父項選取器」，
瞭解 subgrid 的方式和原因、如何透過內建的 CSS 語法建立巢狀結構
瀏覽器平衡廣告標題文字換行，以及容器查詢單元的使用方式。
這篇文章延續了 去年所有前端開發人員都應該知道的 6 個 CSS 程式碼片段，
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
:has() 已於 2023 年底在所有主要瀏覽器中獲得！新的選取器似乎
雖然不大且毫無意義，但只要有以下用途，您就會感到驚訝：
遊戲、再活動、內容感知版面配置、智慧型元件和
許多 Jhey 在這篇文章中深入探討的議題。
以下舉例說明如何使用 :has() 做為父項選取器。命名的原因是
選取器的主體通常位於結尾，例如 ul li，其中 li 是主旨
並取得樣式使用 :has() 時，選取器開頭的元素可以變成
進而判斷主體在以下範例中，如果按鈕中有元素，按鈕會有一個間隔
並使用 .icon 類別。如果相片中包含圖片，資訊卡就會改變方向。
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
其中一個理想的選取器，是根據其擁有的項目數量變更版面配置。現在
使用 :has()，因為可以在查詢子項數量時，將容器設為主體。
main:has(> :nth-child(5)) {…}
另一個較高層級的範例 變更整份文件的樣式 如果網頁上有特定核取方塊為啟用狀態：
html:has(#dark-mode:checked) {…}
這些只是簡單的用途，並不會變更選取器主題，但如果您只查看範例
例如，您可能會認為 :has() 只能是上層選取器。請考量下列要點
範例。這些檢查以共同祖系為基礎，然後檢查選取器中的項目
與本網頁較深層的孩童有關
如有任何輸入內容無效，此程式碼會顯示表單錯誤元素：
form:has(:user-invalid) .error {
display: block;
}
當側邊導覽列具有 .--is-open 類別時，這會滑出主要內容區域：
html:has(#sidenav.--is-open) main {
translate: -320px;
}
以下的趣味示範使用 :has() 做為父項選取器，使用 :has() 做為查詢數量。
和容器查詢，製作出能夠流暢顯示
直向或橫向模式的 1 到 12 個元素：
建立子格線
subgrid
多年來，前端網路社群要求他們協助建立更圓滿的結尾， 是廣受歡迎且功能強大的 CSS 網格版面配置引擎。 目前三種主要引擎均適用。
如想瞭解總覽方式，請參閱這篇文章。
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
CSS 的巢狀結構
nesting
2023 年，所有主要瀏覽器都支援內建的 CSS 巢狀結構。 我甚至更新了網站，移除編譯巢狀結構的建構程序，現在我推出產品 一個較小的樣式表！是啊，支援巢狀結構的樣式表較小 瀏覽器開發人員工具皆可加以代表
您可以參閱 CSS 巢狀結構語法總覽。 瞭解所有詳細資料以下程式碼範例說明語法。
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}
讓瀏覽器保持標題平衡
balance
pretty
如果沒有 text-wrap: balance，開發人員和複製寫入者要留在換行提示
例如 <wbr> 元素或 ­這大多是敗戰役，因為
內容可能會以任何方式翻譯、縮放或修改
換行提示會顯示在新的內容呈現方式中。
使用平衡的文字換行功能時，您可以直接將這項作業保留在瀏覽器中。 您可以在以下 Codepen 中查看比較結果。
使用容器查詢單元
cqw
去年的一篇文章提到，每位前端開發人員都應該瞭解如何撰寫 容器查詢如果還未學過這一年，不妨把握機會，迎接 2024 年！ 並查看容器查詢單元總而言之 Ahmad Shadeed 在 2021 年撰寫了一篇有關容器查詢單元的精彩文章。
我們提供六種新的評估單位：
- 內嵌變化版本
cqi。 - 寬度變化版本
cqw。 - 區塊變化版本
cqb。 - 高度變化版本
cqh。 - 長度較短的變化版本
cqmin。 - 任何長度的變化版本
cqmax。
以容器的相對和內建動畫為例， 子元素會因為 也就是 100% 的容器內嵌大小
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
這是一張資訊卡，採用容器回應式字體排版，以及根據 容器的方向，如果螢幕方向為橫向，則為一半大小。
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
如果這些單元還不熟悉，建議你 查看 2024 年提供的所有單元。