Adakah CSS Anda Logik?

Lihat coretan CSS ini. Apa salahnya?

p {
    border-top: 2px solid red;
    margin-left: 2rem;
    width: 80ch;
}

Bergantung pada khalayak tapak web anda, terdapat sama ada sifar atau tiga ralat. Sebelum menerangkan ralat yang mana, mari kita tetapkan beberapa konteks.

Soal Perspektif

Apabila anda melangkah ke bot, anda tidak akan mendengar istilah seperti "kiri" atau "kanan". Itu kerana bahagian kiri/kanan bot bergantung pada perspektif pemerhati. Sebaliknya, mereka menggunakan "port" dan "starboard", istilah jelas yang sentiasa merujuk kepada sisi bot yang sama, tanpa mengira kedudukan anda atau pembesar suara:

Imej yang dicipta oleh Pearson Scott Foresman dan dikeluarkan ke domain awam. Sumber

Prinsip yang sama terpakai pada istilah lokasi anatomi, yang membolehkan doktor dan doktor haiwan menerangkan lokasi bahagian badan dengan jelas, tanpa mengira kedudukan relatif pesakit atau doktor.

Pengantarabangsaan CSS

Jika aplikasi web anda digunakan secara global, anda mesti mereka bentuknya untuk menyesuaikan diri dengan pelbagai keperluan linguistik. Contohnya, bahasa seperti Inggeris dan Sepanyol ditulis dari kiri ke kanan (LTR); Bahasa Arab dan Ibrani ditulis dari kanan ke kiri (RTL); Mongolia dan Jepun tradisional ditulis dari atas ke bawah.

Jadi, apabila anda menggunakan pengisytiharan CSS seperti ini:

p {
    margin-left: 2rem;
}

Adakah anda maksudkan (1) anda mahu menambah ruang pada bahagian kiri fizikal perenggan, atau (2) anda mahu menambah sedikit ruang sebelum kandungan bermula? Untuk UI antarabangsa sepenuhnya, jawapan yang betul sentiasa (2).

Penyelesaian Logik

Anda boleh membuat helaian gaya berasingan untuk bahasa LTR dan RTL dan memuatkannya secara bersyarat. Malah terdapat alatan seperti pemalam webpack-rtl yang boleh menjana lembaran gaya RTL secara automatik berdasarkan lembaran gaya LTR asal.

Walau bagaimanapun, penyelesaian terbaik adalah menggunakan gaya CSS secara bersyarat seperti ini:

p {
    if writing is left-to-right:
        margin-left: 2rem;
    elseif writing is right-to-left:
        margin-right: 2rem;
    elseif writing is top-to-bottom:
        margin-top: 2rem;
    endif
}

Anda boleh melakukan ini dalam CSS tetapi dengan sintaks yang lebih mudah:

p {
    margin-inline-start: 2rem;
}

Harta margin-inline-start ini ialah harta CSS logik yang melaraskan secara dinamik berdasarkan arah penulisan pengguna. Sifat logik berfungsi sama dengan analogi port/starboard; mereka menerangkan reka letak dalam cara yang jelas merentas sistem penulisan yang berbeza.

Sifat logik mentakrifkan arah susun atur menggunakan dua istilah ini:

• sebaris: selari dengan aliran teks dalam satu baris.
• blok: berserenjang dengan aliran teks dalam satu baris.

Ilustrasi ini menunjukkan kedudukan logik berbanding dengan lokasi fizikal untuk semua mod penulisan yang disokong oleh CSS:

Menggunakan sifat logik, contoh awal yang ditunjukkan pada permulaan aticle ini boleh ditulis semula seperti ini:

p {
    border-top: 2px solid red;
    margin-left: 2rem;
    width: 80ch;
}

Mengemas kini helaian gaya CSS sedia ada untuk menggunakan sifat logik mungkin kelihatan menakutkan pada mulanya. Walau bagaimanapun, kebanyakan kerja melibatkan hanya menggantikan kiri dengan inline-start, kanan dengan inline-end, atas dengan block-start dan bawah dengan block-end. Sesetengah hartanah memerlukan penamaan semula yang berbeza; contohnya, jejari-jejari-kiri-bawah-bawah-bawah menjadi-jejari-permulaan-hujung-sempadan, tinggi menjadi-saiz-blok, dsb.

Usaha ini amat berbaloi, kerana ini adalah penyelesaian kalis masa hadapan yang memastikan tapak web anda boleh diakses oleh semua orang. Sebagai contoh, projek EasyAdmin, yang saya terlibat, telah mengemas kini lembaran gayanya untuk menggunakan sifat logik.

Rujukan Sifat Logik

Berikut ialah jadual rujukan semua sifat logik untuk membantu anda mengemas kini projek anda sendiri:

Physical Property	Logical Property
border-bottom	border-block-end
border-bottom-color	border-block-end-color
border-bottom-left-radius	border-end-start-radius
border-bottom-right-radius	border-end-end-radius
border-bottom-style	border-block-end-style
border-bottom-width	border-block-end-width
border-left	border-inline-start
border-left-color	border-inline-start-color
border-left-style	border-inline-start-style
border-left-width	border-inline-start-width
border-right	border-inline-end
border-right-color	border-inline-end-color
border-right-style	border-inline-end-style
border-right-width	border-inline-end-width
border-top	border-block-start
border-top-color	border-block-start-color
border-top-left-radius	border-start-start-radius
border-top-right-radius	border-start-end-radius
border-top-style	border-block-start-style
border-top-width	border-block-start-width
bottom	inset-block-end
container-intrinsic-height	contain-intrinsic-block-size
container-intrinsic-width	contain-intrinsic-inline-size
height	block-size
left	inset-inline-start
margin-bottom	margin-block-end
margin-left	margin-inline-start
margin-right	margin-inline-end
margin-top	margin-block-start
max-height	max-block-size
max-width	max-inline-size
min-height	min-block-size
min-width	min-inline-size
overscroll-behavior-x	overscroll-behavior-inline
overscroll-behavior-y	overscroll-behavior-block
overflow-x	overflow-inline
overflow-y	overflow-block
padding-bottom	padding-block-end
padding-left	padding-inline-start
padding-right	padding-inline-end
padding-top	padding-block-start
right	inset-inline-end
top	inset-block-start
width	inline-size

Ketahui Lebih Lanjut

• MDN: sifat dan nilai logik CSS

---

✨ Jika anda menyukai artikel ini atau artikel saya yang lain dan ingin menyokong kerja saya, pertimbangkan untuk menaja saya di GitHub ?

---

Atas ialah kandungan terperinci Adakah CSS Anda Logik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!