Ein Schiebe-Albtraum: das Verständnis der Eingangsbereich

0
79

Sie haben vielleicht schon gesehen, eine Reihe von tutorials, wie man Stil-der Eingangsbereich. Dies ist zwar ein weiterer Artikel über das Thema, es geht nicht darum, wie man irgendwelche besonderen visuellen Ergebnis. Stattdessen taucht ein in-browser-Inkonsistenzen, detailliert, was jeder tut, um anzuzeigen, dass der Schieberegler auf dem Bildschirm. Dieses Verständnis ist wichtig, weil es uns hilft, eine klare Vorstellung darüber, ob wir können unsere regler sehen aus und Verhalten sich konsequent in allen Browsern und die Stile sind notwendig, dies zu tun.

Wenn man in einen Bereich Eingang

Vor allem müssen wir sicherstellen, dass der browser stellt die DOM-innerhalb der Reichweite-Eingang.

In Chrom, wir bringen DevTools, gehen Sie zu Einstellungen, Einstellungen, Elemente und stellen Sie sicher, dass die Show user agent shadow DOM option aktiviert ist.

Sequenz von Chrome screenshots illustrieren die Schritte von oben.

In Firefox, gehen wir auf about:config und stellen Sie sicher, dass die devtools.inspector.showAllAnonymousContent flag auf true festgelegt ist.

Folge von Firefox-screenshots illustrieren die Schritte von oben.

Für eine sehr lange Zeit war ich davon überzeugt, dass Edge bietet keine Möglichkeit, das zu sehen, was im inneren dieser Elemente. Aber während messing mit ihm, entdeckte ich, dass wo ein Wille ist und (und einige dumme Glück) da ist auch ein Weg! Wir brauchen, um DevTools, dann gehen Sie zu den reichen Anregungen, die wir wollen, um zu überprüfen, der rechten Maustaste, wählen Sie” Element Untersuchen und die bam, die DOM-Explorer-Leiste zeigt nun die Struktur unserer regler!

Sequenz von Edge-screenshots illustrieren die Schritte von oben.

Offenbar ist dies ein bug. Aber es ist auch ungemein nützlich, so bin ich nicht beschweren.

Der Aufbau im inneren

Von Anfang an können wir sehen, eine Quelle für mögliche Probleme: wir haben sehr unterschiedliche Tiere im inneren für jeden browser.

In Chrome, an der Spitze des shadow DOM, haben wir ein div haben wir keinen Zugriff mehr. Diese Möglichkeit zurück, wenn /Tiefe/ unterstützt wurde, aber dann die Fähigkeit, durch durchstechen der Schatten Barriere erachtet wurde, ein Fehler zu sein, also, was verwendet werden, um eine nützliche Funktion gelöscht wurde. Innerhalb dieses div-wir haben noch eines für den track und in dem track div, haben wir eine Dritte div für den Daumen. Die letzten beiden werden beide klar bezeichnet, die mit einem id-Attribut, aber eine andere Sache finde ich es merkwürdig ist, dass, während Sie können wir auf die Spur, mit ::-webkit-regler-Thread-Titel und die Daumen mit ::-webkit-slider-thumb, nur die track-div hat ein pseudo-Attribut mit diesem Wert.

Innere Struktur in Chrom.

In Firefox, sehen wir auch drei div-Elemente im inneren, nur dieses mal Sie sind nicht verschachtelt – alle drei sind Geschwister. Darüber hinaus sind Sie einfach nur div-Elemente, nicht beschriftet, indem Sie jedes Attribut, so haben wir keine Möglichkeit zu sagen, welche ist die Komponente, wenn wir Sie für die erste Zeit. Glücklicherweise, indem Sie Sie im Bereich “Informationen” highlights der entsprechenden Komponente auf der Seite, und das ist, wie wir sagen können, dass Sie die erste ist die Spur, die zweite ist der Fortschritt und der Dritte ist der Daumen.

Innere Struktur in Firefox.

Können wir auf der Spur (erste div) mit ::-moz-range-track, den Fortschritt (das zweite div-Element) mit ::-moz-range-Fortschritt und der Daumen (der Letzte div) mit ::-moz-range-Daumen.

Die Struktur im Rand ist sehr viel komplexer, was bis zu einem gewissen Grad, ermöglicht einen größeren Grad an Kontrolle über das styling der Schieberegler. Jedoch, wir können nur auf die Elemente mit -ms – Präfix IDs, was bedeutet, es gibt auch eine Menge von Elementen, die wir nicht zugreifen, mit gebacken im Stile würden wir Häufig ändern müssen, wie das overflow: hidden, die auf die Elemente zwischen der aktuellen Eingabe und seiner Spur oder den übergang auf den Daumen Eltern.

Innere Struktur in der Kante.

Eine unterschiedliche Struktur und auch keinen Zugriff auf alle Elemente im inneren, um Stil alles, was wir wollen-bedeutet, dass die Erreichung des gleichen Ergebnis in allen Browsern kann sehr schwierig, wenn nicht sogar unmöglich, selbst wenn man auf einen anderen pseudo-element für jeden browser hilft bei der Einstellung der einzelnen Stile.

Wir sollten immer darauf abzielen, dass die einzelnen Stile auf ein minimum, aber manchmal ist es einfach nicht möglich, wie das festlegen der gleiche Stil kann produzieren sehr unterschiedliche Ergebnisse aufgrund unterschiedlicher Strukturen. Beispielsweise zur Einstellung von Eigenschaften wie Deckkraft oder filter oder sogar transformieren, auf der Strecke würde auch Auswirkungen auf den Daumen in Chrom und Edge (wo es ein Kind/ Nachkomme von der Strecke), aber nicht im Firefox (wo es seine Geschwister).

Der effizienteste Weg, die ich gefunden habe, die gemeinsame Stile, ist die Verwendung eines Sass-mixin, weil das folgende nicht:

input::-webkit-regler-Thread-track,
input::-moz-range-track,
input::-ms-track { /* common styles */ }

Damit es funktioniert, würden wir brauchen, um es zu schreiben wie diese:

input::-webkit-regler-Thread-track { /* common styles */ }
input::-moz-range-track { /* common styles */ }
input::-ms-track { /* common styles */ }

Aber das ist eine Menge von Wiederholung und Wartbarkeit Alptraum. Dies ist, was macht die mixin-Lösung die vernünftigste option: wir haben nur zu schreiben, die gemeinsame Stile, die mal so, wenn wir uns entscheiden, ändern Sie etwas in das gemeinsame Stile, dann brauchen wir nur zu machen, dass eine änderung an einer Stelle – in der mixin.

@mixin-Spur() { /* gemeinsamen styles */ }

input {
&::-webkit-regler-Thread-track { @include-Titel }
&::-moz-range-track { @include-Titel }
&::-ms-track { @include-Titel }
}

Beachten Sie, dass ich mit Sass hier, aber Sie kann jede andere Präprozessor. Was auch immer Sie bevorzugen ist so lange gut, wie es vermeidet Wiederholungen und macht den code leichter zu pflegen.

Erste styles

Als Nächstes nehmen wir einen Blick auf einige der Standard-Stile der regler und seine Komponenten kommen mit, um besser zu verstehen, welche Eigenschaften müssen explizit festgelegt werden, um zu vermeiden, visuelle Inkonsistenzen zwischen den Browsern.

Nur eine Warnung im Voraus: die Dinge sind chaotisch und kompliziert. Es ist nicht nur, dass wir unterschiedliche Standards in verschiedenen Browsern, sondern auch das ändern einer Eigenschaft auf ein element ändern kann, einen anderen in einer unerwarteten Art und Weise (zum Beispiel, wenn Sie eine hintergrund ändert sich auch die Farbe und fügt eine Grenze).

WebKit-Browser und Edge (weil, ja, Edge gilt auch für eine Menge WebKit-Präfix Zeug) haben auch zwei Ebenen von Standardwerten für bestimmte Eigenschaften (zum Beispiel diejenigen in Bezug auf die Dimensionen, Grenzen und Hintergründe), wenn wir Sie so nennen – vor der Einstellung -webkit-appearance: none (ohne die die Stile, die wir setzen, wird nicht funktionieren in diesen Browsern) und nach der Einstellung. Der Fokus wird jedoch auf die Standardeinstellungen nach Einstellung -webkit-appearance: none, denn in WebKit-Browsern, können wir nicht den Stil der Eingangsbereich ohne diese und der ganze Grund, warum wir durch all dies ist zu verstehen, wie wir unser Leben einfacher, wenn styling-regler.

Beachten Sie, dass die Einstellung -webkit-appearance: none auf den Eingangsbereich und auf den Daumen (den Titel hat es schon standardmäßig gesetzt, aus irgendeinem Grund) führt Sie den Schieberegler, um vollständig zu verschwinden, in Chrome und Edge. Warum das passiert, ist etwas, das wir besprechen werden etwas später in diesem Artikel.

Die tatsächliche Reichweite input-element

Die erste Eigenschaft habe ich mir Gedanken über die Prüfung, box-sizing, das zufällig den gleichen Wert in allen Browsern – Inhalt-box. Wir können sehen, dass dies durch einen Blick in die box-sizing Eigenschaft in der Berechneten Registerkarte ” DevTools.

Die box-sizing der Eingangsbereich, vergleichenden Blick auf allen drei Browsern (von oben nach unten: Chrome, Firefox, Edge).

Leider ist nicht ein Indiz für das was kommen wird. Dies wird offensichtlich, sobald wir einen Blick auf die Eigenschaften, die uns die element-Boxen – margin, border, padding, width, height.

Standardmäßig wird der Rand 2px in Chrom und Edge und 0 .7em in Firefox.

Bevor wir weitergehen, lassen Sie uns sehen, wie wir haben, die Werte oben. Die berechnete Länge Werte, die wir erhalten, sind immer die px-Werte.

Aber Chrome zeigt uns, wie die browser-Stile festgelegt wurden (die user-agent-stylesheet-Regel-sets auf einem grauen hintergrund). Manchmal sind die berechneten Werte erhalten wir nicht explizit festlegen, so dass keine Verwendung, aber in diesem speziellen Fall können wir sehen, dass die Marge war in der Tat als einen px-Wert.

Tracing browser-styles in Chrome, die Marge Fall.

Firefox lässt uns nachvollziehen, die Quelle der browser-styles in einigen Fällen, wie in der Abbildung unten gezeigt: