Share
În acest tutorial vom continua discuția noastră cu privire la întrebările de element, transformând mâna noastră în construirea unei componente refolosibile.
Pentru a recapita, interogările de elemente ne permit să formăm un element bazat pe caracteristicile containerului său; lățimea, înălțimea și așa mai departe. Dar merită să subliniem faptul că interogările despre elemente sunt departe de a deveni un standard CSS și probabil că va trebui să așteptăm câțiva ani înainte de aceasta.
Deci, pentru moment, va trebui să recurgem la o bibliotecă JavaScript pentru a emula funcții similare, cum ar fi EQCSS.
EQCSS este o bibliotecă JavaScript dezvoltată de Tommy Hodgins. Să ne uităm la câteva motive pentru a opta pentru această bibliotecă.
Pentru început, EQCSS ne dă o sintaxă similară standardului CSS3 Media Queries cu standardul @element declaraţie. Acest lucru funcționează într-o foaie de stil sau încorporată într-o stil element, simțind astfel foarte intuitiv. În următorul cod, de exemplu, stocăm meniurile din navigație pentru a face față spațiului de micșorare a navigației (nu a ferestrei de vizualizare).
.navigare .menu display: inline-block; @element ".navigation" și (max-width: 480px) .navigation.menu display: block;
EQCSS oferă mai mult decât interogări de lățime sau înălțime. De asemenea, oferă interogări bazate pe numărare, care ne dau puterea de a aplica reguli de stil bazate pe conținut; numărul de caractere, linii și elemente conținute.
.tweetContent // textarea fundal-culoare: #eaeaea; @element ".tweetContent" și (min-caractere: 100) .tweetContent culoare-fundal: # ffc04d; // orange @element ".tweetContent" și (min-caractere: 140) .tweetContent culoare-fundal: # FF3333; // culoare roșie: #fff;
Sprijină diferite unități CSS, inclusiv adăugări recente cum ar fi vw, vh, Vmin, și Vmax.
Și pentru cei care încă mai au nevoie de suport pentru IE8, EQCSS oferă o polyfill.
EQCSS este disponibil prin Bower, NPM, CDNJS și direct din depozit în Github. Optați pentru oricare dintre prizele care se potrivesc cu implementarea proiectului dvs. și asigurați-vă că ați încărcat-o în pagină.
Acum, să construim ceva!
Vom construi o componentă UI de profil de utilizator și vom începe cu marcajul HTML.
Louie R.
Pământul mijlociu
Un dezvoltator și un cititor frecvent de StackOverflow. Născut, crescut și trăit pe Web. Vorbesc trei limbi: HTML, CSS și JavaScript.
Componenta noastră constă dintr-o imagine avatar, numele de utilizator, locul în care trăiesc, o scurtă biografie și un buton "Urmați" à la Twitter și Mediu.
Mai întâi, am setat lățimea containerului componentei UI și modul de afișare la contracta. Sintaxa flexbox din fragmentul de cod următor nu este prefixată din motive de claritate, deci va funcționa numai în cele mai recente browsere. Dacă este necesar, puteți oricând să utilizați Autoprefixer pentru a genera sintaxa mai veche, precum și prefixele furnizorilor pentru a sprijini browserele vechi.
.profilul utilizatorului width: 100%; max-width: 640px; afișaj: flex;
Apoi, setăm proporția de lățime dintre imaginea avatarului și rezumatul profilului care conține numele, locația și biografia scurtă.
.user-profile__avatar lățime: 25%; max-lățime: 120px; flex: 1 1 120px; .user-profil__summary lățime: 75%; padding-left: 25px; dimensiune font: 1em;
De asemenea, ajustăm ușor dimensiunea fontului pentru numele de utilizator și pentru locație.
.nume-utilizator nume-familie font-family: 'Montserrat', sans-serif; font-size: 1.3125em; .user-profil__locație font-size: 0.87em;
Acestea sunt regulile de stil primar pentru a demonstra modul în care funcționează interogările elementelor. Regulile stilistice, cum ar fi culoare de fundal, text culoare, și box-shadow sunt în întregime la gustul tău. În cazul meu, apare după cum urmează.
Utilizarea interogărilor de elemente cu EQCSS este destul de intuitivă. Așa cum am menționat, sintaxa seamănă foarte mult cu interogările mass-media CSS. Mai întâi, așa cum am arătat mai devreme, indicăm o interogare cu elemente @element urmat cu unul sau mai mulți selectori de elemente și condiția de interogare, cum ar fi lățimea, înălțimea, poziția de defilare, etc. a elementului.
@element "header, nav, footer" și (min-width: 100px) și (min-height: min-height: 300px)
Putem acum să o implementăm în componenta noastră UI, de exemplu, pentru a redimensiona lățimea elementului în container și pentru a ajusta dimensiunea fontului atunci când lățimea recipientului este redusă.
@element '.user-profile' și (max-width: 540px) .user-profile font-size: 0.75em; .user-profil__avatar max-width: 80px;
Mai mult, dorim ca componenta UI să fie reutilizabilă și, mai important, să fie prezentă în orice parte a site-ului, indiferent de lățimea disponibilă. Bara laterală, de exemplu, unde lățimea ei este de obicei mai mică decât 400px. În acest caz, deoarece lățimea este mult mai îngustă, trebuie să realinia întreaga structură a componentei.
@element '.user-profile' și (max-width: 380px) .user-profile padding-top: 30px; padding-bottom: 30px; afișare: bloc; text-align: centru; .user-profile__avatar, .user-profile__summary lățime: 100%; .user-profil__avatar margin-right: auto; margin-bottom: 20px; margin-stânga: auto; .user-profil__summary padding-left: 0;
În acest tutorial am construit o componentă UI pentru a afișa un profil de utilizator. Este receptiv, schimbându-se în funcție de containerul său în loc de portul de vizualizare. Puteți să vă uitați la pagina demo și să vedeți că aspectul se schimbă indiferent de mărimea ferestrei de vizualizare. ordinat!
Acesta este doar un exemplu. Există o serie de alte exemple pe care altele le-au subliniat în cazul în care întrebările elementului au sens.
Tine minte; sintaxa din acest tutorial se bazează în întregime pe EQCSS - dacă Grupul de Lucru W3C îl va adopta sau va crea propriul său este încă nedecis. Cu toate acestea, aștept cu nerăbdare să adoptăm această idee și să revoluționăm modul în care construim site-uri web din nou.
Accentsconagua
