Michelle Barker dengan posting blog favorit saya: singkat, praktis, dan memberi Anda nugget berharga untuk waktu Anda. Di Sini, dia masuk ke singkatan properti logis di CSS, terutama yang mengatur panjang hanya pada satu sumbu, katakan hanya sumbu blok (vertikal) atau hanya sumbu sejajar (horizontal).
Saya katakan "blok" dan "sebaris" karena, sejauh menyangkut sifat logis, sumbu x juga dapat berperilaku seperti sumbu vertikal tergantung pada arus writing-mode.
Jadi, di mana kita selalu punya padding, margin, dan border singkatan yang dapat mendukung sintaks multi-nilai, tidak satupun dari mereka memungkinkan kita untuk mendeklarasikan panjang pada sumbu tertentu tanpa juga mengatur panjang pada sumbu lainnya.
Sebagai contoh:
/* This gives us margin on the inline axis */
margin: 0 3rem;…tapi kami harus mengatur sumbu lain untuk sampai ke sana. Namun, dengan properti logis, kami memiliki singkatan tambahan untuk setiap sumbu yang berarti kami dapat menandai margin-inline singkatan untuk bekerja secara khusus pada sumbu sebaris:
margin-inline: 3rem;Michelle menyebutkan singkatan properti logis favorit saya. Berapa kali Anda memposisikan sesuatu untuk jenis nada ini:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Kita bisa memasukkan keempat baris itu dengan inset: 0. Atau kita bisa menargetkan blok dan sumbu inline secara langsung dengan inset-block dan inset-inline, Masing-masing.
Saat kita berbicara singkat, saya selalu ingin berhati-hati tentang CSS "tidak disengaja" disetel ulang. Hanya salah satu dari kesalahan CSS umum yang saya buat.
