CSS3 terus berkembang saat ini. Mulai dari tampilan flex, tampilan grid, variabel, hingga filter. Terakhir kali saya mengikuti perkembangan CSS tahun 2013 lalu. Ya, 8 tahun lalu. Tahun 2020 kemarin juga sempat buka-buka lagi apa saja sih yang baru di dunia CSS. Ternyata banyak.

Banyak hal-hal yang dulunya harus mikir hack-nya bagaimana, sekarang sudah disediakan secara official oleh CSS. Apalagi dengan banyaknya browser yang sudah beralih ke engine Chromium. Itu sangat memudahkan. Karena dulu yang sering bermasalah adalah Internet Explorer. Menjadi momok para web designer.

Beberapa waktu yang lalu saya dikagetkan tampilan yang beda saat saya buka hasil coding di Google Chrome dan Safari. Ketika saya cek di beberapa website memang dibahas ada properti CSS yang tidak jalan. Properti “gap” tidak bisa jalan di Safari. Saat ini saya memakai Safari 14.0.3.

Buat kamu yang ingin tahu permasalahannya, kamu buka link Codepen berikut ini dengan Safari dan Google Chrome.

Kode HTML

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Kode CSS

.parent {
  display: flex;
  gap: 1rem;
}
.child {
  background: pink;
  width: 5rem;
  height: 5rem;
  border: 1px solid red;
}

Hasil di Google Chrome

Hasil di Safari

Bagaimana? Kamu sudah tahu kan masalahnya di mana? Lalu, bagaimana solusinya?

Saya sendiri memilih untuk memberikan margin pada setiap “child”-nya dan menghilangkan gap di “parent”.

.parent {
  display: flex;
  /* gap: 1rem; */
}
.child {
  background: pink;
  width: 5rem;
  height: 5rem;
  border: 1px solid red;
  margin: .5rem;
}

Hasilnya memang tidak sama persis dengan menggunakan “gap”. Namun, kamu bisa mengondisikan “margin”-nya sesuai dengan kebutuhan.

Apakah kamu punya solusi yang lebih baik dari ini? Kasih tahu lewat komentar yah.