CSS Podcast - 012:邏輯屬性
常見的使用者介面模式是加上輔助內嵌圖示的文字標籤。
圖示位在文字左側,
圖示:margin-right
。
不過發生問題
因為這僅適用於文字方向從左到右時。
如果文字方向變更為從右到左 (阿拉伯文閱讀),圖示將與文字對齊。
你在 CSS 中如何做到這點? 邏輯屬性可讓您解決這些情況。除了許多其他優點外,Waymo 還提供免費的自動支援國際化功能。 這些功能可協助您打造更具彈性、多元包容的前端環境。
術語
頂端、右側、底部和左側的實體屬性是指可視區域的實際尺寸。 這就像是地圖上的指南針玫瑰。 另一方面,邏輯屬性 方塊的邊緣,因為與內容流動有關。 因此,如果文字方向或寫作模式有所變更,這類控制項可能隨之變更。 這是方向性風格重大轉變 而且可在設定介面樣式時享有更多彈性。
區塊流程
區塊流量是指內容的放置方向, 舉例來說,如果有兩個段落,第二個段落即為區塊流程。 在英文文件中,區塊流程是由上至下。 舉例來說,如果某段文字是在同一段文字,由上至下,
內嵌流程
內嵌流程是指文字在句子中的流動方式。
在英文文件中,內嵌流程由左至右。
如果您要將網頁的文件語言變更為阿拉伯文 (<html lang="ar">
),
內嵌流程就會從右到左。
文字的流動方向取決於文件的寫作模式。
您可以使用 writing-mode
屬性變更文字的配置方向。
可套用至整份文件或個別元素。
流量相對
過去採用 CSS 技術
所以我們只能套用相對於
兩側的方向,套用邊界等屬性
舉例來說,margin-top
會套用至元素的實體頂端。
透過邏輯屬性,margin-top
會變成 margin-block-start
。
這意味著無論語言和文字方向為何
區塊流程會提供適當的邊界規則。
![這張圖表顯示方塊的各種尺寸,以及各個尺寸區段的開始和結束位置](https://web.developers.google.cn/static/learn/css/logical-properties/image/a-diagram-showing-the-di-12ce9bdac4132.png?authuser=19&hl=zh-tw)
尺寸
如要避免元素超過特定寬度或高度 請撰寫以下規則:
.my-element {
max-width: 150px;
max-height: 100px;
}
流量相對的對等項目為 max-inline-size
和 max-block-size
。
您也可以使用 min-block-size
和 min-inline-size
取代 min-height
和 min-width
。
運用邏輯屬性 那麼寬度和高度規則看起來會像這樣:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
開始與結束
與其使用頂端、右側、底部和左側 請使用開始與結尾參數這能讓您有封鎖開始、內嵌端、區塊結束和內嵌開始作業。 這些可讓您套用能回應寫入模式變更的 CSS 屬性。
舉例來說,如要將文字靠右對齊,您可以使用這個 CSS:
p {
text-align: right;
}
如果希望手機
而是開始朝閱讀方向的開頭
這沒有幫助
使用邏輯值之後,您就能使用更實用的 start
和 end
值對應至文字方向。
文字對齊規則現在看起來像這樣:
p {
text-align: end;
}
間距與定位
margin
、padding
和 inset
的邏輯屬性
讓元素定位,以及決定這些元素在書寫模式中如何互動,更加方便有效率。
邊界和邊框間距相關屬性仍是直接對應方向,
但主要的差別在於,當寫作模式變更時,會隨之變更。
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
這會使用 padding
新增一些垂直內部空間,並使用 margin
從左側推送該空間。
top
屬性也會將屬性向下移。
如果有對等的邏輯屬性,則可能如下所示:
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
這會透過 padding
新增一些內嵌在空間內,並透過 margin
從內嵌開始推送。
inset-block
屬性會將該屬性從區塊開始往內移動。
inset-block
屬性不是唯一具有邏輯屬性的簡短選項。
這項規則可以進一步壓縮
使用簡式版本的邊界和邊框間距屬性。
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
框線
您也可以使用邏輯屬性新增 border
和 border-radius
。
如要在右下方和右側加上邊框 (右半徑),建議編寫以下規則:
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
或者,您可以使用如下的邏輯屬性:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
border-end-end-radius
中的 end-end
是區塊結尾「和」內嵌結尾。
單位
邏輯屬性提供兩個新的單位:vi
和 vb
。
vi
單位為內嵌方向的 1% 可視區域大小。
對等的非邏輯屬性為 vw
。
vb
單位是可視區域方向的 1%。
對等的非邏輯屬性為 vh
。
這些單位一律會對應到閱讀方向。
舉例來說,如果要讓元素佔用可視區域 80% 的可用內嵌空間,
使用 vi
單元時,如果書寫模式為直式,系統會自動將該大小切換為上下。
以務實方式使用邏輯屬性
邏輯屬性和寫入模式不只適用於國際化。 可用來產生用途更廣泛的使用者介面。
如果您的圖表在 X 軸和 Y 軸上都有標籤, 您可能會希望 Y 標籤上的文字垂直閱讀
示範中的 Y 軸標籤是 vertical-rl
的 writing-mode
這兩個標籤可以使用相同的 margin
值。
margin-block-start
值適用於兩個標籤
這是因為 Y 軸的區塊起點位於右側,X 軸頂端則位於頂端。
區塊開始的兩側加上紅色邊框,方便您看得見。
解決圖示問題
我們已介紹邏輯屬性 這項知識可應用於我們一開始的設計問題
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
系統已將邊界套用至圖示元素右側。
為了能支援圖示和文字之間的間距,以便支援所有閱讀方向,
必須改用 margin-inline-end
屬性。
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
現在,無論閱讀方向為何 圖示會調整成其本身的位置和空間。
隨堂測驗
測試邏輯屬性相關知識
當你用手書寫時,手腕會沿著哪個邏輯軸移動?
inline
block
勾選可受惠於邏輯屬性的所有功能
flex-start
、block-end
和 inline-start
block-start
和 inline
。inline-size
和 max-block-size
。border-end-end-radius
。底線的哪個邏輯上會加上底線?