Tag: firefox

201209Feb

Webdesign: CSS-Probleme mit GDI und DirectWrite

Die Welt des Webdesigns hat sich dank individueller Schriftarten durch "@font-face" zum Guten verändert, da Designer nicht mehr auf Systemschriftarten angewiesen sind. Inzwischen unterstützen alle modernen Browser Möglichkeiten, um Schriftarten per "@font-face" in CSS einzusetzen. Das Problem: Browserhersteller beginnen, die Methode zur Darstellung von Schriftarten zu ändern. Das betrifft alle Windows-Systeme ab Windows Vista, denn hier wurde für die ClearType-Darstellung neben der bisher verwendeten GDI-API die Direct2D-API bzw. DirectWrite-API eingeführt. Dadurch ist ein hardwarebeschleunigtes Rendering (also durch die GPU) im Browser möglich. DirectWrite wird in Firefox seit Version 4 und in Internet Explorer seit Version 9 unterstützt. Nur in Chrome kommt bis zum aktuellen Zeitpunkt (Version 16) noch das GDI-Rendering zum Einsatz. Der Safari-Browser ist von dem Dilemma nicht betroffen, da Mac OS X ein eigenes Font-Rendering (Core Text) besitzt. Dafür gibt es ein ähnliches Problem zwischen der Windows- und Mac-Version.
Das eigentliche Problem besteht nun darin, dass die Darstellung von Schriftarten abweicht. Je nachdem, ob die GDI- oder DirectWrite-API verwendet wird, können Abweichungen in Texten entstehen.

Webdesign - CSS-Probleme mit GDI und DirectWrite

In diesem Eintrag bei Stack Overflow wird der Effekt noch einmal deutlich. Wer das Ganze selbst testen möchte, kann dazu auf ein bestehendes jsFiddle-Snippet zurückgreifen. Der springende Punkt ist nun, dass das neue DirectWrite-Rendering ab Firefox 4 und Internet Explorer 9 automatisch aktiviert ist. Läuft der Text aus dem Snippet also über die graue Fläche hinaus, wird DirectWrite und damit Hardwarebeschleunigung verwendet.

Weiterlesen...
201230Jan

HTML5: Aktuelle Demos und Notizen von Mozilla

Christian Heilmann, Principal Technical Evangelist bei Mozilla, hat die Slides zu einer kürzlichen HTML5-Präsentation auf der "Mozilla Vision 2012" in Tokio veröffentlicht. Diese variieren etwas von seinen vorherigen Präsentationen und zeigen die aktuellen Entwicklungen von Mozilla bezüglich HTML5 und CSS3 auf. Dazu werden wieder verschiedene Beispiele aufgeführt wie etwa der morphende CSS3-Würfel. Die 3D-Transitions funktionieren in Firefox erst ab Version 10, die sich momentan im Aurora-Status befindet.

Christian Heilmann - The Future of HTML5 and Web Technologies

Weiterhin wird der 3D CSS Tester aufgeführt, mit dem sich per GUI bequem CSS3-Attribute wie "perspective", "rotateZ" oder "keyframes" ausprobieren lassen. Auch die Firefox-Erweiterung Tilt wird erwähnt, mit der sich seit geraumer Zeit auf WebGL-Basis Websites dreidimensional betrachten lassen. Dabei wird die DOM-Struktur in verschiedenen Ebenen dargestellt, je nachdem, wie komplex die Verschachtelung der Seite ist.
Insgesamt finden sich in der Präsentation einige interessante Links zu aktuellen Beispielen, die den Einsatz von HTML5 und CSS3 demonstrieren.

201113Nov

Firefox 10: Eingebaute Tools für Webentwickler

Auf der Channel-Seite von Mozilla finden sich seit einiger Zeit die verschiedenen Firefox-Versionen, zu denen neben der stabilen Variante auch die Beta- und Aurora-Versionen zählen. Der aktuelle Aurora-Release stellt Firefox 10 dar und so können Interessierte schon jetzt testen, was die zukünftige Version des Mozilla-Browsers leistet. Neben einer Vollbilld-API (z.B. verwendbar für HTML5-Videos) und Anti-Aliasing für CSS3-3D-Transformationen und WebGL bietet Firefox 10 auch neue Entwicklerwerkzeuge, die an Tools wie Firebug angelehnt sind. Damit wird der kommende Firefox von Haus aus mit einem Inspektor ausgestattet sein, der diverse Möglichkeiten bietet. Die konkurrierenden Webbrowser bieten derartige Entwicklertools schon seit geraumer Zeit.

Firefox 10 - Aurora

So lassen sich DOM-Elemente per Mausklick anwählen und in einer separaten Ansicht betrachten. Allerdings können zum aktuellen Zeitpunkt im Gegensatz zu Firebug nur Attribute geändert werden. Ein Inspektor für CSS-Stile ist ebenfalls integriert und die Darstellung erinnert an Google Chrome oder Safari: Attribute können per Auswahlfeld an- und abgeschaltet werden. Das "Properties"-Panel gibt Aufschluss darüber, in welchen Dateien die Stile definiert wurden. Leider fehlt aktuell bei den CSS-Regeln noch eine Scrollbar, so dass die Liste nicht komplett betrachtet werden kann.
Zusätzlich kann mit dem "Scratchpad" JavaScript-Code ausgeführt werden. Dieser Editor bietet auch Möglichkeiten zur Inspizierung und jQuery ist ebenfalls an Bord.
Insgesamt hinterlassen die neuen Entwicklerwerkzeuge einen positiven Eindruck, wobei Firebug klar überlegen ist. Das könnte sich aber in zukünftigen Versionen noch ändern.

201111Nov

Mozilla Lightning: Kalender-Extension in Version 1.0

Mozillas Kalender-Lösung Sunbird dürfte vielen wahrscheinlich ein Begriff sein. Die Anwendung konnte bisher gute Dienste leisten, wurde von Mozilla aber eingestellt. Zukünftig stellt die Thunderbird-Extension Lightning die primäre Kalender-Anwendung von Mozilla dar. Die Erweiterung wurde nun in Version 1.0 veröffentlicht und kann ab Thunderbird 8 verwendet werden.

Mozilla Lightning 1.0

Lightning bietet eine solide Basis an Werkzeugen für das Verwalten von Terminen und Aufgaben. Mit der finalen Version wurde die Benutzeroberfläche an bestimmten Stellen überarbeitet und etliche Fehler wurden korrigiert. Die Erweiterung integriert sich nahtlos in Thunderbird und kann so über einen separaten Tab angesprochen werden. Lightning speichert die Kalenderdaten in einer lokalen SQLite-Datenbank und bietet zudem eingeschränkten iCalender-Support. Aufgaben und Termine können sehr intuitiv angelegt oder bearbeitet werden und der Kalender kann in verschiedenen Darstellungen (Tage, Wochen, Monate, etc.) angezeigt werden.

Tags: ,
201127Jul

Snaporama: Tabs in Firefox als Snapshot speichern

Das heutige Surfen im Web ist auf dem Großteil der Bildschirme nicht mehr durch einzelne Browserfenster, sondern durch Tabs geprägt. Mehrere Seiten können bequem parallel geöffnet und angesehen werden. Da sich die Verwendung von Tabs schon mehr oder weniger eingebürgert hat, dürfte die Anzahl gleichzeitig geöffneter Seiten je nach Arbeitsplatz oder Einsatzgebiet relativ hoch sein. Zudem werden oft viele Tabs zu einer Thematik geöffnet, um entsprechende Querverweise lesen zu können.
Mozilla forscht auf diesem Gebiet intensiv und so wurde kürzlich eine experimentelle Extension namens "Snaporama" veröffentlicht, die es erlaubt, Snapshots (also Momentaufnahmen) von Tab-Sitzungen zu speichern und zu öffnen.

Snaporama extends the life of your tabs

Dabei nutzt die auf Jetpack basierende Erweiterung ein bestehendes Feature von Firefox 4 und so können Lesezeichen-Ordner als Snapshots eingesetzt werden. Über zwei Symbole in der Add-on-Leiste am unteren Rand können Snapshots gespeichert oder geladen werden. Natürlich können auch einfach bestehende Lesezeichen-Ordner als Snapshot geladen werden: Dann werden alle im Ordner enthaltenen Tabs im aktuellen Browserfenster geöffnet.
Die Erweiterung gibt es hier zum Download und erfordert keinen Neustart des Browsers, da sie auf Jetpack basiert. Der Code ist auch bei GitHub zu finden und Mozilla freut sich wie gewohnt über Feedback der Benutzer.

201129Jun

PixelZoomer: Update auf Version 1.3 fertiggestellt

Wie angekündigt habe ich an meiner Firefox-Erweiterung PixelZoomer weitergearbeitet und eine neues Update fertiggestellt: Version 1.3 steht ab sofort bei den Firefox Add-ons zum Download bereit und funktioniert auch unter Firefox 5. Bei dieser Version steht das Java-Rendering nicht mehr zur Verfügung, da es in Windows 7 in der Regel nicht mehr benötigt wird. In den Tests konnte ich keine Unterschiede mehr bezüglich falsch erzeugter Subpixel feststellen, die bei der Java-Methode nicht entstehen. Lediglich unter Windows XP können die Subpixel noch entstehen und hierfür sollte Version 1.2.1 von PixelZoomer verwendet werden.

PixelZoomer 1.3

Neben kleineren Korrekturen habe ich auch einige Neuerungen in die Erweiterung eingebaut, die teilweise auch von Benutzern angefordert wurden. Alle neuen Funktionen auf einen Blick:

  • Screenshots können nun als Datei gespeichert oder in einem neuen Tab geöffnet werden
  • das Zoom-Auswahlwerkzeug wurde durch eine Echtzeit-Zoomfunkton ersetzt
  • ein zusätzliches Info-Fenster mit den Pixelmaßen wird optional direkt am Cursor angezeigt
  • ein globaler und editierbarer Tastaturbefehl für PixelZoomer wurde integriert
  • für die Auswahl kann wahlweise eine Hintergrundfarbe eingestellt werden
  • das Nummernzeichen kann bei dem Farbwert ausgeschlossen werden

Natürlich gibt es noch weitere Ideen, aber diese werden aus Zeitgründen dann in späteren Releases enthalten sein. Es gab oft die Anfrage, nicht nur den sichtbaren Bereich, sondern eine Website in ihrer kompletten Länge in PixelZoomer laden zu können. Leider ist das aktuell mit Firefox 5 nicht möglich, da es hier zu einer Fehlermeldung kommt, wenn die komplette Seite eine bestimmte Größe erreicht hat (Speicherüberlauf). Vielleicht wird sich an diesem Verhalten in naher Zukunft noch etwas ändern. Bis dahin werde ich andere Features in die Erweiterung implementieren.

201123Mär

Mozillas Webkabinett: Moderne HTML5-Demos

Microsoft stellt mit dem Internet Explorer 9 Test Drive eine schöne Quelle bereit, auf der sich diverse HTML5-Demonstrationen finden, die mit modernen Webbrowsern getestet werden können. Auch von Mozilla gibt es eine solche Seite und nach der Installation von Firefox 4 dürften die dort aufgeführten Demonstrationen interessant sein. Bei Mozillas Webkabinett finden sich derzeit 8 ausgearbeitete Technologie-Demos, welche die neuen HTML5-Funktionen und auch die Geschwindigkeit moderner Webbrowser beleuchten soll.

Mozillas Webkabinett

So findet sich in dem Kabinett beispielsweise auch eine anschauliche Visualisierung unseres Planetensystems, in der die Informationen rund um die Planeten ansprechend dargestellt werden.
Doch nicht nur Grafik-Demonstrationen finden sich in dem Kabinett: Das "Awesome HTML5 Dashboard" vermittelt einen Überblick der neuen Funktionalitäten, die mit HTML5 eingeführt werden.

Awesome HTML5 Dashboard

Zu jeder Funktionalität gibt es eine kleine Erklärung sowie einen weiterführenden Link zum Mozilla Developer Network. Viele Demos funktionieren natürlich auch in Internet Explorer 9, wobei sich hierbei schon etliche Unterschiede zu Firefox 4 zeigen.

201122Mär

Firefox 4: Neuer Mozilla-Browser ist fertig

Heute hat auch das Warten auf die finale Version von Firefox 4 ein Ende: Der alternative Webbrowser steht ab sofort zum Download bereit und erfreut sich mittlerweile schon an über 3 Millionen Downloads. Eine aufwendige Echtzeit-Statistik der bisherigen Downloads findet sich übrigens auf dieser Seite.
Ungeduldige konnten die fertige Ausgabe des Browser schon gestern per FTP-Link installieren. Zuletzt wurde noch ein Release Candidate veröffentlicht, in dem etliche Fehler behoben wurden. Mit der finalen Ausgabe dürfte die Applikation nun relativ stabil und zudem performant laufen.

Firefox 4 - Finale Version

Zu den Neuerungen von Firefox 4 zählen eine neue JavaScript-Engine namens "Jägermonkey", WebGL-Unterstützung und Hardwarebeschleunigung. Weiterhin wurde das komplette User Interface überarbeitet und modernisiert, so dass die Menüleiste nun von Haus aus über einen Button in der linken oberen Ecke zu erreichen ist (Windows). Eine schöne Funktionalität stellt beispielsweise auch die Funktion "Als App-Tab anpinnen" dar, die über das Kontextmenü eines Tabs zu erreichen ist. Dadurch lassen sich häufig genutzte Seiten auf die Größe des Favicons minimieren. Ebenfalls interessant ist das Feature "Tabs gruppieren…", das sich auch über die Tabzeile oder mit STRG + SHIFT + E verwenden lässt.
Natürlich sind in Firefox 4 auch neue HTML5- und CSS3-Funktionalitäten oder andere Neuerungen wie IndexedDB und Multitouch integriert — auch der neue Anti-Tracking-Header dürfte interessant sein.
Zukünftig sollen neue Firefox-Versionen zudem in Abschnitten von 16 Wochen erscheinen (für die Entwicklung von Version 4 wurden rund 12 Monate benötigt). Neben den Nightly-Builds soll es auch andere Kanäle geben, in denen Firefox veröffentlicht werden soll: Experimental, Beta und Final. Man darf also gespannt sein.