了解邏輯屬性和值

已發表: 2022-03-10

快速總結↬ CSS 邏輯屬性和值還沒有完全準備好使用，但是學習它們可以幫助你理解 CSS 佈局，以及與寫作模式的交互。

過去，CSS 將自身與物理尺寸和方向綁定在一起，將元素的位置物理映射到左側、右側和頂部和底部。我們將元素left或right float ，我們使用定位偏移屬性top 、 left 、 bottom和right 。我們將邊距、填充和邊框設置為margin-top和padding-left 。如果您以水平、從上到下、從左到右的書寫模式和方向工作，這些物理屬性和值是有意義的。

如果您使用垂直書寫模式，無論是整個佈局還是某些元素，它們的意義都較小。在本文中，我將解釋 CSS 是如何改變以支持書寫模式的，並且在此過程中，我將澄清一些可能會讓您對 Flexbox 和 Grid 感到困惑的事情。

當我第一次開始使用 CSS Grid 並向人們解釋新規範時，我注意到grid-area屬性可以用作設置所有四行的單行速記。因此，下面的三個示例將導致相同的項目放置。第一個使用普通屬性，第二個指定每個維度的開始和結束線，第三個使用grid-area 。

 .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時的線條順序如下：

網格行開始
網格列開始
網格行端
網格列端

我（以及我的聽眾中的許多人）的第一個問題是，“為什麼這些不遵循我們在 CSS 中的其他所有內容中習慣的上、右、下、左順序？” 它們實際上與這些值的順序相反：上、左、下、右！ CSS 工作組是否在積極嘗試使事情變得困難？

答案是這些值已經遠離了網絡上的內容映射到屏幕的物理尺寸的基本假設，句子的第一個單詞位於它所在框的左上角。 grid-area中的線條順序如果您從未遇到過我們以簡寫形式設置這些值的現有方式，那麼grid-area完全有意義。我們先設置兩條起始線，然後設置兩條結束線。

這意味著如果我們將文檔的書寫模式更改為垂直模式，塊的位置將保持相對於文檔的書寫模式，而不是屏幕的物理屬性。您可以在下面的示例中嘗試此操作，為我們的佈局切換寫作模式值，然後查看整個網格旋轉。

請參閱 CodePen 上 Rachel Andrew (@rachelandrew) 的 Pen Grid and Writing Modes。

了解有關書寫模式的這一事實也解釋了為什麼 CSS Grid 和 Flexbox 引用start和end線，而不是像我們在絕對定位中使用的那樣將網格映射到頂部、右側、底部和左側的物理尺寸。在上面的示例中，第一個項目使用grid-area和基於行的定位進行定位。

 grid-area: 1 / 2 / 3 / 4;

如果我們使用速記，這將是這樣的：

 grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4;

我們設置兩條起始線，首先是塊軸，其次是內聯軸，然後在每個維度的結束線都遵循相同的模式。無論網格以何種方式佈置，起始線和結束線都相對於網格和文檔的書寫模式。

塊和內聯尺寸

我已經提到了理解新佈局的關鍵，即塊和內聯維度的概念。當你使用新的 CSS 時，這些術語會不斷出現。這兩個維度在網格佈局的上下文中相當容易理解，因為在網格佈局中工作時我們總是使用塊和內聯軸，所以我將使用一個網格演示來解釋。

塊維度對應於塊在頁面上的佈局順序。如果您考慮一段英文文本。每個段落一個接一個地排列，這些排列的方向是塊尺寸，所以在網格佈局中，這是塊軸。

在 CSS 網格佈局中，塊軸也稱為行軸，這就是塊軸屬性為grid-row-start和grid-row-end原因。

因此，內聯軸沿著單詞在句子中的排列方向穿過塊軸。在英語中，該軸從左到右運行。在網格佈局中，內聯軸是具有屬性grid-column-start和grid-column-end的列軸。

如果我們將示例的書寫模式更改為vertical-lr ，則書寫模式現在是垂直的，這意味著塊軸垂直運行，而內聯軸沿線（從上到下）運行。

因此，如果我們談論 Block 維度，我們描述的是文本段落在正常文檔流中的佈局方向，Inline 維度是句子運行的方向。

邏輯屬性

一旦你習慣了使用塊和內聯尺寸、開始和結束線，CSS 其餘部分中物理尺寸的鏈接就開始感到尷尬。然而，有一個規範定義了所有現有物理屬性的邏輯版本 - CSS 邏輯屬性和值規範，它是第一個公共工作草案。目前唯一能很好地支持這些屬性的瀏覽器是 Firefox，但是了解它們的工作原理可能是思考新 CSS 的好方法，所以讓我們來看看。

我用 CodePen 示例說明了每個部分，要查看這些工作，您需要使用 Firefox！

邏輯維度

邏輯屬性定義塊和內聯維度的開始和結束屬性。對於 height 和 width 屬性，我們改為使用block-size和inline-size 。我們還可以設置max-block-size 、 min-block-size 、 max-inline-size和min-inline-size 。如果您使用的是英語，一種從上到下的水平語言，那麼block-size是指屏幕上塊的物理height ， inline-size是項目的物理width 。如果您使用的是塊垂直運行的語言，那麼當您查看屏幕時， block-size將顯示為控制width和inline-size的高度。

您可以在下面的演示中看到這一點。我的塊的block-size為 150 像素， inline-size為 250 像素。更改writing-mode屬性以查看佈局如何調整。

請參閱 Rachel Andrew (@rachelandrew) 在 CodePen 上的 Pen Block 和 Inline Size 演示。

邏輯邊界

然後我們有屬性來控制以相同方式工作的邊框。邊界的物理屬性是：

border-top
border-top-width
border-top-style
border-top-color
border-right
border-right-width
border-right-style
border-right-color
border-bottom
border-bottom-width
border-bottom-style
border-bottom-color
border-left
border-left-width
border-left-style
border-left-color

然後它們具有邏輯映射，這些映射變得有點冗長，但它們是：

border-block-start
border-block-start-width
border-block-start-style
border-block-start-color
border-inline-start
border-inline-start-width
border-inline-start-style
border-inline-start-color
border-block-end
border-block-end-width
border-block-end-style
border-block-end-color
border-inline-end
border-inline-end-width
border-inline-end-style
border-inline-end-color

在下面的示例中，有兩個塊，第一個使用邏輯屬性將border-block-start-color設置為綠色，將border-inline-end-style設置為點線。第二個塊使用border-top-color和border-right的物理屬性。更改寫作模式以查看它們的行為方式。

請參閱 Rachel Andrew (@rachelandrew) 在 CodePen 上的 Pen Logical Borders。

邊距和填充

邊距和內邊距與我們的邊框屬性有相似的簡寫，物理屬性為：

margin-top
margin-left
margin-bottom
margin-right
padding-top
padding-right
padding-bottom
padding-left

這些具有如下邏輯屬性：

margin-block-start
margin-inline-start
margin-inline-start
margin-inline-end
padding-block-start
padding-inline-start
padding-inline-start
padding-inline-end

在下一個示例中，我在第一個塊上設置了padding-block-start ，在第二個塊上設置了padding-top ，更改寫入模式以查看切換 Block 和 Inline 軸時的差異。

請參閱 CodePen 上 Rachel Andrew (@rachelandrew) 的 Pen Logical Properties - Padding。

定位偏移

另一個使用物理屬性的地方是使用position屬性定位事物時。在設置position: absolute或除默認static之外的其他position值之後，我們可以使用偏移量來定位項目，無論是從視口還是從已創建新定位上下文的父項。

偏移物理特性為：

top
right
bottom
left

遵循我們其他邏輯屬性的模式，我們就有了：

offset-block-start
offset-inline-start
offset-block-end
offset-inline-end

在下面的示例中嘗試這些。帶邊框的框有position: relative和紫色的小方塊position: absolute 。在物理示例中，正方形位於top: 50px和right: 20px 。邏輯版本有offset-block-start: 50px和offset-inline-end: 20px 。

請參閱 Rachel Andrew (@rachelandrew) 在 CodePen 上的 Pen Logical Offsets。

邏輯值

我們習慣使用物理尺寸的另一個地方是當我們漂浮或清理物體時。對於float ， clear我們有一些left值和right值的邏輯版本。

inline-start
inline-end

請參閱 Rachel Andrew (@rachelandrew) 在 CodePen 上使用邏輯值浮動的筆。

在演示中，我將紫色塊浮動在邏輯版本inline-start中。我也在使用邏輯屬性作為邊距；這確保了邊距總是出現在塊之後，並且在圍繞它的內容之前。通過在下拉列表中選擇vertical-rl值，您可以看到在物理示例中邊距如何在塊的右側結束，而不是在-end方向上應用。

text-align也有start值和end值。無論書寫模式是水平的還是垂直的，對齊某個東西開始都會將它對齊到內聯軸的開始， end到內聯軸的結束。

今天使用邏輯屬性和值

如前所述，目前瀏覽器對邏輯屬性和值的支持很少。但是，如果您現在想開始使用它們，則可以選擇使用它們編寫 CSS，然後使用 PostCSS 插件將邏輯屬性和值轉換為物理對應物。 Jonathan Neal 的這個插件涵蓋了我在本文中描述的所有屬性和值。

您還可以通過為 Chrome 錯誤加星標並在 Edge 開發人員反饋網站上對這些屬性進行投票來幫助鼓勵瀏覽器供應商採用這些屬性。

即使您現在決定不使用這些屬性，了解它們的工作原理也是了解使用新佈局的關鍵部分。將您的 Grid 或 Flex 佈局描述為具有開始線和結束線，考慮塊和內聯尺寸，這些東西將使您更容易理解佈局的工作原理。