Shorthand dan Longhand

Empat longhand margin-top hingga margin-left menghabiskan empat baris untuk satu maksud sederhana: memberi jarak di sekeliling elemen. CSS menyediakan jalur pendek bernama shorthand, dan kita akan menjumpai pasangan shorthand-longhand ini di hampir semua property box model. Pada chapter ini kita mempelajari cara kerja keduanya, membaca urutan nilai yang tampak samar, dan mewaspadai satu perilaku shorthand yang paling sering menjebak: ia ikut mereset apa pun yang tidak disebut.

Longhand: Satu Property untuk Satu Sisi #

.kartu {
  margin-top: 12px;
  margin-right: 24px;
  margin-bottom: 12px;
  margin-left: 24px;
}

Penerapan keempat longhand itu pada elemen nyata:

Longhand menamai satu aspek kecil secara eksplisit sehingga tidak ada ruang salah baca. Pola akhiran -top, -right, -bottom, dan -left juga berlaku untuk padding, border-width, dan beberapa property lain.

Shorthand: Banyak Sisi dalam Satu Declaration #

.kartu {
  margin: 12px 24px;
}

Hasilnya sama persis dengan empat longhand di atas — dua baris lebih pendek dengan arti yang utuh. Jumlah value yang ditulis menentukan artinya:

Tiga kotak dengan pola margin berbeda, dipagari border putus-putus agar jaraknya terlihat:

Untuk empat nilai, urutannya searah jarum jam mulai dari atas — bayangkan posisi angka 12, 3, 6, dan 9 pada muka jam. Pola jumlah-nilai ini berlaku konsisten untuk margin, padding, dan sederet shorthand box lainnya, jadi cukup dipelajari satu kali.

Pasangan shorthand-longhand juga tersedia untuk kelompok property lain. Shorthand modern inset merangkum top, right, bottom, dan left sekaligus; border-radius merangkum keempat sudut; sementara font menggabungkan ukuran, ketebalan, dan keluarga huruf dalam satu baris. Setiap shorthand membawa pola nilai dan perilaku resetnya sendiri, jadi pelajari masing-masing saat kita benar-benar memakainya.

Satu idiom yang akan sering kita temui:

.konten-utama {
  max-width: 960px;
  margin: 0 auto;
}

Dua nilai berarti atas-bawah lalu kiri-kanan; auto pada sisi kiri-kanan menyeimbangkan ruang sehingga elemen block yang lebih sempit dari induknya menempati posisi tengah.

Perilaku Penting: Shorthand Mereset yang Tidak Disebut #

.banner {
  background-image: linear-gradient(to right, #14503a, #1d6b4e);
  background: #14503a; /* menimpa background-image kembali ke none */
}

Demo berikut memasang kedua urutan berdampingan:

Baris kedua pada rule pertama mereset background-image ke none sambil menetapkan warna latar. Urutan penulisan di sini menentukan hasil — ingat pola “yang terakhir menang” dari chapter Multiple Declarations. Bila background-image ditulis setelah shorthand, gradasi justru muncul.

Sifat reset ini tidak selalu merugikan. Kadang justru kita mengandalkannya:

/* Reset klasik di awal berkas: semua sisi elemen mulai dari nol */
* {
  margin: 0;
  padding: 0;
}

Penulisan margin: 0 di sini memang bermaksud mereset keempat sisi; shorthand dipilih justru karena sifat resetnya.

Kapan Memakai yang Mana #

• Shorthand saat memang ingin mengatur banyak sisi sekaligus, atau saat reset menyeluruh disengaja.
• Longhand saat mengubah satu sisi saja — margin-top: 8px; lebih jelas maksudnya daripada menulis ulang margin empat nilai.
• Bila shorthand dan longhand serumpun bercampur dalam satu blok, putuskan sendiri urutannya secara sadar: tulis longhand setelah shorthand bila longhand harus menang, dan tulis shorthand terakhir bila reset yang diinginkan.

Ringkasan #

Shorthand menggabungkan beberapa longhand dalam satu declaration dengan pola nilai yang teratur: satu, dua, tiga, atau empat nilai berarti keempat sisi, pasangan vertikal-horizontal, dan seterusnya. Kekuatan itu sekaligus jebakannya — longhand yang tidak disebut ikut direset ke nilai awal, jadi waspadai urutan penulisan saat keduanya bercampur. Chapter berikutnya menutup section ini dengan daftar kesalahan sintaks yang paling sering ditemui dan cara browser bertahan darinya.