Mit dem Wenig Bekannten CSS-element () – Funktion zum Erstellen einer Minimap Navigator

0
44

W3C CSS Working Group gibt uns oft geniale CSS-Funktionen zu Experimentieren. Manchmal stoßen wir auf etwas so cool, dass Stöcke ein grinsen auf unser Gesicht, aber es verschwindet sofort, weil wir denken, “das ist großartig, aber was mache ich damit?” Das element () – Funktion war für mich. Es ist eine CSS-Funktion, die ein element auf der Seite und stellt es als Bild auf dem Bildschirm angezeigt. Beeindruckend, aber weltfremd.

Unten ist ein einfaches Beispiel, wie es funktioniert. Es ist derzeit nur unterstützt in Firefox, die ich kenne, ist eine Enttäuschung. Aber stick mit mir und sehen, wie nützlich es sein kann.

<div id=”ele”>
<p>Hallo Welt! wie geht es dir?<br>das werde ich nicht tun,<br>toll. Erkältet &#x1F637;</p>
</div>
<div id=”eleImg”></div>
#eleImg {
background: -moz-element(#ele) no-repeat center / enthalten; /* vendor-Präfix */
}

Das element () – Funktion (mit browser-Präfix) nimmt den id-Wert des Elements, es werde übersetzen in ein Bild. Die Ausgabe sieht identisch zu der Darstellung der gegebenen element auf dem Bildschirm.

Wenn ich daran denke, element()’s Ausgabe, denke ich an das Wort Vorschau. Ich denke, das ist die Art von Anwendungsfall, erhält die die meisten aus ihm heraus: wo können wir eine Vorschau eines Elements, bevor es auf der Seite angezeigt. Zum Beispiel, wird die nächste Folie in einer Diashow, die versteckten Registerkarte oder das nächste Foto in einer Galerie. Oder… eine minimap!

Eine minimap ist eine mini-Größe der Vorschau eines langen Dokuments oder der Seite, in der Regel gezeigt, bei der auf der einen Seite des Bildschirms oder einer anderen, und navigieren Sie zu einem entsprechenden Punkt auf das Dokument.

Vielleicht haben Sie gesehen, es in code-Editoren, wie Sublime Text.

Die minimap ist auf der rechten Seite.

CSS element() ist hilfreich bei der “Vorschau” – Teil der minimap.

Unten ist die demo für die minimap, und wir Durchlaufen den code nach. Jedoch, ich empfehlen, Sie sehen die voll-page-demo, weil minimaps sind wirklich nützlich für lange Dokumente auf einem großen Bildschirm.

Wenn Sie mit einem smartphone, daran erinnern, dass nach der Theorie der Relativität, minimaps erhalten super-mini in der mini-Bildschirme; und Nein, das ist nicht wirklich das, was die Theorie der Relativität sagt eigentlich, aber Sie erhalten mein Punkt.

Finden Sie die Stift-Minikarte mit CSS-element() & HTML-input-range von Preethi Sam (@rpsthecoder) auf CodePen.

Wenn Sie die Gestaltung der Minikarte für die ganze Seite, wie für eine einzelne Seite, website, Sie können das Dokument body-element für das Bild. Ansonsten auf die Haupt-content-element, wie die Artikel in meiner demo auch funktioniert.

<div id=”minimap”></div>
<div id=”Artikel”> <!– Inhalt –> </div>
#Minikarte {
hintergrund: rgba(254,213,70,.1) -moz-element(#article) no-repeat center / enthalten;
position: fixed; right: 10px; top: 10px; /* style */
}

Für die minimap, Hintergrundbild, füttern wir die id des Artikels als parameter des Elementes() und, wie bei den meisten hintergrund-Bilder, es ist gestaltet, um sich nicht wiederholt (no-repeat) und innerhalb Sitz (enthalten) und in der Mitte der box (center), wo es angezeigt.

Die minimap ist auch fest auf dem Bildschirm oben rechts in der Ansicht).

Sobald der hintergrund fertig ist, können wir fügen Sie ein Schieberegler oben drauf, und es dient zum Betrieb der minimap scrollen. Für den regler, ich ging mit Eingang: Bereich, der ursprünglichen, unkomplizierten, einfachen HTML-regler.

<div id=”minimap”>
<input id=”minimap-Reichweite” type=”range” max=”100″ value=”0″>
</div>
#minimap-Reichweite {
/* Drehen der vorgegebenen horizontalen Schieberegler vertikal */
transform: translateY(-100%) rotate(90deg);
transform-origin: bottom left;
background-color: transparent; /* style */
}

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

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

Nicht ganz unkompliziert, da müssen einige Optimierungen. Ich drehte die regler, aufrecht, passend zu der minimap, und einige Stil zu Ihrem pseudo-Elemente (speziell die Daumen und verfolgen) zu ersetzen Ihre Standard-styles. Wieder, wir sind nur besorgt über Firefox in dem moment, da wir den Umgang mit begrenzten support.

Was bleibt, ist die Kopplung der regler den Wert um eine entsprechende scroll point auf der Seite, wenn der Wert geändert wird, durch den Benutzer. Das dauert eine Prise JavaScript, die wie folgt aussieht:

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

// Holen Sie sich die minimap Bereich Breite multipliziert mit der Artikel-Höhe, dann teilen Sie der Artikel-Breite, alle in Pixel.
minimapRange.Stil.Breite = minimap.Stil.Höhe =
parseInt($(minimapRange).Breite) * parseInt($(Artikel).Höhe) / parseInt($(Artikel).width) + “px”;

// Wenn sich der Bereich ändert, Blättern Sie zu der relative Anteil der Artikel Höhe
minimapRange.onchange = evt =>
scrollTo(0, parseInt($(Artikel).Höhe) * (evt.Ziel.Wert / 100));
};

Das dollar-Zeichen ($) wird lediglich ein alias für getComputedStyle(), das ist die Methode, um die CSS-Werte eines Elements.

Es ist erwähnenswert, dass die Breite der minimap ist bereits in der CSS, so dass wir wirklich nur brauchen für die Berechnung der Höhe. So, befassen wir uns mit der Höhe der Minikarte und die Breite des Schiebers denn denken Sie daran, der regler ist tatsächlich gedreht.

Hier ist, wie die Formel im Skript wurde festgelegt, beginnend mit der Variablen:

  • x1 = Höhe der minimap (sowie die Breite des Schiebers im inneren)
  • y1 = Breite der minimap
  • x2 = Höhe des Artikels
  • y2 = Breite des Artikels

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

Höhe der minimap = Breite der minimap * Höhe des Artikels / Breite Artikel

Und, wenn der Wert der Schieberegler verändert (minimapRange.onchange), das ist, wenn die ScrollTo () – Methode aufgerufen, um die Seite scrollen, um den entsprechenden Wert auf den Artikel. 💥

Fallbacks! Wir müssen fallbacks!

Natürlich, es werden noch viele Zeiten, wenn das element() wird nicht unterstützt, wenn wir dies im moment, so könnten wir wollen, ausblenden der Minikarte in diesen Fällen.

Wir prüfen für feature-Unterstützung in CSS:

@unterstützt (hintergrund: element(#article)) oder (background: -moz-element(#article)){
/* fallback-Stil */
}

…oder in JavaScript:

if(!CSS.unterstützt(‘(hintergrund: element(#article)) oder (background: -moz-element(#article))’)){
/* fallback-code */
}

Wenn es Sie nicht stört das Hintergrundbild fehlen, dann können Sie immer noch halten Sie den regler und einen anderen Stil auf.

Es gibt andere glatte Wege, zu machen, minimaps, die schwimmend in der wildnis (und mehr browser unterstützen). Hier ist ein großer Stift, die von Shaw:

Siehe Stift
Mini-map Progress Tracker – & Scroll-Steuerung von Shaw (@shshaw)
auf CodePen.

Es gibt auch tools wie pagemap und xivimap, die helfen können. Das element () – Funktion ist derzeit specced im W3C-CSS-Image-Werte und Ersetzt die Inhalte von Modul-Level-4. Auf jeden Fall Wert, gelesen zu werden, um voll zu erfassen, die Absicht und der Gedanke dahinter.

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
Keine Keine 4* Keine Keine Keine

Mobile / Tablet

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

Psst! Haben Sie versucht, die Auswahl der Artikel-text in der demo? Sehen Sie, was passiert auf der Minikarte. 😉