Schöneres Subpixelrendering in Chrome bald verfügbar

Schriftrendering von Firefox (oberhalb der Linie) und Chrome (unterhalb der Linie) unter Windows
Schriftrendering von Firefox (oberhalb der Linie) und Chrome (unterhalb der Linie) unter Windows. Text entnommen von Meinung Nr. 2f auf blogroyal.de

In absehbarer Zeit wird einer der nervigsten Bugs im Chrome unter Windows verschwinden (Feuerwerk!): Das Schriftrendering wechselt in Bälde von GDI zu DirectWrite, womit fehlerhaft dargestellte Schriften wie im obigen Bild der Vergangenheit angehören sollten.
In der Chrome Canary (Version 34) mit den aktivierten Flags --enable-direct-write und --no-sandbox (mehr dazu in Chrome mit Flags starten) funktioniert das Subpixel-Rendering schon wunderbar, so dass die vielen bestehenden Workarounds zur Behebung dieses Problems bald nicht mehr benötigt werden sollten.

Chrome mit Flags starten

Um den Funktionsumfang von Chrome/ Chrome Canary/ Chromium zu erweitern, besteht die Möglichkeit den Browser mit sogenannten „Flags“ zu starten. Flags sind Startparameter, die mit der Kommandozeile übergeben werden und Optionen wie beispielsweise das subpixel font scaling zur besseren Darstellung der Schrift aktivieren.

Flag-Aktivierung unter Windows

Chrome mit Flags unter Windows startenAuf einem Windows-Rechner muss nicht unbedingt die Eingabeaufforderung benutzt werden, um Chrome mit Flags zu starten. Einfacher ist es, wenn wie folgt vorgegangen wird:

Rechtsklick auf das Browser-Icon* > Eigenschaften im Kontextmenü auswählen > das gewünschte Flag an den Ziel-Wert anfügen.

Aus "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" wird "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --enable-direct-write --no-sandbox

*Funktioniert nicht mit Icons in der Taskleiste.

Flag-Aktivierung unter Mac OS X

Unter OS X kann das Terminal benutzt werden, um Flags zu übergeben:
$ /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --enable-direct-write --no-sandbox

ACHTUNG!

Das Flag --no-sandbox deaktiviert Chromes Sandbox-Funktion und ist potentiell gefährlich. Daher geschieht die Deaktivierung auf eigene Gefahr und sollte keinesfalls bei einem Browser ausgeführt werden, der zum täglichen Surfen genutzt wird.

Links

How to run Chromium with Flags

OS X 10.8.4, Firefox 24 und die Scrollbars in der Responsive Design View

Scrollbars in der Responsive Design View liegen über dem SeiteninhaltAls ich am vergangenen Dienstag den frisch auf Version 24 aktualisierten Firefox benutze und mich daran machte, mein aktuelles Projekt in der Responsive Design View zu bearbeiten, wunderte ich mich etwas: Zuvor nebeneinander fließende Elemente brachen mit einem Mal um. Beim Blick in das Layout-Fenster vom Firebug fiel mir auf, dass die Seitenbreite quasi über Nacht von 320 auf 305 Pixel gesunken war. Wie konnte das passieren? Nach ein wenig Grübeln (und einer Tasse Kaffee) kam ich schließlich drauf: Die Scrollbars lagen nicht mehr über dem Inhalt, sondern daneben und beeinträchtigten somit dessen Breite. Äußerst unschön, denn dieses Verhalten stimmt nicht mit mobilen Endgeräten überein in denen Scrollbars über dem Inhalt liegen (mittlerweile ist dieser Bug dokumentiert und soll in Firefox-Version 27 behoben werden).

Ein temporärer Fix für dieses Problem bestand im Addieren von je 15 Pixel zu den entsprechenden Preset-Breiten der Responsive Design View. Etwas umständlicher zwar, aber es funktionierte.

Als ich dieses Problemchen jedoch kurz darauf mit meinen Frontend-Developer-Kollegen besprach, kam eine weitere Lösungsmöglichkeit zu Tage: Und zwar gibt es in den Systemeinstellungen unter Allgemein spezielle Settings für Rollbalken. Dort muss die Option Beim Scrollen aktiviert sein. Dies bewirkt, dass systemweit Scrollbars nur beim tatsächlichen Scrollen eingeblendet werden und dann über dem Fensterinhalt liegen- auch in der Reponsive Design View im Firefox 24.
Scroll-Einstellungen von OS X 10.8.4

Aggressives Firefox-Schriftcaching mit Versionsnummern austricksen

Sämtliche Firefox-Versionen, die ich unter Ubuntu, Windows 7 und Mac OS X benutze, speichern einmal geladene Webfonts sehr aggressiv. Aggressiv bedeutet in diesem Fall, dass ein normales Löschen des Caches zum Neu-Laden der Schrift nicht ausreicht, stattdessen muss zusätzlich noch der Browser neu gestartet werden. Da dies im Entwicklungsprozess doch eher unschön ist, bin ich dazu übergegangen eingebundene Webfonts mit einer Versionsnummer innerhalb des @font-face-Blocks zu versehen. Beim Ändern der Schrift erhöhe ich die Versionsnummer manuell und zwinge Firefox so, die Schrift neu zu laden. Klappt wunderbar und ist wesentlich entwicklerfreundlicher als das Schließen und Wiederöffnen des Browsers.

@font-face {
    font-family: '[Iconfont-Name]';
    src:url('../fonts/[Iconfont-Name]/[Iconfont-Name.eot]?1.0');
    src:url('../fonts/[Iconfont-Name]/[Iconfont-Name.eot]?1.0#iefix') format('embedded-opentype'),
        url('../fonts/[Iconfont-Name]/[Iconfont-Name.woff]?1.0') format('woff'),
        url('../fonts/[Iconfont-Name]/[Iconfont-Name.ttf]?1.0') format('truetype'),
        url('../fonts/[Iconfont-Name]/[Iconfont-Name.svg]?1.0#[Fragmentbezeichner]') format('svg');
    font-weight: normal;
    font-style: normal;
}

Animierte Gif-Dateien automatisch im Internet Explorer abspielen

Dialogfenster erweiterte Internetoptionen im Internet ExplorerAuf manche Sachen kommt man einfach nicht: Im Internet Explorer gibt es in den erweiterten Internetoptionen die Möglichkeit, Animationen in Webseiten zu deaktivieren. Prinzipiell nicht schlecht, allerdings zählen dazu auch animierte Gif-Dateien. Wenn das entsprechende Häkchen also nicht gesetzt ist, kann es durchaus vorkommen dass nur das erste Frame des Gifs angezeigt wird, danach Feierabend ist und die weiteren Frames nicht dargestellt werden. Wenn das Gif also überall abgespielt wird, nur im Internet Explorer nicht: Ein Blick in die erweiterten Internetoptionen kann helfen.