Share
Elementele de interogare a elementelor (sau "interogările containerelor", dacă trebuie) continuă să intre în conversații între factorii responsabili de proiectare web, însă includerea lor în orice spec și peisajul actual este neclară. În acest articol vom discuta care sunt întrebările de element și unde consensul comunității se regăsește în prezent printre grupurile de lucru pentru dezvoltatori și standarde.
Elementele de interogare permit elementelor să "reacționeze" la constrângerile lor indiferent de constrângerile dimensiunii ecranului. Acesta este cel mai important detaliu pe care trebuie să-l înțelegeți. Întrebările media pe care le cunoaștem sunt 100% pentru aspectul receptiv, dar aspectul receptiv nu este 100% @mass-media întrebări. Modulele, componentele, elementele de interfață vor crește mereu și se vor micșora cu ecranul, dar niciodată nu vor reacționa pe cont propriu, motiv pentru care @mass-media nu este toata solutia la problemele noastre.
Aruncați o privire la demo-ul dur al întrebărilor de element folosind eqcss:
Mulți oameni care caută soluții pentru punctele de întrerupere bazate pe elemente au început să implementeze CSS-in-JS utilizând cadre precum React. Deși s-au înregistrat progrese în alte domenii, această fractură a dezvoltatorilor de soluții a fost creată din soluții de utilizare generală pentru CSS sau JavaScript în mai multe biblioteci specifice pentru cadre. În timp ce rezultatele variază, caracteristicile principale pe care le obțin aceste instrumente sunt adesea foarte asemănătoare. În viitor, o standardizare a acestor tehnici asortate ar putea consolida o abordare a acestui tip de design receptiv care să fie aplicată pe orice site web sau orice instrument.
În timpul discuțiilor pe această temă cu Tommy Hodgins (un avocat al întrebărilor de elemente și creatorul de eqcss), oamenii sunt încă conștienți atât de "întrebări de element", cât și de conceptul separat de "interogări de containere". Consensul pare să fie împărțit în câteva domenii diferite:
Iată un alt exemplu în care pot schimba CSS pe baza lățimii videoclipului. Nu are nici o legătură cu dimensiunea ferestrei de vedere. pic.twitter.com/O6lbDBJvFf
- Wes Bos 🔥 (@wesbos) 6 octombrie 2017
Vreau Houdini. Cred că ne va permite să creăm concepte pe care browserele să le poată folosi pentru a deveni native.
- Snook (@snookca) 6 octombrie 2017
Vrei să faci o stropire în lumea web dev? Fiți cel care face o implementare de lucru a interogărilor containerelor cu Houdini. 🤹🏼♂️
- Chris Coyier (@chriscoyier) 10 octombrie 2017
Deci, ce este în lista de dorințe pentru dezvoltatori?
Imaginați-vă că ați putea scrie un plugin care să acționeze mai mult ca un patch de browser decât un plugin JavaScript. Ce ar fi dacă ați avea acces la injectarea propriei logici în modul în care un browser analizează, vopsește și redă pagini? Ce lucruri ați putea "să predați" browserul în loc să vă bazați pe logica din partea de sus a paginii pentru a calcula?
În prezent, suntem blocați de modul în care un browser procesează CSS, dar cu Houdini speranța este că vom avea capacitatea de a rearanja și de a prioriza, astfel încât să putem calcula valorile folosind abordări inteligente sau să controlam randarea pentru a ascunde defectele. JavaScript și API-urile CSS Object Model oferă CSS același tip de acces, control și putere pe care API-urile JavaScript și DOM oferă HTML-ului. Potrivit lui Tab Atkins, Houdini folosește de asemenea logica AP Typed OM și Parser API și acestea sunt tehnologiile care stau la baza pentru setările At-Rules personalizate, permițându-vă să specificați regulile elementului de interogare în foaia de stil și să le manipulați de JavaScript.
Există un site dedicat exclusiv monitorizării progresului său la ishoudinireadyyet.com, dar între timp, să luăm în considerare și alte soluții potențiale.
Folosind iframe pentru a înfășura elemente este o abordare inteligentă cu siguranță, dar, din păcate, încă nu este o soluție adevărată a problemei; mai mult un hack creativ. Citiți mai multe despre acest truc din blogul lui Tab Atkins.
Deși nu este stabilizat în formularul de specificații, această proprietate este menită să fie utilă în paginile care conțin multe widget-uri independente. Documentele afirmă că pot fi utilizate pentru a împiedica modificarea de către alte site-uri a unei reguli CSS a unui widget. O valoare de proprietate a strict sugerează că poate evita multe dintre problemele de interogare a containerelor, dar aceasta nu este întreaga soluție; doar o piesă a puzzle-ului.
O problemă majoră privind interogările containerelor este aceea că copiii și conținutul acestora poate sa au un efect asupra dimensiunii containerului. Acest lucru poate fi evitat teoretic prin utilizarea unui CSS, dar să analizăm problema care provoacă această dependență între elemente.
Aruncați o privire la următoarea discuție a lui Dan Tocchini (poate doriți să începeți videoclipul de la ora 10:00, deoarece Vimeo nu permite timbre).
De ce nu poate fi un element receptiv la dimensiunea sa? Dependențele ciclice. Iată o imagine redată din videoclipul de mai sus pentru a clarifica:
Fiecare casetă depinde de constrângerile cutiei sale (lăţime în acest caz), și aici apar dependențele ciclice. Există o relație constantă între aceste elemente legate care apare în mod natural. Acest tip de comportament există de asemenea cu
:planare evenimente explicate de Tommy Hodgins în acest videoclip.
Relațiile ciclice sunt în cazul în care o bucată mare de oameni care folosesc termenul "interogare container" se blochează deoarece:
Vestea bună este că browserele încep să prezinte unele dovezi de lucru în jurul acestor probleme, după cum sa discutat anterior cu Houdini.
Se întâmplă să existe un spec CSS Element Queries (vis) de Tommy Hodgins; și în timp ce doar un spec de vis, este foarte impresionant lungimile luate pentru a pune de fapt cuvinte și sugestii la conversație. El a compilat, de asemenea, un site care afișează dezvoltatorii care lucrează la interogări în containere, denumiți în mod corespunzător "Cine lucrează la interogările containerelor".
După toate cercetările mele, încă mai rămân întrebându-mă de ce majoritatea comunității noastre nu se construiesc în acest fel când putem? Am avut capacitatea de a construi acest mod înainte de CSS @mass-media a fost acceptat în browser, dar se pare că am fost retrași. Am plecat de la a nu avea nici o idee despre "cele mai bune practici receptive", să descoperim cum să obținem diferite rezultate folosind @mass-media; și care se răspândeau ca focul sălbatic. Articolele care discută aspectul de răspuns "Media Query-free response" folosind modele inteligente de afișare, cum ar fi Flexbox și Grid, ilustrează faptul că avem un timp dificil de divorțare a aspectului receptiv față de interogările media.
Consultați această prezentare a lui Eric Portis (Conține excitementul dvs.) în care discută acest lucru; cu atât de multe obstacole, cum avansăm platforma web în ansamblu?
Iată câteva sonde obișnuite pe care le veți auzi cu privire la întrebările de elemente:
nu 👏 tu 👏🏻 îndrăznești 👏🏼 soluționa 👏🏽 pentru 👏🏾 javascript 👏🏿 interogări containere
- Zach LeatHERMAN 🎃⬆⌨ (@zachleat) 6 octombrie 2017
Cred că soluțiile intl vor fi bazate pe JS și acelea vor informa API-urile CSS numai. Nu ar trebui să ignorăm soluțiile tmp doar pentru că au nevoie de JS.
- Phil Walton (@philwalton) 6 octombrie 2017
Se simte ca Houdini poate uneori să fie o modalitate de a spune "nu ne putem deranja să ne pierdem timpul cu asta, așa că hai să-i lăsăm să-i dau seama"
- Sara Soueidan 🐦 (@SaraSoueidan) 6 octombrie 2017
După cum am experimentat în cariera mea, dezvoltatorii au exprimat rar probleme utilizând JavaScript pentru a adăuga suport pentru @mass-media cu IE8 pentru că am solicitat JavaScript pentru a adăuga putere de styling în care lipsesc browserele. Cu toate acestea, folosind JavaScript deja în browser pentru a îmbunătăți CSS? Aceasta este erezia pentru mulți; chiar și unii dintre cei care sunt total fericiți folosind JavaScript pentru a asambla HTML.
Ideile menționate în secțiunile anterioare permit dezvoltatorilor să lucreze cu propria lor idee, dar trebuie să începem să ne întâlnim mai frecvent, să comparăm notele, să găsim o abordare standard și să o blocăm. Din punct de vedere personal, nu vom putea divortează JavaScript din CSS atunci când vine vorba de întrebări de element, așa că trebuie să-l îmbrățișăm. Oricine așteaptă o abordare pură a CSS ar putea fi la depoul de tren pentru mulți, mulți ani care vor veni.
Folosiți interogări de elemente în propria dvs. activitate? Elementele de întrebare ale unui element sunt o cauza pierdută datorită punctelor de vedere foarte avizate? Sper ca această discuție să ajute la luarea în considerare a gândirii care va permite JavaScriptului să aibă un loc la masă, astfel încât să putem construi componente excepțional de flexibile pentru webul în continuă schimbare. Ca întotdeauna, vă rugăm să postați gândurile dvs. în secțiunea de comentarii și fericit de codificare.
O mare mulțumire pentru Tommy Hodgins pentru timpul și cunoștințele sale valoroase pe această temă și, de asemenea, pentru toată munca sa, ținând cont de acest subiect sensibil la comunitate.
Accentsconagua