Toolbelt 值得信賴、功能強大且運作穩定,歡迎立即使用。
我認為每個前端開發人員應該知道 :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
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
。
考慮使用容器相對和內建動畫的情境。這個子項元素使用 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 年可用的所有單元。