HTML/CSS > Unisichtbarer Text
Manchmal braucht man einen unsichtbaren Text, der nur von Suchmaschinen (aus SEO-Gründen) oder Screenreadern gelesen werden kann, normale Besucher der Webseite sollen stattdessen ein Bild sehen können. Um das zu bewerkstelligen verwenden viele die CSS-Eigenschaft display: none;. Die wenigsten wissen allerdings, dass Google den Inhalt anschließend nicht mehr interessiert und auch die meisten Screenreader ignorieren den Text einfach.
Also muss eine andere Lösung her: Opacity. Mit dieser CSS-Eigenschaft lässt sich der Text durchsichtig darstellen und wird somit von Google als normaler Text behandelt.
Beispiel: Eine Überschrift soll den Namen der Webseite enthalten, der normale Seitenbesucher soll aber stattdessen das Logo der Webseite sehen können. Unser HTML-Code dafür sieht so aus:
Über CSS wird der Text durchsichtig gemacht und das h1-Element bekommt als Hintergrundbild das gewünschte Logo:
#logo { background: url(alternativ-bild.png); width: 200px; height: 203px; } #logo span { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); filter: alpha(opacity=0); opacity: 0; -moz-opacity: 0; zoom: 1; display: block; overflow: hidden; } |
Der Trick funktioniert in allen bekannten Browsern – selbst im Internet Explorer 6.
Eine Demo dazu gibt es natürlich auch:
Demo: HTML/CSS > Unsichtbarer Text
JavaScript Benchmark: Browservergleich
Seit nun knapp zwei Wochen ist der neue Firefox 3.6 erschienen. Zeit, um mal einen Vergleich zur Vorgängerversion zu starten. Ich will jetzt aber nicht die einzelnen Features aufzählen, sondern einen genauen Blick auf die JavaScript-Engine werfen.
Zum Testen nehmen wir die zwei Benchmark-Tests V8 Benchmark Suite und Acid3. Wegen der ungleichen Punkteverteilung berechnen wir die Gesamtpunktzahl indem wir vom V8-Test den prozentualen Wert Acid3-Test abziehen.
Und weil es langweilig wäre nur die zwei Firefox zu vergleichen, nehmen wir die aktuell bekanntesten ebenfalls dazu. Das sind unsere Kandidaten:
- Firefox 3.5
- Firefox 3.6
- Internet Explorer 8 ( IE 8 )
- Google Chrome 3
- Google Chrome 4
- Opera 10.10
- Opera 10.50
- Firefox 3.5 (Mac)
- Firefox 3.6 (Mac)
- Safari (Mac)
| Browser | V8 | Acid3 | Gesamt |
|---|---|---|---|
| Firefox 3.5 | 455 | 93 | 423 |
| Firefox 3.6 | 578 | 92 | 532 |
| IE 8 | 98 | 20 | 20 |
| Google Chrome 3 | 4500 | 100 | 4500 |
| Google Chrome 4 | 4550 | 100 | 4550 |
| Opera 10.10 | 287 | 100 | 287 |
| Opera 10.50 | 3772 | 100 | 3772 |
| Firefox 3.5 (Mac) | 378 | 93 | 352 |
| Firefox 3.6 (Mac) | 485 | 92 | 446 |
| Safari 4 (Mac) | 2430 | 100 | 2430 |
| Safari 5 (Mac) | 3009 | 100 | 3009 |
Ich denke das Ergebnis ist relativ eindeutig. Der Firefox hat sich nach dem Versionssprung nur im geringen Maße verbessert und bleibt im Ranking auf Platz 3 hinter dem Safari und Chrome. Weit abgeschlagen auf dem letzten Platz der IE 8…
Als Zusatzinfo sollte ich noch sagen, dass mein Firefox mit diversen Addons bestückt ist (u.a. dem Firebug), aber ich denke nicht, dass dem Firefox dadurch große Punktzahlen verloren gehen. Die meisten Addons gehören ja inzwischen zum Standard.
* UPDATE 25.02.2010: Google Chrome 4 hinzugefügt.
* UPDATE 07.03.2010: Opera 10.50 hinzugefügt.
* UPDATE 19.06.2010: Safari 5 hinzugefügt
Firebug für Google Chrome und Internet Explorer 8
Wie ich heute herausgefunden habe, besitzt Google Chrome Browser (Version 3.x) ebenfalls einen Firebug. Der lässt sich entweder öffnen indem man Rechtsklick auf ein HTML-Element die Option “Element Untersuchen” wählt oder mit dem Shortcut Strg + Umschalt + J.
Und auch der Internet Explorer 8 ist mit einem Firebug ausgerüstet. Mit Extras -> Entwicklertools oder F12 lässt sich das Tool öffnen.
