Kesalahan Kueri Media CSS Besar
Diterbitkan: 2017-05-15Apakah Anda pernah merasa aneh ketika semua orang di sekitar Anda melakukan sesuatu yang biasanya Anda anggap salah [atau setidaknya tidak ideal], tetapi entah bagaimana sepertinya tidak ada yang ingin mengatakan apa pun karena satu dan lain alasan? Perasaan yang sangat aneh melihat semua orang melakukan kesan terbaik mereka tentang seorang pengamat yang malang. Itu mengingatkan saya pada dongeng lama, "Pakaian Baru Kaisar."
Saya selalu merasa seperti itu tentang kueri media CSS. Mengapa semua orang begitu menerima teknologi yang sepertinya tidak menyelesaikan pekerjaan? Mengapa kita sebagai komunitas tidak bersatu dan memperbaikinya secara nyata dan bermakna? Mengapa kita tidak menemukan sesuatu yang lebih baik?
Saat ini, kueri media CSS kebetulan menjadi landasan fungsional dari desain web responsif. Tapi, itu tidak pernah dirancang untuk apa yang digunakan semua orang untuk hari ini, dan buktinya ada dalam praktiknya. Saya masih sering tersandung di situs web saat menggunakan perangkat tablet yang pada awalnya tampak dirancang dengan baik, tetapi kebetulan terlihat dan terasa benar-benar miring saat Anda menjalankannya.
Ada sesuatu yang salah secara mendasar dengan pendekatan desain web responsif ini yang belum kita bahas dengan benar, dan saya ingin menjadi salah satu dari sedikit suara yang menyerukan ketelanjangan kaisar untuk yang satu ini. Untungnya, di zaman sekarang ini, saya senang hampir tidak ada peluang untuk dibakar karena memiliki sudut pandang alternatif ini.
Ada Apa Dengan Kueri Media CSS
Kueri media CSS dirancang untuk sesuatu, tetapi hal itu bukan desain web yang responsif. Berdasarkan pengalaman saya, berikut adalah tujuh (7) masalah besar yang saya alami ketika mencoba menggunakannya untuk bekerja dengan situs web:
1. Tidak intuitif:
“Kueri media CSS bersifat intuitif”, kata tidak ada desainer web yang pernah ada. Cara Anda mendefinisikan kueri media cukup mudah, tetapi tidak selalu benar-benar jelas bagaimana hal-hal akan dimainkan di browser nyata, di perangkat nyata, dan dalam berbagai skenario.
@media saja layar dan (min-width: 320px) dan (max-width: 480px) {
/** Aturan CSS ada di sini **/
}
Kode di atas berlaku untuk viewport saat berada di antara 320 dan 480 piksel. Namun, itu tidak sepenuhnya definitif [atau intuitif] ketika Anda ingin melakukan sesuatu yang lebih spesifik, seperti menerapkan aturan gaya saat perangkat adalah tablet dalam operasi lanskap. Bukan tidak mungkin untuk [semacam] mengatur kueri media untuk melakukan ini, tetapi itu jelas tidak intuitif – atau pasti.
2. Persyaratan terbatas:
Kueri media CSS bersifat dinamis dan memungkinkan Anda menentukan pernyataan bersyarat di CSS Anda. Misalnya, jika viewport berada di antara ini dan itu, maka lakukan yang lain. Namun, Anda sebagian besar terbatas pada pertimbangan area pandang, dan ada banyak lagi skenario kondisional yang masuk akal dalam desain web modern.
Katakanlah Anda sedang membangun aplikasi web progresif. Ada kalanya akan berguna untuk menata elemen UI tertentu secara berbeda berdasarkan OS. Misalnya, biasanya memiliki bilah tab di bagian bawah untuk perangkat iOS, sedangkan untuk Android sebaliknya. Jadi, bagaimana tepatnya Anda membuat ini berfungsi dengan kueri media CSS?
Anda tidak bisa, karena kueri media CSS tidak dibuat dengan fitur apa pun yang memungkinkan Anda. Selain itu, ada banyak penyesuaian lain yang mungkin perlu Anda lakukan melalui CSS, tetapi kueri media bukanlah pilihan saat Anda memerlukan berbagai tingkat persyaratan sederhana hingga lanjutan.
3. Tidak dapat diperluas secara asli:
Kueri media CSS adalah fungsionalitas yang dimasukkan ke dalam browser. Ini berarti bahwa itu tidak dapat diperluas secara asli. Dengan kata lain, Anda tidak dapat menambahkan kemampuan ekstra dan ditingkatkan ke kueri media CSS secara native melalui antarmuka CSS.
Bahkan jika fitur kueri media CSS baru disetujui oleh proses standar web [lama menderita], masih perlu waktu sebelum fitur ini dapat digunakan karena ada di mana-mana. Selain itu, tidak semua fitur yang ditambahkan mungkin berguna bagi Anda, jadi Anda harus mencari cara lain untuk menyelesaikan tantangan spesifik Anda jika Anda tidak mendapatkan apa yang Anda inginkan.
Tentu saja, ada cara untuk memperluas CSS, tetapi Anda harus mengetahui JavaScript dengan sangat baik, dan ini bukanlah proses yang praktis bagi sebagian besar desainer web.
4. Tidak cocok untuk retrofit:
Beberapa orang mungkin menganggap ini sulit dipercaya, tetapi sebelum perangkat seluler muncul, sebenarnya ada banyak situs web di luar sana, dan tidak ada yang ramah seluler. Akibatnya, situs web era desktop ini perlu ditingkatkan.
Sayangnya, kueri media CSS bukanlah pilihan yang sangat baik untuk tugas ini. Karena situs web ini dibuat sebelum perangkat seluler relevan, banyak di antaranya memiliki elemen desain yang tidak sesuai dengan desain web yang responsif, misalnya bilah sisi, tata letak berbasis tabel, konten tab, dll. Juga, sebagian besar situs web ini adalah dibangun di atas sistem manajemen konten (CMS) seperti WordPress, Drupal, Magento, dll., dan mengintegrasikan kueri media CSS [front-end] secara efektif dari back-end sangat sulit untuk dikoordinasikan.
Saya harus memperbaiki situs web yang diberdayakan oleh Magento Enterprise, WordPress, dan yang menggunakan CMS khusus berdasarkan Coldfusion, dan semua proyek tidak mungkin dilakukan dengan menggunakan kueri media CSS [yang dicoba oleh semua klien saya sebelum menggunakan alternatif kami mendekati].
5. Tidak efisien kode:
Menggunakan kueri media CSS untuk membuat halaman web responsif membutuhkan penggandaan kode dalam skala yang signifikan. Karena cara kerja arahan ini [dengan titik henti sementara Anda], Anda harus menentukan aturan gaya individual di setiap blok kueri media.
bagian {lebar: 960px;}
/* Potret */
@media saja layar dan (min-device-width: 320px) dan (max-device-width: 480px) dan (-webkit-min-device-pixel-ratio: 2) dan (orientasi: potret) {
bagian {lebar: 100%}
}
/* Lanskap */
@media saja layar dan (min-device-width: 320px) dan (max-device-width: 480px) dan (-webkit-min-device-pixel-ratio: 2) dan (orientasi: landscape) {
bagian {lebar: 100%;}
} Saat menulis kode di atas, niat awal saya adalah membuat elemen <section> di halaman saya lancar [lebar 100%] di semua perangkat seluler. Namun, karena saya tidak memiliki kemampuan deteksi perangkat asli, saya harus berkompromi dan menentukan aturan gaya di setiap blok kueri media CSS berorientasi seluler untuk memastikan bahwa properti baru akan berlaku di semua skenario yang relevan.
Ini berarti bahwa efisiensi fungsional dari kaskade stylesheet, dan prinsip-prinsip pengembangan yang baik dari Do-not-Repeat-Yourself , harus dikesampingkan.
6. Meningkatkan kompleksitas alur kerja:
Kueri media CSS hanya menangani aspek yang sangat spesifik dari desain web responsif yang hampir seluruhnya berfokus pada pengubahan ukuran tata letak. Ergo, untuk melakukan lebih dari itu, Anda harus mengandalkan JavaScript untuk membuat perbedaan. Ini memperkenalkan persyaratan pembelajaran tambahan untuk kode dan alat.
Selain itu, cara non-definitif [media query] menangani breakpoint berarti Anda harus menghabiskan lebih banyak waktu [dan uang] untuk menguji halaman web Anda di berbagai perangkat virtual dan/atau fisik untuk memastikan semuanya berjalan seperti yang Anda inginkan. . Dan, Anda perlu menguji ulang semuanya lagi saat Anda membuat perubahan signifikan pada tata letak Anda.
Dengan tindakan sederhana dan terarah menggunakan kueri media CSS, Anda secara signifikan meningkatkan jumlah langkah yang diperlukan untuk membangun halaman web modern.
7. Memburuknya kinerja:
Karena cara kerja kueri media CSS, pada akhirnya Anda akan membutuhkan lebih banyak kode CSS daripada sebaliknya untuk membuat situs web Anda responsif/ramah seluler. Menurut data dari HTTPArchive.org, ukuran file CSS telah meningkat sebesar 114% selama lima tahun terakhir. Peningkatan ukuran file HTML mencapai puncaknya sekitar 53% selama periode yang sama.
Situasi aneh ini memiliki implikasi kinerja untuk situs web Anda karena pasti akan lebih lambat setelah menerapkan kueri media CSS [dalam konteks desain web yang responsif] daripada sebelumnya, terutama untuk perangkat seluler yang menggunakan jaringan broadband seluler yang kurang ideal.
Dan, selain masalah peningkatan ukuran file, tidak ada mekanisme internal dalam kueri media CSS untuk benar-benar meningkatkan kinerja halaman web Anda. Untuk itu, Anda harus memanfaatkan teknik JavaScript tingkat lanjut untuk mengaktifkan peningkatan ini.
Mengapa kita masih menggunakan ini?
Jika saya bertanya kepada Anda berapa persentase situs web yang menggunakan kueri media CSS, apa jawaban Anda? Dengan semua stres yang harus ditanggung oleh desainer web selama bertahun-tahun, Anda mungkin mengira kami mungkin telah mengatasi punuk adopsi sekarang, tetapi Anda salah besar.
Persentase situs web yang menggunakan kueri media CSS di seluruh web adalah sekitar 0,2%. Bandingkan dengan persentase situs web yang menggunakan jQuery sebesar 18%. Artinya, Anda 90 kali lebih mungkin menemukan situs web yang diberdayakan oleh jQuery daripada situs web responsif Anda [tidak termasuk yang kebetulan keduanya].
Mengapa toolkit berdasarkan teknologi inti [JavaScript] yang tampaknya dianggap rumit dan berlebihan oleh orang-orang tertentu berada jauh di depan yang tampaknya kurang kompleks [CSS] dan dimaksudkan untuk mengatasi masalah yang bisa dibilang lebih penting [ramah seluler] ? Jelas, ada sesuatu yang sangat salah di sini yang menghambat adopsi, dan itu perlu ditangani.
Kueri media CSS menemukan jalannya ke browser web untuk menangani tantangan tertentu, tetapi kemudian dirancang untuk membawa seluruh bobot desain web responsif di pundaknya. Ini seperti berlatih untuk resital perekam kelas 3, hanya untuk dipindahkan secara ajaib ke Royal Albert Hall untuk membuat solo trombon dari Handel's Messiah; Tidak adil!
Dengan semua tantangan desain web modern, sangat mengejutkan bahwa kami masih menjalankan bisnis kueri media ini. Tidak cukup jauh untuk menangani beberapa masalah warisan yang penting, selain beberapa masalah baru di bidang baru seperti desain aplikasi web progresif. Karena itu, saya pikir sudah waktunya kita menemukan alternatif. Tapi, apa itu sebenarnya?
Apa solusinya?
Solusi untuk semua ini sangat sederhana: JavaScript. Sekarang, sebelum Anda mengambil garpu rumput itu, beri saya kesempatan untuk menjelaskan.
JavaScript adalah satu-satunya komponen trinitas HTML5 di mana ekstensibilitas bukanlah kata kotor. Anda tidak dapat memperluas markup HTML menggunakan lebih banyak HTML, dan Anda tentu saja tidak dapat memperluas CSS secara native dengan CSS. Namun, Anda dapat memperluas JavaScript secara native menggunakan JavaScript, dan Anda bahkan dapat melakukan hal yang sama untuk CSS.
Memanipulasi CSS dengan JavaScript dibahas secara ekstensif dalam Kurikulum Standar Web W3C. Antarmuka DOM document.stylesheets memungkinkan kita mengakses stylesheet yang diterapkan ke halaman web, termasuk semua stylesheet eksternal yang dirujuk menggunakan tag <link> HTML. Ini bukan hal yang mudah untuk dilakukan, tetapi itu mungkin.
Jadi saya harus memperluas jawaban awal: ini bukan hanya JavaScript, ini CSS yang dibantu JavaScript . JavaScript adalah platform luar biasa dengan fungsionalitas yang tidak akan Anda percayai, tetapi CSS adalah tempat sebagian besar desainer web bekerja. Jika kita entah bagaimana bisa membuat semacam jembatan fungsional antara keduanya di mana seorang desainer web dapat menulis aturan CSS untuk memanfaatkan fungsionalitas JavaScript, itu akan menjadi pengubah permainan untuk desain web.
Tunjukkan beberapa kode
Selama dua tahun terakhir ini, saya telah mengerjakan toolkit CSS berbantuan JavaScript baru yang disebut rKit. Seluruh idenya adalah untuk membangun alat yang ramah desainer untuk tidak hanya menggantikan kueri media CSS untuk desain web yang responsif, tetapi untuk mengatasi beberapa tantangan yang diketahui [dan tidak diketahui] yang dihadapi desainer/pengembang web saat membangun situs web dan aplikasi web modern.
Ada banyak konsep, tapi inilah cuplikan kode cepat CSS untuk dijelaskan:
#my-element[rk="jika @viewport.width antara 320 dan 480"]{background-color: #0000ff;}
Dengan rKit, aturan CSS terlihat seperti penyeleksi nilai atribut yang dimodifikasi. Anda kemudian dapat menentukan ekspresi di dalam bagian nilai. Sintaks ekspresi ini dirancang sederhana dan intuitif.
Catatan : rk adalah pengidentifikasi atribut konstan.
Kode di atas secara fungsional setara dengan kueri media CSS di bawah ini:
@media saja layar dan (min-device-width: 320px) dan (max-device-width: 480px) {
#elemen-saya {warna-latar belakang:#0000ff;}
}Namun, ada banyak lagi yang dapat Anda lakukan dengan rKit. Berikut contoh cepat lainnya:
#my-element[rk="jika @self.width antara 320 dan 480"]{background-color: #00ff00;} Dengan hanya mengubah referensi entitas dari @viewport ke @self , pada dasarnya kita telah menyiapkan apa yang biasa disebut sebagai kueri elemen. Jadi apa yang sekarang terjadi adalah ketika lebar #my-element antara 320 dan 480 piksel, deklarasi yang diberikan [ background-color: #00ff00 ] akan berlaku.
Anda juga dapat menggunakan kelas alih-alih deklarasi murni:
#my-element[rk="jika @self.width antara 320 dan 480 lalu addClass(c_mobile_320)"]{}
.c_mobile_320 {warna latar: #00ff00;}Ini hanya puncak gunung es sekalipun. Dengan rKit, Anda dapat melakukan beberapa hal yang cukup mengagumkan seperti manajemen acara, pengamatan mutasi, kueri kuantitas, perutean, pengikatan data [hingga 7 arah], dan banyak hal keren lainnya, semuanya menggunakan kode CSS murni, dan tanpa menulis satu baris JavaScript.
rKit akan gratis dan open-source saat diluncurkan. Dan, itu juga akan menampilkan paket kinerja khusus yang dapat Anda instal dengan cara yang menjamin nol pemblokiran render, sehingga halaman web dimuat seperti roket di atas rel.
Butuh waktu cukup lama untuk menyatukan ini, tetapi akan segera hadir [pasti sebelum Godot], dan saya sangat tertarik untuk melihat apa yang dapat dilakukan oleh desainer web [dan pengembang] dengannya.
Kesimpulan
Saya harap Anda tidak keluar dari posting ini dengan berpikir saya mem-bashing CSS media query hanya karena. aku tidak. Itu akan seperti memukul tomat karena berakhir dengan salad buah. Seperti yang saya katakan sebelumnya, kueri media CSS tidak pernah dirancang untuk desain web yang responsif. Itu dikooptasi karena kemanfaatan, dan kita semua membuat kesalahan dalam mencoba menggunakannya untuk menyelesaikan semua masalah.
Sayangnya, kami sebagai komunitas web tidak pernah benar-benar memperbaiki kesalahan awal itu dengan memperbaikinya secara signifikan, atau membuat alternatif yang lebih baik. Namun sayang, pertunjukan harus tetap berjalan, situs web harus dibangun, dan kemajuan harus diraih. Saatnya untuk sebuah perubahan.
rKit hanyalah satu pilihan dan satu jawaban. Ini bukan yang pertama, dan pasti tidak akan menjadi yang terakhir. Tapi, setidaknya itu adalah langkah yang tepat ke arah yang benar. Kesempatan untuk memperbaiki beberapa masalah di masa lalu, dan kemudian mengulanginya untuk memperbaikinya di masa sekarang dan di masa depan. Akan menarik untuk melihat bagaimana itu cocok dengan status quo.
Semua tolled, membuat kesalahan bukanlah tujuan itu sendiri; itu harus menjadi pengalaman belajar. Dengan sedikit keberuntungan, lain kali kita akan belajar bagaimana menggunakan alat yang tepat untuk pekerjaan yang tepat. Maksud saya, hanya karena Anda bisa mengendarai sepeda di jalan beraspal bukan berarti Anda harus membawanya ke Nurburgring. Bawa Porsche!