Placeholder-Textfarbe in verschiedenen Browser bestimmen (input, textarea)

Mit HTML5 wurde das Input- und Textarea-Attribut placeholder eingeführt. Mit ihm kann man ein solches Feld mit einem vordefinierten Wert vorbelegen, ähnlich wie mit value. Doch wie kann man diesen vordefinierten Text farbmäßig anpassen?

Es gibt drei verschiedene Arten dies zu tun: mit einem pseudo-Element, mit einer pseudo-CSS-Klasse oder garnicht. Jeder Browser macht’s anders:

  • Webkit-Browser (Chrome, Safari, ..) setzen auf das Pseudo-Element ::-webkit-input-placeholder,
  • Mozilla Firefox 3 bis 18 benutzen die Pseudo-Klasse :-moz-placeholder,
  • Ab Version 19 setzt Firefox auf ::-moz-placeholder (also mit einem doppelten Doppelpunkt),
  • Der Internet Explorer (ab Version 10) nutzt :-ms-placeholder

Der Internet Explorer bis Version 9 und auch die neuste Version vom Opera-Browser (momentan Version 12) versteht von all dem garnichts.

CSS-Selektoren – Gruppe

Aufpassen sollte man bei der Umsetzung – man kann nicht einfach eine CSS-Selektoren-Gruppe aus allen Browserverianten basteln um nur einmal seine eigentlichen Farbwerte zu vergeben – denn nach den CSS-Spezifikationen ist eine Gruppe aus Selektoren ungültig, sobald auch nur ein einziger Selektor ungültig ist:

User agents must observe the rules for handling parsing errors:

(..) a group of selectors containing an invalid selector is invalid.

Deswegen brauchen wir für jeden Browser eigene Regeln:

::-webkit-input-placeholder {
    color: #888;
}

:-moz-placeholder {
    color: #888;
}

::-moz-placeholder {
    color: #888;
}

:-ms-input-placeholder {
    color: #888;
}

Weitere Dinge die man beachten sollte:

  • Unbedingt auf gute Kontrast-Werte achten – es gibt viele Leute die mit einem IE < V.10 unterwegs sind und die die Placeholder-Farbe u.U. nicht erkennen können – die eigentliche color eines input-Feldes sollte sich stark von der background-color abheben,
  • Placeholder werden abgeschnitten wenn sie zu groß (zu breit) für das Feld sind – unbedingt gut testen und auch auf verschiedene Schriftarten achten,
  • Manche Browser stellen verschiedene input -Typen (email, search) anders da. Dies sollte man beachten oder direkt verhindern. Am einfachsten ist es die Eigenschaften -webkit-appearance, -moz-appearance und appearance auf textfield zu ändern. Ungefähr so:
    [type="email"], [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

Flattr this!

Du willst also ein riesiges neues Webprojekt starten?

Vor einigen Wochen wurde ich von einer großen Firma gebeten, ein Redesign (auch im technischen Hinblick) ihrer Website durchzuführen. Nun möchte ich mit euch meine Gedanken dazu teilen, evtl. kommen ja weitere Vorschläge von Leuten, die an einem ähnlichen Punkt stehen, dazu 🙂

Man kann keine mobilen Endgeräte vernachlässigen

Schaut man sich den folgenden Graphen an – er erzählt seine eigene Geschichte. Millionen von mobilen Geräten surfen jeden Tag durchs Internet. Ignoriereren auf eigene Gefahr..! Weiterlesen →

Flattr this!

Text in CSS unsichtbar machen (ersetzt den -99999px-Hack)

Fast jeder meiner Kunden hat (natürlich, würden viele sagen) ein Logo auf der Website. Nur muss dieses ja möglichst Suma-Optimiert codetechnisch in die Seite eingebaut werden.

Dies sieht dann meistens wie folgt aus:

<h1>Meine tolle Firma</h1>

plus natürlich CSS:

h1 { 
  display: block;
  background: transparent url('/img/logo.png') no-repeat; 
  width: 300px;
  height: 100px; 
  text-indent: -99999px 
}

Das Wichtige im CSS-Code oben ist der negative Wert von text-indent, um den Text in den unsichtbaren Bereich der Website „einzurücken“. Im Gegensatz zu visibility: hidden oder display: none wird nämlich hier nicht das ganze Element, sondern nur der Text unsichtbar gemacht – so wie es vom Webentwickler gewollt ist.

Was nun im Hintergrund passiert, ist folgendes: wird mit dem Browser die Seite, die diesen negativen Wert von text-indent enthält, aufgerufen, so zeichnet der Browser eine riesige 99999px große Box, von der die Person von dem Bildschirm nichts hat – trotzdem hat der Browser arbeit und braucht eine bestimmte Zeit, diesen Kasten zu zeichnen.

Die Lösung

Besser wäre folgendes zu schreiben:

h1 { 
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

Jetzt wird der Text immer um die gesamte Größe des Containers eingerückt (text-indent: 100%). Da dieser Text aber direkt abgeschnitten wird (overflow: hidden), sieht der Betrachter nichts davon. white-space: nowrap ist übrigens dafür da, das der Text in einer Zeile bleibt (text-indent gilt nur für die Einrückung der erste Zeile eines Textes).
Zudem ist der Kasten mit dem eingerückten Text auch nur maximal so groß wie der Text an sich – die gezeichnete Box des Browsers wird damit in in fast 100% der Fälle kleiner sein.

Also Leute – nur noch mit text-indent: 100% arbeiten – wer weiß, vielleicht gibt es in wenigen Jahren Retina-Bildschirme, die locker eine horizontale Aulösung von > 10000px haben. Und dann nicht mehr lange und man sieht in euren Projekten den negativ eingerückten Text.
Kann mit meiner vorgestellten Lösung nicht mehr passieren 😉

Flattr this!

Die Nachteile von CSS-Frameworks

„Welches ist das beste CSS-Framework?“ wurde vor kurzem auf stackoverflow gefragt. CSS-Frameworks – woher kommt eigentlich der Begriff?

CSS ist eben nicht wie JavaScript, wo man alle möglichen Librarys und Frameworks einsetzen kann um mit Funktionen und Objekte zu arbeiten.

Benutzt man die so genannten „CSS-Frameworks“, so muss man sich immer an bestimmt definierte Regeln halten: jedes Framework enthält bestimmtes CSS-Reset-Zeug (sollte man übrigens nicht mehr benutzen – dafür gibt es seit neustem normalize.css), dazu kommen einige CSS-Styles. Und natürlich einige Layout-Regeln, welche float und clear beinhalten.
Dies alles kann man allerdings auch selbst in ein paar Zeilen CSS-Code schreiben und braucht dafür keine 5000 Zeilen Code, wie es bei Bootstrap der Fall ist.

Das „Grid-Layout“ geht, wie ich finde, zurück in’s Jahr 2000, als man die Präsentationsschicht mit dem Markup vermischt hat. Also man noch ganz ohne CSS gearbeitet hat.
<div class="span-10"> ist nicht viel besser als eine Tabelle: wenn etwas verändert werden soll, geht man direkt an diese Stelle im HTML-Code und ändert diese, um Änderungen am Layout herbeizurufen.
Zudem basieren alle CSS-Frameworks auf dieser „Fixed-Pixel Floated Div’s“ – man arbeitet immer in einem bestimmten Rahmen und kann daher nicht einfach so die breite einer Box in einem beliebigen Spektrum abändern.

Zusammengefasst denke ich das solche Frameworks gegen das Entwickeln eines Designs an sich spricht. Sie sind für Leute da, die eben ein einfaches Projekt auf die Beine stellen wollen, bei dem das Design nicht viel zählt – und für die, die nicht viel mit CSS am Hut haben.

Flattr this!

CSS3 / CSS4: Neues auf der Strecke gebliebene

Die Zukunft von CSS kann man komplett unterschiedlich bewerten: zum einen gibt es eine ganze Reihe neuer Methoden um die Websiten die wir mit CSS layouten zu revolutionieren, zum Anderen gibt es viele neue Spielereien und grafische Effekte wie on-thy-fly Filter, Shader, Farbverläuft, …, die darauf warten eingesetzt zu werden. Zeitschriften und Blogs sind voll mit Artikeln, die davon berichten, wie sie einzusetzen sind.

Doch diese „Aushängeschilder“ sind nicht alles was sich in den neuen Versionen von CSS getan hat. Im Hintergrund wurden auch viele Schrauben und Muttern, praktisch Drehknöpfe in CSS, geändert, erneuert oder sogar neu eingeführt. Ich rede dabei von neuen Selektoren, Einheiten und Funktionen. Funktionen in CSS? Ja wirklich. Dazu später mehr. Davon schreibt leider kaum ein Blog, kaum eine Zeitschrift. Deswegen dieser Artikel in meinem Blog ;-). Weiterlesen →

Flattr this!