Share
In deze tutorial gaan we verder met onze discussie over elementquery's, waarbij we onze hand richten op het bouwen van een herbruikbare responsieve component.
Om samen te vatten stellen elementquery's ons in staat een element te vormen op basis van de kenmerken van de container; de breedte, hoogte enzovoort. Maar het is de moeite waard om erop te wijzen dat elementvragen al lang niet meer een CSS-standaard worden, en we zullen waarschijnlijk nog een paar jaar moeten wachten voordat dat gebeurt.
Voorlopig zullen we dus een JavaScript-bibliotheek moeten gebruiken om soortgelijke functionaliteit, zoals EQCSS, te emuleren.
EQCSS is een JavaScript-bibliotheek die is ontwikkeld door Tommy Hodgins. Laten we enkele redenen bekijken om voor deze bibliotheek te kiezen.
Om te beginnen geeft EQCSS ons een vergelijkbare syntaxis als de CSS3 Media Queries-standaard bij de @element verklaring. Dit werkt binnen een stylesheet of ingesloten in een stijl element, daarom voelend zeer intuïtief. In de volgende code, bijvoorbeeld, stapelen we de menu's in de navigatie om het hoofd te bieden aan de krimpende ruimte van de navigatie (niet die van de viewport).
.navigatie .menu display: inline-block; @element ".navigation" en (max-width: 480px) .navigation .menu display: block;
EQCSS biedt meer dan alleen zoekopdrachten op basis van breedte of hoogte. Het biedt ook op aantallen gebaseerde zoekopdrachten, die ons de mogelijkheid geven stijlregels toe te passen op basis van de inhoud; het aantal tekens, lijnen en elementen bevat.
.tweetContent // textarea background-color: #eaeaea; @element ".tweetContent" en (min-tekens: 100) .tweetContent background-color: # ffc04d; // orange @element ".tweetContent" en (min-tekens: 140) .tweetContent background-color: # FF3333; // rode kleur: #fff;
Het ondersteunt verschillende CSS-eenheden, waaronder recente toevoegingen zoals vw, vh, Vmin, en vmax.
En voor diegenen die nog steeds ondersteuning voor IE8 nodig hebben, biedt EQCSS een polyfill.
EQCSS is beschikbaar via Bower, NPM, CDNJS en rechtstreeks vanuit de repository in Github. Kies voor welke uitgang uw projectimplementatie past en zorg ervoor dat deze op uw pagina wordt geladen.
Laten we nu iets bouwen!
We gaan een gebruikersprofiel UI-component maken en we beginnen met de HTML-markup.
Louie R.
Midden Aarde
Een ontwikkelaar en een frequente StackOverflow-lezer. Geboren, opgevoed en live op het web. Ik spreek drie talen: HTML, CSS en JavaScript.
Ons onderdeel bestaat uit een avatarafbeelding, de gebruikersnaam, waar ze wonen, een korte biografie en een knop "Volgen" à la Twitter en medium.
Eerst stellen we de UI-componentcontainerbreedte en de weergavemodus in op buigen. De syntaxis van de flexbox in het volgende codefragment is omwille van de duidelijkheid niet voorbereid, dus deze werkt alleen in de nieuwste browsers. Indien nodig kunt u altijd Autoprefixer gebruiken om oudere syntaxis en de voorvoegsels van leveranciers te genereren om oudere browsers te ondersteunen.
.gebruikersprofiel width: 100%; maximale breedte: 640 px; weergave: flex;
Vervolgens stellen we de breedteverhouding in tussen de avatarafbeelding en de profielsamenvatting met de naam, locatie en korte biografie.
.user-profile__avatar width: 25%; maximale breedte: 120 px; flex: 1 1 120px; .user-profile__summary width: 75%; padding-links: 25px; lettergrootte: 1em;
We passen ook de lettergrootte van de gebruikersnaam en de locatie enigszins aan.
.user-profile__name font-family: 'Montserrat', sans-serif; font-size: 1.3125em; .user-profile__location font-size: 0.87em;
Dit zijn de primaire stijlregels om aan te tonen hoe elementquery's werken. De stilistische regels zoals achtergrond kleur, tekst kleur, en box-shadow zijn geheel naar uw smaak. In mijn geval lijkt het als volgt.
Element-query's gebruiken met EQCSS is vrij intuïtief. Zoals eerder vermeld, lijkt de syntaxis sterk op CSS-mediaquery's. Ten eerste, zoals we eerder hebben laten zien, duiden we een elementquest aan @element gevolgd door een of meer elementselectoren en de queryvoorwaarde, zoals de breedte, de hoogte, schuifpositie, enz. van het element.
@element 'header, nav, footer' en (min-width: 100px) and (min-height: min-height: 300px) // stijlregels
We kunnen het nu in onze UI-component implementeren, bijvoorbeeld om de breedte van het element in de container aan te passen en de lettergrootte aan te passen wanneer de breedte van de container wordt verkleind.
@element '.user-profile' en (max-width: 540px) .user-profile font-size: 0.75em; .user-profile__avatar max-width: 80px;
Verder willen we dat de UI-component herbruikbaar is en, wat nog belangrijker is, presentabel is in elk deel van de website, ongeacht de beschikbare breedte. De zijbalk, bijvoorbeeld, waar de breedte meestal kleiner is dan 400px. In dit geval, omdat de breedte veel smaller is, moeten we dat doen uitlijnen de volledige lay-out van het onderdeel.
@element '.user-profile' en (max-width: 380px) .user-profile padding-top: 30px; padding-bottom: 30px; weergave: blok; text-align: center; .user-profile__avatar, .user-profile__summary width: 100%; .user-profile__avatar margin-right: auto; margin-bottom: 20px; marge links: auto; .user-profile__summary padding-left: 0;
In deze zelfstudie hebben we een UI-component gebouwd om een gebruikersprofiel weer te geven. Het is responsief en verandert naargelang de container in plaats van naar de viewport. U kunt de demopagina bekijken en zien dat de lay-out verschuift, ongeacht de viewport-grootte. Netjes!
Dit is slechts een voorbeeld. Er zijn een handvol andere voorbeelden die anderen hebben aangegeven waar elementvragen zinvol zijn.
Onthouden; de syntaxis in deze zelfstudie is volledig gebaseerd op EQCSS - of de W3C-werkgroep het gaat gebruiken of zelf een maken, is nog niet beslist. Niettemin kijk ik er naar uit om dit idee te adopteren en een nieuwe revolutie teweeg te brengen in de manier waarop we websites opnieuw bouwen.
Accentsconagua
