Nach über einem Jahr Alpha- und Beta-Phase hat Mozilla gestern erfolgreich seinen längst überfälligen Firefox 4 released! Das Äußere wurde komplett umgekrempelt, unter der Haube hat sich einiges getan und die Featureliste ist lang. Ich will euch zeigen, was genau man als ausgefuchster Langzeitnutzer (Wortspiel har har) oder Neuein- bzw. Umsteiger von der neuen Version so zu erwarten hat und welche Auswirkungen sie speziell für erfahrene Nutzer hat.

Die Jungs und Mädchen von Mozilla haben sich einiges einfallen lassen, um so einen großen Release auch gebührend zu feiern. Unter anderem hat man einen schönen Download-Zähler gebaut, der anzeigt wie viel Downloads pro Minute und von welchem Fleck auf der Erde diese getätigt werden.

Firefox Mosaik

Auch für Twitter hat man etwas ganz Spezielles gebaut. Jeder, der den Hashtag #fx4 tweetet, wird kurzfristig als eine Kachel in einem großen Firefox-Mosaik dargestellt. Man kann nach sich und anderen suchen und bekommt dann die jeweilige Kachel mit dem Tweet angezeigt – lustige Idee.

Geschwindigkeit

Ein großer Punkt auf der Agenda war die Geschwindigkeit in allen Bereichen zu verbessern. Dazu hat man bspw. an der Startzeit geschraubt, die bei mir bei 8s (kalt) und und ca. 1,5s (warm) liegt. Das ist etwas mehr als doppelt soviel wie Chrome. Hier hat Firefox noch Potential nach oben und Mozilla weiß das auch, Geschwindigkeit und Leichtigkeit bleiben die wichtigsten Punkte für die Zukunft. Weiterhin werkelt neben Gecko 2.0, dem ein schneller HTML5-Parser verabreicht wurde, noch die blitzschnelle JavaScript Engine JägerMonkey. Besonders auf JavaScript-lastigen Seiten wie Twitter und Facebook ist ein spürbarer Unterschied auszumachen. Wer Bock auf Benchmarks hat, kann sich auf firefox.com/performance den Unterschied zur 3.6 anschauen.

Außerdem gibt es noch die Hardwarebeschleunigung, die ähnlich wie im IE9 und Chrome 10 Webinhalte unter Benutzung der GPU auf die Sprünge helfen soll. Vorrangig geht es dabei um Canvas-Inhalte (Spiele), Scrollen von Webseiten und dem Anschauen von Videos. Damit einher geht auch das veränderte Schriftbild, das den meisten am Anfang etwas seltsam vorkommen wird. Ohne jetzt zu sehr in die Tiefe gehen zu wollen, verweise ich euch auf diesen Artikel über DirectWrite (5 Seiten), der schön erklärt, warum wieso und überhaupt. Nur soviel sei gesagt: Es ist nicht schlecht und man gewöhnt sich relativ schnell daran. Microsoft arbeitet wohl auch an Verbesserungen dahingehend.

User Interface + Customize = User Experience!

Der zweite große Punkt ist die Frage, wie man Firefox um sinnvolle Funktionen erweitern kann, um den Nutzern ein bestmögliches Surferlebnis zu gewährleisten. Dazu hat man sich ALLERHAND lustige Sachen ausgedacht, ich werde mal einige vorstellen und zu jedem einen kleinen Kommentar verfassen..

Tab Management

Alle Tabs befinden sich jetzt oberhalb der Lesezeichen- und Adresstoolbar. Unter Windows Vista und 7 schließen sie dadurch (wenn das Fenster maximiert ist) bündig mit dem Fensterrand ab. Unter Windows XP, Mac OS und Linux ist das nicht immer der Fall. Zwar sind auch hier die Tabs oben, es ist aber immer noch eine Titelleiste vorhanden. Vorteil ist, dass man Tabs besser trifft, wenn man die Maus einfach nur schnell nach oben schiebt. Kleiner Nachteil besteht für Leute, die neue Tabs durch einen Doppelklick im Tabstrip geöffnet haben. Diese Funktion gibt es nicht mehr, es ist jedoch möglich mit dem Neuen-Tab-Button (Tab mit dem großen “Plus” drauf) ODER über Mittelklick, also einen Klick auf das Mausrad, neue Tabs zu erstellen.

App-Tabs und Tabs On Top im Einsatz (Windows 7)

Dazugekommen sind sogenannte App-Tabs, das sind bis auf ihr Favicon geschrumpfte Tabs, die immer offen bleiben. Um einen App-Tab zu erstellen reicht ein Rechtsklick auf einen Tab und das Auswählen von “Als App-Tab anpinnen”. Werden innerhalb von App-Tabs externe Links angeklickt, so werden sie in einem neuen Tab geöffnet. Sie können außerdem nicht per STRG + W geschlossen werden (Shortcut zum Schließen von Tabs, in allen Browsern übrigens..).

Für Leute mit vielen gleichzeitig geöffneten Tabs, gibt es jetzt Panorama. Damit lassen sich Tabs sehr bequem per Drag & Drop gruppieren, wobei dann immer nur eine Gruppe aktiv sein kann. Die Funktion wird entweder über STRG+Umschalt+E oder den Panorama Button geöffnet oder geschlossen. App-Tabs bleiben übrigens in allen Gruppen erhalten.

Panorama - sehr intuitiv gelöst

Einige Verbesserungen wie dem verzögerten Wachstum der Tabs, wenn andere Tabs geschlossen werden oder den neuen Animationen der Tab-Sortierung (beides wie in Chrome, Opera oder IE), haben es leider nicht mehr in dieses Release geschafft.

Änderungen an den Toolbars

Wer sich fragt, wo denn der Home-Button sowie der Stop- und der Reload-Button hin sind, der sollte mal einen Blick nach rechts werfen. Dort finden sich alle Elemente wieder. Der Home-Button ist rüber gewandert und Stop, Go und Reload wurden zu einem einzigen Button verschmolzen, der sich sehr elegant in die Adresszeile einfügt.

Bäumchen wechsle dich!

Es gibt außerdem jetzt die Möglichkeit von Paste & Go bzw. Paste & Search, wobei URLs oder Begriffe in der Zwischenablage direkt eingefügt und danach sofort die Aktion der Adress- bzw. Suchleiste in Gang gesetzt wird. Leider habe ich dafür noch keine Shortcuts entdecken können, sonst würde ich das sicherlich öfter benutzen.

Übrigens ist die Lesezeichenleiste standardmäßig versteckt. Der Button ganz rechts mit dem Stern kann jedoch dazu genutzt werden die geliebte Leiste wieder einzublenden und fungiert darüber hinaus als Lesezeichen-Menü/-Manager.

Die neue Addon Toolbar

Viele Leute stören sich auch an der fehlenden Statusbar. Ich vermisse das hässliche Ding bisher keine Minute. Ziellinks werden in der unteren Ecke angezeigt, für Addons gibt es die neue Addon-Bar, die schnell mit STRG+Umschalt+7 ein- und ausgeblendet werden kann, und für laufende Downloads nutzt man entweder ein gutes Addon oder die Windows 7 Integration mitsamt Download-Fortschrittsanzeige in der Taskleiste (Tabvorschau und Jumplists funktionieren natürlich auch).

Ein weiterer Punkt ist der neue Firefox-Button oben links. Der erscheint, wenn man die Menüleiste ausblendet und vereint alle wichtigen Menüeinträge zu einem Super-Menü. Von hier aus kommt man in die Optionen, den Addon-Manager, dem About/Update-Dialog und allen anderen Punkten, die einem das klassische Menü auch geliefert hat.

Firefox Button mit ausgeklappten Menü

Mir persönlich ist der Button etwas zu sperrig, deshalb nutze ich Movable Firefox Button (veraltet), ein Addon, dass es mir erlaubt den Button als wesentlich kleinere Version irgendwo in eine der Toolbars zu packen. So haben meine Tabs mehr platz und ich bin das klobige Ding los ohne an Funktionalität zu verlieren.

Movable Firefox Button - toll!

Addon Manager

Komplett überholt wurde der Addon Manager, der jetzt mit STRG+Umschalt+A aufgerufen werden kann. Innerhalb des Managers verschwinden alle unrelevanten Toolbars. Erweiterungen, Plugins, Themes, hier findet sich alles schön sortiert und farbliche angenehm hervorgehoben. Addons werden auch weiterhin automatisch im Hintergrund geupdated, man bekommt jetzt aber keine Benachrichtigung mehr wann das passiert – Stichwort: Silent Update.

Der überarbeitete Addon Manager

Link: Rechtsklick -> Im neuen Tab öffnen??

Ja, das ist jetzt nicht mehr an zweiter Stelle im Context-Menü sondern gleich an erster.. hat mich auch 2-3 Tage gebraucht, bis das wieder richtig funktioniert hat. Hintergrund ist, dass Öffnen im neuen Tab viel öfter benutzt wird als Öffnen im neuen Fenster und nach dem Motto “Wichtige Dinge kommen zuerst” wurden die beiden einfach vertauscht, so dass jetzt das wichtigere an erster Stelle steht.

Öffnen in neuem Tab steht jetzt oben

Übrigens! Firefox erkennt jetzt nicht-verlinkte Links auch als Links und offeriert uns gerade genannte Context-Einträge nachdem wir den Link markiert haben. Oftmals sieht man sowas in Foren oder z. B. auf Twitter, wenn jemand vergessen hat ein http:// vor die URL zu setzen. Finde ich eine recht nützliche Sache.

Firefox Sync

Synchronisation ist derzeit ein großes Thema, das Schlagwort Cloud ist in aller Munde. Speziell für Browser scheint daher im Moment kein Weg an Sync-Lösungen vorbei zu gehen. Mozilla hat einen eigenen Dienst entwickelt, der Lesezeichen, Passwörter, Einstellungen, Chroniken und Tabs auf mehreren Rechnern und sogar auf Mobilgeräten (auf denen Firefox oder Firefox Home läuft) zu synchronisieren. Dabei verschlüsselt Firefox die zu übertragenen Daten, sodass sie für keinen einsehbar auf den Mozilla-Servern liegen. Wem das trotzdem zu unsicher ist, kann sich auch einen eigenen Server einrichten. Ich nutze das, um Daten zwischen Zuhause und meinem Rechner auf Arbeit zu syncen, so habe ich meine gewohnte Surf-Umgebung bei mir, egal wo ich mich befinde. In späteren Versionen sollen auch Addons und deren Einstellungen synchronisiert werden können.

Fazit

Mozilla macht einen großen Schritt nach vorn. Das war äußerst wichtig, hat man doch zuletzt viele Nutzer zurecht an Chrome verloren. Man kann vielleicht noch nicht in jeder Hinsicht mit dem Primus in Sachen Geschwindigkeit gleichziehen aber dafür den Vorsprung um einiges wieder verkürzen. Firefox 4 war ein immens großes Projekt, das eigentlich schon hätte Ende letzten Jahres fertig sein müssen. Jetzt stellt Mozilla den Entwicklungszyklus um und erhofft sich dadurch noch schneller und flexibler zu werden. Die Konkurrenz bleibt natürlich auch nicht stehen, IE9 hatte letzte Woche seinen großen Auftritt und von Googles Chrome gibts mittlerweile auch schon die Nummer 10. Es stehen uns also noch viele interessante Neuerungen für die Zukunft ins Haus, es ist so spannend wie nie!

PS

Toolbars anpassen

An alle, die sich an das neue Aussehen von Firefox nicht gewöhnen können oder wollen: Es gibt extra die Möglichkeit alles so zu verändern, bis es einem gefällt. Gerade was die Anordnung von Icons oder Toolbars angeht.. einfach mal Rechtsklick auf eine Toolbar und den Punkt “Anpassen…” wählen. Jetzt könnt ihr Elemente auf den Toolbars per Drag & Drop verschieben, hinzufügen oder entfernen – es ist wirklich einfach, probiert es aus!

IE rafft es nicht!

Heute habe ich mal wieder über etwas gestaunt, das der Internet Explorer nicht kann. Folgendes Szenario: Ihr habt ein Bild auf dem unter anderem ein Schriftzug steht, z. B. “Jetzt hier Registrieren!”. Weil die Schrift mit tollen Effekten und dergleichen ausgestattet ist, bindet ihr sie direkt ins Bild ein. Im Frontend wird das Bild über ein img-Tag ausgegeben und soll jetzt verlinkt werden. “Ok..”, dachte ich mir, “..leg ich halt einen transparenten Link darüber!” – Denkste!

Hier erst einmal ein Beispiel, damit ihr auch versteht, was ich meine. Wie nehmen ein Bild und einen Link und packen einen Wrapper darum. Der Wrapper bekommt position:relative, damit wir den Link per position:absolute über das Bild schieben können. Der Link soll natürlich transparent sein, wir wollen ja nicht irgendwie das Bild “übermalen” sondern nur einen anklickbaren Bereich schaffen, also wird der Text versteckt.

Problembeispiel (alle IE-Versionen)

HTML

1
2
3
4

<div class="wrapper">
	<img src="http://www.getfirebug.com/img/firebug-logo.png" alt="Bild"/>
	<a href="http://www.getfirebug.com">Link</a>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12

.wrapper {
	position:relative;
	width:293px;
}
a {
	height:70px;
	position:absolute;
	right:0;
	text-indent:-9999px;
	width:185px;
	top:0;
}

Ergebnis

Link

Ich habe die wichtigen Bereiche nochmal hervorgehoben, der blaue Rahmen umrandet den Wrapper, der rote den Link.

Natürlich ist diese Denkweise nicht verkehrt, sie hat nur einen Haken: In allen von mir getesteten Versionen des Internet Explorers (IE6-9) hat das nicht funktioniert! Im IE kann man den Link einfach nicht anklicken, alle anderen Browser haben damit absolut kein Problem.

Ich dachte erst es liegt daran, dass das Bild den Link im IE irgendwie überdeckt, weil ich kein z-index benutze. Dann habe ich versucht den Text über padding-top und overflow-hidden zu verstecken und dachte der IE eventuell damit besser zurecht. Nichts hat geholfen.. wenn ich den Text nicht versteckte, konnte man nur den Text anklicken, nicht aber den Rest der klickbaren Fläche. Erst als ich das Bild aus dem Quellcode entfernt hatte, konnte man ganz plötzliche die komplette transparente Fläche anklicken.

Natürlich war ich schon wieder kurz vorm Platzen.

Lösung

Ein ähnliches Problem mit nicht anklickbaren Links hatte ich zwar schon mal im IE6 aber ich hätte nie gedacht, dass IE8 und 9 hier immer noch solche Probleme haben. Aber was soll’s, eine Lösung musste her und es gibt zwei Wege, wie man das Problem umgehen kann..

1. das Bild nicht als img-Tag einbinden, sondern dem Wrapper/Link als background-image zuweisen
2. dem Link ein transparentes Hintergrundbild verpassen

In meinem Fall war letztere Variante günstiger, ich würde aber prinzipiell eher zu Variante eins raten, da sie sauberer ist. Und ja, sobald der Link eine Hintergrundfarbe oder ein Hintergrundbild bekommt, kann man ihn auch im IE anklicken, verrückte Welt oder?

Beispiel mit Lösungsvariante 1

HTML

1
2
3

<div class="wrapper">
	<a href="http://www.getfirebug.com">Link</a>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.wrapper {
	background:transparent url(http://www.getfirebug.com/img/firebug-logo.png) repeat 0 0;
	height:89px;
	position:relative;
	width:293px;
}
a {
	height:70px;
	position:absolute;
	right:0;
	text-indent:-9999px;
	width:185px;
	top:0;
}

Ergebnis

So klappts auch im IE!

PS: Firebug 1.6 wurde heute veröffentlicht, schnell runterladen oder updaten und die Beispiele damit untersuchen!

Wie heute Abend bekannt gegeben wurde, ist ab sofort die Version 1.5 des beliebten Entwicklertools Firebug zum Download freigegeben. Firebug ist seit seiner Entstehung das Werkzeug für jeden Webentwickler. Die neue Version verspricht mehr Stabilität, neue Features, weniger Bugs und funktioniert ab Firefox 3.5.

Laut John J. Barton, Mitarbeiter bei IBM und derzeitiger Chefentwickler von Firebug, hat das Team diesmal besonderes Augenmerk auf die Qualität gerichtet. Neue Features und Usability-Verbesserungen wurden in insgesamt 36 Alphas und Betas getestet, sodass nahezu alle Bugs beseitigt werden konnten. Der offizielle Downloadweg über das Add-on-Verzeichnis von Mozilla wird erst ab nächster Woche möglich sein. Alle die jetzt schon die 1.5 probieren wollen, klicken auf folgenden Link.

Firebug 1.5 Installieren

Zu den Neuerungen gehören unter anderen:

• verbesserter Inspector: höhere Zuverlässigkeit, Quick Info Box, Image Map Inspector
• neuer Tab “Berechnet”, zeigt berechnetes CSS in einer Übersicht an
• :hover und :active Pseudoklassen werden besser unterstützt
• DOM Knoten im HTML-Tab können mit Doppelklick geöffnet/geschlossen werden
• Umschalten zwischen kurzer und ausführlicher Schreibweise von CSS Code
• Break on Mutate, Haltepunkte für HTML
• diverse Bugfixes

Firebug in einem neuen Fenster geöffnet

Seit knapp zwei Wochen ist auch die Enwicklung an der nächsten Version (1.6) im Gange. Im Moment kann man sich die dritte Alpha herunterladen und testen. Solltet ihr Bugs finden, meldet sie doch am besten im Bugtracker.

Update: Sieht so aus, als hätte der Webauftritt von Firebug ein neues Design spendiert bekommen.

Viel Spaß beim Entwickeln und Debuggen!