理解CSS的邏輯屬性和值
特別宣告,文字根據@Rachel Andrew的《ofollow,noindex" target="_blank">Understanding Logical Properties And Values 》一文所整理。
2017年5月18日,W3C的CSS/Members/" rel="nofollow,noindex" target="_blank">CSS工作組(CSS Working Group) 釋出了CSS邏輯屬性和值(CSS Logical Properties and Values Level 1) 的首份工作草案(First Public Working Draft)。不同的書寫模式(writing mode) 中,可以抽取出共性的抽象概念(如開始位置,或行),這些邏輯抽象概念需要在不同書寫模式下對映到左或右、上或下等物理的概念上。一些CSS佈局可能依賴這些共性的邏輯概念。該 CSS 模組給出了用於通過邏輯方式(而不是基於物理座標、書寫方向和維對映等)控制佈局的邏輯屬性和取值(logical properties and values)。這個模組來源於CSS21中關於邏輯屬性和值的特性。
到目前為止,CSS邏輯屬性和值還沒有得到完全的支援,但瞭解他們可以幫助我們更好地理解CSS佈局以及書寫模式的互動。
在過去,CSS屬性運用於物理維度(尺寸)和方向,將元素的位置對映到left
、right
、top
或bottom
。使用float
可以讓一個元素向左或向右浮動,可以使用position
的top
、right
、bottom
和left
定位元素的偏移量。使用比如margin-top
或padding-top
來設定margin
、padding
和border
的值。這些特理屬性和值在top
、right
、bottom
和left
和書寫模式有很大的關係,書寫模式可以直接改變其方向。比如:
-
當書寫模式
direction
是ltr
(從左向右)時,margin-left
會讓該元素距其左側元素有多少間距(padding
和border
類似) -
當書寫模式
direction
是rtl
(從右向左)時,margin-left
不再是讓該元素距其側元素有多少間距了,而是變成了該元素距右側元素之間有多少間距
如果你使用垂直書寫模式,無論是在整個佈局中還是在某些元素中,都沒有什麼意義。這篇文章中接下來將解釋CSS如何改變這些,並且可以支援書寫模式。在這個過程中,可以解釋清楚一些關於Flexbox和Grid佈局中一些令人感到困惑的一些事情。
當第一次開始使用CSS Grid並向大家解釋其規範時,我注意到grid-area
屬性被用於grid-row-start
、grid-row-end
、grid-column-start
和grid-column-end
四個屬性的簡寫屬性。因此,下面三種書寫方式,其達到的效果都是相同的:
.item { grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4; } .item { grid-row: 1 / 3; grid-column: 2 / 4; } .item { grid-area: 1 / 2 / 3 / 4; }
grid-area
對應的順序如下:
grid-row-start grid-column-start grid-row-end grid-column-end
如果你想深入瞭解網格區域(grid-area
)更詳細的內容,可以閱讀《網格區域》一文,有關於Grid 佈局更多的內容可以點選這裡進行了解。
這裡有兩個關鍵詞*-start
和*-end
,而我們以前接觸的CSS屬性,比如margin
、padding
和border
之類的都是以*-top
、*-right
、*-bottom
和*-left
。那麼為什麼會是如此呢?如果仔細觀察,它們實際上是按照相反的順序排列的:top
、left
、bottom
和right
。這樣一來,CSS工作組不是把事情變得更為困難了?
答案是,這些值 已經偏離了一個基本的假設,即Web上的內容對映到螢幕的物理尺寸,一個句子的第一個單詞位於其所在框的左上角。如果你從未遇到過我們用簡寫的屬性設定這些值,那麼grid-area
中的行順序就變得完全有意義了。我們先設定了兩個起始位置(行和列的起始位置),然後設定兩個結束位置(行和列的結束位置)。
這意味著,如果書寫模式改為垂直模式,那麼塊的位置仍然相對於文件的書寫模式,而不是螢幕的物理屬性。這樣理解可能有點困惑。咱們來看看@Rachel Andrew在Codepen上給我們提供的一個示例 :
瞭解了書寫模式的這個事實,也就解釋清楚了為什麼Flexbox和Grid是指開始和結束行,而不是將網格對映到top
、right
、bottom
和left
的物理維度上。
塊和內聯維度
上面已經提到