Share
I den här handledningen fortsätter vi vår diskussion om elementfrågor, och vi vänder oss till att bygga en återanvändbar responsiv komponent.
För att återskapa, gör elementfrågor oss att forma ett element baserat på behållarens egenskaper. bredden, höjden och så vidare. Men det är värt att påpeka att elementfrågor är långt ifrån att bli en CSS-standard, och vi måste nog vänta ett par år innan det händer.
Så för tillfället måste vi tillgripa ett JavaScript-bibliotek för att efterlikna liknande funktioner, som EQCSS.
EQCSS är ett JavaScript-bibliotek som utvecklats av Tommy Hodgins. Låt oss titta på några anledningar till att välja detta bibliotek.
Till att börja med ger EQCSS oss en liknande syntax till CSS3 Media Queries standard med @element deklaration. Detta fungerar inom ett stylesheet eller inbäddad i en stil element, därför känner sig mycket intuitivt. I den följande koden staplar vi till exempel menyerna i navigeringen för att hantera navigeringsplatsens (inte visningsportens) krympande utrymme.
.navigering .menu display: inline-block; @ element ".navigation" och (maxbredd: 480px) .navigation .menu display: block;
EQCSS erbjuder mer än bara bredd eller höjdbaserade frågor. Det ger också räknebaserade frågor, vilket ger oss möjlighet att tillämpa stilregler baserat på innehållet. antalet tecken, linjer och element som ingår.
.tweetContent // textarea background-color: #eaeaea; @ element ".tweetContent" och (min-tecken: 100) .tweetContent bakgrundsfärg: # ffc04d; // orange @ element ".tweetContent" och (min-tecken: 140) .tweetContent bakgrundsfärg: # FF3333; // röd färg: #fff;
Den stöder varierande CSS-enheter inklusive senaste tillägg som vw, vh, Vmin, och vmax.
Och för dem som fortfarande behöver stöd för IE8, ger EQCSS en polyfill.
EQCSS är tillgänglig via Bower, NPM, CDNJS och direkt från förvaret i Github. Välj vilket uttag som passar din projektutplacering, och se till att den är laddad på din sida.
Nu, låt oss bygga något!
Vi ska bygga en användarprofil UI-komponent, och vi börjar med HTML-markupen.
Louie R.
Midgård
En utvecklare och en frekvent StackOverflow-läsare. Född, uppvuxen och levande på webben. Jag pratar tre språk: HTML, CSS och JavaScript.
Vår komponent består av en avatarbild, användarnamnet, var de bor, en kort biografi och en "följ" -knapp à la Twitter och Medium.
Först ställer vi in UI-komponentbehållarens bredd och visningsläge till böja. Flexbox-syntaxen i följande kodfragment är oförberedd för tydlighetens skull, så det fungerar bara i de senaste webbläsarna. Om det behövs kan du alltid använda Autoprefixer för att generera äldre syntax samt leverantörs prefix för att stödja äldre webbläsare.
.användarprofil bredd: 100%; max bredd: 640px; display: flex;
Därefter bestämmer vi breddandelen mellan avatarbilden och profilöversikten som innehåller namn, plats och kortbiografi.
.användarprofil__avatar bredd: 25%; max bredd: 120px; flex: 1 1 120px; .user-profile__summary width: 75%; stoppning-vänster: 25px; typsnittstorlek: 1em;
Vi justerar också lite skriftstorleken på användarnamnet och platsen.
.användarprofilnamn font-family: "Montserrat", sans-serif; font-size: 1.3125em; .user-profile__location font-size: 0.87em;
Det här är de primära stilreglerna för att visa hur elementfrågor fungerar. De stilistiska reglerna som bakgrundsfärg, text Färg, och box-shadow är helt upp till din smak. I mitt fall verkar det som följer.
Att använda elementfrågor med EQCSS är ganska intuitivt. Som nämnts liknar syntaxen CSS-mediafrågor. Först, som vi visade tidigare, betecknar vi en elementfråga med @element följt med en eller flera elementväljare och fråga villkoret såsom bredden, höjden, rullningsläge etc. av elementet.
@ element "rubrik, nav, sidfot och (min bredd: 100px) och (minhöjd: minhöjd: 300px) // Style rules
Vi kan nu distribuera det till vår UI-komponent, till exempel, ändra storlek på elementets bredd i behållaren och justera teckenstorleken när behållarens bredd reduceras.
@ element '.user-profil' och (maxbredd: 540px) .user-profil font-size: 0.75em; .user-profile__avatar maxbredd: 80px;
Dessutom vill vi att användargränssnittskomponenten är återanvändbar och viktigare att presentera i någon del av webbplatsen oavsett den tillgängliga bredden. Sidopanelen, till exempel, där dess bredd är vanligtvis mindre än 400px. I det här fallet, eftersom bredden är mycket smalare måste vi justera hela komponentens layout.
@ element '.user-profil' och (maxbredd: 380px) . användarprofil padding-top: 30px; vadderande-botten: 30px; display: block; text-align: center; .user-profile__avatar, .user-profile__summary width: 100%; .user-profile__avatar margin-right: auto; marginalbotten: 20px; marginal-vänster: auto; .user-profile__summary padding-left: 0;
I denna handledning har vi byggt en UI-komponent för att visa en användarprofil. Det är lyhörd, ändras enligt behållaren istället för till utsikten. Du kan titta på demosidan och se till att layouten ändras oberoende av visningsportstorleken. Propert!
Detta är bara ett exempel. Det finns en handfull andra exempel som andra har pekat på var elementfrågor är meningsfulla.
Kom ihåg; Syntaxen i denna handledning är helt baserad på EQCSS-huruvida W3C-arbetsgruppen kommer att anta det eller skapa egna är obestämda än. Ändå ser jag fram emot att denna idé antas och revolutionerar hur vi bygger webbplatser igen.
Accentsconagua
