立即可用的實用 CSS 工具,不僅功能強大、功能強大,而且也相當穩定。
我認為每個前端開發人員應該知道 :has()
不只是「父項選取器」,
瞭解 subgrid
的方式和原因、如何透過內建的 CSS 語法建立巢狀結構
瀏覽器平衡廣告標題文字換行,以及容器查詢單元的使用方式。
這篇文章延續了 去年所有前端開發人員都應該知道的 6 個 CSS 程式碼片段,
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
:has()
已於 2023 年底在所有主要瀏覽器中獲得!新的選取器似乎
雖然不大且毫無意義,但只要有以下用途,您就會感到驚訝:
遊戲、再活動、內容感知版面配置、智慧型元件和
許多 Jhey 在這篇文章中深入探討的議題。
![目前顯示 4 個面板,每個面板都有一張圖片和說明文字。
每張圖片都顯示大腦啟動了更多元的腦力。第一個面板是
也就是 :has()第二個面板將 icon:has(caption) 設為上層選取器。
第三個面板顯示 .layout:has(> :nth-child(5)) 做為數量選取器。
面板顯示 html:has(#checked) .new-subject 做為條件式主題變更選取器。](/static/articles/5-css-snippets-every-front-end-developer-should-know-in-2024/image/has-meme.jpg)
以下舉例說明如何使用 :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 年提供的所有單元。