Chromium 的全新邏輯屬性簡寫和插邊屬性。
自 Chromium 69 (2018 年 9 月 3 日) 起,邏輯屬性和值已幫助開發人員透過邏輯 (而非實體、方向和維度樣式) 控制國際版面配置。Chromium 87 提供了簡寫和偏移,讓這些邏輯屬性和值更容易寫入。這會讓 Chromium 能夠與 Firefox 同步,而 Firefox 自 66 年起開始支援簡短摘要。Safari 已備妥技術預覽。
![裝置框內顯示拉丁、希伯來文和日文的保留預留位置文字。箭頭和顏色會隨文字顯示,為 2 個區塊和內嵌方向建立關聯。](https://web.dev/static/articles/logical-property-shorthands/image/latin-hebrew-japanese-a-1c968e63fa469.png?authuser=6&hl=zh-tw)
文件流程
如果您已經熟悉邏輯屬性、內嵌和區塊軸,也不想複習,可以提前略過。如果沒有,請參考以下的簡要複習。
英文時,字母和字詞是由左至右對齊,段落則由上至下堆疊。在繁體中文中,字母和字詞由上至下,段落則由右至左堆疊。就這 2 種情況而言,如果我們編寫的 CSS 在段落中加入「靠上邊界」,就只能正確使用 1 語言樣式。如果將網頁從英文翻譯成繁體中文,在新的垂直書寫模式中,邊界可能就沒有意義。
因此盒子的實體在國外並不是非常實用。因此,系統會開始支援多種語言的程序,也就是瞭解盒子模型的實體和邏輯側邊。
您是否曾檢查過 Chrome 開發人員工具中的 p
元素?如果有,您可能已註意到預設使用者代理程式樣式並非實體,而是邏輯。
p {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
來自 Chromium 使用者代理程式樣式表的 CSS
邊界沒有在上或底部,就像英文讀者可能會相信。
是block-start
和block-end
!這些邏輯屬性類似於英文讀者的頂端和底部,但「同樣」類似於日文閱讀器,如右向左下。編寫一次,即可在任何地方使用。
正常流程是指網頁刻意加入這個多方向性內容。 當網頁內容因文件方向變更而更新時,系統會將版面配置及其元素視為「流程」中。如要進一步瞭解「進入」和「輸出」流程,請參閱 MDN 或 CSS 顯示模組規格。雖然邏輯屬性不一定要是流程,但邏輯屬性卻能因應方向變更,大幅減輕處理負擔。流程表示方向,字母、字詞和內容需要沿著方向移動。如此一來,我們就能封鎖並內嵌邏輯方向。
區塊方向是指新內容區塊遵循的方向,例如問自己「下一個段落該放在哪裡?」。可以當成「內容區塊」或「文字區塊」。
每種語言都會排列區塊,並依照各自的 block-axis
排序。block-start
是第一個放置的側邊段落,而 block-end
則是朝向的側邊新段落。
以日文手寫為例,區塊方向由右向左流:
內嵌方向是指字母和字詞的方向。寫字時請考量手臂和手的移動方向;這些方向是沿著 inline-axis
行駛。inline-start
是開始撰寫內容的側邊,inline-end
則是寫入結束或換行的側邊。在上一部影片中,inline-axis
由上到下,但在下一部影片中,inline-axis
從右向左流。
成為 flow-relative
表示為一種語言編寫的樣式會符合情境,並適當套用到其他語言。內容將根據提交的語言顯示。
全新短篇
以下幾篇簡短文章並非瀏覽器的新功能,透過可同時在區塊或內嵌邊緣設定值,讓您更輕鬆地撰寫樣式。inset-*
邏輯屬性「確實」會帶來新功能,因為在那之前,您無法透過長期方式指定具有邏輯屬性的絕對位置。不過,將插邊和短手 (hehe) 的流程一併納入考量,接下來要介紹一下 Chromium 87 中實現的所有新邏輯屬性功能。
利潤短手
未推出新功能,但有一些超級便利的短手:
margin-block
和 margin-inline
。
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
但現在還沒有「頂部和底部」或「左右耳」的簡寫!
您可能會使用 margin: 10px;
的簡寫來參照這 4 個面,現在只要使用邏輯屬性的簡寫,就能輕鬆參照這 2 個邊數。
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
邊框間距簡寫
未推出新功能,但更便利的短手:
padding-block
和 padding-inline
。
padding-block-start: 2ch; padding-block-end: 2ch;
padding-block: 2ch; /* or */ padding-block: 2ch 2ch;
此外,inline
免費提供以下簡寫:
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
插邊和短手
實體屬性 top
、right
、bottom
和 left
都可以寫入 inset
屬性的值。任何 position
的值都可透過插邊設定兩側受益。
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
}
position: absolute; top: 1px; right: 2px; bottom: 3px; left: 4px;
position: absolute; inset: 1px 2px 3px 4px;
這樣應該立即可方便!插邊是實體面的簡寫,作用就像邊界和邊框間距一樣。
新功能
隨著實體面簡直觀興奮,額外的 inset
簡略具有更多的邏輯特徵可帶來更大助益。這些簡寫可讓開發人員編寫的便利性 (較精簡輸入) 也能提高版面配置的潛在觸及率,因為兩者較不相關。
position: absolute; top: 10px; bottom: 10px;
position: absolute; inset-block: 10px;
position: absolute; left: 10px; right: 20px;
position: absolute; inset-inline: 10px 20px;
MDN 提供了更多資訊,以及插邊短手和長效清單的完整清單。
框線
框線及其巢狀 color
、style
和 width
屬性也都有新的邏輯簡寫。
border-top-color: hotpink; border-bottom-color: hotpink;
border-block-color: hotpink; /* or */ border-block-color: hotpink hotpink;
border-left-style: dashed; border-right-style: dashed;
border-inline-style: dashed; /* or */ border-inline-style: dashed dashed;
border-left-width: 1px; border-right-width: 1px;
border-inline-width: 1px; /* or */ border-inline-width: 1px 1px;
如要瞭解更多相關資訊,請參閱 MDN 的邊界簡要和長篇清單。
邏輯屬性 <figure>
範例
讓我們透過一個簡單的範例來說明。邏輯屬性可以為圖片加上說明文字,以處理不同的書寫和文件方向。
或者試試看!
您不必使用 <figure>
和幾個邏輯屬性,讓卡片支援全球性即可。如果您想知道 CSS 如何彼此搭配運作,希望本系列課程能對您有所幫助。
簡化與跨瀏覽器支援
Cascade 或建構工具是絕佳的選擇,讓新舊瀏覽器都以最新的邏輯屬性適當空間。如果是 Cascade 備用項目,請使用具有邏輯屬性的實體屬性,瀏覽器就會使用在樣式解析期間找到的「最後一個」屬性。
p {
/* for unsupporting browsers */
margin-top: 1ch;
margin-bottom: 2ch;
/* for supporting browsers to use */
/* and unsupporting browsers to ignore and go 🤷♂️ */
margin-block: 1ch 2ch;
}
但這對每個人來說並不是完整的解決方案。以下為手寫備用項,利用 :lang()
虛擬選取器指定特定語言,並適當調整實體間距,最後為支援瀏覽器提供邏輯間距:
/* physical side styles */
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
/* adjusted physical side styles per language */
:lang(ja) {
p {
/* zero out styles not useful for traditional Japanese */
margin-top: 0;
margin-bottom: 0;
/* add appropriate styles for traditional Japanese */
margin-right: 1ch;
margin-left: 2ch;
}
}
/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}
/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
/* remove any potential physical cruft.. */
margin: 0;
/* explicitly set logical value */
margin-block: 1ch 2ch;
}
您也可以使用 @supports
判斷是否要提供實體屬性備用:
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Sass、PostCSS、Emotion 和其他程序都有自動化封裝程式和/或建構時間方案,並提供各種備用方案或解決方案。查看各個項目,找出何者符合您的工具鍊和整體網站策略。
後續步驟
更多 CSS 將提供邏輯屬性,但目前還沒完成!但其中有一批缺少的簡寫,而這個 GitHub 問題中的解決方法尚待解決。目前有一個暫時解決方案處於草稿狀態。如果想要用簡明方式標示方塊的所有邏輯面,該怎麼做?
margin: 1px 2px 3px 4px; margin: 1px 2px; margin: 2px;
margin: logical 1px 2px 3px 4px; margin: logical 1px 2px; margin: logical 2px;
目前的提案草稿意味著您必須在每一份簡寫中編寫 logical
,才能套用符合邏輯的對等項目,而這聽起來不算是「DRY」。
還有其他提案需要在區塊或頁面層級變更,但邏輯使用還是有可能在樣式中洩漏假設為實體。
html {
flow-mode: physical;
/* or */
flow-mode: logical;
/* now all margin/padding/etc references are logical */
}
/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */
這題很難!請投票表決,誠摯歡迎您提出意見。
想更瞭解或研究邏輯性質嗎?以下是 MDN 提供的詳細參考資料、指南和範例