Sifat dan nilai logik CSS

Properties CSS Logik: Panduan Komprehensif

Dengan sokongan silang penyemak imbas untuk sifat-sifat logik yang mencapai jisim kritikal, sekarang adalah masa yang ideal untuk meneroka kelebihan mereka. Ciri -ciri ini tidak ternilai untuk laman web berbilang bahasa, yang menawarkan peningkatan yang signifikan dalam kecekapan kod dan penyelenggaraan. Malah untuk laman web tunggal, sintaks yang diperkemas memberikan manfaat yang berbaloi.

Sebagai contoh, memusatkan elemen sering melibatkan kod yang rumit ini:

 <code>.thing { margin-left: auto; margin-right: auto; }</code>

Semasa margin: 0 auto; Menawarkan alternatif yang lebih pendek, ia memberi kesan kepada semua margin. Hartanah logik margin-inline menyediakan penyelesaian yang lebih tepat, mensasarkan hanya margin kiri dan kanan.

Memahami arahan "sebaris" dan "blok"

Properti margin-inline dengan elegan menetapkan kedua-dua margin-left dan margin-right . Begitu juga, margin-block menguruskan margin-top dan margin-bottom . Penyederhanaan ini meluas ke border dan sifat padding . Sebagai contoh, border-inline menggunakan sempadan hanya ke sisi, mengelakkan spesifikasi arah individu.

Pendekatan ini mengalihkan tumpuan dari arah fizikal (kiri, kanan, atas, bawah) ke arah logik (sebaris, blok). Inline mengendalikan kedudukan mendatar, manakala blok mengendalikan kedudukan menegak.

Walau bagaimanapun, hubungan ini berubah dengan variasi dalam arah penulisan.

Mod penulisan dan arah

Contoh -contoh di atas menggambarkan sifat logik CSS -alternatif kepada sifat -sifat tradisional yang abstrak dari arah fizikal.

CSS, yang pada mulanya direka untuk bahasa kiri-ke-kanan (LTR) seperti bahasa Inggeris, tidak semestinya menyokong bahasa kanan-ke-kiri (RTL) seperti bahasa Arab. Atribut dir HTML menangani ini:

<div dir="rtl"> …</div>

CSS menawarkan setara ( direction: rtl; ), walaupun atribut HTML lebih disukai untuk keteguhan.

Bahasa seperti Cina, Jepun, Korea, dan Mongolia boleh ditulis secara mendatar (LTR atau RTL) atau secara menegak. Walaupun penulisan mendatar lazim, penulisan menegak lebih biasa di laman web Jepun, kadang -kadang dicampur dengan teks mendatar. Orientasi penulisan menegak berbeza-beza: Cina, Jepun, dan Korea biasanya memulakan kanan atas, manakala Mongolia bermula dengan kiri atas. Harta writing-mode CSS mengendalikan ini:

• horizontal-tb : lalai LTR/RTL, atas ke bawah.
• vertical-rl : RTL, Top-to-Bottom (Cina, Jepun, Korea).
• vertical-lr : LTR, Top-to-Bottom (Mongolian).

Ciri-ciri logik menyediakan CSS yang menyedari konteks. Jarak dan susun atur menyesuaikan diri dengan kedua-dua writing-mode dan direction penulisan, membolehkan penggunaan semula CSS silang bahasa. Ini berbeza dengan bergantung kepada terjemahan automatik, menawarkan pengalaman pengguna yang unggul dan membolehkan penyesuaian kandungan khusus rantau sambil mengekalkan gaya visual yang konsisten.

Imej di bawah menggambarkan batasan sifat fizikal. Menggunakan margin-left (merah), jarak LTR adalah betul, tetapi jarak RTL cacat. Ciri -ciri logik menyelesaikannya.

Sifat logik secara automatik menyesuaikan diri dengan konteks bahasa. Dalam bahasa LTR, margin-inline-start menetapkan margin kiri; Dalam bahasa RTL, ia menetapkan margin yang betul. Untuk teks menegak, ia menyesuaikan dengan sewajarnya, meletakkan margin pada titik permulaan bacaan. Arah inline menyesuaikan diri dengan writing-mode elemen.

Senarai lengkap sifat dan nilai logik

Banyak sifat CSS mempunyai setara logik. Alat visualisasi Adrian Roselli membantu membandingkan sifat fizikal dan logik di bawah tetapan mendatar LTR lalai.

Jadual berikut memetakan sifat fizikal dan logik (menggunakan pemetaan mendatar LTR sebagai rujukan). Ingat, sifat sensitif konteks sifat logik adalah kunci.

Saiz

Dalam mod mendatar, set lebar set inline-size , ketinggian set block-size ; Dalam mod menegak, ini membalikkan. Sokongan silang penyemak imbas sangat baik.

Sempadan

Sokongan penyemak imbas yang sangat baik wujud untuk sifat sempadan logik. Contoh-contoh menunjukkan border-inline-start , border-block-start , dan border-block-end . Warna sempadan individu, lebar, dan gaya gaya juga mempunyai rakan logik, bersama dengan sifat -sifat shorthand.

Margin dan padding

Margin logik dan sifat padding mencerminkan satu sama lain, menawarkan sokongan penyemak imbas yang komprehensif dan shorthands.

Kedudukan

Offset kedudukan logik disediakan. peta inset-block-start ke top (mendatar), peta inset-inline-start ke left (LTR mendatar), dan tingkah laku mereka menyesuaikan diri dengan mod penulisan yang berbeza. Pelayar moden menyokong ini, dengan kemasukan safari baru -baru ini. inset menyediakan singkatan untuk semua empat offset. Perhatikan bahawa inset adalah singkat untuk nilai fizikal, bukan sifat logik.

Penjajaran teks

Penjajaran teks logik ( text-align: start , text-align: end ) mempunyai sokongan penyemak imbas yang kuat, menyesuaikan diri dengan konteks LTR/RTL.

Jejari sempadan, terapung, dan sifat lain

Ciri-ciri border-radius logik telah membangunkan sokongan penyemak imbas. Nilai terapung logik mempunyai sokongan terhad. Cadangan sifat logik untuk overflow dan resize mempunyai sokongan yang lemah.

Penerokaan lanjut

Untuk menyelam yang lebih mendalam, pertimbangkan sumber -sumber ini:

• "RTL Styling 101" (Ahmad Shadeed): Panduan Komprehensif untuk Gaya RTL.
• text-combine-upright (CSS-Tricks): Untuk manipulasi teks menegak.
• Anugerah Web untuk tulisan mendatar dan menegak: Contoh dunia nyata tipografi menegak.

Kesimpulan

Walaupun tidak memerlukan overhauls codebase segera, mengamalkan sifat logik menawarkan kelebihan yang ketara. Sokongan penyemak imbas yang sangat baik dan kejelasan kod yang lebih baik menjadikan mereka tambahan yang berbaloi untuk aliran kerja CSS.

Atas ialah kandungan terperinci Sifat dan nilai logik CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!