Mit Zeilenzwitter

Knapp zwei Jahre nach dem letzten Versionssprung haben die Entwickler des freien Firefox die dritte Ausgabe ihres Browsers veröffentlicht. Neben vielen Neuerungen für Anwender bringt er Verbesserungen für Entwickler.

11

24.07.2008, 02:00 Uhr

Lesezeit: 6 Min.

iX Magazin

Von

Christian Kirsch

Was sich an der Oberfläche des neuen Firefox getan hat, ist schnell zu erkennen: Bei der automatischen Vervollständigung in der Adresszeile („location bar“, s. Bild oben bzw. in der Printausgabe) erscheinen neben passenden URLs die Titelzeilen der Webseiten und ihre Icons – allerdings auch von noch nicht besuchten Seiten. Da dies vielen Anwendern nicht gefiel, stellen die Entwickler eine Anleitung zum Abschalten dieser „reichhaltigen“ Darstellung bereit (s. iX-Link). Ein Klick auf das „Favicon“ in der Adresszeile zeigt bei HTTPS-Verbindungen sofort, welche Website hinter der URL steckt – das soll Phishern die Arbeit erschweren. Die „Wollen Sie das Passwort speichern“-Frage stellt Firefox jetzt erst nach der erfolgreichen Anmeldung, nicht schon nach der Eingabe des Passworts wie bisher. Das verhindert unnötige Fehleinträge. Downloads gestalten sich einfacher, da der Browser sowohl den Speicherort als auch die Herkunft der heruntergeladenen Dateien zeigt. Außerdem lassen sich unterbrochene Downloads später fortsetzen.

Wichtige Neuerungen gab es jedoch auch im Unterbau. Sie betreffen Webentwickler, die sich auf bessere CSS-Unterstützung, neue Javascript-Funktionen, mehr Nähe zum Internet Explorer und HTML5-Features stürzen können. Und wie die Anwender dürften sie sich über den Tempogewinn freuen: Im Kurztest benötigte Firefox 3 zum Laden einer lokal gespeicherten Webseite rund 10 % weniger Zeit als sein Vorgänger.

Verbesserungen bei Stylesheets

Firefox 3 (oben) interpretiert anders als sein Vorgänger den Wert inline-block der display-Eigenschaft korrekt. Bei der Gelegenheit lässt er jedoch die Bullets verschwinden (Abb. 1).

Die größten Auswirkungen dürften die Neuerungen in Firefox’ CSS-Umsetzung haben. Dazu gehört Verständnis für die display-Werte inline-block und inline-table. Das erste kennen andere Browser schon lange, sogar der Internet Explorer. Die auf den ersten Blick widersprüchliche Bezeichnung legt fest, dass der Browser das betreffende Element innerhalb der aktuellen Zeile anordnet, es darf jedoch Block-Elemente enthalten. Außerdem kann man ihm wie Block-Elementen eine Breite zuweisen. Damit lassen sich mit inline-block ähnliche Anordnungen erreichen wie mit float, ohne jedoch dessen Nachteile in Kauf zu nehmen (s. Listing 1 und Abb. 1).

Listing 1: Menüs mit float und inline-block

<html> 
<style>
.old {
  float: left;
  width: 5.5em;
  background-color: #aaffaa;
}
.new {
  width: 5.5em;
  display: inline-block;
  background-color: #ffaaaa;
}
</style>
<body>
<ul>
  <li class="old">Datei
  <li class="old">Bearbeiten
  <li class="old">Optionen
  </ul>
<br>
<ul>
  <li class="new">Datei
  <li class="new">Bearbeiten
  <li class="new">Optionen
</ul>
</body> 
</html>

Mit der HTML-Entity markieren Webautoren Trennmöglichkeiten (Abb. 2).

Die in CSS 2.0 definierte, aus 2.1 jedoch wieder entfernte Eigenschaft font-size-adjust, die der Entwurf von CSS3 auch enthält, interpretiert der Browser korrekt. Damit können Entwickler die Schriftgröße anhand der Höhe von Kleinbuchstaben festlegen. Ebenfalls bei der Darstellung von Texten hilft das „weiche“ Trennungszeichen , das mögliche Umbrüche markiert. Firefox 3 fügt bei Bedarf an dieser Stelle einen Trennstrich ein und führt das Wort auf der nächste Zeile weiter (s. Listing 2 und Abb. 2).

Listing 2: Trennmöglichkeiten

<html> <style>
p {
  width: 10em;
}
</style>
<body>
<p>Donau&shy;dampf&shy;schiff&shy;fahrts&shy;  
    kapitäns&shy;wit&shy;wen&shy;un&shy;ter&shy;
    stüt&shy;zungs&shy;kasse
</p>
</body>
</html>

In ihrer DOM-Implementierung haben die Firefox-Entwickler einige Funktionen nachgerüstet, die es bislang nur im Internet Explorer gab. In Zeiten des Web 2.0 besonders wichtig dürften die Ereignisse oncut, oncopy und onpaste sein. Damit lassen sich jetzt alle Änderungen an Textfeldern verarbeiten. Bislang war das Einfügen aus dem Clipboard in Firefox und seinen Abkömmlingen nur durch Überwachung von onblur möglich. Das schicken die Browser jedoch nur, wenn das Eingabefeld den Fokus verliert, und dann ist es für viele Anwendungen schon zu spät.

Mit den neu eingeführten Methoden getBoundingClientRect() und getClientRects() können Anwendungen die Abmessungen von DOM-Elementen und aller ihrer Kinder ermitteln. Beide stammen aus dem Internet Explorer, ebenso wie clientTop() und clientLeft(), die die Breite des oberen und linken Rahmens liefern.

HTML 5-Funktionen und -Events

Falls bisher der Eindruck entstanden sein sollte, Firefox 3 laufe lediglich dem Internet Explorer hinterher, ist es Zeit für eine Korrektur. Etliche seiner Neuerungen gibt es bislang nur als Vorschlag für das zukünftige HTML 5. Dazu gehören etwa getElementsByClassName(), das eine Kollektion der DOM-Elemente zurückliefert, deren class-Attribut den angegebenen Wert hat. Ähnlich wie das ältere getElementsByTagName() kann es mit der Suche bei einem beliebigen Element beginnen. Ebenfalls aus HTML 5, genauer aus den Überlegungen der Whatwg-Gruppe, sind die Drag- und Drop-Events entlehnt. Auf den Mozilla-Seiten findet sich ein Beispiel für ihre Nutzung (s. untenstehenden iX-Link). Bislang sind diese Events jedoch eng an Mozilla-Besonderheiten gebunden, so lassen sie sich nur in Verbindung mit einem von diesem bereitgestellten Drag-Service verwenden.

Solange nicht alle Browser gleichermaßen damit umgehen können (von einer Normierung ganz zu schweigen), ist der Nutzen solcher Erweiterungen aber beschränkt: Wenn sich die Nutzer auf die Verwendung eines bestimmten Browsers festlegen lassen, kann man Spezifisches erfolgreich einsetzen. Andernfalls nützt die Arbeit im besten Fall nichts – im schlimmsten schadet sie, wenn der gerade eingesetzte Browser die Daten falsch interpretiert oder gar abstürzt.

Ältere Firefoxe (links) interpretieren das disabled-Attribut zaghafter als Version 3 (Mitte). Vom unter Mac OS X Üblichen (rechts) ist auch sie noch weit entfernt (Abb. 3).

Ebenso browserspezifisch ist die Umsetzung von Microformats. Diese Zusammenfassungen von (X)HTML-Elementen definieren Adressen, Termine und Ähnliches so, dass sie sich leicht weiterverarbeiten lassen. Das Operator-Plug-in (s. untenstehenden iX-Link) illustriert einige Einsatzmöglichkeiten, etwa den Export von Kontakt- und Termindaten in die jeweiligen Google- oder Yahoo-Anwendungen. Firefox stellt eine Microformats-API bereit, die ein Programm jedoch ausdrücklich aktivieren muss. Anschließend kann es sowohl auf Microformats auf der Webseite zugreifen als auch mit add() neue spezifizieren. Vordefiniert sind unter anderem adr, hCard (Kontaktdaten) und hCalendar (Termin).

Einige andere Kleinigkeiten dürften Entwickler wie Anwender erfreuen. So passt sich der Firefox auf Apple-Rechnern endlich in deren Aqua-Design ein. Per disabled-Attribut deaktivierte Knöpfe lassen sich in der neuen Version besser erkennen als bislang, sie unterscheiden sich aber immer noch von dem, was auf der Plattform üblich ist (s. Abb. 3). Eine als Schutz der Privatsphäre eingeführte Änderung schließlich könnte den einen oder anderen Programmierer stören: Beim Hochladen von Dateien übermittelt der Browser nicht mehr den gesamten Pfad, sondern nur noch den eigentlichen Namen. In SVG-Daten (Scalable Vector Graphics) interpretiert Firefox jetzt foreignObject, pattern und mask ebenso korrekt wie alle Filter.

iX-Link