Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML-Tipps für Webentwickler: Jede Woche neu

Farbauswahl

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
05:40
  Lesezeichen setzen

Transkript

Was früher viele Zeilen JavaScript erforderte, ist heute in die meisten Browser integriert, ein Farbwähler. Man kann keinem Benutzer zumuten, den Hex-Code einer Farbe anzugeben, und deswegen sind Farbwähler das richtige Tool. Und dafür kann man direkt verwenden "input type=color". Sie sehen, wie das dann beispielsweise im Chrome auf dem Mac ausschaut. Und so funktioniert das Ganze. Sie verwenden ein Input-Element, geben bei "type color" an, natürlich verwenden Sie üblicherweise auch Name und ID, und dann erstellt der Browser automatisch einen Farbwähler. Im Firefox sieht das dann so aus. Und wenn ich eine Farbe wähle und auf "Absenden" gehe, dann sehe ich in diesem Fall, dass ein hexadezimaler Wert übertragen wird. Wie der Farbwähler dargestellt wird, hängt vom Browser ab und teilweise auch vom Betriebssystem. So sieht es im Firefox aus auf Windows bei Chrome, und der Windows schaut es ganz ähnlich aus. Das ist Chrome unter Windows. Dass derselbe Farbwähler angezeigt wird, wie bei Firefox, liegt daran, dass der in diesem Fall aus dem Betriebssystem kommt. Eine andere Oberfläche bietet Edge, die aber ebenfalls sehr intuitiv zu bedienen ist. Da kann man einzeln Farbton, Sättigung und Helligkeit bestimmen. Und wenn man dann auf das Häkchen geht, ist diese Farbe ausgewählt. Wenn Sie eine Farbe vorgeben wollen, dann können Sie das machen, wie sonst auch, mit dem value-Attribut. Wichtig ist dann wieder, dass Sie einen hexadezimalen Code schreiben mit dem Gatterzaun am Anfang. Dann sieht man, dass direkt die ausgewählte Farbe hier zu sehen ist. Und wenn ich drauf klicke, habe ich wieder meinen Farbwähler. Mehrere Farben können Sie über eine "datalist" spezifizieren. Wie funktioniert das? Ich gebe bei meinem Farbelement selbst an "list" und den Namen der "datalist". Innerhalb des "datalist"-Elements schreibe ich dann meine "option" mit den gewünschten Werten, und das funktioniert dann beispielsweise schon im Chrome. Bei Chrome wird dann so ein kleiner Pfeil angezeigt, und ich erhalte dann die vorgegebenen Farben, kann aber dann auch weitere wählen, dann kommt wieder der normale Farbwähler. Was macht man aber mit Browsern, die dieses Feature nicht unterstützen. Beispielsweise mit dem Internet-Explorer Sie sehen, wie es dort aussieht. Da gibt es keinen Farbwähler. Aber wenn ich "value" vorgegeben habe, dann wird das hier angezeigt. Jetzt kann der Benutzer natürlich selber seinen Hex-Code eingeben, aber das ist in den meisten Fällen keine gute Option. Deswegen muss man in diesem Fall richtig nachbessern. Und für diesen Zweck gibt es beispielsweise den Spektrum "Colorpicker", der auf jQuery basiert, und den man auch als Polyfill nutzen kann, das heißt, der wird dann nur tätig, wenn ein Browser dieses Feature nicht nativ unterstützt. Das sehen wir uns gleich an. Vorab der Hinweis, dass Sie den natürlich weitgehend konfigurieren können. Also Sie können ganz viel vorgeben, wie das genau aussehen soll, wenn Sie sich jetzt entscheiden, nur einen fertigen Farbwähler zu wählen und nicht den nativen. Uns interessiert aber jetzt die Verwendung als Polyfill. Was muss ich machen? Ich muss die Dateien herunterladen und dann zum einen ein Style-Sheet einbinden. Außerdem muss ich einbinden das "spectrum.js script" und davor jQuery verwenden. Mehr muss ich nicht tun. Ich verwende an dieser Stelle mein Input-Element mit "type color". Sehen wir uns an, wie das im Internet-Explorer jetzt aussieht. Und ich habe hier einen Farbwähler, den ich nutzen kann. In Browsern mit Unterstützungen für den nativen Farbwähler wird hingegen weiterhin dieser angezeigt. Ich bin da gerade im Firefox. Das Input-Element vom "type color" ist praktisch als Farbwähler. Es zeigt dann automatisch einen Farbwähler an in Edge, Chrome und Firefox. Sie können dabei mit "value" auch eine Farbe vorgeben oder Sie können mehrere Farben vorgeben, was allerdings nicht von allen Browsern unterstützt wird. Damit das Ganze dann auch in den Browsern funktioniert, die dieses Feature nicht implementiert haben, sollten Sie ein Polyfill nutzen wie beispielsweise "spectrum".