LautundKlar Webdesign Blog

Hier nun eine Methode E-Mail Adresse vor Spambots mit CSS und ohne den Einsatz von Javascript zu verstecken:

<style type="text/css">
/*<![CDATA[*/

/*]]>*/
</style>

<p class="rev">ed.revres@hci</p>


In der Klasse rev wird mittels unicode-bidi:bidi-override und direction: rtl die Textrichtung umgekehrt.

Wenn man nun im Quelltext die E-Mail Adresse von hinten nach vorne eintippt, erscheint sie für den User in der richtigen Schreibweise.

Leider lässt sich mit dieser Methode der mailto Link nicht verschlüsseln. Man könnte aber die CSS Methode beispielsweise mit diesem JavaScript kombinieren und die E-Mail Adresse wäre für Spambots unkenntlich, für den User aber sowohl lesbar als auch anklickbar.

Ein Nachteil bleibt aber bestehen:
Ohne CSS ist die E-Mail Adresse spiegelverkehrt. Das ist hinsichtlich der Barrierefreiheit und der Ausgabe mit Screenreadern natürlich ein Nachteil.

Browserkompatiblität:
Die CSS Eigenschaft unicode-bidi wird von fast allen modernen Browsern unterstützt:

• Netscape ab Version 6
• Mozilla ab Version 1
• Firefox ab Version 1
• Internet Explorer ab Version 5 – außer IE 5 Mac
• Opera ab Version 6

Ob diese Eigenschaft vom Safari unterstützt wird ist mir leider nicht bekannt.

Popularity: 39% [?]

Kleines nützliches Online-Tool um Pixel in em umzurechnen:
http://riddle.pl/emcalc/

Popularity: 31% [?]

Transparenz mit CSS für verschiedene Browser

Eine einfache Methode Bilder oder Ebenen transparent zu machen, sieht wie folgt aus:

#transparent {
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);
}

1. CSS 3 kennt die Eigenschaft opacity. Diese kann einen Wert zwischen 0 (unsichtbar) und 1 annehmen
2. Mozilla Browser haben Ihre eigene browserspzifische Eigenschaft -moz-opacity, die ebenfalls einen Wert zwischen 0 und 1 annehmen kann
3. Der liebe Internet Explorer (ab Version 5.5) hat auch seine browserspezifische Eigenschaft, genannt filter, mit der viele Effekte erzielt werden können. Für die Transparenz gibt es den alpha filter, dem ein opacity-Wert zwischen 0 und 100 zuzgewiesen werden kann

Um nun sicher zu stellen, dass dieser Effekt in möglichst vielen Browsern funktioniert, werden alle drei Methoden gleichzeitig eingesetzt. Nachteil dieser Vorgehensweise ist, dass die CSS-Datei dann leider nicht mehr ganz valide ist.

Eingesetzt wurde diese Technik zum Beispiel auf der Webseite der Kieferorthopädie Dres. Schrems

Popularity: 30% [?]

Am 19. Dezember 2006 feiert das W3C den zehnten Jahrestag der Cascading Style Sheets (CSS). Wir gratulieren!

Bemerkenswert hierbei ist, dass die im Dezember 1996 publizierte CSS Level 1 Recommendations erst seit geraumer Zeit in aktuellen Browsern nahezu vollständig implementiert sind. CSS Level 2 (CSS2), das im Mai 1998 veröffentlicht wurde, wird hingegen bis heute noch nicht hinreichend von allen Browsern unterstützt.

Popularity: 28% [?]