Frank Seitz' Developer Logbuch - HTML+CSS

Email-Adressen in HTML vor Spammern schützen

nospam@example.com (Frank Seitz) — Tue, 26 Jan 2010 12:09:37 +0100

In Mailto-URLs

Statt den Mailto-URL per href zu setzen, wird der mailto-URL zum Zeitpunkt des Klicks via JavaScript generiert.

Nicht gut:

<a href="mailto:rudi.ratlos@host.dom">...</a>

Besser:

<a href="#" onclick="this.href = 'mailto:rudi.ratlos'+'&#64;'+'host.dom'">...<a/>

Dies setzt natürlich JavaScript voraus. Aber schreibt heutzutage noch jemand Web-Anwendungen ohne JavaScript?

Im Text

Statt die Email-Adresse im Klartext hinzuschreiben, wird das @-Zeichen ausgetauscht: entweder durch ein HTML-Entity, eine Zeichenkette wie "<AT>" oder eine Grafik:

Nicht gut:

rudi.ratlos@host.dom

Besser:

rudi.ratlos&#64;host.dom

Noch besser, mit Text:

rudi.ratlos&lt;AT&gt;host.dom

Mit Grafik:

rudi.ratlos<img src="at.png" alt="AT" ... />host.dom

Bei einer Grafik besteht das Problem, dass diese vom Aussehen statisch ist, das Aussehen des umgebenden Textes u.U. nicht immer gleich ist, z.B. in unterschiedlichen Browsern oder durch Farbänderung beim Überfahren eines Links.

HTML: String in Entity-Schreibweise wandeln

nospam@example.com (Frank Seitz) — Tue, 26 Jan 2010 10:13:55 +0100

Eine einfache (eventuell nicht besonders wirksame) Methode, um Email-Adressen in HTML-Seiten unkenntlich zu machen, um sie vor Spammern zu verbergen, ist, sie in Entity-Schreibweise zu wandeln. Das folgende Perl-Skript wandelt einen beliebigen String in Entity-Schreibweise:

1	while ($str =~ /(.)/g) {
2	printf '&#%d;',ord $1;
3	}

Beispiel:

$ ./str-to-entity 'rudi.ratlos@...'
&#114;&#117;&#100;&#105;&#46;&#114;&#97;&#116;&#108;&#111;&#115;&#64;&#46;&#46;&#46;

Text-Eingabefelder per CSS gestalten

nospam@example.com (Frank Seitz) — Mon, 11 Jan 2010 18:34:00 +0100

<input type="text"  id="e" name="text" size="20" />

Text:

Umrahmung

Rahmen von 1px Breite statt der normalen Dekoration.

#e {
  border: 1px #999 solid;
}

Hintergrundfarbe

Die Hintergrundfarbe des Eingabefeldes ändern, wenn es mit der Maus überfahren wird (:hover) oder den Fokus bekommt (:focus). Besitzt das Feld weder den Fokus noch befindet sich die Maus darüber, wird die ursprüngliche Hintergrundfarbe automatisch wieder hergestellt. Dies braucht nicht vereinbart werden.

#e:hover, #e:focus {
  background-color: #eee;
}

Font

Ein Text-Eingabefeld sollte m.E. normalerweise einen monospaced Font eingestellt haben, nur dann entspricht die optische Feldbreite exakt der Anzahl der Zeichen, die in das Feld passen.

#e {
  font-family: monospace;
}

Validierung von HTML- und CSS-Code

nospam@example.com (Frank Seitz) — Sat, 09 Jan 2010 10:00:00 +0100

Das W3C stellt zwei Services zur Validierung von HTML- und CSS-Code zur Verfügung:

HTML-Validator: http://validator.w3.org/
CSS-Validator: http://jigsaw.w3.org/css-validator/

Um den HTML- bzw. CSS-Code einer Seite direkt zu validieren, können folgende Links in die Seite eingebaut werden. Aus dem Referer-Header ermittelt der Validator die Ausgangsseite und ruft diese ab. Das geht natürlich nur, wenn die Seite öffentlich zugreifbar ist.

Validierung von XHTML-Code

<a href="http://validator.w3.org/check/referer?ss=1">
  <img src="valid-xhtml10.png" width="88" height="31" alt="Valid XHTML 1.0!" />
</a>

Der URL-Parameter ss=1 sorgt dafür, dass der Validator ein Source-Listing erzeugt. Dies ist sehr sinnvoll, da dann von einem Fehler aus direkt an die beanstandete Stelle gesprungen werden kann.

Validierung von CSS2-Code

  <a href="http://jigsaw.w3.org/css-validator/check/referer">
    <img src="valid-css2.png" width="88" height="31" alt="Valid CSS!" />
  </a>