CSS中有一些新功能可以幫助我們輕松構(gòu)建不同方向和語言的布局。本文涉及CSS邏輯屬性和值（例如Margin-Inline-Start）。這些是W3C的工作草案，仍在大量編輯中，但已在許多瀏覽器中發(fā)貨。我想談?wù)撨@個問題，因為我已經(jīng)使用了這些屬性一段時間了，并且在切換到它們后看到了我的工作流程的顯著提升。

我將討論規(guī)格以及您今天如何在工作中使用它。我住在埃及，我們使用阿拉伯語作為主要語言。阿拉伯語是從右到左寫的，這意味著阿拉伯網(wǎng)站看起來像英文版本的鏡像。我們創(chuàng)建的大多數(shù)網(wǎng)站都是雙語的，這意味著我們?yōu)槊總€方向提供特定于樣式表。我們通過翻轉(zhuǎn)幾乎所有內(nèi)容的價值和屬性來做到這一點！我不會詳細(xì)介紹這部分，但是您可以快速談?wù)撐覍懙挠嘘P(guān)該主題的過去文章。

首先，在HTML標(biāo)簽上聲明DIR屬性。

此屬性接受兩個值之一：LTR（如果指定未指定，則是默認(rèn)值）和RTL。根據(jù)其價值，瀏覽器開始在特定算法之后繪制元素。文本將在方向上編寫，標(biāo)點符號將放置在其正確的位置。某些元素（例如表）將其方向切換（例如，從RTL中的右側(cè)開始）。值得慶幸的是，一些新的規(guī)格，例如CSS網(wǎng)格和Flexbox遵循與桌子的類似方法。這意味著我們不必更改任何內(nèi)容的順序，因為瀏覽器會照顧好它！

HTML5引入了DIR屬性的新自動值。它將檢查元素中的第一個字符，如果它屬于從左到右（如拉丁字符）編寫的語言，則該元素將具有LTR方向，反之亦然。 W3C敦促作者避免依靠此值來確定文本方向并使用服務(wù)器端解決方案。

自動值的一個有趣的用例是，當(dāng)您不確定內(nèi)容的方向，例如注釋線程，例如用戶生成的內(nèi)容。我看到很多人在阿拉伯網(wǎng)站上用英語進(jìn)行討論。除了Internet Explorer和Edge，對汽車的支持非常好。

介紹：dir（）偽級

：dir（）偽級是一種新的選擇器修飾符，它根據(jù)其方向值選擇一個元素。它是這樣的工作：

 / *選擇將其方向值設(shè)置為RTL */的所有段落 */
P：dir（rtl）{
 字體大?。?6px; /*有時阿拉伯字形需要提高尺寸才能感覺正確。 */
}
?
/ *選擇將其方向值設(shè)置為ltr */的所有段落 */
P：dir（ltr）{
 字體大?。?4px;
}

如果元素直接設(shè)置了方向，則將選擇該元素，或使用自動元素評估自動設(shè)置值，它仍將根據(jù)其內(nèi)容正確正確地元素！

 
 P：dir（ltr）{
  背景：綠色；
 }
 P：dir（rtl）{
  背景：紅色；
 }

?

<p dir="“" auto>這是一個以拉丁字符開始的段落</p>

<p dir="“" auto>。</p>

可悲的是，對：dir（）的支持不大，只限于Firefox。

此瀏覽器支持?jǐn)?shù)據(jù)來自Caniuse，其中有更多詳細(xì)信息。一個數(shù)字表明瀏覽器在該版本及以上支持該功能。

桌面

移動 /平板電腦

即使瀏覽器支持很棒，選擇器也只允許您定位元素并手動將某些樣式應(yīng)用于它們。這意味著我們?nèi)匀粦?yīng)該將所有內(nèi)容的值（例如邊緣，槳，浮子，位置等）翻轉(zhuǎn)，這并不能真正增強(qiáng)我們的工作流程或減少產(chǎn)生多向布局的努力。

引入CSS邏輯屬性和值

如W3C所定義的那樣，邏輯屬性和值使我們能夠通過邏輯，方向和維度映射來控制布局。讓我們跳過技術(shù)術(shù)語，直接跳入細(xì)節(jié)。這些為我們提供了新的屬性和值，這些屬性和值將根據(jù)某些條件進(jìn)行不同的評估。

邏輯值

假設(shè)我們有一個段落，我們想朝著與語言自然方向相反的方向保持一致。假設(shè)這是遵循LTR方向的英語。我們會做這樣的事情：

 <article>
 <p>
  lorem ipsum dolor sit amis ..
 </p>
</article>

CSS文件就是這樣：

 。對面的 {
 文本合格：對；
}

為了為RTL版本提供相反的內(nèi)容，我們將通過用DIR屬性定位標(biāo)簽來覆蓋選擇器，或者簡單地為RTL版本提供不同的文件，例如：

 html [dir =“ rtl”] .opposite {
 文本平衡：左；
}

創(chuàng)建了邏輯屬性和值以解決此問題。為什么我們不使用評估正確上下文的值而不是使用左右的值？在LTR元素中，值左表示元素的開始或開始時，在RTL元素上，值正確表示啟動！很簡單，對嗎？

因此，我們可以使用以前寫的，而是可以使用：

 。對面的 {
 文字合格：結(jié)束；
}

就是這樣！如果元素的計算方向是LTR，則文本將正確對齊；并且計算的方向與RTL元素相反。因此，我們可以簡單地將其替換為啟動和結(jié)束，而不是將其左右值用于文本相關(guān)。這比我們以前的選項容易得多，更方便。

邏輯屬性

我們剛剛看過的是邏輯值，所以讓我們現(xiàn)在轉(zhuǎn)到邏輯屬性。邏輯屬性是具有相同想法的新屬性。他們根據(jù)元素的方向進(jìn)行不同的評估。以示例為例。以前，我們想在段落開始時增加一些空間。我們可以在LTR文檔中使用：

文章img {
 左翼：15px;
}

現(xiàn)在，對于RTL版本，除重置左值外，我們還需要將保證金添加到相反的方向：

 html [dir =“ rtl”]文章img {
 左鍵：0;
 邊緣右：15px;
}

我們可以在邏輯屬性方面做得更好?？紤]以下內(nèi)容：

文章img {
 利潤 - 內(nèi)線啟動：15px;
}

- 內(nèi)線啟動部分評估圖像的水平軸的開頭。在LTR的情況下，這意味著左而在RTL的情況下，這意味著正確。

開始和結(jié)束現(xiàn)在可能很明顯，但是intilly一詞是什么，為什么我們需要它呢？要理解它，我們需要談?wù)撘环N稱為CSS寫作模式的內(nèi)容。詹·西蒙斯（Jen Simmons）寫了一篇關(guān)于該主題的出色文章。我不會在那里解釋所有內(nèi)容，但最重要的是，我們可以使用寫作模式來定義寫作方向。有些語言，例如中文，韓語和日語，可以從上到下垂直編寫。 CSS寫作模式使我們能夠控制該流程?？纯匆韵露温洌?/p>

您可以清楚地識別塊的頂部，底部，左右邊緣。如果我們使用CSS寫作模式更改段落的方向會發(fā)生什么？

當(dāng)我們談?wù)摯诵D(zhuǎn)段落的“頂部”時，我們是指內(nèi)容開始的位置還是不旋轉(zhuǎn)時正確的邊緣？識別這四個方向變得令人困惑。讓我們從不同的角度看它們。在“正?！钡膶懽鳁l件下，垂直軸將具有后綴塊，水平軸將具有后綴 - inline，均為開始或結(jié)束：

如果我們旋轉(zhuǎn)它，應(yīng)該這樣：

由于我們談?wù)摰氖钦５乃讲季?，因此我們將使?inline start and -inline -end，但也很高興了解其他屬性。我們還可以使用邏輯關(guān)鍵字來編寫邏輯速記值?？紤]以下內(nèi)容：

文章img {
 保證金：邏輯10PX 20PX 30PX 40PX;
}

圖像邊距的計算值將如下：

文章img {
 邊緣塊啟動：10px;
 利潤 - 內(nèi)線啟動：20px;
 邊緣塊 - 末端：30px;
 保證金 - 內(nèi)線末端：40px;
}

邏輯關(guān)鍵字是在此時間點的實驗功能，這意味著它可能會更改，或者可能被規(guī)格官方的時間所取代。在此期間，您可以遵循該主題的公開討論。

邏輯屬性還允許我們將值應(yīng)用于特定軸，這意味著我們分別具有水平和垂直軸的邊緣內(nèi)線和邊緣塊。

就像與邏輯邊距屬性一樣，我們還具有遵循與邊距相同規(guī)則的邏輯填充屬性。

邏輯定位屬性

在前面的示例中，我們能夠通過附加后綴修改屬性的含義，但是位置呢？屬性名稱完全從我們所知道的是頂部，右，底部和左側(cè)變化。

 。元素 {
 位置：絕對；
 插圖 - 啟動：0;  / *評估頂部 */
 插入式末端：0;   / *評估底部 */
 插圖啟動：0; / *評估在LTR中左，在RTL中右
 插圖內(nèi)線：0;  / *在LTR中評估到右，然后在RTL中左右 */
}

學(xué)習(xí)新的屬性和價值可能很困難，但是，嘿，我們得到了一個名為Intet的速記屬性，以使其更容易：

 /*速記ftw！ */
。元素 {
 位置：絕對；
 插圖：邏輯10px 20px 30px 40px;
}
?
/ *它評估此 */
。元素 {
 位置：絕對；
 插圖 - 啟動：10px;
 插圖啟動：20px;
 插圖末端：30px;
 插圖 - 末端：40px;
}

插圖像邊距和填充一樣支持插圖塊和插圖。

邏輯邊界屬性

邊界屬性也可以通過附加-Inline start和-block start成為邏輯。

雷切爾·安德魯（Rachel Andrew）深入研究了邏輯屬性和價值觀，其中包括一個出色的演示，展示了邏輯邊界屬性及其對不同寫作模式的反應(yīng)。

我們今天如何開始使用所有這些？

由于PostCSS的力量，我們可以立即開始使用邏輯屬性和價值的所有魔力！喬納森·尼爾（Jonathan Neal）編寫了這個可愛的PostCSS插件，使我們能夠以邏輯編寫并將代碼編譯為當(dāng)今瀏覽器所理解的內(nèi)容。該插件分為三個階段：

• 它將新的語法轉(zhuǎn)換為現(xiàn)有標(biāo)準(zhǔn)，不支持瀏覽器將識別：DIR pseudo-class將輸出創(chuàng)建到LTR和RTL。
• 它使用尼爾的另一個插件來翻譯：dir到屬性選擇器，這樣：

 .Element：dir（ltr）{
  ...
 }
 [dir =“ ltr”]。元素{
  ...
 }

• 它使用Postcs-nest-nest插件將嵌套的選擇器轉(zhuǎn)換為單行選擇器，就像其他CSS預(yù)處理程序相同的方式。

PostCSS與任何工作流程一起使用。您可以使用Grunt，Gulp和Webpack嘗試一下。

我將結(jié)束時說，自從轉(zhuǎn)移到邏輯屬性和價值觀以來，我已經(jīng)看到了很多好處。當(dāng)然，構(gòu)建多向布局需要時間。有學(xué)習(xí)曲線，增加更多屬性要寫，當(dāng)然還有測試。我們以前創(chuàng)建多個方向布局的方法要么一次照顧開發(fā)方向，要么一次朝著一個方向上工作，這兩個方向都不適合大型項目。借助邏輯屬性和值，您一次編寫代碼，并且在兩個方向上都可以無需考慮。

參考

• 詹·西蒙斯（Jen Simmons）的CSS寫作模式
• 了解雷切爾·安德魯（Rachel Andrew）的邏輯屬性和價值觀
• Postcss邏輯屬性和值Jonathan Neal
• 2017年在阿拉伯語中的多語言布局（幻燈片）

以上是構(gòu)建多向布局的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！