Met behulp van de Weinig Bekende CSS element() Functie voor het Maken van een Minimap Navigator

0
56

W3C CSS werkgroep geeft vaak ons briljante CSS functies te experimenteren. Soms komen we iets zo cool dat kleeft een grijns op ons gezicht, maar het verdwijnt meteen, omdat we denken, “dat is geweldig, maar wat moet ik ermee doen?” Het element() functie is, zoals dat voor mij. Het is een CSS-functie neemt een element op de pagina en presenteert het als een afbeelding weergegeven op het scherm. Indrukwekkend, maar quixotic.

Hieronder is een eenvoudig voorbeeld van hoe het werkt. Het is momenteel alleen ondersteund in Firefox, die ik ken, is een teleurstelling. Maar de stok met me en zie hoe nuttig het kan zijn.

<div id=”element”>
<p>Hallo Wereld! hoe gaat het met u?<br>ik ben niet te doen, dat<br>geweldig. Kreeg een koud &#x1F637;</p>
</div>
<div id=”eleImg”></div>
#eleImg {
achtergrond: -moz-element(#ele) no-repeat center / bevatten; /* de verkoper voorafgegaan */
}

Het element () – functie (met browser-prefix) neemt de id-waarde van het element zal vertalen in een beeld. De uitgang ziet er identiek zijn aan het uiterlijk van het gegeven element op het scherm.

Als ik denk van element()’s-uitgang, denk ik aan het woord voorbeeld. Ik denk dat dat het type van de use case die het beste uit: waar kunnen we een voorbeeld van een element, voordat het weergegeven op de pagina. Bijvoorbeeld, de volgende dia in een diavoorstelling, de verborgen tabblad, of de volgende foto in een galerie. Of… een minimap!

Een minimap is een klein voorbeeld van een lang document of pagina, meestal weergegeven met op de ene kant van het scherm of een ander en gebruikt om te navigeren naar het overeenkomstige punt op dat document.

U hebt gezien dit in de code-editors zoals Sublieme Tekst.

De minimap is er aan de rechterkant.

CSS element() is handig bij het maken van de “voorbeeld” een deel van de minimap.

Beneden is de demo voor de minimap, en we maken een wandeling door de code na. Nochtans, adviseer ik u zie de volledige pagina demo omdat minimaps zijn echt nuttig om de lange documenten op grote schermen.

Als u gebruikmaakt van een smartphone, vergeet niet dat, volgens de theorie van de relativiteit, minimaps krijgt super mini mini-schermen; en nee, dat is niet echt wat de relativiteitstheorie zegt eigenlijk, maar je mijn punt.

Zie de Pen Minimap met CSS element() & HTML input bereik door Preethi Sam (@rpsthecoder) op CodePen.

Als je het ontwerpen van de kaart voor de hele pagina, zoals voor een single page website, kunt u gebruik maken van de hoofdtekst van het document element voor de afbeelding. Anders, gericht op de belangrijkste content element, zoals het artikel in mijn demo, werkt ook.

<div id=”minimap”></div>
<div id=”artikel”> <!– inhoud –> </div>
#minimap {
achtergrond: rgba(254,213,70,.1) -moz-element(#artikel) no-repeat center / bevatten;
position: fixed; right: 10px; top: 10px; /* style */
}

Voor de minimap de achtergrond van de afbeelding, voeden we het id van het artikel als de parameter van het element() en, zoals met de meeste achtergrond afbeeldingen, het is vormgegeven om niet te herhalen (geen herhaling) en passen binnen (bevatten) en in het midden van het vak (midden) waar deze wordt weergegeven.

De minimap is ook vast aan het scherm in de rechterbovenhoek van de viewport.

Nadat de achtergrond is klaar, we kunnen het toevoegen van een regelaar op de top van en het zal dienen voor het bedienen van de minimap te schuiven. Voor de slider, ging ik met input: bereik, de originele, informele en platte HTML-slider.

<div id=”minimap”>
<input id=”minimap-bereik” type=”range” max=”100″ value=”0″>
</div>
#minimap-bereik {
/* Het roteren van de standaard horizontale schuifregelaar naar verticaal */
transformeren: translateY(-100%) draaien(90deg);
transform-herkomst: linksonder;
background-color: transparent; /* style */
}

#minimap-bereik::-moz-range-duim {
background-color: dodgerblue;
cursor: pointer; /* style */
}

#minimap-bereik::-moz-range-track{
background-color: transparent;
}

Niet geheel ongecompliceerd, omdat het wel nodig wat tweaken. Ik draaide de schuifregelaar rechtop, afgestemd op de minimap en het toepassen van bepaalde stijl te zijn pseudo-elementen (in het bijzonder de duim en spoor) voor het vervangen van de standaard stijlen. Nogmaals, we zijn alleen bezorgd over Firefox op dit moment aangezien we te maken met een beperkte ondersteuning.

Alles wat links is te koppelen aan de slider waarde aan een overeenkomstige ga wijs op de pagina als de waarde is aangepast door de gebruiker. Dat duurt een strooi van JavaScript, dat er als volgt uitziet:

onload = () => {
const minimapRange = document.querySelector(“#minimap-range”);
const minimap = document.querySelector(“#minimap”);
const artikel = document.querySelector(“#artikel”);
const $ = getComputedStyle.bind();

// Voor de minimap bereik breedte, vermenigvuldigd met het artikel in de hoogte, dan delen door het artikel breedte, alle in pixels.
minimapRange.stijl.breedte = minimap.stijl.hoogte =
parseInt($(minimapRange).de breedte) * parseInt($(artikel).hoogte) / parseInt($(artikel).de breedte) + “px”;

// Wanneer het bereik verandert, gaat u naar het relatieve percentage van de van artikel hoogte
minimapRange.onchange = evt =>
scrollTo(0, parseInt($(artikel).hoogte) * (evt.doel.waarde / 100));
};

Het dollar-teken ($) is slechts een alias voor getComputedStyle(), die de methode om de CSS-waarden van een element.

Het is vermeldenswaard dat de breedte van de minimap is al in de CSS, zodat we echt alleen nodig voor de berekening van de hoogte. Dus, we te maken hebben met de hoogte van de minimap en de breedte van de schuifbalk, want, vergeet niet, de slider is eigenlijk gedraaid.

Hier is hoe de vergelijking in het script was bepaald, te beginnen met de variabelen:

  • x1 = hoogte van de minimap (evenals de breedte van de schuifbalk in)
  • y1 = breedte van de minimap
  • x2 = hoogte van de in artikel
  • y2 = breedte van artikel

x1/y1 = x2/y2
x1 = y1 * x2/y2

de hoogte van de minimap = breedte van de minimap * hoogte van het artikel / de breedte van artikel

En, wanneer de waarde van de schuifbalk hiermee wijzigt (minimapRange.onchange), dat is wanneer de ScrollTo() methode wordt aangeroepen om te scrollen van de pagina naar de overeenkomstige waarde voor het betreffende artikel. 💥

Uitwijkmogelijkheden! We moeten uitwijkmogelijkheden!

Natuurlijk, er zijn tal van momenten waarop het element() wordt niet ondersteund als we dit op het moment, dus we misschien wilt verbergen de minimap in die gevallen.

We controleren voor de functie ondersteuning in CSS:

@ondersteunt (achtergrond: element(#artikel)) of (achtergrond: -moz-element(#artikel)){
/* de fallback-stijl */
}

…of in JavaScript:

if(!CSS.ondersteunt(‘(achtergrond: element(#artikel)) of (achtergrond: -moz-element(#artikel))’)){
/* de fallback-code */
}

Als je het niet erg de achtergrond afbeelding afwezig is, dan kunt u nog steeds de schuif en het toepassen van een verschillende stijl.

Er zijn andere gladde manieren om minimaps die drijven in het wild (en meer steun van de browser). Hier is een grote Pen door Shaw:

Zie de Pen
Mini-kaart Progress Tracker & Scroll Controle door Shaw (@shshaw)
op CodePen.

Er zijn ook tools zoals pagemap-en xivimap dat kan helpen. Het element() functie is momenteel specced in W3C CSS Image Waarden en Vervangen Content Module Niveau 4. Defintely moeite van het lezen waard om volledig te begrijpen van het doel en de gedachte daarachter.

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
Geen Geen 4* Geen Geen Geen

Mobiele / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Geen Geen Geen Geen Geen 64*

Psst! Heeft u geprobeerd het selecteren van de tekst van het artikel in de demo? Zie wat er gebeurt op de minimap. 😉