Sintaks Rentang Kueri Media CSS Baru

Kami mengandalkan Kueri Media CSS untuk memilih dan menata elemen berdasarkan kondisi yang ditargetkan. Kondisi itu bisa bermacam-macam tetapi biasanya terbagi dalam dua kubu: (1) jenis media yang digunakan, dan (2) fitur spesifik dari browser, perangkat, atau bahkan lingkungan pengguna.

Jadi, katakanlah kita ingin menerapkan gaya CSS tertentu ke dokumen cetak:

@media print {
  .element {
    /* Style away! */
  }
}

Fakta bahwa kita dapat menerapkan gaya pada lebar viewport tertentu telah membuat Kueri Media CSS sebagai bahan inti dari desain web responsif sejak Ethan Marcotte menciptakan istilah. Jika lebar viewport browser adalah ukuran tertentu, maka terapkan seperangkat aturan gaya, yang memungkinkan kita mendesain elemen yang merespons ukuran browser.

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

Perhatikan and di sana? Itu adalah operator yang memungkinkan kita untuk menggabungkan pernyataan. Dalam contoh itu, kami menggabungkan kondisi bahwa jenis media adalah a screen dan itu min-width fitur disetel ke 30em (atau diatas). Kita dapat melakukan hal yang sama untuk menargetkan rentang ukuran area pandang:

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

Sekarang gaya tersebut berlaku untuk rentang lebar viewport yang eksplisit daripada lebar tunggal!

Namun spesifikasi Media Queries Level 4 telah memperkenalkan sintaks baru untuk menargetkan rentang lebar viewport menggunakan operator perbandingan matematis umum — hal-hal seperti <, >, dan = — yang lebih masuk akal secara sintaksis saat menulis lebih sedikit kode.

Mari gali cara kerjanya.

Operator perbandingan baru

Contoh terakhir itu adalah ilustrasi yang bagus tentang bagaimana kami mengurutkan rentang "palsu" dengan menggabungkan kondisi menggunakan and operator. Perubahan besar dalam spesifikasi Media Query Level 4 adalah kami memiliki operator baru yang membandingkan nilai daripada menggabungkannya:

• < mengevaluasi apakah suatu nilai adalah kurang dari nilai lain
• > mengevaluasi apakah suatu nilai adalah lebih besar dari nilai lain
• = mengevaluasi apakah suatu nilai adalah sama ke nilai lain
• <= mengevaluasi apakah suatu nilai adalah kurang dari atau sama dengan to nilai lain
• >= mengevaluasi apakah suatu nilai adalah lebih besar dari atau sama dengan to nilai lain

Inilah cara kami menulis kueri media yang menerapkan gaya jika browsernya 600px lebar atau lebih besar:

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

Begini tampilannya untuk menulis hal yang sama menggunakan operator perbandingan:

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

Menargetkan rentang lebar area pandang

Seringkali ketika kita menulis CSS Media Query, kita membuat apa yang disebut sebagai breakpoint — kondisi di mana desain "rusak" dan serangkaian gaya diterapkan untuk memperbaikinya. Sebuah desain dapat memiliki banyak breakpoint! Dan mereka biasanya didasarkan pada viewport yang berada di antara dua lebar: di mana breakpoint dimulai dan di mana breakpoint berakhir.

Inilah cara kami melakukannya menggunakan and operator untuk menggabungkan dua nilai breakpoint:

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

Anda mulai memahami seberapa pendek dan mudahnya menulis kueri media saat kami membuang Boolean and operator yang mendukung sintaks perbandingan rentang baru:

@media (400px <= width <= 1000px) {
  /* etc. */
}

Jauh lebih mudah, bukan? Dan jelas apa yang dilakukan media query ini.

Dukungan Browser

Sintaks kueri media yang ditingkatkan ini masih dalam tahap awal pada saat penulisan ini dan tidak didukung secara luas saat ini seperti pendekatan yang menggabungkan min-width dan max-width. Kami semakin dekat! Safari adalah satu-satunya ketidaksepakatan utama saat ini, tapi ada tiket terbuka untuk itu yang dapat Anda ikuti.

Mari kita lihat contohnya

Berikut tata letak yang cocok untuk layar yang lebih besar, seperti desktop:

Tata letak ini memiliki gaya dasar yang umum untuk semua titik henti sementara. Namun saat layar semakin sempit, kami mulai menerapkan gaya yang diterapkan secara kondisional pada titik henti sementara yang lebih kecil yang cocok untuk tablet hingga ponsel:

Untuk melihat apa yang terjadi, berikut adalah bagaimana tata letak merespons antara dua titik henti sementara yang lebih kecil. Daftar navigasi tersembunyi juga ditampilkan title dalam main meningkat dalam font-size.

Perubahan itu dipicu saat perubahan viewport berubah dari mencocokkan kondisi satu media ke kondisi lainnya:

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

Kami telah menggabungkan beberapa konsep yang telah kami bahas! Kami menargetkan perangkat dengan a screen jenis media, mengevaluasi apakah lebar viewport lebih besar atau sama dengan nilai tertentu menggunakan sintaks rentang fitur media baru, dan menggabungkan dua kondisi dengan and operator.

Oke, jadi itu bagus untuk perangkat seluler di bawah ini 768px dan untuk perangkat lain yang sama dengan atau lebih besar dari 768px. Tapi bagaimana dengan tata letak desktop itu… bagaimana kita sampai di sana?

Sejauh tata letak berjalan:

• Grafik main elemen menjadi kisi 12 kolom.
• Sebuah tombol ditampilkan pada gambar.
• Ukuran .title font elemen meningkat dan tumpang tindih dengan gambar.

Dengan asumsi kita telah melakukan pekerjaan rumah kita dan menentukan dengan tepat di mana perubahan itu harus dilakukan, kita dapat menerapkan gaya tersebut ketika viewport cocok dengan width kondisi untuk breakpoint itu. Kita akan mengatakan bahwa breakpoint ada di 1000px:

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

Bermainlah dengannya:

Mengapa sintaks baru lebih mudah dipahami

Intinya: lebih mudah untuk membedakan operator perbandingan (mis width >= 320px) daripada membedakan antara min-width dan max-width menggunakan and operator. Dengan menghilangkan nuansa antara min- dan max-, kami memiliki satu single width parameter untuk dikerjakan dan operator memberi tahu kami sisanya.

Di luar perbedaan visual dari sintaks tersebut, mereka juga melakukan hal yang sedikit berbeda. Menggunakan min- dan max- setara dengan menggunakan operator perbandingan matematis:

• max-width setara dengan <= operator (misalnya (max-width: 320px) sama dengan (width <= 320px)).
• min-width setara dengan >= operator (misalnya (min-width: 320px) sama dengan (width >= 320px)).

Perhatikan bahwa keduanya tidak setara dengan > or < operator.

Mari kita ambil contoh langsung dari spesifikasi Media Query Level 4 di mana kita mendefinisikan gaya yang berbeda berdasarkan breakpoint di 320px di lebar viewport menggunakan min-width dan max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

Kedua media query cocok dengan kondisi ketika lebar viewport sama dengan 320px. Bukan itu yang kami inginkan. Kami ingin antara salah satu dari kondisi tersebut daripada keduanya pada saat yang bersamaan. Untuk menghindari perubahan implisit itu, kami mungkin menambahkan piksel ke kueri berdasarkan min-width:

@media (max-width: 320px){ /* styles for viewports = 321px */ }

Meskipun ini memastikan bahwa dua set gaya tidak berlaku secara bersamaan ketika lebar viewport adalah 320px, lebar area pandang apa pun yang berada di antara 320px dan 321px akan menghasilkan zona super kecil di mana tidak ada gaya di salah satu kueri yang diterapkan — situasi "flash of unstyled content" yang aneh.

Salah satu solusinya adalah meningkatkan nilai skala perbandingan kedua (angka setelah titik desimal) menjadi 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

Tapi itu semakin konyol dan terlalu rumit. Itu sebabnya sintaks rentang fitur media baru adalah pendekatan yang lebih tepat:

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

Membungkus

Fiuh, kami membahas banyak hal tentang sintaks baru untuk menargetkan rentang lebar area pandang di Kueri Media CSS. Sekarang spesifikasi Media Queries Level 4 telah memperkenalkan sintaks dan telah diadopsi di browser Firefox dan Chromium, kami semakin dekat untuk dapat menggunakan operator perbandingan baru dan menggabungkannya dengan berbagai fitur media lainnya selain widthseperti height dan aspect-ratio

Dan itu hanya salah satu fitur baru yang diperkenalkan oleh spesifikasi Level 4, selain a banyak pertanyaan yang dapat kami buat berdasarkan preferensi pengguna. Itu tidak berakhir di sana! Lihat Panduan Lengkap untuk Kueri Media CSS untuk melihat sekilas apa yang mungkin disertakan dalam Kueri Media Level 5.