新增 Chromium 的邏輯屬性簡寫和新的插邊屬性。
自 Chromium 69 (2018 年 9 月 3 日) 起, 邏輯屬性和值 開發人員可透過邏輯而非 而不是實際、方向和尺寸樣式在 Chromium 87 中, 偏移值已共用,讓這些邏輯屬性和值更容易寫入。 這會讓 Chromium 更新至支援簡寫功能 Firefox 的 Firefox 自 66 號以來。 Safari 已經讓他們準備好預覽技術。
文件流程
如果您已經熟悉邏輯屬性、內嵌及封鎖軸, 如果需要複習,你可以直接略過。否則,以下提供簡短的複習。
在英文中,字母和字詞由左至右依序排列,段落則從上往下堆疊。 在傳統中文中,字母和字詞由上至下,段落堆疊 由右至左。這 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 🤓?