Share
I denne opplæringen fortsetter vi diskusjonen om elementspørsmål, og gjør vår hånd til å bygge en gjenbrukbar responsiv komponent.
For å gjenopprette, gjør elementspørsmål oss til å forme et element basert på dets containers egenskaper; bredden, høyden og så videre. Men det er verdt å påpeke at elementspørsmål er langt fra å bli en CSS-standard, og vi må sannsynligvis vente på et par år før det skjer.
Så for nå må vi ty til et JavaScript-bibliotek for å etterligne lignende funksjoner, som EQCSS.
EQCSS er et JavaScript-bibliotek utviklet av Tommy Hodgins. La oss se på noen grunner til å velge dette biblioteket.
Til å begynne med gir EQCSS oss et lignende syntaks til CSS3 Media Queries standard med @element erklæring. Dette fungerer i et stilark eller innebygd i en stil element, derfor føler seg veldig intuitivt. I følgende kode, for eksempel, stabler vi menyene i navigasjonen for å takle navigasjonens (ikke visningsportens) krympende plass.
.navigasjon .menu display: inline-block; @ element ".navigasjon" og (maksimal bredde: 480px) .navigasjon .menu display: block;
EQCSS tilbyr mer enn bare bredde- eller høydebaserte søk. Det gir også tellebaserte søk, som gir oss muligheten til å bruke stilregler basert på innholdet; Antall tegn, linjer og elementer som er inneholdt.
.tweetContent // textarea background-color: #eaeaea; @element ".tweetContent" og (min-tegn: 100) .tweetContent bakgrunnsfarge: # ffc04d; // orange @ element ".tweetContent" og (min-tegn: 140) .tweetContent bakgrunnsfarge: # FF3333; // rød farge: #fff;
Den støtter varierende CSS-enheter, inkludert nyere tillegg som vw, vh, Vmin, og vmax.
Og for de som fortsatt trenger støtte til IE8, gir EQCSS en polyfill.
EQCSS er tilgjengelig via Bower, NPM, CDNJS, og direkte fra depotet i Github. Velg for hvilket uttak som passer til prosjektets distribusjon, og sørg for at den er lastet inn på siden din.
La oss nå bygge noe!
Vi skal bygge en brukerprofil UI-komponent, og vi starter med HTML-oppslaget.
Louie R.
Midgard
En utvikler og hyppig StackOverflow-leser. Født, oppvokst og lever på nettet. Jeg snakker tre språk: HTML, CSS og JavaScript.
Vår komponent består av et avatarbilde, brukernavnet, hvor de bor, en kort biografi og en "Følg" -knapp à la Twitter og Middels.
Først setter vi UI-komponentbeholderbredden og skjermmodus til flex. Flexbox-syntaksen i følgende kodestykke er ubegrenset for klarhetens skyld, så det vil bare fungere i de nyeste nettleserne. Om nødvendig kan du alltid bruke Autoprefixer til å generere eldre syntaks, så vel som leverandørens prefikser for å støtte eldre nettlesere.
.brukerprofil bredde: 100%; maksimal bredde: 640px; display: flex;
Deretter angir vi breddeforholdet mellom avatarbildet og profiloppsummeringen som inneholder navn, sted og kort biografi.
.brukerprofil__avatar bredde: 25%; maksimal bredde: 120px; flex: 1 1 120px; .user-profile__summary width: 75%; polstring-venstre: 25px; skriftstørrelse: 1em;
Vi justerer også litt skriftstørrelsen til brukernavnet og stedet.
.brukerprofil__navn font-family: 'Montserrat', sans-serif; font-size: 1.3125em; .user-profile__location font-size: 0.87em;
Dette er de primære stilregler for å demonstrere hvordan elementspørsmål fungerer. De stilistiske regler som background-color, tekst farge, og box-shadow er helt opp til din smak. I mitt tilfelle ser det ut som følger.
Bruke element spørringer med EQCSS er ganske intuitivt. Som nevnt, syntaxen ligner nøyaktig CSS-medieforespørsler. For det første, som vi viste tidligere, betegner vi et elementssøk med @element fulgt med en eller flere elementvalgere og forespørselsbetingelsen som bredden, høyden, rulleposisjonen, etc. av elementet.
@element 'header, nav, footer' og (min bredde: 100px) og (min høyde: min høyde: 300px) // Style rules
Vi kan nå distribuere det til vår brukergrensesnitt, for eksempel å endre størrelsen på elementets bredde i beholderen og justere skriftstørrelsen når beholderbredden er redusert.
@element '.user-profil' og (maksimal bredde: 540px) .user-profil font-size: 0.75em; .user-profile__avatar maksimal bredde: 80px;
Videre vil vi at brukergrensesnittkomponenten skal kunne gjenbrukes, og enda viktigere presenteres i hvilken som helst del av nettstedet uavhengig av tilgjengelig bredde. Sidefeltet, for eksempel hvor bredden er vanligvis mindre enn 400px. I dette tilfellet, siden bredden er mye smalere må vi omstille hele oppsettet av komponenten.
@ element '.user-profil' og (maks bredde: 380px) .user-profil polstring-top: 30px; polstring-bunn: 30px; skjerm: blokk; tekst-align: center; .user-profile__avatar, .user-profile__summary width: 100%; .user-profile__avatar margin-right: auto; margin-bunn: 20px; margin-left: auto; .user-profile__summary padding-left: 0;
I denne opplæringen har vi bygget en UI-komponent for å vise en brukerprofil. Det er responsivt, endres i henhold til beholderen i stedet for til visningsporten. Du kan se på demo siden og se at layoutet skifter uavhengig av visningsportstørrelsen. Ryddig!
Dette er bare ett eksempel. Det finnes en rekke andre eksempler som andre har påpekt hvor elementsspørsmål er fornuftige.
Huske; Syntaxen i denne opplæringen er utelukkende basert på EQCSS-om W3C-arbeidsgruppen vil vedta det eller lage egne er ubestemte ennå. Likevel gleder jeg meg til at denne ideen blir vedtatt og revolusjonerende måten vi bygger nettsteder på igjen.
Accentsconagua
