CSS 邏輯屬性 ( logical properties )

CSS 邏輯屬性 ( logical properties ) 提供了一種更具「語義化」和「自適應性」的方式來設定元素樣式，特別是針對不同書寫方向的語言環境（ 左到右、右到左 ）的語言環境中，可以很輕鬆的讓排版方向保持一致，大幅簡化開發流程並提高可維護性，這篇教學會介紹 CSS 的邏輯屬性。

快速導覽：

• 認識 CSS 邏輯屬性 ( logical properties )
• 邏輯寬高 block-size、inline-size
• 開始與結束 start、end
• CSS 邏輯屬性列表

認識 CSS 邏輯屬性 ( logical properties )

在進行排版時，通常會使用 CSS 的物理屬性 ( Physical Properties ) 來設定元素的寬高或位置樣式，例如 width、 height、top、left 等，這些樣式屬性是基於「頁面物理方向」，因此如果切換不同方向的語系 ( 左到右變成右到左 )，在對齊或排版上就必須重新調整，造成維護與管理上的不方便，下方列出兩種模式的差異與說明：

下方範例中第一組 div 使用物理屬性的方式設定邊框，因為指定了「left」方向的邊框，不論文字方向如何設定，都只有左邊的邊框會改變粗細，但第二組 div 使用邏輯屬性裡的「start」方向進行設定，所以變粗的邊框一定是「流向開始」的位置。

線上展示：https://codepen.io/oxxo/pen/RNbYwdb

<!-- HTML 程式碼-->
<div class="no_logical">
  <h3 class="a">水平左到右</h3>
  <h3 class="b">水平右到左</h3>
  <h3 class="c">垂直左到右</h3>
  <h3 class="d">垂直右到左</h3>
</div>
<div class="logical">
  <h3 class="a">水平左到右</h3>
  <h3 class="b">水平右到左</h3>
  <h3 class="c">垂直左到右</h3>
  <h3 class="d">垂直右到左</h3>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    float: left;
    margin: 20px;
  }
  h3 {
    width: 150px;
    height: 100px;
    border: 1px solid #000;
    margin: 10px;
    box-sizing: border-box;
  }
  .no_logical h3 {border-left-width: 10px;}      /* 左邊邊框變粗 */
  .logical h3 {border-inline-start-width: 10px;} /* 左右的開始處邊框變粗 */
  .b {direction: rtl;}
  .c {writing-mode: vertical-lr;}
  .d {writing-mode: vertical-rl;}
</style>

邏輯寬高 block-size、inline-size

通常在設定元素尺寸時，會透過寬度 width 和高度 height 來處理，但如果語言從水平流量變成垂直流向，對於文字來說，寬度就會變成高度，而高度就會變成寬度，這時就必須進行額外的判斷處理，然而透過 block-size 和 inline-size 邏輯屬性，就能在轉換方向時，一併轉換寬高的方向，下方列出這兩個樣式屬性的說明：

下方的範例中橘色的元素是設定 width 和 height 的 div，藍色的元素是設定 inline-size 和 block-size 的 div，可以看見在水平文字流向時沒有太大差異，但文字變成垂直流向時，設定 inline-size 和 block-size 的 div 就會根據文字流向自動變換方向。

線上展示：https://codepen.io/oxxo/pen/NPKLWJb

<!-- HTML 程式碼-->
<div class="a">STEAM 教育學習網讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="b">STEAM 教育學習網讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="a size">STEAM 教育學習網讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="b size">STEAM 教育學習網讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>


<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 80px;
    border: 1px solid #000;
    margin: 10px;
    background: #f90;
    float: left;
  }
  .size {
    background: #0cf;
    inline-size: 200px;   /* 邏輯寬度 */
    block-size: 80px;     /* 邏輯高度 */
  }
  .b {writing-mode: vertical-rl;}   /* 文字垂直 */
</style>

開始與結束 start、end

除了寬度和高度，元素許多樣式屬性也都有「方向性」，例如邊框 border、內邊距 padding、外邊界 margin 等，為了因應這些具有方向性的樣式屬性，CSS 提供了 *-start 和 *-end 結尾結尾的樣式屬性，分別代表指定樣式位於「文字流向的開始處或結尾處」。

CSS 邏輯屬性列表

如果將 *-start、*-end、block-size 和 inline-size 搭配組合，就成為 CSS 所提供的邏輯屬性，下方列出這些邏輯屬性：

邊框 border 邏輯屬性

下方列出 border 相關邏輯屬性，設定的屬性值與 border 完全相同，參考「邊框 border」。

下方範例會使用 border 相關邏輯屬性，展示水平與垂直轉換後「物理屬性」和「邏輯屬性」差異。

線上展示：https://codepen.io/oxxo/pen/ZYzMEPv

<!-- HTML 程式碼-->
<div class="a">oxxo</div>
<div class="b rl">oxxo</div>
<div class="c">oxxo</div>
<div class="d rl">oxxo</div>
<div class="a-size">oxxo</div>
<div class="b-size rl">oxxo</div>
<div class="c-size">oxxo</div>
<div class="d-size rl">oxxo</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    margin: 10px;
    background: #f90;
    box-sizing: border-box;
    float: left;
  }
  .rl {writing-mode: vertical-rl;}
  .a, .b {border-left: 20px solid #000;}  /* 普通物理屬性寫法 */
  .c, .d {border-top-left-radius: 50px;}  /* 普通物理屬性寫法 */
  .rl {writing-mode: vertical-rl;}        /* 有這個類型的會轉成垂直書寫 */
  .a-size, .b-size {
    background: #0cf;
    border-inline-start: 20px solid #000; /* 邏輯屬性寫法 */
  }
  .c-size, .d-size {
    background: #0cf;
    border-start-start-radius: 50px;      /* 邏輯屬性寫法 */
  }
</style>

外邊界 margin 邏輯屬性

下方列出 margin 相關邏輯屬性，設定的屬性值與 margin 完全相同，參考「外邊界 margin」。

下方範例會使用 margin 相關邏輯屬性，展示水平與垂直轉換後「物理屬性」和「邏輯屬性」差異。

線上展示：https://codepen.io/oxxo/pen/xbKaxBy

<!-- HTML 程式碼-->
<div><div class="a">oxxo</div></div>
<div><div class="b rl">oxxo</div></div>
<div><div class="a-size">oxxo</div></div>
<div><div class="b-size rl">oxxo</div></div>


<!-- CSS 程式碼 -->
<style>
  div:not([class]){
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    float: left;
    margin: 10px;
  }
  div div {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background: #f90;
    box-sizing: border-box;
  }
  .a, .b {
    margin-left: 20px;
    margin-top: 50px;
  }
  .rl {
    writing-mode: vertical-rl;  /* 有這個類型的會轉成垂直書寫 */
  }
  .a-size, .b-size {
    background: #0cf;
    margin-inline-start: 20px;  /* 邏輯屬性寫法 */
    margin-block-start: 50px;   /* 邏輯屬性寫法 */
  }
</style>

內邊距 padding 邏輯屬性

下方列出 padding 相關邏輯屬性，設定的屬性值與 padding 完全相同，參考「內邊距 padding」。

下方範例會使用 padding 相關邏輯屬性，展示水平與垂直轉換後「物理屬性」和「邏輯屬性」差異。

線上展示：https://codepen.io/oxxo/pen/VYZGwRO

<!-- HTML 程式碼-->
<div class="a"><div>oxxo</div></div>
<div class="b rl"><div>oxxo</div></div>
<div class="a-size"><div>oxxo</div></div>
<div class="b-size rl"><div>oxxo</div></div>

<!-- CSS 程式碼 -->
<style>
  div[class]{
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    float: left;
    margin: 10px;
    box-sizing: border-box;
  }
  div div {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background: #f90;
  }
  .a, .b {
    padding-left: 20px;
    padding-top: 50px;
  }
  .rl {writing-mode: vertical-lr;}
  .a-size, .b-size {
    padding-inline-start: 20px;  /* 邏輯屬性寫法 */
    padding-block-start: 50px;   /* 邏輯屬性寫法 */
  }
  .a-size div, .b-size div{background: #0cf;}
</style>

內嵌寬度 inset 邏輯屬性

下方列出 inset 相關邏輯屬性，設定的屬性值與 inset 完全相同，參考「內嵌寬度」。

下方範例會使用 inset 相關邏輯屬性，展示水平與垂直轉換後「物理屬性」和「邏輯屬性」差異。

線上展示：https://codepen.io/oxxo/pen/ByBOaEK

<!-- HTML 程式碼-->
<div><div class="a">oxxo</div></div>
<div><div class="b rl">oxxo</div></div>
<div><div class="a-size">oxxo</div></div>
<div><div class="b-size rl">oxxo</div></div>


<!-- CSS 程式碼 -->
<style>
  div:not([class]){
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    float: left;
    margin: 10px;
    box-sizing: border-box;
    position: relative;
  }
  div div {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background: #f90;
    position: absolute;
  }
  .a, .b {
    left: 20px;  /* 定位物理屬性寫法 */
    top: 80px;   /* 定位物理屬性寫法 */
  }
  .rl {writing-mode: vertical-lr;}
  .a-size, .b-size {
    background: #0cf;
    inset-inline-start: 20px;  /* 邏輯屬性寫法 */
    inset-block-start: 80px;   /* 邏輯屬性寫法 */
  }
</style>

小結

從這邊教學得範例中可以發現，透過 CSS 邏輯屬性 ( logical properties ) 可以針對文字的方向，自動改變設定的方向，雖然在大部分的情形都不會遇到 ( 網站為了瀏覽的使用者體驗，大多都是水平排版，很少直書 )，但如果真的有相關需求，透過邏輯屬性進行設定是相當方便的。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～