Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Keadaan elemen query

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Sap (you can also view the original English article)

Elemen query (atau "container queryes" jika Anda harus) terus membuat jalan mereka ke dalam percakapan antara pembuat desain web responsif, tapi mereka dimasukkan ke dalam setiap spec dan lanskap hadir tidak jelas. Dalam artikel ini kita akan membahas apa pertanyaan elemen dan mana konsensus masyarakat saat ini menemukan dirinya antara pengembang dan standar kelompok kerja.

Apa sajakah Element Queries?

Elemen query mengizinkan elemen "react" kendala mereka sendiri tanpa kendala ukuran layar. Ini adalah detail yang paling signifikan yang seseorang harus mengerti. Media query seperti yang kita tahu mereka adalah 100% untuk tata letak responsif, tapi tata letak responsif tidak 100% @media query. Modul, komponen, elemen interface akan selalu tumbuh dan menyusut dengan layar, tetapi tidak pernah bereaksi pada mereka sendiri, itulah sebabnya @media tidak memberikan seluruh solusi untuk masalah kami.

Lihat demo ini kasar elemen query menggunakan eqcss:

Garis depan

Banyak orang yang mencari solusi untuk breakpoints berbasis elemen mulai menerapkan CSS di JS menggunakan kerangka kerja seperti bereaksi. Sementara kemajuan telah dibuat di daerah lain, ini retak solusi yang menciptakan solusi penggunaan umum pengembang untuk CSS atau JavaScript ke beberapa perpustakaan kerangka-spesifik. Sementara hasil bervariasi, fitur inti alat-alat ini mencapai sering sangat mirip. Di masa depan, Standardisasi teknik berbagai macam ini bisa menguatkan pendekatan responsif desain harus diterapkan untuk setiap situs web, atau alat apapun jenis.

Selama saya diskusi pada topik ini dengan Tommy Hodgins (penganjur elemen query dan pencipta eqcss) tampaknya orang-orang masih sadar "elemen queryes" dan konsep terpisah "container queries". Konsensus muncul untuk dibagi menjadi beberapa daerah yang berbeda:

Apa yang ada di daftar keinginan untuk developers?rs?
    spesifikasi yang dihadapi publik jika Anda ingin menyelam lebih jauh.er.
    Houdini menjadi model kerja dan menampilkan sebagai kasus penggunaan sempurna terhadap kebutuhan kita. Saat ini kelompok kerja CSS adalah, pada kenyataannya, berfokus pada Houdini.ni. CSS Object Model (koleksi API yang memungkinkan JavaScript berbicara dan memanipulasi CSS). Niat dari CSS OM developers akan mengekspos akses yang lebih baru, lebih dalam ke dalam bagaimana browser pengolahan dan berpikir tentang CSS. Aspek-aspek ini akan memungkinkan pengembang untuk menulis dengan cara yang lebih mirip plugin CSS; sesuatu yang belum bisa kami raih. Jika CSS Object Model memicu minat Anda, saya mendorong Anda untuk membaca spek itu juga.oo.
Bayangkan Anda bisa menulis sebuah plugin yang bertindak lebih seperti patch browser daripada plugin JavaScript. Bagaimana jika Anda memiliki akses untuk menyuntikkan logika Anda sendiri ke dalam bagaimana browser mem-parse, paints, dan merender halaman? Apa yang bisa Anda "ajarkan" pada browser daripada mengandalkan logika di bagian atas halaman untuk dihitung?te? Saat ini kita terjebak dengan cara browser proses CSS, tetapi dengan Houdini harapan adalah bahwa kita akan memiliki kemampuan untuk mengatur ulang dan memprioritaskan sehingga kita dapat menghitung nilai-nilai yang menggunakan pendekatan cerdas, atau mengontrol render untuk menyembunyikan kelemahan. JavaScript dan CSS objek Model api meminjamkan CSS jenis yang sama akses, kontrol, dan kekuatan yang JavaScript dan DOM api memberikan ke HTML. Menurut Tab Atkins, Houdini juga menggunakan logika Typed OM dan Parser API dan ini adalah para teknisi yang mendasari untuk kustom di-aturan membiarkan Anda menentukan Query elemen aturan dalam stylesheet Anda dan memilikinya ditangani oleh JavaScript.pt. Ada situs yang semata-mata didedikasikan untuk pelacakan kemajuan di ishoudinireadyyet.com, tetapi sementara itu mari kita pertimbangkan beberapa solusi potensial lainnya.ns. Penggunaan iframes untuk membungkus elemen adalah pendekatan pintar pasti, tapi sayangnya masih tidak benar solusi dari masalah; lebih hack kreatif. Baca lebih lanjut tentang trik ini dari blog Tab Atkins.a>.
Meskipun tidak stabil dalam bentuk spesifikasi, properti ini dimaksudkan untuk berguna pada halaman yang berisi banyak widget independen. Docs mengklaim dapat digunakan untuk mencegah satu aturan CSS widget mengubah orang lain di halaman. Nilai properti strict menunjukkan dapat menghindari banyak masalah kontainer pertanyaan, tapi ini bukan seluruh solusi; hanya potongan teka-teki.le.
Salah satu isu utama mengenai container queries adalah bahwa children dan konten mereka dapat memiliki efek pada ukuran container. Ini dapat dihindari dalam teori dengan menggunakan CSS containment, tetapi mari kita melihat ke isu aktual yang menyebabkan ketergantungan ini antara unsur-unsur.ts. Lihatlah pembicaraan berikut oleh Dan Tocchini (Anda mungkin ingin untuk memulai video dari 10:00 mark sebagai Vimeo tidak mengizinkan time stamps).s).
Mengapa unsur tidak bisa responsif terhadap ukurannya? Dependensi siklik. Berikut ini gambar yang dibuat ulang dari video di atas untuk memperjelas:fy:
Setiap kotak tergantung pada batasan kotak yang berisi (witdth dalam kasus ini)se),:hover events seperti yang dijelaskan Tommy Hodgins dalam video ini.eo.
Dependensi Cyclic adalah di mana sebagian besar orang-orang yang menggunakan istilah "container query" menjadi macet karena:se:
Kabar baiknya adalah bahwa browser mulai menunjukkan beberapa bukti dari bekerja di sekitar masalah ini seperti yang dibahas sebelumnya dengan Houdini.ni. < Prospek masa depanook Kebetulan ada spesifikasi Elemen CSS (mimpi) oleh Tommy Hodgins; dan meski hanya spek mimpi, sangat mengesankan panjangnya untuk benar-benar memasukkan kata dan saran ke percakapan. Dia juga menyusun situs yang mencantumkan pengembang yang mengerjakan kueri penampung dengan tepat berjudul "Siapa yang Bekerja di Container Queries".>”. Setelah semua penelitian saya, saya masih bertanya-tanya mengapa sebagian besar komunitas kami tidak membangun cara ini ketika kami bisa? Kami memiliki kemampuan untuk membangun cara ini sebelum CSS @media didukung di browser, tetapi tampaknya kami menjadi teralihkan. Kami pergi dari tidak memiliki petunjuk tentang "responsif praktek terbaik", untuk menemukan cara untuk mencapai berbagai hasil menggunakan @media; dan itu menyebar seperti api. Artikel membahas "Media bebas Query responsif layout" menggunakan pintar model tampilan seperti Flexbox dan Grid menggambarkan bahwa kita memiliki waktu yang sulit menceraikan responsif letak dari media queries.es. Memeriksa presentasi oleh Eric Portis (berisi kegembiraan) di mana ia membahas titik itu sangat; dengan begitu banyak penghalang jalan, hanya bagaimana kita melakukan maju web platform secara keseluruhan?le? Berikut adalah beberapa soundbites umum yang Anda akan mendengar tentang elemen query:es:
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.