Med hjälp av Föga Kända CSS-element () – Funktionen för att Skapa en Minimap Navigator

0
9

W3C: s CSS-Arbetsgrupp som ofta ger oss ett lysande CSS-funktioner för att experimentera med. Ibland har vi stött på något så coolt som sticker ett flin på ansiktet, men det försvinner rätt bort eftersom vi tror, “det är bra, men vad gör jag med den?” Elementet() funktion var som det var för mig. Det är en CSS-funktion som tar ett element på sidan och presenterar det som en bild som ska visas på skärmen. Imponerande, men verklighetsfrämmande.

Nedan är ett enkelt exempel på hur det fungerar. Det är för närvarande stöds endast i Firefox, som jag vet är en besvikelse. Men håller med mig och se hur användbart det kan vara.

<div id=”ele”>
<p>Hej Världen! hur är du?<br>jag inte gör som<br>bra. Fick en kall &#x1F637;</p>
</div>
<div id=”eleImg”></div>
#eleImg {
bakgrund: -moz-element(#ele) no-repeat center / innehålla; /* säljaren prefixet */
}

Elementet() funktion (med browser prefix) tar id-värdet för elementet som det ska omvandlas till en bild. Produktionen ser identiska till utseendet på den givna element på skärmen.

När jag tänker på element()’s utgång, jag tänker på ordet förhandsgranska. Jag tror att det är den typ av användning som får ut mest av det: där vi kan förhandsgranska ett element innan den visas på sidan. Till exempel, hur nästa bild i ett bildspel, dolda fliken, eller nästa bild i ett galleri. Eller… en minimap!

En minimap är en mini-sized förhandsvisning av ett långt dokument eller en sida, oftast visas på ena sidan av skärmen eller annat och som används för att navigera till en motsvarande punkt på det dokumentet.

Du kanske har sett det i koden redaktörer som Sublime Text.

Minimap är det på höger.

CSS-element() är användbara för att göra “förhandsgranska” för en del av minimap.

Nedan är en demo för minimap, och vi kommer att gå igenom sin kod efter det. Men, jag rekommenderar att du ser hela sidan demo eftersom minimaps är verkligen användbart för långa dokument på stora skärmar.

Om du använder en smartphone, tänk på att, enligt relativitetsteorin, minimaps kommer att få super mini i mini skärmar, och nej, det är inte riktigt vad relativitetsteorin faktiskt säger, men du får min poäng.

Se Pennan Minimap med CSS-element() & HTML-ingång utbud av Preethi Sam (@rpsthecoder) på CodePen.

Om du designar minimap för hela sidan som en enda sida webbplats, kan du använda dokumentets < body > – elementet för bilden. Annars, inriktade på de viktigaste element, som artikeln i min demo, fungerar också.

<div id=”minimap”></div>
<div id=”article”> <!– innehåll –> </div>
#minimap {
bakgrund: rgba(254,213,70,.1) -moz-element(#artikel) no-repeat center / innehåller.
position: fixed; right: 10px; top: 10px; /* mer stil */
}

För minimap är i bakgrunden på bilden, vi matar id i artikeln som parameter av element (), och i likhet med de flesta bakgrunden bilder, det är som gjord för att inte upprepa (no-repeat) och passa in (innehåller) och på mitten av rutan (center) där det visas.

Minimap är också fast att skärmen längst upp till höger på den virtuella.

När bakgrunden är klar, vi kan lägga till ett reglage på toppen av det och det kommer att tjäna till att driva minimap rullning. För reglaget, jag gick med ingång: sortiment, ursprungliga, okomplicerad, och vanlig HTML-reglaget.

<div id=”minimap”>
<input id=”minimap-range” typ=”utbud” max=”100″ värde=”0″>
</div>
#minimap-range {
/* Roterande standard horisontella reglaget till vertikalt */
förändra: translateY(-100%) rotera(90deg);
förvandla-ursprung: längst ner till vänster;
background-color: transparent; /* mer stil */
}

#minimap-range::-moz-utbud-tumme {
bakgrund-färg: ljusgrå;
cursor: pointer; /* mer stil */
}

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

Inte helt okomplicerad, eftersom den gjorde det behövs en del justeringar. Jag vände reglaget upprätt, för att matcha minimap, och sökte lite stil till sin pseudo-element (specifikt, tummen och spår) för att ersätta sina förvalda stilar. Igen, vi är bara fråga om Firefox just nu eftersom vi har att göra med ett begränsat stöd.

Alla som är kvar är att par som skjutreglagets värde motsvarande bläddra punkt på sidan när värdet ändras av användaren. Det tar ett stänk av JavaScript som ser ut så här:

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

// Get minimap utbud bredd multiplicerat med artikel höjd, och sedan dividera med artikeln bredd, alla i pixlar.
minimapRange.style.bredd = minimap.style.höjd =
parseInt($(minimapRange).bredd) * parseInt($(artikel).höjd) / parseInt($(artikel).bredden) + “px”;

// När utbudet ändringar, bläddra till den relativa andelen av artikeln höjd
minimapRange.onchange = evt =>
scrollTo(0, parseInt($(artikel).höjd) * (evt.- målet.värde / 100));
};

Dollartecknet ($) är bara ett alias för getComputedStyle(), som är den metod för att få CSS-värden på ett element.

Det är värt att notera att bredden på minimap är redan satt i CSS, så att vi egentligen bara behöver för att beräkna sin höjd. Så, vi har att göra med höjden på minimap och bredden på reglaget för, kom ihåg, reglaget är faktiskt roteras upp.

Här är hur ekvationen i skriptet var bestämd, börjar med variabler:

  • x1 = höjd på minimap (liksom bredden av reglaget inne i det)
  • y1 = bredden på minimap
  • x2 = höjd av artikel
  • y2 = bredd av artikel

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

höjden på minimap = bredden på minimap * höjd av artikel / bredd av artikel

Och, när värdet av skjutreglaget ändras (minimapRange.onchange), det är då ScrollTo() anropas för att rulla sidan till dess motsvarande värde på artikeln. 💥

Fallbacks! Vi behöver fallbacks!

Självklart, det kommer att finnas gott om tillfällen när element() stöds inte om vi skulle använda detta just nu, så vi kanske vill dölja minimap i dessa fall.

Vi kontrollera om det har stöd i CSS:

@stöd (bakgrund: element(#artikel)) eller (bakgrund: -moz-element(#artikel)){
/* återgång stil */
}

…eller i JavaScript:

if(!CSS.stöder(‘(bakgrund: element(#artikel)) eller (bakgrund: -moz-element(#artikel))’)){
/* fallback-kod */
}

Om du inte har något emot den i bakgrunden på bilden för att vara frånvarande, så kan du ändå hålla reglaget och tillämpa en annan stil på det.

Det finns andra smart sätt att göra minimaps som flyter ut i det vilda (och har flera webbläsare-stöd). Här är en bra Penna av Shaw:

Se Pennan
Mini-karta Framsteg Tracker & Bläddra Kontroll av Shaw (@shshaw)
på CodePen.

Det finns också verktyg som pagemap-och xivimap som kan hjälpa till. Elementet() funktion är för närvarande specced i W3C: s CSS Image Values och Ersättas Content Module Level 4. Defintely värd att läsas för att fullt ut förstå avsikten och tanken bakom det.

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
Inga Inga 4* Inga Inga Inga

Mobil / Surfplatta

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

Psst! Gjorde du försöka att välja den artikel text i en demo? Se vad som händer på minimap. 😉