在
網(wǎng)站建設(shè)過程中我們已經(jīng)知道CSS邏輯屬性或URL改編,但是我們?nèi)杂泻芏嗟胤叫枰煜げV泛部署它們。為了幫助大家提高對其可能性的認識,今天深圳尼高小編就和大家分享下相關(guān)的經(jīng)驗。
就用戶界面而言,本地化是最有趣的領(lǐng)域之一:文本長度可能因語言而異,文本的默認對齊方式可能不同,閱讀方向可以是鏡像的或垂直的,以及許多其他不同的情況。簡而言之,這是一個令人難以置信的多樣性來源,這使得我們的界面和前端工作方式更強大、更可靠、更具挑戰(zhàn)性。大多數(shù)語言,如法語或英語,都是從左向右閱讀的(LTR)。但是,在這些情況下,有些語言(如波斯語、阿拉伯語和希伯來語)具有不同的閱讀方向—從右向左(RTL)。
在CSS邏輯屬性之前,我們可以用不同的方法進行RTL改編:只為RTL附加費/布局添加專用CSS文件;僅追加同一CSS中需要修改的部分,例如[dir="rtl"] .float-left { float: right; }.即使這些方法在起作用——我使用了第二種方法來創(chuàng)建支持人權(quán)網(wǎng)站的阿拉伯文版幾年前——兩者都相當(dāng)次優(yōu):您需要為第一個文件維護另一個文件;第二個文件的CSS文件有點重,可能需要處理一些問題(特殊性、添加更更多屬性等等)。
即使是最好的CSS模塊,任何已經(jīng)改編過RTL的人都會說,混合RTL和LTR內(nèi)容有時(經(jīng)常)會給出瘋狂的東西。讓我們以質(zhì)子驅(qū)動為例,它有一個組件叫做MiddleEllipsis。該組件的目標(biāo)是在文件擴展名之前應(yīng)用省略號,以獲得類似my-filename-blahblahblah…blah.jpg.沒什么瘋狂的:我們將內(nèi)容分成兩部分并應(yīng)用text-overflow: ellipsis第一次。你可以查一下這個的來源MiddleEllipsis成分。瀏覽器做到最好,顯示出來的東西從它的角度來看沒有錯,但這對于一個人來說毫無意義。在這種情況下,我們選擇保留LTR顯示以保持文件名的用途,但將其向右對齊。
即使絕對的完美是不存在的,轉(zhuǎn)向CSS邏輯屬性也是這是一個非常有趣的舉動,也是對未來的一個好賭注:我們使用這些CSS邏輯道具編寫了更少的代碼,并且通過使用它們減少了未來的工作量,因此它確實朝著一個令人興奮的方向發(fā)展。