HTML5-Farbwähler

Wie ich in meinem Beitrag HTML5 Date Picker angegeben habe, ist Opera 11 bei der Implementierung einiger der erwarteten HTML5-Tags einigen anderen Nicht-Beta-Webbrowsern voraus. In diesem Beitrag betrachte ich die Implementierung des HTML5-Farbwählers durch Opera als Beispiel dafür, was möglich ist, wenn die anderen Browser ihre eigenen Implementierungen hinzufügen.

Ich verwende den folgenden einfachen HTML-Code, um den Farbwähler von Opera 11 zu demonstrieren.

ColorPicker.html

   HTML5 Color Picker Demonstrated  function newBackgroundColor(color) { document.bgColor = color; document.colorForm.selectedcolor.value = color; }     

Select Background Color

Selected Color

Der obige Code enthält nicht viel für einen Farbwähler (nur mit einem "name" -Attribut und einem "onchange" -Ereignis, um die Dinge etwas interessanter zu machen). Bevor ich diesen Code in den fünf wichtigsten Browsern in Aktion demonstriere, möchte ich darauf hinweisen, dass der Code in allen Browsern funktioniert. Was Opera von den anderen Browsern unterscheidet, ist, dass Opera ein elegantes Steuerelement bietet, mit dem der Benutzer eine Farbe auswählen oder den Code einer Farbe eingeben kann. Die anderen Browser (Nicht-Beta-Versionen) bieten derzeit keine gute Steuerung, aber der Code funktioniert immer noch in ihnen, wenn der Benutzer eine erkannte Farbzeichenfolge eingibt.

Farbwähler von Opera 11

Die nächsten Screenshots zeigen, wie Opera den Farbwähler behandelt. Die Bilder zeigen, dass zuerst ein kleiner Satz von Farben zur Auswahl angezeigt wird und dass der Benutzer aus einem größeren Satz von Farben auswählen oder sogar eine benutzerdefinierte Farbe angeben kann. Einfacher JavaScript-Code wird aufgerufen, wenn eine Farbe ausgewählt und die Farbe des Hintergrunds entsprechend geändert wird.

"Color Picker" von Firefox 3.6

Firefox 3.6 unterstützt den Farbwähler nicht so gut wie Opera 11. Tatsächlich wird es als einfaches Textfeld dargestellt. Die gute Nachricht ist, dass die Funktionalität weiterhin ordnungsgemäß funktioniert, wenn der Benutzer einen String eingibt, der als gültiger Farbcode interpretiert werden kann. Dies wird in den nächsten Screenshots gezeigt.

"Farbwähler" von Chrome 8

Die "Farbauswahlunterstützung" von Chrome 8 ist der von Firefox 3.6 sehr ähnlich, wie in den nächsten drei Bildern dargestellt.

"Farbwähler" von Safari 5

Safari 5 bietet die gleiche Unterstützung für die Farbauswahl wie Chrome 8 und Firefox 3.6.

"Explorer Pick" von Internet Explorer 8

Die Unterstützung von Internet Explorer 8 ähnelt der aller zuvor behandelten Browser außer Opera 11.

Fazit

Wie bei der Datums- / Zeitauswahl ist Opera 11 führend bei Nicht-Beta-Webbrowsern in Bezug auf die Reife der Farbauswahlimplementierung und bietet daher die beste Illustration dafür, was dieses Tag werden kann. Wie bei der Datumsauswahl freue ich mich auf den Tag, an dem wir eine elegante Farbauswahl haben, die in allen gängigen Browsern funktioniert und über einfaches HTML-Markup verwendet wird. Um dies zu erreichen, müssen wir heute etwas außerhalb von Standard-HTML verwenden, z. B. Flex oder einen Farbwähler, der von einer JavaScript-Bibliothek eines Drittanbieters bereitgestellt wird.

Diese Geschichte "HTML5 Color Picker" wurde ursprünglich von JavaWorld veröffentlicht.