CSS Logical Properties Demo

📌 Elements

💡 Logical Properties Fundamentals

CSS Logical Properties memungkinkan Anda membuat layout yang bekerja secara konsisten terlepas dari arah teks (LTR/RTL) atau mode penulisan (horizontal/vertikal).

logical-props.css

          
            /* Basic Logical Properties */

            .box {

              margin-inline-start: 1rem;

              padding-block-end: 2rem;

            }

            /* Logical Sizing */

            .container {

              inline-size: 100%;

              max-block-size: 80vh;

            }

            /* Logical Borders */

            .card {

              border-inline: 2px solid #9333ea;

              border-block-start: none;

            }

📝 Penjelasan Detail:

• *-inline - Mengacu pada dimensi horizontal (kiri/kanan)
• *-block - Mengacu pada dimensi vertikal (atas/bawah)
• *-start - Awal dari arah teks (kiri untuk LTR, kanan untuk RTL)
• *-end - Akhir dari arah teks (kanan untuk LTR, kiri untuk RTL)

🛠️ Features

logical-layout.css

          
            /* Logical Float */

            img {

              float: inline-start;

              margin-inline-end: 1rem;

            }

            /* Logical Positioning */

            .tooltip {

              inset-inline-start: 0;

              inset-block-start: 100%;

            }

            /* Logical Text Alignment */

            .rtl-text {

              text-align: end;

              direction: rtl;

            }

ℹ️ Browser Support

Logical Properties didukung di Chrome 69+, Firefox 41+, Safari 12.1+, Edge 79+. Beberapa properti memerlukan prefix (-webkit-) di Safari.

📊 Basic Tables

logical-values.css

          
            /* Physical to Logical Mappings */

            .mapping {

              /* left → */ margin-inline-start: 1rem;

              /* right → */ margin-inline-end: 1rem;

              /* top → */ margin-block-start: 1rem;

              /* bottom → */ margin-block-end: 1rem;

            }

            /* Size Properties */

            .sizes {

              /* width → */ inline-size: 100px;

              /* height → */ block-size: 200px;

              /* min-width → */ min-inline-size: 50px;

              /* max-height → */ max-block-size: 300px;

            }

📝 Penjelasan Detail:

• margin-inline - Margin kiri dan kanan (atau kanan dan kiri di RTL)
• padding-block - Padding atas dan bawah
• inline-size - Lebar dalam konteks writing-mode
• block-size - Tinggi dalam konteks writing-mode
• inset-* - Pengganti top/right/bottom/left untuk positioning

🚀 Advanced Table

advanced-logical.css

          
            /* Logical Properties with Writing Modes */

            .vertical-text {

              writing-mode: vertical-rl;

              margin-block: 2rem; /* Now horizontal */

              padding-inline: 1rem; /* Now vertical */

            }

            /* Logical Border Radius */

            .rounded {

              border-start-start-radius: 10px;

              border-end-end-radius: 10px;

            }

            /* Logical Overflow */

            .scrollable {

              overflow-inline: auto;

              overflow-block: hidden;

            }

ℹ️ Browser Support

Writing-mode: Chrome 8+, Firefox 41+, Safari 5.1+, Edge 79+. Logical border-radius: Chrome 89+, Firefox 66+, Safari 15+, Edge 89+.

💡 Pro Tips

🎯 Best Practices

Gunakan logical properties untuk membuat layout yang benar-benar responsif terhadap perubahan arah teks dan writing mode.

best-practices.css

          
            /* ✅ Good - Using logical properties */

            .modern-layout {

              margin-inline: auto;

              padding-block: 1rem;

              max-inline-size: 1200px;

            }

            /* ✅ Good - With fallback */

            .with-fallback {

              margin-left: 1rem;

              margin-right: 1rem;

              margin-inline: 1rem;

            }

            /* ❌ Avoid - Mixing logical and physical */

            .confusing {

              margin-inline-start: 1rem;

              padding-right: 1rem;

            }

📝 Penjelasan Detail:

• Gunakan secara konsisten - Hindari mencampur logical dan physical properties
• Sediakan fallback - Untuk browser yang lebih lama jika diperlukan
• Manfaatkan shorthand - Seperti margin-inline untuk kode yang lebih ringkas
• Uji berbagai writing-mode - Pastikan layout bekerja di semua konteks
• Pertimbangkan aksesibilitas - Logical properties membantu mendukung RTL