Blog Personal Iska

Month: March 2021

Format .WEBP Tidak Terbaca di Safari Versi 14.0.3 dan Sebelumnya

Optimasi website dari segi gambar yang dimuat memang memberikan tantangan tersendiri. Beberapa menyarankan untuk menggunakan format .WEBP agar gambar menjadi ringan dan mendapatkan skor tinggi dalam pengecekan Webpage Speed Checker. Sayangnya, ini memberikan problema baru. Format .WEBP tidak bisa terbaca di Safari 14.0.3 maupun sebelumnya.

Berikut ini adalah contoh website yang menggunakan .WEBP yang saya buka dengan Safari.

Kamu bisa mencoba membuka website tersebut di https://irvantaufik.me/riset-keyword/ dengan Safari (jika kamu pengguna Safari)

Memang sih ada plugin yang otomatis mengubah .JPEG menjadi .WEBP di WordPress. Namun, sepertinya plugin tersebut belum memberikan preventif jika gambar diakses menggunakan Safari.

Solusi .WEBP Tidak Terbaca di Safari

Lalu, bagaimana kah solusi untuk masalah ini?

Saya iseng mengunjungi salah satu marketplace yang juga menggunakan .WEBP sebagai format gambar default-nya, yaitu Bukalapak. Ternyata, ketika dibuka menggunakan Safari, gambar tetap terbaca. Kok bisa?

Ternyata mereka sudah mengecek kompatibilitas .WEBP ini di banyak browser (ya kali ga dicek, hehe). Cara yang Bukalapak lakukan adalah dengan menggunakan <picture> lalu di dalamnya diberikan beberapa format gambar.

Nah, masalahnya adalah apakah di WordPress sudah ada plugin yang memberikan preventif seperti ini? Kalau Bukalapak sih mudah, karena mereka memakai Vue.js. Ada library tambahan yang bisa digunakan namanya lazysizes yang bisa meng-generate <picture> dengan isian .WEBP dan .JPEG.

Jika Sahabat tahu nama plugin WordPress-nya, kasih tahu di kolom komentar yah 😉

CSS Gap Tidak Jalan di Safari

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.

Powered by WordPress & Theme by Anders Norén