載說明：原創不易，未經授權，謝絕任何形式的轉載

有時候，提升你的應用程序的CSS只需要一個簡單的一行升級或增強！了解這12個屬性，開始將它們融入到你的項目中，享受減少技術債務、去除JavaScript，以及為用戶體驗贏得輕松的勝利。

1、aspect-ratio

你是否曾為視頻嵌入時的寬高比感到困擾？例如，我們常見的高清視頻寬高比是16:9。過去，我們可能需要使用一些復雜的方法來實現這個比例，比如大家熟悉的“padding hack”。但現在，有了一個更簡潔的解決方案。

padding hack：https://css-tricks.com/aspect-ratio-boxes/

2021年9月開始，大多數主流瀏覽器都穩定支持了一個新的CSS屬性：aspect-ratio。這個屬性可以非常方便地定義元素的寬高比。比如說，對于一個高清視頻，你只需要設置aspect-ratio: 16/9就可以了。如果你想要一個完美的正方形，設置aspect-ratio: 1即可，因為默認情況下第二個值也是1。

來看一個例子：

.aspect-ratio-hd {
  aspect-ratio: 16/9;
}

.aspect-ratio-square {
  aspect-ratio: 1;
}

值得一提的是，應用了aspect-ratio屬性的元素在某種程度上是“寬容”的。這意味著當內容導致元素在至少一個維度上超出設定的比例時，元素仍然會增長或變形以適應內容。為了防止或控制這種行為，你可以添加額外的尺寸屬性，如max-width，這在避免元素超出彈性盒或網格容器時可能是必要的。

2、object-fit

雖然這個屬性已經出現了一段時間，但它解決了一個重要的問題，并且可以說是“一行代碼”的升級。

object-fit屬性的作用是讓img標簽或其他替換元素（如視頻）的內容表現得就像它們是容器本身，從而使這些內容能夠像背景圖片那樣進行尺寸調整。

這個屬性有幾個值可以選擇，但最常用的可能是以下兩個：

1. cover：圖片會調整大小以覆蓋整個元素，并保持其寬高比，這樣內容就不會變形。就像你在手機上設置壁紙時，圖片會覆蓋整個屏幕，但不會拉伸變形。
2. scale-down：如果需要，圖片會在元素內調整大小，以便完整顯示而不被剪切，并保持其寬高比。如果元素的實際寬高比與圖片不同，這可能會導致圖片周圍出現額外的空間（即“信封式”顯示）。

在這兩種情況下，object-fit與aspect-ratio結合使用是非常理想的，這可以確保在應用自定義寬高比時圖片不會失真。

.image {
  object-fit: cover;
  aspect-ratio: 1;

  /* Optional: constrain image size */
  max-block-size: 250px;
}

3、margin-inline

margin-inline是CSS邏輯屬性中的一員，用于簡化水平書寫模式下（如英文、中文）的左右外邊距設置。在傳統的CSS中，你可能會分別設置margin-left和margin-right來達到這一目的。而使用margin-inline，可以更加簡潔和高效地完成同樣的任務。

傳統方法

/* 之前的寫法 */
margin-left: auto;
margin-right: auto;

使用margin-inline

/* 使用margin-inline */
margin-inline: auto;

為什么要使用margin-inline？

使用margin-inline的主要優勢在于它的“邏輯性”。這意味著它可以根據文本的書寫模式（如從左到右、從右到左）自動調整外邊距。這對于設計能夠適應多種語言和文化的網站尤其重要。

舉個例子，對于從右到左書寫的語言（如阿拉伯語），margin-inline-start將自動應用于右邊距，而margin-inline-end應用于左邊距。這樣，無論內容是哪種書寫模式，布局都能保持一致和諧。

瀏覽器兼容性

現在，margin-inline等邏輯屬性已經得到了廣泛的支持，兼容性超過了98%，盡管在某些情況下可能需要添加前綴。

4、text-underline-offset

text-underline-offset屬性用于控制文本基線與下劃線之間的距離。通過這個屬性，開發者可以精確地定位下劃線的位置，使其既不遮擋文字，又能起到強調作用。

/* 應用text-underline-offset */
a:not([class]) {
	text-underline-offset: 0.25em;
}

在這個例子中，所有沒有class屬性的a元素（通常是鏈接）的下劃線被設置了0.25em的偏移量。

為什么要使用text-underline-offset？

1. 清晰地區分文字和下劃線：有時候，下劃線可能與字母的下部（如"p"和"q"的尾部）重疊，使用text-underline-offset可以有效避免這種情況。
2. 提高可讀性：特別是當鏈接在文檔中緊密排列時（例如，一個項目符號列表），適當調整下劃線的位置可以使鏈接看起來更清晰，更易于區分。

結合其他屬性使用

text-underline-offset可以與其他CSS屬性結合使用，以實現更加豐富的視覺效果：

• text-decoration-color：改變下劃線的顏色。
• text-decoration-thickness：調整下劃線的粗細。

a {
    text-decoration-color: blue; /* 下劃線顏色 */
    text-decoration-thickness: 2px; /* 下劃線粗細 */
    text-underline-offset: 0.25em; /* 下劃線偏移量 */
}

5、outline-offset

在Web前端開發中，為元素添加視覺焦點是一項基本且重要的任務。傳統上，我們可能會使用box-shadow或偽元素來創建元素焦點時的自定義輪廓。但其實，有一個自2006年就已存在的CSS屬性可能被許多人忽略了——outline-offset。這個屬性可以讓你輕松地控制元素輪廓的位置。

outline-offset屬性允許你調整輪廓（outline）與元素邊界之間的距離。通過設置正值，可以將輪廓向外推移；設置負值，則可以將輪廓向內拉近。

/* 應用outline-offset */
.outline-offset {
  outline: 2px dashed blue; /* 藍色虛線輪廓 */
  outline-offset: var(--outline-offset, .5em); /* 輪廓偏移量 */
}

在這個例子中，當元素獲得焦點時，它將顯示一個藍色虛線輪廓，輪廓與元素邊界之間的距離為0.5em。

使用場景

1. 增強可訪問性：當元素獲得焦點時，明顯的輪廓可以幫助用戶定位當前交互的元素。
2. 提升視覺效果：相比于緊貼元素的輪廓，適當的偏移可以使界面看起來更加舒適和美觀。

6、scroll-margin和scroll-padding

兩個相對較新的CSS屬性：scroll-margin和scroll-padding，它們在處理滾動行為時尤為重要。

scroll-margin的作用

scroll-margin系列屬性允許你為元素在滾動位置上下文中添加一個偏移量。這在處理諸如固定導航欄遮擋錨點鏈接內容時特別有用。

/* 為所有具有id屬性的元素添加scroll-margin */
[id] {
    scroll-margin-top: 2rem;
}

在這個例子中，任何具有id屬性的元素，在通過導航滾動到它時，其頂部都會有2rem的額外空間，以避免被固定在頂部的導航欄遮擋。

scroll-padding的應用

與scroll-margin類似，scroll-padding屬性可以在滾動視圖內增加內邊距。這不會影響元素在文檔中的布局位置，但可以改善滾動到特定元素時的視覺體驗。

7、color-scheme

隨著暗黑模式在用戶界面中的普及，為網站或應用程序提供光暗主題切換成為了一種流行趨勢。CSS中的color-scheme屬性為開發者提供了一種簡單的方式來適配瀏覽器UI元素的光暗模式，今天我們就來深入探討它的應用。

color-scheme屬性允許網頁告訴瀏覽器，其內容是為淺色模式、暗色模式，或兩者皆適配的。設置此屬性后，瀏覽器會自動調整表單控件、滾動條和CSS系統顏色等UI元素，以適應相應的主題模式。

/* 在根元素上設置color-scheme */
:root {
    color-scheme: dark light;
}

在元素級別使用color-scheme

你也可以在單個元素上使用color-scheme屬性，以改善特定背景下的對比度和可讀性。

/* 對暗背景的元素使用暗色模式 */
.dark-background {
    color-scheme: dark;
}

為什么使用color-scheme

• 簡化暗模式的實現：使用color-scheme可以輕松地為網站添加暗模式支持，無需編寫大量的自定義樣式。
• 增強用戶體驗：適配用戶的偏好設置（如暗模式），可以提供更舒適的瀏覽體驗。
• 提升可訪問性：對于需要高對比度的用戶，暗色模式可以提供更好的視覺可訪問性。

8、accent-color

在前端開發中，定制化表單元素的樣式一直是一個挑戰，尤其是對于復選框和單選按鈕這樣的原生UI控件。幸運的是，CSS引入了一個新屬性accent-color，讓這一任務變得更加簡單和直觀。

accent-color屬性允許開發者改變復選框、單選按鈕、進度條和滑塊（range）等表單控件的主題色。通過這個屬性，你可以輕松地為這些元素設置一個自定義的顏色，以匹配你的網站或應用程序的整體風格。

/* 使用accent-color自定義顏色 */
:root {
    accent-color: mediumvioletred;
}

在這段代碼中，所有原生的表單控件（如單選按鈕和復選框）將使用中紫羅蘭紅色作為它們的主題色。

9、width: fit-content

在前端開發中，經常需要調整元素的寬度以適應其內容。傳統方法如使用display: inline-block等，雖然能實現這一需求，但可能會影響元素的布局位置。幸運的是，CSS提供了一個更為優雅的解決方案——width: fit-content屬性。

width: fit-content 屬性允許元素的寬度自動調整以適應其內容的大小，相當于“收縮包裹”（shrink wrap）效果。這意味著元素的寬度會剛好足夠容納其內容，不會過大或過小。

/* 應用width: fit-content */
.fit-content {
  width: fit-content;
}

在這個例子中，類名為.fit-content的元素將其寬度自動調整為恰好適應其內容的大小。

10、overscroll-behavior

在網頁設計中，處理滾動行為是提升用戶體驗的關鍵之一。特別是在有限維度的滾動區域（如側邊欄或滾動框），當滾動到達邊界時，滾動行為可能會傳遞給背景頁面，這可能會給用戶帶來不便。為了解決這個問題，CSS提供了一個屬性overscroll-behavior。

overscroll-behavior屬性允許開發者控制滾動區域的邊界行為。當設置為contain時，它可以阻止滾動行為從一個滾動容器傳遞到其父容器或背景頁面。

/* 設置overscroll-behavior */
.overscroll-container {
    overscroll-behavior: contain;
}

在這個例子中，類名為.overscroll-container的元素在達到滾動邊界時，不會將滾動行為傳遞給其父級元素或背景頁面。

11、text-wrap

在網頁排版中，處理文本換行是一個經典問題，尤其是要避免在段落的最后一行留下孤立的單詞（又稱“孤行”）。2023年，CSS引入了一個新屬性text-wrap，旨在解決這類排版問題。

text-wrap屬性提供了對文本換行行為的更精細控制，其目標是均衡每行文本的字符數，從而避免不平衡的文本行和孤行現象。

balance：這個值的目標是均衡每行的字符數，使得文本行更加平衡和諧。

/* 應用text-wrap屬性 */
.headline {
  text-wrap: balance;
}
 /* For demonstration */
  max-inline-size: 25ch;

text-wrap屬性的pretty值是針對防止孤行設計的。它的算法會評估文本塊的最后四行，根據需要做出調整，確保最后一行至少有兩個單詞。

/* 應用text-wrap屬性的pretty值 */
.article-text {
  text-wrap: pretty;
}

12、scrollbar-gutter

在網頁設計中，滾動條的出現和消失有時會導致不希望的布局變化。為了解決這一問題，CSS引入了一個新屬性scrollbar-gutter，它允許在布局中預留滾動條的空間，防止這種不期望的布局偏移。

scrollbar-gutter屬性的主要作用是在滾動容器中預留出滾動條的空間。即使在不需要滾動條的情況下，瀏覽器也會繪制一個“溝槽”（gutter），作為滾動容器的額外空間，避免了因滾動條消失而引起的布局變化。

/* 使用scrollbar-gutter屬性 */
.container {
  scrollbar-gutter: stable both-edges;
}

scrollbar-gutter的作用

1. 防止布局偏移：當滾動條出現或消失時，預留的空間可以防止整個頁面的布局發生變化。
2. 保持視覺平衡：使用both-edges關鍵詞可以在滾動容器的兩側都預留空間，即使滾動條不可見時也能保持布局的對稱性。

結束

至此，我們對幾個CSS中的新特性進行了深入的探討和分析。從text-wrap的平衡排版到scrollbar-gutter防止布局偏移的巧妙應用，這些現代CSS特性為前端開發者打開了新的大門。希望本文能幫助大家更好地理解這些新工具，從而在實際項目中運用得心應手，創造出更加美觀、用戶友好的網頁。前端技術的世界總是充滿驚喜和挑戰，讓我們保持好奇心，不斷學習和探索，共同推動這個領域的發展。感謝大家的閱讀，期待與大家在下一篇文章中再次相遇！

者 | Tim Anderson

譯者 | 王強

策劃 | Tina

AI 大模型超全落地場景&金融應用實踐，8 月 16 - 19 日 FCon x AICon 大會聯訣來襲、干貨翻倍！

用于擴展 HTML 規范的 Htmx 項目發布了 2.0 版，這是該項目自 2020 年 11 月 發布 1.0 版以來的第一個主要版本。

Htmx 2.0 取消了對 Internet Explorer 的支持，并將擴展項移出了核心存儲庫，這樣每個擴展都可以按照自己的節奏發布更新了。新版本還刪除了一些已棄用的屬性，并將 HTTP DELETE 請求更改為使用參數。

新版還加入了一些新特性，包括 htmx.swap() 方法，該方法用新內容替換現有內容。它替換并改進了現有的內部 selectAndSwap() 方法。新版還改進了與 Web 組件、可重復使用的自定義元素的集成。

新版發布博文解釋說，為了避免破壞現有項目，1.x 版本將在 NPM（節點包管理器）中繼續標注為為“latest”，2.x 還是“next”，直到 2025 年 1 月 1 日為止。遷移到 2.0 版并不困難，但根據遷移指南，用戶可能需要做一些工作。

Htmx 是一種新的前端開發方法，側重于 HTML 而非 JavaScript（盡管它是作為 JavaScript 庫實現的）。Htmx 是從之前的一個項目 intercooler.js 發展而來的，后者是由 Htmx 發明者 Carson Gross 于 2013 年創建。這兩個項目的靈感都來自于這樣一種觀點：HTML 的特性一直因為行業對 JavaScript 框架的關注而被限制住了，而 JavaScript 框架的復雜性卻一直在增長。Gross 在 2020 年推出 1.0 版時寫道：“HTML 導向的 Web 開發范式被拋棄，不是因為超文本是個壞主意，而是因為 HTML 沒有足夠的表達能力。htmx 旨在解決這個問題，并讓你可以使用 Web 的原始超文本模型實現許多常見的現代 Web UI 模式?！?/span>

Htmx 現在支持包括異步請求、CSS 轉換和使用 HTML 屬性的 WebSocket 通信在內的特性。

盡管 Htmx 仍然不如 React 或 Angular 等框架那么出名，但它還是收獲了開發人員的贊賞。之前就有人提到，“我絞盡腦汁想找出一個沒有過度設計的 js 框架，找到 htmx 讓我非常高興”。另一個人則表示“Htmx 簡直太棒了。我們正用它來完成一個重大項目。”

Gross 參與了 Hacker News 上的討論并回答了問題。有人問他，是否在設法將 Htmx 的一些特性推向 HTML 標準？“我們正在與 Chrome 開發人員討論這些想法，我持謹慎樂觀的態度”，Gross 說。

Htmx 使用的是 XMLHttpRequest，而非更新、更強大的 fetch API。有人問，團隊是否考慮過改用 fetch？“看過了，不幸的是 fetch() 和 xhr 有一組不相交的特性（特別是 xhr 的上傳進度），所以我們決定不碰它”，Gross 回答道。

該項目在 GitHub 上根據 Zero-Clause BSD 許可開源。

原文鏈接：

https://devclass.com/2024/06/18/htmx-2-0-released-aims-to-replace-complex-javascript-frameworks-with-easily-understood-html-attributes/

聲明：本文為 InfoQ 翻譯，未經許可禁止轉載。

原文鏈接：Htmx 2.0 發布：用易懂的 HTML 屬性取代復雜 JavaScript 框架_架構_InfoQ精選文章

TML全局屬性是所有HTML元素共有的屬性。它們可以應用于所有元素，盡管它們可能對某些元素沒有影響。

HTML屬性

HTML元素可以設置屬性

屬性可以在元素中添加附加信息

屬性一般描述于開始標簽

屬性總是以名稱/值對的形式出現，比如：name="value"。

屬性和屬性值對大小寫不敏感。不過，萬維網聯盟在其HTML4推薦標準中推薦小寫的屬性/屬性值。而新版本的(X)HTML要求使用小寫屬性。

大多數HTML元素支持的屬性：

class：為html元素定義一個或多個類名（classname）(類名從樣式文件引入)

id：定義元素的唯一id

style：規定元素的行內樣式（inlinestyle）

title：描述了元素的額外信息(作為工具條使用)

HTML超鏈接及其屬性

HTML使用標簽<a>來設置超文本鏈接。超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。默認情況下，鏈接將以以下形式出現在瀏覽器中：

一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。

訪問過的鏈接顯示為紫色并帶有下劃線。

點擊鏈接時，鏈接顯示為紅色并帶有下劃線。

如果為這些超鏈接設置了CSS樣式，展示樣式會根據CSS的設定而顯示。

在標簽<a>中使用了href屬性來描述鏈接的地址。

實例

<a href="https://www.kaikeba.com/">訪問開課吧</a>1復制代碼類型：[html]

上面這行代碼顯示為：訪問開課吧

點擊這個超鏈接會把用戶帶到開課吧的首頁。

使用target屬性，你可以定義被鏈接的文檔在何處顯示。

實例

<ahref="https://www.kaikeba.com/"target="_blank">訪問開課吧</a>  

target="_blank":在新窗口中打開被鏈接文檔。  

target="_self":	默認，在相同的框架中打開被鏈接文檔。  

target="_parent":在父框架集中打開被鏈接文檔。  

target="_top":	在整個窗口中打開被鏈接文檔。  

target=framename:在指定的框架中打開被鏈接文檔。  1234567891011復制代碼類型：[html]

HTML圖像標簽及其屬性

在HTML中，圖像由<img>標簽定義。<img>是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。

要在頁面上顯示圖像，你需要使用源屬性（src）。src指"source"。源屬性的值是圖像的URL地址。

定義圖像的語法是：

<imgsrc="url"alt="some_text">  1復制代碼類型：[html]

URL指存儲圖像的位置。

alt屬性用來為圖像定義一串預備的可替換的文本。在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。

height（高度）與width（寬度）屬性用于設置圖像的高度與寬度。屬性值默認單位為像素。

<imgsrc="logo.jpg"alt="kaikeba"width="300"height="120">  1復制代碼類型：[html]

提示:指定圖像的高度和寬度是一個很好的習慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的整體布局。

開課吧廣場-人才學習交流平臺