Rumah >hujung hadapan web >tutorial css >CSS 'Hiasan'
Artikel ini membincangkan "penghias CSS Hiasan" -CSS Hiasan yang mengandungi arahan pemproses-dan penggunaannya dalam mengendalikan bahasa dan pemformatan kod kanan-ke-kiri (RTL). Mari kita tegangkannya untuk kejelasan dan aliran yang lebih baik.
Artikel ini bermula dengan memeriksa coretan CSS Hiasan dari Wikipedia's Common.css:
.mw-clollapsible-leftside-toggle .mw-collapsible-toggle { / * @noflip */ Terapung: Kiri; / * @noflip */ Teks-Align: Kiri; }
The author questions the purpose of /* @noflip */
, identifying it as a CSS Hiasan decorator, essentially a comment with programmatic functionality. Fungsi ini hanya ditunjukkan apabila diproses oleh alat seperti cssjanus (digunakan oleh wikimedia), yang menghasilkan stylesheets RTL. Dalam kes ini, float: left
Menjadi float: right
, dan text-align: left
Menjadi text-align: right
.
Penulis mencadangkan bahawa menggunakan text-align: start
adalah pendekatan yang lebih moden dan mantap untuk mengendalikan penjajaran teks dalam konteks RTL, menghapuskan keperluan pemprosesan CSS Hiasan. Walaupun tidak ada setara langsung untuk float
, refactoring susun atur (berpotensi menggunakan grid CSS Hiasan) mungkin menawarkan penyelesaian.
Artikel itu kemudian meneroka sejarah pemproses CSS Hiasan untuk penukaran RTL, menyebut CSS HiasanJANUS, css-flip
yang kini diadakan, dan postcss-rtl
yang telah ditetapkan. Alat ini menyerlahkan senarai luas sifat CSS Hiasan yang memerlukan pelarasan untuk sokongan RTL (termasuk float
, text-align
, margin
, padding
, dan banyak lagi).
Penulis menyimpulkan dengan memperkenalkan penghias CSS Hiasan yang lain: /* prettier-ignore */
. Arahan ini menghalang pemformat kod yang lebih cantik daripada mengubah CSS Hiasan yang diformat secara manual, mengekalkan gaya pilihan penulis. Artikel ini berakhir dengan meminta pembaca mengenai penggunaan penghias CSS Hiasan dalam projek mereka.
Atas ialah kandungan terperinci CSS 'Hiasan'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!