Keadaan elemen query

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:

Berikut adalah contoh lain di mana saya dapat mengubah CSS yang didasarkan pada lebar video. Sama sekali tidak terkait untuk ukuran viewport. pic.twitter.com/O6lbDBJvFf

— Wes Bos 🔥 (@wesbos) 6 Oktober 2017>

10 Oktober 2017/a>

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.

Does Circularity (Self-Reference) Pose a Problem for Element Queries?

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:

tidak 👏 👏🏻 Anda berani 👏🏼 menyelesaikan 👏🏽 untuk 👏🏾 javascript 👏🏿 container queriestain— Zach LeatHERMAN 🎃⬆⌨ (@zachleat) 6 Oktober 2017ber 6, 2017

6 Oktober 2017ber 6, 2017

Oktober 2017ober 6, 2017 @media dengan IE8 karena kita diperlukan JavaScript untuk menambah daya styling mana browser kekurangan. Namun, menggunakan JavaScript sudah dalam browser untuk meningkatkan CSS? Itu adalah ajaran sesat bagi banyak orang. bahkan beberapa dari mereka yang benar-benar senang menggunakan JavaScript untuk merakit HTML.o assemble HIde-ide yang disebutkan dalam bagian sebelumnya jelas memungkinkan pengembang untuk bekerja pada ide-ide mereka sendiri, tetapi kita perlu mulai datang bersama-sama lebih sering, membandingkan catatan, menemukan pendekatan standar dan mengunci di. Dalam pandangan saya pribadi kami tidak akan dapat menceraikan JavaScript dari CSS ketika datang ke pertanyaan elemen sehingga kita perlu merangkul. Siapa pun yang menunggu untuk pendekatan CSS murni mungkin di depot kereta api untuk bertahun-tahun yang akan datang.y years tBerpisah PikiranParting TApakah Anda menggunakan elemen query dalam pekerjaan Anda sendiri? Apakah pertanyaan elemen penyebab hilang karena sudut pandang yang sangat dogmatis? Saya harap diskusi ini membantu untuk memicu pertimbangan yang akan memungkinkan JavaScript untuk memiliki kursi di meja sehingga kita dapat membangun komponen yang sangat fleksibel untuk web yang selalu berubah. Seperti biasa, silahkan posting pikiran Anda di bagian komentar dan bahagia coding.nd happy Terima kasih khusus3>SpecialBesar berkat Tommy Hodgins untuk waktu dan pengetahuan yang berharga tentang topik ini dan juga untuk semua karyanya menjaga komunitas-sensitif topik ini.sensitive topic. Bekerja di sekitar kurangnya pertanyaan elemen pada Filament Groupn Filament presto-points pada GitHubts on GApa sih yang dimaksud dengan Element Queries & Container Queries? oleh Tommy Hodginsby Tommy HoGSS: Tata Letak Reimagined di Web Design Mingguaneb Design WElemen Queries oleh Tommy Hodginsby Tommy Hoeqcss pada GitHubss on GCSS elemen Queries pada GitHubes on Gcssplus pada GitHubus on GDemo Elemen Query koleksi pada CodePenction on CoElement Queries, dan bagaimana Anda dapat menggunakan mereka hari ini pada Smashing Magazinemashing Magazine

houdini