您可能已經(jīng)聽(tīng)說(shuō)過(guò)CSS邏輯屬性或RTL改編，但仍在決定是否廣泛部署它們。為了幫助您提高對(duì)其可能性的認(rèn)識(shí)，Nicolas Hoffmann分享了他和他的團(tuán)隊(duì)在Proton如何從CSS邏輯道具到制作進(jìn)行大規(guī)模轉(zhuǎn)移的經(jīng)驗(yàn)，以及您如何在自己的項(xiàng)目中從不同的角度考慮它們。
就用戶(hù)界面而言，本地化是最有趣的領(lǐng)域之一:文本長(zhǎng)度可能因語(yǔ)言而異，文本的默認(rèn)對(duì)齊方式可能不同，閱讀方向可以是鏡像的或垂直的，以及許多其他不同的情況。簡(jiǎn)而言之，這是一個(gè)令人難以置信的多樣性來(lái)源，這使得我們的界面和前端工作方式更強(qiáng)大、更可靠、更具挑戰(zhàn)性。
對(duì)從右到左界面的需求
大多數(shù)語(yǔ)言，如法語(yǔ)或英語(yǔ)，都是從左向右閱讀的(LTR)。但是，在這些情況下，有些語(yǔ)言(如波斯語(yǔ)、阿拉伯語(yǔ)和希伯來(lái)語(yǔ))具有不同的閱讀方向—從右向左(RTL)。
問(wèn)題是怎么我們能讓我們的界面適應(yīng)這種巨大的變化嗎？
CSS邏輯屬性之前
在CSS邏輯屬性之前，我們可以用不同的方法進(jìn)行RTL改編:
- 只為RTL附加費(fèi)/布局添加專(zhuān)用CSS文件；
- 僅追加同一CSS中需要修改的部分，例如[dir="rtl"]。浮動(dòng)-左{浮動(dòng):右；}。
即使這些方法在起作用——我使用了第二種方法來(lái)創(chuàng)建支持人權(quán)網(wǎng)站的阿拉伯文版幾年前——兩者都相當(dāng)次優(yōu):
- 您需要為第一個(gè)文件維護(hù)另一個(gè)文件；
- 第二個(gè)文件的CSS文件有點(diǎn)重，可能需要處理一些問(wèn)題(特殊性、添加更多屬性等等)。
當(dāng)然，我們可以用Sass創(chuàng)建巨大的機(jī)器來(lái)生成幾個(gè)構(gòu)建，并使用UnCSS之類(lèi)的工具來(lái)刪除不需要的內(nèi)容，但是說(shuō)實(shí)話(huà):這很無(wú)聊，而且會(huì)導(dǎo)致“不自然”的代碼片段，就像前面的例子一樣。
為什么CSS邏輯屬性非常適合/有前途
這就是CSS邏輯屬性模塊進(jìn)入游戲。這個(gè)CSS模塊的主要思想是擁有一個(gè)邏輯抽象這使我們能夠根據(jù)文本方向和書(shū)寫(xiě)模式(如書(shū)寫(xiě)模式,方向，以及文本方向，或者目錄HTML中的屬性)。這給了我們像水平從右到左或從左到右，垂直RTL，等等的可能性。
實(shí)踐中的實(shí)施
它是如何工作的
有幾個(gè)概念需要理解，雷切爾·安德魯斯已經(jīng)解釋過(guò)了理解邏輯屬性和值":
- 我們不再考慮左邊的/正確但是開(kāi)始/結(jié)束(同樣的道理也適用于頂端/底部):
- 我們不再說(shuō)寬度或者高度但是相反在一條直線(xiàn)上的和街區(qū)—相當(dāng)經(jīng)典。(你可能聽(tīng)說(shuō)過(guò)違約在一條直線(xiàn)上的或者街區(qū)元素。
