使用流程相對簡寫的邏輯版面配置強化功能

新增 Chromium 的邏輯屬性簡寫和新的插邊屬性。

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

自 Chromium 69 (2018 年 9 月 3 日) 起， 邏輯屬性和值 開發人員可透過邏輯而非 而不是實際、方向和尺寸樣式在 Chromium 87 中， 偏移值已共用，讓這些邏輯屬性和值更容易寫入。 這會讓 Chromium 更新至支援簡寫功能 Firefox 的 Firefox 自 66 號以來。 Safari 已經讓他們準備好預覽技術。

在裝置邊框內顯示拉丁文、希伯來文和日文的預留位置文字。箭頭和顏色會跟著文字後面加上區塊和內嵌的 2 向方向關聯。

文件流程

如果您已經熟悉邏輯屬性、內嵌及封鎖軸， 如果需要複習，你可以直接略過。否則，以下提供簡短的複習。

在英文中，字母和字詞由左至右依序排列，段落則從上往下堆疊。 在傳統中文中，字母和字詞由上至下，段落堆疊 由右至左。這 2 個情況來，如果我們編寫 CSS，將「頂端」特定內容 我們只適合使用 1 種語言樣式。如果網頁翻譯成傳統語言 如果選擇英文，新的垂直書寫模式可能就不適合設定邊界。

因此，外盒的物理面不適用於國際情況。因此 支援多種語言瞭解 Box 模型的實體面與邏輯面

您是否曾檢查 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！這些邏輯屬性類似於英文讀者 就像左右日文閱讀器一樣。只要編寫一次，隨時隨地都能輕鬆使用。

正常流程是指網頁是多方向的一部分。 如果網頁內容根據文件方向變更，版面配置和 都會視為流程中。進一步瞭解「在」和「out」流量 在 MDN 或 CSS 顯示模組規格。邏輯屬性 不必進步程，當方向性改變時，這類繁重工作將為您處理大部分繁瑣作業。 流程代表方向，也就是需要隨著哪些字母、字詞和內容移動。 這會使我們封鎖並內嵌邏輯路線。

封鎖方向是指新內容封鎖的方向，例如思考 「要放入下一段內容在哪裡？」您可以將這類註解視為「內容區塊」或「文字區塊」。 每種語言都會排列區塊並排列順序 各自的 block-axis。block-start 是段落第一個位置的側邊。 而 block-end 則是新段落向外側流。

舉例來說，在傳統日文手寫方式中，方塊的方向會由右至左：

內嵌方向是指字母和字詞的行進方向。考量方向 書寫時請手臂和手移動即可騎乘單車與inline-axis。 開始撰寫的那一端是 inline-start，而 inline-end 為一側 以及寫入的結尾或換行在上方的影片裡，「inline-axis」是從上到下 但在下一部影片中，inline-axis 是從右到左。

處於flow-relative 意即為一種語言撰寫的樣式將與情境相關 。所宣傳內容會隨放送目標語言而顯示。

全新簡寫

下列簡述一些不是瀏覽器的新功能，比較簡單 善加利用能夠設定兩個區塊的值，以不同方式寫出樣式 或內嵌邊緣inset-* 邏輯屬性「會」帶來新功能， 因為目前沒有使用邏輯屬性指定絕對位置的方法 。不過，插邊和簡寫都很流暢 會在 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 或建構工具是新舊瀏覽器的可行選項 更新邏輯屬性，使其適當間隔。如果是串聯廣告，請使用實體資源 邏輯參數的值，瀏覽器會使用「最後一個」在風格期間找到的房源 解析度。

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 情緒與/或情緒自動組合及/或建構 提供多樣化替代方法或解決方案的時間性服務逐一介紹 ，找出與您的工具鍊和整體網站策略相符的選項。

後續步驟

更多 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 為取得邏輯對等項目，模型沒有聲音 對某些人而言非常難。

還有其他提案可以在封鎖或網頁層級調整 但會將邏輯用途洩漏到樣式中，但仍假設實體的面。

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 🤓?

意見回饋

  • 如要提議變更流量相關簡寫的 CSS 語法， 請先在 csswg-drafts 存放區中查看現有問題。 如果現有問題與提案不符，請建立新問題。
  • 如要回報 Chromium 的流程相關簡寫實作錯誤， 請先在 Chromium 錯誤追蹤工具上查看現有問題。 如果現有問題不符合您的錯誤，請建立新問題。