Ved hjelp av den Lite Kjente CSS-element () – Funksjonen til å Opprette en Minimap Navigator

0
30

W3CS CSS arbeidsgruppe som ofte gir oss strålende CSS funksjoner for å eksperimentere med. Noen ganger kommer vi over noe så kult som stikker et smil på våre møter, men det forsvinner med en gang, fordi vi tror, “det er flott, men hva gjør jeg med det?” Elementet () – funksjonen var sånn for meg. Det er en CSS-funksjon som tar et element på siden og presenterer det som et bilde skal vises på skjermen. Imponerende, men quixotic.

Nedenfor er et enkelt eksempel på hvordan det fungerer. Det er for øyeblikket støttes bare i Firefox, som jeg vet er en bummer. Men stick med meg og se hvor nyttig det kan være.

<div id=”ele”>
<p>Hallo, Verden! hvordan er du?<br>jeg gjør ikke det<br>gode. Fikk en kald &#x1F637;</p>
</div>
<div id=”eleImg”></div>
#eleImg {
bakgrunn: -moz-element(#ele) no-repeat center / inneholde; /* leverandør prefiks */
}

Elementet () – funksjonen (med nettleser prefiks) tar id-verdien av elementet det vil oversette til et bilde. Output ser identiske til utseendet av gitt element på skjermen.

Når jeg tenker på element()’s output, jeg tenker på ordet forhåndsvisning. Jeg tror det er den type bruk sak som får mest ut av det: hvor vi kan forhåndsvise et element før det er vist på siden. For eksempel, det neste bildet i en lysbildefremvisning, den skjulte kategorien, eller neste bilde i et galleri. Eller… en minimap!

En minimap er en mini-forhåndsvisning av en lang dokumentet eller siden, vanligvis vises på én side av skjermen eller en annen, og brukes til å navigere til et tilsvarende punkt om at dokumentet.

Du har kanskje sett det i kode redaktører som Sublime Tekst.

Minimap er det på høyre.

CSS-element() er nyttige i å gjøre “preview” – en del av minimap.

Nede er det demo for minimap, og vi vil gå gjennom koden sin etter det. Men, jeg anbefaler deg å se hele-side demo fordi minimaps er veldig nyttig for lange dokumenter på store skjermer.

Hvis du bruker en smarttelefon, husk at, ifølge relativitetsteorien, minimaps vil få super mini mini-skjermer, og nei, det er egentlig ikke hva relativitetsteorien sier faktisk, men du skjønner poenget mitt.

Se Penn Minimap med CSS-element() & HTML-inngang utvalg av Preethi Sam (@rpsthecoder) på CodePen.

Hvis du utformer minimap for hele siden, som for en enkelt side nettstedet, kan du bruke dokumentet kroppen element for bildet. Ellers, rettet mot det viktigste innholdet element, som artikkelen i min demo, fungerer også.

<div id=”minimap”></div>
<div id=”artikkelen”> <!– innhold –> </div>
#minimap {
bakgrunn: rgba(254,213,70,.1) -moz-element(#artikkelen) no-repeat center / inneholde;
stilling: fast; høyre: 10px; top: 10px; /* mer stil */
}

For minimap er bakgrunnsbilde, vi feed-id-artikkel som parameter på element (), og i likhet med de fleste bakgrunnen bilder, det er stylet for å ikke gjenta (no-repeat) og monter inne (inneholder) og på midten av boksen (i midten) hvor det er vist.

Minimap er også fast til skjermen øverst til høyre i vinduet.

Når bakgrunnen er klar, og vi kan legge til en glidebryter på toppen av det, og det vil tjene til å operere på minimap å rulle. For glidebryteren, jeg gikk med innspill: range, den opprinnelige, ukomplisert, og ren HTML-glidebryteren.

<div id=”minimap”>
<input id=”minimap-serien” type=”range” – maks=”100″ value=”0″>
</div>
#minimap-range {
/* Roterende standard horisontal glidebryteren til vertikal */
forvandle: translateY(-100%) roter(90deg);
transform-opprinnelse: nederst til venstre;
background-color: transparent; /* mer stil */
}

#minimap-utvalg::-moz-range-tommel {
background-color: dodgerblue;
cursor: pointer; /* mer stil */
}

#minimap-utvalg::-moz-range-spor{
background-color: transparent;
}

Ikke helt ukomplisert fordi det gjorde det trenger litt tilpasning. Jeg snudde glidebryteren oppreist, for å matche minimap, og anvendt noen stil til sin pseudo-elementer (spesifikt, tommelen og spor) for å erstatte deres standard stiler. Igjen, vi er bare opptatt av Firefox i øyeblikket siden vi arbeider med begrenset støtte.

Alt som gjenstår er å par glidebryteren er-verdien til en tilsvarende bla punkt på side når verdien er endret av brukeren. Som tar et dryss av JavaScript, noe som ser ut som dette:

onload = () => {
const minimapRange = – dokument.querySelector(“#minimap-utvalget”);
const minimap = – dokument.querySelector(“#minimap”);
const artikkel = – dokument.querySelector(“#artikkelen”);
const $ = getComputedStyle.bind();

// Få minimap rekkevidde bredde multiplisert med artikkel høyde, og deretter dividere med artikkelen bredde, i alle punkter.
minimapRange.stil.bredde = minimap.stil.høyde =
parseInt($(minimapRange).bredde) * parseInt($(artikkel).høyde) / parseInt($(artikkel).bredde) + “px”;

// Når området endres, blar du til den relative andelen av artikkelen høyde
minimapRange.onchange = evt =>
scrollTo(0, parseInt($(artikkel).høyde) * (evt.målet.verdi / 100));
};

Dollartegnet ($) er bare et alias for getComputedStyle(), som er metoden for å få CSS-verdier av et element.

Det er verdt å merke seg at bredden av minimap er allerede satt i CSS, slik at vi virkelig trenger bare å beregne høyden. Så, vi arbeider med høyden på minimap og bredden av glidebryteren fordi, husk glidebryteren er faktisk rotert opp.

Her er hvordan ligningen i skriptet ble bestemt, og starter med variablene:

  • x1 = høyde av minimap (samt bredden av glidebryteren inne i den)
  • y1 = bredde av minimap
  • x2 = høyde av artikkelen
  • y2 = bredde av artikkelen

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

høyde på minimap = bredde av minimap * høyde av artikkelen / bredde av artikkelen

Og, når verdien av glidebryteren for endringer (minimapRange.onchange), er at når ScrollTo () – metoden er kalt til å bla til den tilsvarende verdien på artikkelen. 💥

Fallbacks! Vi trenger fallbacks!

Selvfølgelig, det kommer til å være mange ganger når element() støttes ikke hvis vi skulle bruke dette øyeblikket, så vi bør kanskje skjule minimap i disse tilfellene.

Vi kontrollerer for funksjonen støtte i CSS:

@støtter (bakgrunn: element(#artikkelen)) eller (bakgrunn: -moz-element(#artikkelen)){
/* skifte stil */
}

…eller i JavaScript:

if(!CSS.støtter(‘(bakgrunn: element(#artikkelen)) eller (bakgrunn: -moz-element(#artikkelen))’)){
/* skifte kode */
}

Hvis du ikke tankene bakgrunnsbildet blir borte, så kan du fortsatt holde glidebryteren og bruke en annen stil på det.

Det er glatt andre måter å gjøre minimaps som flyter ut i naturen (og har mer nettleser støtte). Her er en flott Pennen av Shaw:

Se Penn
Mini-kart Fremgang Tracker & Bla Kontroll av Shaw (@shshaw)
på CodePen.

Det finnes også verktøy som pagemap-og xivimap som kan hjelpe. Elementet () – funksjonen er for øyeblikket specced i W3CS CSS Bilde Verdier og Erstattet Innhold Modul Nivå 4. Defintely verdt å lese for å fullt ut forstå intensjonen og tanken bak det.

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
Ingen Ingen 4* Ingen Ingen Ingen

Mobil / Nettbrett

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

Psst! Visste du prøve å velge artikkelen tekst i demoen? Se hva som skjer på minimap. 😉