Sternebewertungskomponente für ein einzelnes HTML-Element

In der Vergangenheit erforderte die Erstellung benutzerdefinierter Komponenten komplexe Kombinationen aus HTML, CSS und JavaScript. Die Weiterentwicklung von CSS in den letzten Jahren ermöglicht es uns jedoch, viele Komponenten nur mit HTML und CSS zu erstellen und dabei die bereits in den Browsern integrierte Logik zu nutzen. Warum das Rad neu erfinden, wenn wir das meiste davon wiederverwenden können?

Einfache Komponenten wie Kontrollkästchen, Optionsfelder und Kippschalter können mit HTML und CSS erstellt werden, wobei die Funktionalität auf den Browser angewiesen ist. Aber wir beschränken uns nicht auf einfache Komponenten. Auch komplexere Bauteile können so realisiert werden.

In diesem Artikel erfahren Sie, wie Sie mit einem einzigen HTML- und nur einem JavaScript-Befehl ein Sternebewertungssystem erstellen.

Der HTML

Eine Sternebewertungskomponente ist im Wesentlichen ein Wertebereich, aus dem Benutzer einen auswählen können. Variationen können 5 Werte (einen pro Stern) oder 10 Werte (Halbsterne zulassen) umfassen, aber die Idee bleibt die gleiche - Benutzer können einen Wert auswählen, und zwar nur einen.

HTML bietet einen Eingabetyp für Bereiche, den wir als Basis für unsere Komponente verwenden können:

<input type="range">

So wie es aussieht, ist diese Eingabe nicht sehr nützlich. Wir müssen einige Attribute basierend auf unseren Designspezifikationen definieren:

1. Halbe Sternbewertungen zulassen.
2. Im Bereich von 0,5 bis 5 Sternen.
3. Die Standardauswahl beträgt 2,5 Sterne.

Basierend auf den oben genannten Spezifikationen sieht der HTML-Code wie folgt aus:

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

Diese Komponente ist eine Bereichseingabe (), die es Benutzern ermöglicht, einen Wert zwischen 0,5 (min="0.5") und 5 Sternen (max="5") in Schritten von auszuwählen 0,5 (Schritt="0,5"). Der Anfangswert ist auf 2,5 Sterne eingestellt (value="2.5").

Das Festlegen des Mindestwerts von 0,5 statt 0 mag ungewöhnlich erscheinen, aber es gibt einen praktischen Grund dafür. Wenn Sie eine Bewertung mit 0 Sternen zulassen, würden 11 potenzielle Werte entstehen, der Bereich stellt jedoch visuell 10 Werte (10 halbe Sterne) dar, was zu einer Diskrepanz zwischen den anklickbaren Bereichen und den Sternen im Bereich führt. Diese Designwahl sorgt für eine bessere Benutzerfreundlichkeit und vereinfacht die spätere Implementierung.

Die Einstellung von mindestens 0,5 ermöglicht natürlichere Klickbereiche

Dieses Problem könnte teilweise gelöst werden, indem die Komponente mit 11 Optionsfeldern erstellt würde. Dies würde jedoch neue Probleme im Hinblick auf das Design (wie wählen wir den Wert 0 mit der Maus aus?), die Benutzerfreundlichkeit (sollten wir das native Verhalten einer Bereichseingabe oder das native Verhalten der Optionsfelder nachahmen?) und die Zugänglichkeit (wie können wir das tun) aufwerfen Wir verwalten den Fokus für die Komponente als Ganzes?) 

Das sind tolle Fragen für ein weiteres Tutorial zum Erstellen einer Bewertungskomponente mithilfe von Optionsfeldern. Für dieses Tutorial zum Erstellen der Komponente mithilfe eines einzelnen HTML-Elements habe ich mich für einen Mindestwert von 0,5 entschieden, um diese Komplexität zu vermeiden.

Wir werden später einige Optimierungen hinzufügen, aber dieser Code dient als solider Ausgangspunkt. Ohne CSS ähnelt es optisch einer Standardbereichseingabe:

Als nächstes fügen wir ein paar weitere Attribute hinzu. Auch wenn sie im Moment vielleicht nicht bedeutsam erscheinen, werden sie später wichtig sein:

• Klassenname: Hilft bei der Identifizierung der Bereichseingabe in CSS.
• Inline-Stile: mit einer benutzerdefinierten Eigenschaft zum Speichern des Eingabewerts.
• Inline-JavaScript: ein einzelner Befehl zum Aktualisieren der benutzerdefinierten Eigenschaft im oben genannten Inline-Stil.

Der endgültige Code sieht folgendermaßen aus (zur besseren Lesbarkeit formatiert):

<input type="range">

Im nächsten Abschnitt werden wir diese Regel etwas verfeinern. Wir müssen Stile für Chrome/Safari und Firefox definieren, und das wird einige Wiederholungen mit sich bringen. Wir können den Prozess optimieren, indem wir benutzerdefinierte Eigenschaften verwenden, um Werte zu speichern und sie auf beide Stile anzuwenden.

Den Track gestalten

Die Spur nimmt die gesamte Größe des Elements ein, und dann verwenden wir einen Farbverlauf, um die benötigten Teile einzufärben.

Über die Breite müssen wir uns keine Gedanken machen – sie nimmt die gesamte Breite des Elements ein –, aber bei der Höhe ist das eine andere Sache. Während Chrome und Firefox die Höhe der Spur an den Container anpassen, ist dies bei Safari nicht der Fall. Daher müssen wir explizit eine Höhe von 100 % angeben.

Als nächstes wollen wir den farbigen Bereich definieren. Wir werden die zuvor erstellten benutzerdefinierten Eigenschaften --val und --size nutzen. Wir legen einen linearen Farbverlauf von links nach rechts fest, der die Farben an dem durch die Eigenschaft --val angegebenen Punkt ändert:

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

Wir verschieben diesen Farbverlauf in eine andere benutzerdefinierte Eigenschaft im übergeordneten Element. Dadurch können wir den Wert für Chrome/Safari und Firefox wiederverwenden – wie ich bereits erwähnt habe … und wahrscheinlich später erwähnen werde.

Damit haben wir ein Rechteck mit einem dunkleren Bereich, der den ausgewählten Wert darstellt. Der schwarze Bereich ändert sich, wenn wir auf das Rechteck klicken oder darüber streichen. Dies entspricht zwar der gewünschten Funktionalität, es fehlen jedoch die visuellen Elemente. Wir brauchen CSS-Masken.

Ich werde es nicht leugnen, der folgende Teil ist hässlich. Ich habe mich dafür entschieden, ganz auf CSS zu setzen, ohne mich auf externe Bilder oder Inline-SVGs zu verlassen. Sie können den Code vereinfachen, indem Sie eine dieser Optionen verwenden.

Der folgende Code gilt für eine sternförmige Bewertungskomponente, aber wir könnten die Form leicht ändern (z. B. in Kreise), indem wir die Maske ändern.

Wir verwenden eine Reihe konischer Verläufe, um mithilfe von CSS-Masken einen fünfzackigen Stern auszuschneiden. Dabei wird die Größe des eingegebenen Bereichs berücksichtigt, sodass wir nach horizontaler Wiederholung der Maske fünf Sterne erhalten:

<input type="range">

Wie beim linearen Farbverlauf oben wenden wir diese Maske in den Stilen für Chrome/Safari und Firefox an. Um Codewiederholungen zu vermeiden, definieren wir ihn in einer benutzerdefinierten Eigenschaft innerhalb des übergeordneten Elements.

Der endgültige Code sieht folgendermaßen aus:

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

Beachten Sie, dass der Code für Webkit und Firefox nahezu identisch ist. Eine Funktion wie Mixins in CSS wäre in solchen Situationen unglaublich hilfreich – obwohl es noch besser wäre, einen einzigen unterstützten Standard zu haben.

Wir haben auch einige Stile hinzugefügt (Print-Color-Adjust: Exact), um sicherzustellen, dass die Komponente genau so gedruckt wird, wie sie auf dem Bildschirm erscheint. Dies ist nützlich, wenn Sie mit Hintergründen arbeiten, da diese normalerweise nicht standardmäßig gedruckt werden.

Den Daumen stylen

Bei diesem Sternebewertungssystem ist der Daumen nicht besonders wichtig. Der visuelle Effekt wird durch die Schiene selbst erreicht. Also verstecken wir den Daumen aus der Sicht.

Wir können dies tun, indem wir die Deckkraft auf Null setzen:

<input 
  type="range"
  min="0.5"
  max="5"
  step="0.5"
  value="2.5"
 >



<h2>
  
  
  The CSS
</h2>

<p>Styling range inputs can be tricky–but not excessively complex. Unfortunately, it requires a lot of repetition due to lack of support and standardization, so we must use vendor prefixes and browser-specific pseudo-classes for the different elements of the component:</p>

• thumb: the element user can move to change the value. The pseudo-elements are ::-webkit-slider-thumb (Chrome and Safari) and ::-moz-range-thumb (Firefox)
• track: the area or line along which the thumb slides. The pseudo-elements are ::-webkit-slider-runnable-track (Chrome and Safari) and ::-moz-range-track (Firefox)

And, of course, we'll need to apply some specific styles for each browser, as they don't style the component consistently. For example, we'll need to set up heights on Safari or remove a pesky border on Firefox.

From here, the next steps are as follows:

1. Defined the size of the star-rating component.
2. Mask the track to only keep the shapes of the stars visible.
3. Define the background that only colors the selected stars.
4. Hide the thumb.

Hiding the thumb is optional and it will depend on the type of component you are building. It makes sense to hide the thumb in this star-rating system. However, in a user-satisfaction component, the thumb may be useful. You can explore different demos at the end of this article.

Styling the range element

The first step will be removing the default appearance of the range input. This can be done that by setting the the appearance:none property. All modern browsers support it, but we may want to add the vendor-prefixed versions, so it's compatible with older browsers too.

Since we have five stars, it makes sense to set the width to five times the height. aspect-ratio: 5/1 could handle this, but some browsers still have inconsistent support, so we'll "hard code" the size using a custom property.

Additionally, we want to remove the border. Firefox applies a default border to the ranges, and removing it ensures a more consistent styling across browsers.

.star-rating {
  --size: 2rem;
  height: var(--size);
  width: calc(5 * var(--size));
  appearance: none;
  border: 0;
}

Vielleicht ist Ihnen aufgefallen, dass ich in den Codeausschnitten oben keine CSS-Verschachtelung verwendet habe (während ich sie in den Demos unten verwendet habe). Dies liegt daran, dass die Verschachtelung relativ neu ist und mit einigen Einschränkungen verbunden ist: Viele ältere Browser unterstützen sie nicht und auch einige moderne Browser haben Probleme mit nicht standardmäßigen Pseudoelementen – ich habe einen Fehler in WebKit bezüglich dieses Verhaltens in Safari gemeldet.

Beispiele

Man sagt, ein Bild sagt mehr als tausend Worte. Hier sind einige Beispiele für Eingabebereiche, die mit einem einzelnen HTML-Element codiert werden können.

Beginnen wir mit der in diesem Artikel beschriebenen Sternebewertungskomponente:

Als nächstes ein farbenfrohes Beispiel. Es hat eine untypische Form und erfordert die Gestaltung aller Teile einer Bereichseingabe: des Bereichs selbst, der Spur und des Daumens:

Abschließend noch ein Favorit von mir: eine animierte Komponente zur Benutzerzufriedenheit mit nur einem Element. Wählen Sie eines der verschiedenen Gesichter aus und sie bewegen sich je nach Auswahl:

Abschluss

Es gibt viele verschiedene Möglichkeiten, diese Komponente zu codieren. Ich habe es nur mit HTML und CSS gemacht (mit einem Inline-JavaScript-Befehl), aber Sie könnten auch Bilder oder mehr JavaScript verwenden, um dieses hässliche Inlining zu verhindern. 

Der Kerngedanke ist, dass Sie mit minimalen HTML- und CSS-Änderungen die Spezifikationen anpassen können und Ihr Sternebewertungssystem sich etwas anders verhält oder ganz anders aussieht.

Die Komponente kann auch mit mehreren Optionsfeldern neu erstellt werden, wodurch die JavaScript-Zeile und etwas CSS überflüssig werden. Es ist ein gültiger Ansatz. Es wäre zusätzlicher Code erforderlich, um die Zugänglichkeit sicherzustellen und das Standardverhalten zu reproduzieren, das standardmäßig mit einem Eingabebereich ausgestattet ist. Manche finden diesen Ansatz vielleicht einfacher, und er ist auf jeden Fall machbar.

Das ist eines der Dinge, die ich an der Softwareentwicklung am meisten liebe: Es gibt viele verschiedene Ansätze und Optionen, jede mit ihren Vor- und Nachteilen, und alle sind wunderbar umsetzbar.

Ich hoffe, Ihnen hat der Artikel gefallen. Codieren Sie weiter!

Das obige ist der detaillierte Inhalt vonSternebewertungskomponente für ein einzelnes HTML-Element. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!