Cum se poate utiliza componente web receptiv astăzi

Un cuplu de ani în urmă, am auzit prima dată despre componentele web (Web Components). La început, am într-adevăr interesat de acest lucru, dar de îndată ce hype din jurul lor potolit, au zburat imediat din cap. Dar, după cum sa dovedit, a trecut recent o mutare interesantă, și sprijinul acestei tehnologii a crescut în mod semnificativ. componente web Responsive, în special, sunt concepute pentru a simplifica abordarea noastră de design receptiv. Cum sună promițător!






Aici sunt patru puncte, ceea ce este în valoare de lectură pentru orice dezvoltator, înainte de a începe să utilizați această tehnologie:

• suport de tehnologie;
• lucru cross-browser;
• Abilitatea de a se adapta la mediul proiectului specific;
• Abordarea modulară.

În acest articol ne vom uita la fiecare dintre aceste puncte separat.

Ce este Web Components?

De fapt, aceasta este tehnologia din caietul de sarcini W3, care vă permite să creați propriile elemente HTML. Daca pur si simplu nu au auzit nimic despre ea, este recomandabil să citiți acest articol. ca unii termeni pe care le voi folosi, necesită cel puțin o înțelegere de bază.

De ce aș vrea să le folosească?

Web Components vă permit să creați o dată un element al interfeței grafice și apoi folosi oriunde. Este ideal pentru proiecte, cum ar fi un ghid de stil de viață (sau styleguide), în cazul în care doriți să creați o bibliotecă cu o singură sursă de adevăr pentru fiecare componentă (în cazul în care fiecare componentă intră doar în propriile sale reguli unice de conduită și afișare). Această abordare presupune un cod mai scurt, minimalistă, precum și disponibilitatea gata-UI-componente, link-uri la care sau echipa ta poate adăuga la interfața ușor curentă.

Un alt mare avantaj al folosirii componentelor din Web - este o oportunitate de a împacheta unitatea dvs. și să le împărtășiți cu alți dezvoltatori / proprietari de site-uri. De fapt, utilizatorul rămâne doar să adăugați declarația de import de pe site-ul său:

Și apoi utilizați elementul tag personalizat, care este definit pentru o componentă Web dată. Deci, utilizatorul poate adăuga la site-ul dvs. ca piese personalizate Web așa cum vrea el. De exemplu, pentru forma de abonament, puteți utiliza tag-ul - . astfel, introducerea acesteia într-una sau mai multe locații de pe pagină. Desigur, înainte de a face acest lucru, trebuie să vă asigurați că ați creat o componentă web este flexibil și va lucra în mod adecvat într-un număr de dispozitive diferite și dimensiuni de ecran.

Trecerea de la teorie la practica

Eu cred că cel mai bun mod de a explica ceva - este de a arăta prin exemplu. Așa că am continua povestea mea va fi în fișa postului cu formularul de subscriere de mai sus. Acesta este un exemplu excelent de o interfață de utilizator care nu se schimba prea mult intre diferite site-uri și implementări.

De exemplu, să ia o formă pe care l-am creat mai devreme:

În interiorul șablonul am creat unele aspect de bază pentru forma:

marcare și stilurile sunt ascunse în interiorul componentei de web prin utilizarea oportunităților oferite de caietul de sarcini Shadow DOM. Această metodă de organizare un fel de încapsulare, care îmi oferă posibilitatea de a utiliza eticheta și intrare selectorii liber, fără teama de influență asupra stilului lor de site-ul părinte.

Din motive de claritate și concizie, nu voi descrie stilurile de scriere, altele decât cele care am folosit pentru a afișa marcare. Am folosit o combinație a proprietăților float: left și afișare: tabel pentru această interfață și pentru a evita ruperea la orice lățime.

Pe parcursul lecției, voi folosi capturi de ecran pentru a prezenta munca noastră:

Acum, că am terminat, să ne uităm la unele dintre tehnicile de realizare a adaptabilității.

anchete mass-media

Abordarea clasică, pe care știm cu toții și dragoste, doar lucrări bune ca și componente web receptiv. Puteți utiliza interogări media din șablon dacă doriți să creați orice puncte de oprire prestabilite. Pe de altă parte, puteți utiliza „cârlige“ (de exemplu, crearea de clase) și aplicarea acestora la container părinte, lăsând astfel utilizatorului să facă propria lor decizie. În cazul nostru, tot ce avem nevoie - este de a crea un punct de referință, ajungând să anulăm proprietatea float pentru copii și punîndu-le la o lățime de 100%.

Cu toate acestea, unele interogări mass-media nu va fi suficient.

Acest lucru se datorează faptului că partea Web nu vede propriile frontiere - nu are nici o idee de context.

Dar oprește-te! Este întregul punct al părților Web în greșit, astfel încât să puteți lipi în orice locație de pe site-ul, în cazul în care acestea vor fi ușor de a lucra cu? Ei bine, este clar că componenta de web am creat mai devreme, astfel că nu va face, dar există unele tehnici pe care le putem folosi pentru a atinge acest obiectiv.

Flexbox-hack

Din nou, codul de mai jos conține numai stilurile pe care le-am folosit pentru a afișa marcare.

Setarea afișajului containerului părinte: flex și flex-wrap: folie. filiale .form__item vystroyutsya unu-la-unu, un bloc de bloc cu, dar avem încă nevoie să definim câteva reguli, astfel încât în ​​cazul în care containerul este prea mic, copiii sar de pe unul sub altul.

În interiorul .form__item am folosit pe lista scurtă la proprietăți - flex: 1 0 320px. care poate fi extins ca: flex-cresc: 1. flex-shrink: 0. Flex-bază: 320px. Instalarea flex-wrap: folie. am stabilit că lățimea elementului nostru este mai mică decât cea specificată în 320px, în timp ce specificând proprietatea flex. permitem un membru să crească și să ocupe spațiul rămas pe linie.

Aceeași abordare am folosit pentru elementele de intrare și de etichetare. Valoarea lor totală este egală cu curbeze 320px, ceea ce înseamnă că acestea vor fi afișate în mod adecvat și într-un recipient mai mic.

Să vedem ce a cauzat modificările făcute de noi:

Mult mai bine! Cu toate acestea, acest lucru nu este singura modalitate de a rezolva această problemă, ei sunt nenumărate.

Interogările legate de elementele Web

Ideea de a folosi interogări relevante pentru anumite elemente - aceasta este ceea ce vă permite să imite funcționalitatea interogările media la nivelul elementului de web - ceea ce este foarte convenabil atunci când crearea de componente web receptiv. Pur și simplu pune, imaginați-vă dacă ați avut ocazia de a scrie ceva pe similaritatea acest lucru în css dumneavoastră:

Este foarte aproape de ceea ce putem face cu ajutorul acestei tehnologii. Destul de promițător, nu-i așa?

Cu toate acestea, în evitarea buclelor infinite, această tehnologie nu este disponibilă în browser nativ. Dar există încă destul de plugin-uri interesante pentru aceste scopuri.

Cu o combinație de unul dintre aceste plug-in-uri, cu un mic fragment de cod CSS-am obținut același rezultat ca și folosind flexbox.

Unul dintre lucrurile uimitoare putem oferi pentru clienți componenta nostru web receptiv - un API atributele elementului. De exemplu, puteți seta un atribut numit aspect. definind dimensiunile componentei în acest context :. „mic“ sau „mare“ Și atunci acesta poate fi utilizat după cum urmează:

Astfel, vom crea un cârlig care determină CSS proprietăți suplimentare.

In Shadow DOM container caietul de sarcini care cuprinde un element, definit ca: gazdă. Un exemplu ar arăta astfel:

Abordările menționate mai sus pot fi folosite pentru a crea orice interfață de utilizator de web, dar ele sunt deosebit de bun la crearea de componente web receptiv.

Dacă nu ați încercat să utilizați componentele Web, am foarte recomandăm să faceți acest lucru. Din păcate, toate posibilitățile acestei tehnologii sunt în prezent disponibile numai în Chrome și Opera, dar alți furnizori de browser nu sunt ședinței inactiv, și sprijin larg pentru această tehnologie nu este departe.