您今天就能使用的強大且穩定的 CSS,可用於工具箱。
我認為每位前端開發人員都應該知道 :has()
不只是「父項別選項」,subgrid
的使用方式和原因、如何使用內建 CSS 語法進行巢狀結構、如何讓瀏覽器平衡標題文字的斷行,以及如何使用容器查詢單位。
這篇文章是去年的延續,當時我們介紹了 6 個 CSS 程式碼片段,是每位前端開發人員在 2023 年都應熟知的內容。
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
內建 CSS 巢狀結構於 2023 年開始在所有主要瀏覽器中提供。我甚至更新了網站,移除編譯巢狀結構的建構程序,現在我可以提供較小的樣式表!沒錯,含有巢狀結構的樣式表較小,所有瀏覽器的 devtools 都已準備好呈現。
如需 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 Shaded 在 2021 年撰寫了一篇關於容器查詢單元的優質文章,可做為概略說明。
有六個新的容器 查詢單元:
- 內嵌變數
cqi
。 - 寬度變化版本
cqw
。 - 區塊變化版本
cqb
。 - 高度變化版本
cqh
。 - 變化版本的長度為
cqmin
中較短的長度。 - 長度為
cqmax
的變化版本。
請考慮容器的相對和內在動畫情境。子元素會使用 100cqi (即容器內嵌大小的 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 年可用的所有單位。