Untuk kamu yang menginginkan efisien kode, less dependents. Fitur yang sudah dikenali semua browser sejak > > > dimunculkan tahun 2015 perlu diimplementasikan di projek kamu.

Background

Mungkin kamu sebagai Web Desain atau Front-end Developer yang berkecimpung lama di CSS akan akrab dengan rule media queries seperti @media screen and (max-width: 900px).

@media screen and (max-width: 900px){
    main {
      ...
    }
}

Yak! rule css dengan block scope yang diawali dan diakhiri curly-bracket berisi CSS rules and styling dikhususkan screen dengan max resolusi width 900px.

Adakalanya, sebuah use case harus dilakukan dalam barisan kode JavaScript atau Framework seperti Vue.js atau React.js untuk perform sebuah eksekusi kode fungsi javascript, dimana tidak bisa dilakukan stylesheet CSS itu sendiri.

Untuk melakukan hal tersebut, saya hatus install package library seperti @csstools/media-query-list-parser. hal ini menumpuk dependensi kode javascript yang menumpuk untuk perform small task portion, jadinya inefficient dalam bundle kode.

Pengenalan matchMedia()

Panduan ES2015 mengenalkan Web API window.matchMedia() yang penggunaanya sama persis cek media query dari document screen objek, hal ini tidak perlu install package library yang membebani baris kode yang menumpuk di project kita.

Anda bisa cek dokumen window.matchMedia() berikut : https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

const mql = window.matchMedia("(max-width: 600px)");

if (mql.matches) {
  // execute specialty task
}

input parameter matchMedia() berupa string media queries seperti yang kita lakukan di CSS media query, namun tidak bisa support media type seperti print, all dan logical operator seperti and, or, not atau only.

Return value

Return value dari matchMedia adalah object MediaQueryList yang berisi properties .matches dan .media dan tiga method yang yakni .addListener() dan .removeListener() dan 1 event yakni .change(). dokumen selengkapnya bisa kita baca di —> https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList

Penggunaan

Kita menggunakan Media Query tersebut dimana untuk melakukan pemeriksaan seketika dan berdasarkan event untuk melihat apakah dokumen cocok dengan media query yang kita passing.

Untuk melakukan pemeriksaan seketika satu kali untuk melihat apakah dokumen cocok dengan media query, lihat hasil return .matches berupa boolean, yang akan bernilai true jika dokumen memenuhi persyaratan media query.

Contoh

Berikut contoh penggunaan matchMedia untuk melakukan pengecekan dokumen di bawah ini. saya membuat fungsi kode khusus untuk pengecekan.

https://substackcdn.com/image/fetch/$s_!siJh!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F99df2a37-4e12-49d8-adf1-96e55257e31b_1307x1536.jpeg

Selamat mencoba!