9 Trik CSS Kueri Media Tingkat Lanjut yang Harus Anda Ketahui

Pengalaman yang dapat digunakan dan dapat diakses sangat penting untuk situs web yang sukses. Jika pembaca Anda memiliki pengalaman positif, mereka cenderung melakukan ajakan bertindak, termasuk membeli produk. Mereka juga lebih mungkin untuk kembali atau merekomendasikan situs Anda kepada orang lain. Pengalaman adalah kuncinya.

Kueri media menawarkan berbagai fitur CSS yang dapat menyesuaikan situs web Anda. Mereka memungkinkan Anda menyesuaikan pengalaman setiap pengguna berdasarkan kemampuan perangkat mereka. Pelajari cara memberikan pengalaman terbaik kepada pembaca Anda, baik mereka menggunakan ponsel atau monitor desktop besar.

1. Fitur penunjuk

Itu @aturan media memiliki fitur penunjuk yang memungkinkan Anda menyesuaikan desain berdasarkan perangkat penunjuk utama. Anda dapat menguji ketersediaan dan kualitas.

penunjuk ini fitur kueri media mengambil salah satu dari tiga nilai: tidak ada, kasar, atau halus. Itu tidak ada nilai berlaku ketika tidak ada alat penunjuk. Itu kasar nilai berlaku ketika perangkat penunjuk utama memiliki tingkat akurasi yang berkurang. Dan

bagus nilai berlaku ketika perangkat penunjuk utama memiliki tingkat akurasi yang tinggi.

Menggunakan Fitur penunjuk

Pilihan untuk Memilih Dari: 
 Opsi Satu
 Opsi Dua

Kode di atas menghasilkan dua opsi radio input, yang akan bervariasi berdasarkan keakuratan perangkat penunjuk utama komputer.

Komputer yang memiliki perangkat penunjuk utama yang akurat (atau berkualitas tinggi) akan menampilkan halaman web berikut:

Komputer yang memiliki perangkat utama dengan akurasi terbatas (atau kualitas rendah) akan menampilkan halaman web berikut:

Perangkat yang memiliki perangkat penunjuk utama dengan tingkat akurasi terbatas memiliki tombol radio yang lebih besar. Ini memberikan pengalaman pengguna yang lebih baik untuk pengguna tersebut. Dengan fitur penunjuk, Anda dapat memastikan bahwa semua pengguna Anda memiliki pengalaman yang menyenangkan, terlepas dari perangkat mereka.

2. Fitur penunjuk apa saja

Seperti fitur penunjuk, fitur kueri media penunjuk apa pun menargetkan perangkat penunjuk. Namun, fitur penunjuk apa pun mengevaluasi setiap perangkat penunjuk komputer. Fitur penunjuk apa pun juga menggunakan tidak ada, kasar, dan bagus nilai-nilai.

Menggunakan Fitur penunjuk apa saja

 @media (penunjuk apa saja: baik) {
 masukan[jenis="radio"] {
 lebar: 15 piksel;
 tinggi: 15 piksel;
 batas-radius: 20px;
 lebar batas: 1 piksel;
 }
 }
@media (penunjuk apa saja: kasar) {
 masukan[jenis="radio"] {
 lebar: 25 piksel;
 tinggi: 25 piksel;
 batas-radius: 20px;
 lebar batas: 2px;
 }
 }

Anda cukup mengganti kode di atas dengan bagian media query dari kode pada contoh fitur pointer. Kode di atas menampilkan tampilan yang sesuai berdasarkan kualitas perangkat penunjuk apa pun yang mungkin dimiliki komputer.

3. Fitur melayang

Fitur kueri media arahkan kursor mengevaluasi apakah mekanisme input utama perangkat mampu mengarahkan kursor ke elemen di UI.

Menggunakan Fitur hover

 /* CSS */
 Sebuah{
 dekorasi teks: tidak ada;
 warna hitam;
 }
 @media (arahkan: arahkan kursor) {
 a: melayang {
 warna biru;
 }
 }
 HTML 
 Elemen tautan

Kode di atas akan menampilkan elemen. Ini akan berubah warna (dari hitam menjadi biru) setiap kali mekanisme input utama perangkat (yang mendukung melayang) melayang di atasnya.

4. Fitur any-hover

Itu any-hover kueri media menargetkan mekanisme input apa pun, termasuk mekanisme input utama.

Menggunakan Fitur any-hover

@media (arahkan ke mana saja: arahkan kursor) {
 a: melayang {
 warna biru;
 }
 }

Kueri media di atas menghasilkan efek melayang untuk setiap mekanisme masukan yang mampu melayang di atas suatu elemen.

5. Fitur resolusi

Fitur kueri media resolusi menghitung jumlah piksel yang ditampilkan oleh perangkat tertentu. Perangkat yang menampilkan lebih banyak piksel per inci memiliki resolusi yang lebih baik karena menampilkan gambar dengan lebih detail. Fitur ini dapat membantu pengembang untuk memutuskan pengguna perangkat mana yang mungkin melihat elemen di UI dengan lebih jelas.

Fitur resolusi menggunakan jangkauan. Ini berarti bahwa selain menggunakan resolusi kata kunci, Anda dapat menggunakan resolusi minimum dan resolusi maksimal. Fitur resolusi kueri media termasuk dalam tipe data resolusi. Artinya, fitur resolusi dapat diukur dalam satu dari tiga unit: titik per inci (dpi), titik per sentimeter (dpcm), atau titik per piksel (dppx).

Menggunakan Fitur resolusi

/* CSS */
@media (resolusi minimum: 72dpi) {
 P {
 warna putih;
 warna latar: biru;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Resolusi terendah yang dapat dimiliki perangkat dan masih menampilkan gambar berkualitas adalah 72dpi. Jadi, jika perangkat memiliki resolusi 72dpi atau lebih, ia akan menampilkan output berikut di browsernya:

6. Fitur orientasi

Area pandang perangkat hanya dapat memiliki satu dari dua orientasi: potret atau lanskap. Anda harus mencatat bahwa orientasi viewport berbeda dari orientasi perangkat. Jika perangkat menggunakan keyboard lunak, area pandangnya dapat berubah dari potret ke lanskap saat perangkat itu sendiri masih dalam posisi potret.

Menggunakan Fitur orientasi

/* CSS */
 tubuh{
 tampilan: fleksibel;
 }
 bagian{
 perbatasan: 2px biru solid;
 bantalan: 3 piksel;
 margin: 3 piksel;
 }
 @media (orientasi: lanskap) {
 tubuh {
 arah fleksibel: baris;
 }
 }
@media (orientasi: potret) {
 tubuh {
 arah fleksibel: kolom;
 }
 }
 HTML 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Kode di atas mengubah tata letak halaman web berdasarkan orientasi perangkat.

Perangkat dengan viewport dalam mode landscape akan menampilkan halaman web berikut:

Perangkat dengan area pandang dalam mode potret akan menampilkan halaman web berikut:

7. Fitur ketinggian:

Fitur kueri media ketinggian memungkinkan Anda menentukan gaya CSS berdasarkan ketinggian area pandang perangkat pengguna. Fitur ini mendukung jangkauan, jadi Anda juga dapat menggunakan min-tinggi dan tinggi maksimal kata kunci.

Menggunakan Fitur ketinggian

 /* CSS */
 @media (tinggi minimum: 360 piksel) {
 P{
 perbatasan: 2px bertitik oranye;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Kode di atas menyesuaikan apa yang dilihat pengguna berdasarkan ketinggian perangkat mereka. Pengguna dengan tinggi perangkat 360px dan lebih tinggi akan melihat sesuatu yang mirip dengan halaman web berikut:

Perangkat dengan ketinggian di bawah 360 piksel tidak akan menampilkan batas di sekitar paragraf di halaman web.

8. Fitur lebar:

Fitur kueri media lebar memungkinkan Anda membuat gaya CSS tertentu berdasarkan lebar area pandang dari perangkat pengguna. Fitur ini juga mendukung jangkauan, jadi Anda memiliki opsi untuk menggunakan min-lebar dan lebar maksimum kata kunci.

Menggunakan Fitur lebar

 /* CSS */
 @media (lebar minimum: 600 piksel) {
 P{
 perbatasan: 2px ungu pekat;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Kode di atas menyesuaikan apa yang dilihat pengguna berdasarkan lebar perangkat mereka. Pengguna dengan lebar perangkat 600px dan lebih akan melihat sesuatu seperti halaman web berikut:

Menggunakan kueri media berbasis lebar dan tinggi dapat menjadi strategi yang efektif dalam membuat situs web Anda responsif.

9. Fitur warna:

Fitur kueri media warna mengevaluasi komponen warna perangkat (merah, hijau, biru). Nilai mengacu pada berapa banyak bit yang digunakan layar untuk setiap komponen, yang menentukan berapa banyak warna berbeda yang dapat ditampilkan. Perangkat modern biasanya menggunakan tampilan 24-bit yang menggunakan delapan bit per komponen warna. Ini juga membutuhkan nilai integer, di mana perangkat tidak berwarna adalah nol.

Fitur warna juga menggunakan min-warna dan warna maksimal rentang.

Menggunakan Fitur warna

 /* CSS */
 @media (min-warna: 7) {
 P{
 perbatasan: 2px hijau pekat;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Perangkat dengan komponen warna tujuh dan lebih tinggi akan menampilkan output berikut di browser mereka:

Sekarang Anda Dapat Membuat Pengalaman Pengguna yang Unik

Anda harus dapat menggunakan kueri media lanjutan ini untuk meningkatkan pengalaman setiap pengguna yang mengunjungi situs web atau aplikasi Anda. Sangat penting untuk memberikan pengguna seluler dan pengguna desktop pengalaman yang sama positifnya di situs Anda.

Kueri media bukan satu-satunya alat CSS yang dapat memperkuat keterampilan pengembang Anda.

8 Tip dan Trik Penting CSS yang Harus Diketahui Setiap Pengembang

Baca Selanjutnya

Tentang Penulis