Mar 05

Microsoft hat nun selbst eine Seite namens “The Internet Explorer 6 Countdown” veröffentlicht und möchte somit nach 10 Jahren – vom bei Webentwicklern völlig unbeliebten Internet Explorer 6 – endlich mit einem “it’s time to say goodbye” Abschied nehmen. Der in die Jahre gekommene Browser ist vor allem in Ländern rund um China (max. 34,5%) noch sehr beliebt, in Deutschland (2,9%), Österreich (3,0%) und der Schweiz (3,9%) und vielen weiteren Ländern wird er allerdings kaum noch verwendet. Das Ziel von Microsoft ist es die Verbreitung auf unter 1% zu drücken – dies ist in Norwegen und Finnland (je 0,7%) bereits jetzt der Fall. Im Vergleich zum Vorjahr ist der Marktanteil des Internet Explorer 6 um 9% gesunken. Als Webentwickler kann man sich darüber nur freuen!

Dec 14

Seit Internet Explorer 7 (IE 7) wird ClearType (Anti-Aliasing) unter Windows unterstützt, auf anderen Plattformen (z.B. Mac OS X) ist das standardmäßig der Fall. Das hat zur Folge, dass Schriften durch das Anti-Aliasing geglättet dargestellt werden, was besonders auf LCD-Monitoren zu einer besseren Lesbarkeit führt. Bei relativ kleinen Schriften tritt dabei allerdings das Problem im IE 7 auf, dass aufgrund des Anti-Aliasings so gut wie kein Unterschied zwischen normaler und fetter Schrift mehr besteht, wie dies dem folgenden Bild entnommen werden kann:

Anti-Aliasing

Grundsätzlich sollte man nicht in die (bevorzugten) Einstellungen eines Benutzers eingreifen und diesen selbst entscheiden lassen, ob er ClearType verwenden möchte oder nicht. Allerdings gibt es Kunden die die Vorzüge der Benutzer ignorieren, Hauptsache die Seite sieht in allen Browsern möglichst ähnlich aus, auch wenn die Schrift nicht so schön und nicht so gut lesbar dargestellt wird. ClearType kann man unter Windows mit ein paar Zeilen CSS sehr einfach unterbinden:

body {
  background: #fff;
  filter: alpha(opacity=100);
  opacity: 1.0;
}

Als Hintergrund kann selbstverständlich auch ein Bild oder eine andere Farbe gewählt werden.

Zuerst sollte man allerdings den Kunden darauf hinweisen, dass es sich bei ClearType um eine Benutzerpräferenz handelt und diese übergangen werden sollte. Die Einstellung hierfür kann man unter “Extras > Internetoptionen”, Registerkarte “Erweitert” unter der Gruppe “Multimedia” mit dem Punkt “Immer ClearType für HTML verwenden” festlegen (Ein Neustart des Browsers ist erforderlich):

Immer ClearType für HTML verwenden
Oct 01

Im Internet Explorer kann es auf gewissen Seiten zu Problemen beim Scrollen kommen. Hat man für ein div ein Hintergrundbild festgelegt, scrollt anschließend die Seite nach unten, sodass dieses Hintergrundbild nicht mehr sichtbar ist und anschließend in den Bereich, sodass es wieder sichtbar ist, so wird dieses unter Umständen nicht mehr angezeigt. Damit dieses wieder angezeigt wird, muss man entweder die Seite neu laden oder zu einem anderen Programm wechseln und anschließend wieder zurück in den Internet Explorer. Dieses Problem tritt sowohl in IE6, als auch in IE7 auf. Abhilfe schafft ein einfacher Trick – mittels CSS legt man einen null-Hintergrund für body fest, den man fix positioniert:

body {
  background: url(null) fixed no-repeat;
}
Jul 26

Bei der Entwicklung von Webseiten werden (logischerweise) sehr oft Änderungen an HTML, CSS, JS, etc. durchgeführt. Dabei kann es passieren, dass Änderungen nach dem erneuten Laden der Seite (Refresh/Reload) nicht angezeigt werden, da die Seite bzw. die eingebundenen Dateien aus dem Cache des Browsers und nicht wie gewünscht erneut vom Server geladen werden. D.h. es sieht so aus, als ob die durchgeführten Änderungen (auch) nicht den gewünschten Effekt hervorrufen, obwohl sie das (wenn die komplette Seite vom Server geladen werden würde) vielleicht machen.

Abhilfe schafft es, wenn man den lokalen Cache im Browser deaktiviert. Dafür kann man entweder in den Einstellungen des Browsers die gewünschte Einstellung vornehmen, was aber beim Besuch von anderen Webseiten (beim “normalen” Surfen) nicht unbedingt erwünscht ist.

Für auf der Gecko-Engine basierende Mozilla-Browser gibt es die Web Developer Toolbar von Chris Pederick. Diese erlaubt es den Cache sehr einfach zu deaktivieren bzw. auch wieder zu aktivieren:

Eine weitere und wohl die bequemste Möglichkeit ist es, die Tastenkürzel der einzelnen Browser zu verwenden, die nicht nur die Seite neu laden, sondern auch den lokalen Cache der aktuellen Seite löschen:

  • Internet Explorer: Strg + F5 (Windows)
  • Firefox: Strg + F5 oder Strg + Umschalt + R (Windows) bzw. Cmd + Umschalt + R (Mac)
  • Safari: Cmd + Umschalt + R (Mac)
May 16

Transparente PNG-Dateien werden im Internet Explorer 6 bzw. 5.5 standardmäßig nicht unterstützt. Anstelle der Transparenz wird eine graue Fläche angezeigt. Trotzdem möchte man sehr oft transparente PNG-Bilder benutzen, denn transparente GIFs erlauben keine Halbtransparenz (z.B. bei Schlagschatten) bzw. Ränder von Rundungen werden pixelig dargestellt. Damit transparente PNGs auch im Internet Explorer 6 bzw. 5.5. korrekt dargestellt werden, kann man einen PNGfix (z.B. von http://homepage.ntlworld.com/bobosola/) als JavaScript in die HTML-Seite integrieren:

<script defer type="text/javascript" src="js/pngfix.js"></script>

Das bringt jedoch den großen Nachteil, dass Hyperlinks auf bzw. um PNG-Bilder nicht mehr klickbar sind. Abhilfe schafft jedoch folgender CSS-Code in der Datei lt-ie7.css, der den Hyperlink wieder in der Vordergrund bringt (kann mit zusätzlichen Tags erweitert werden):

a {
  position: relative;
  z-index: 9999;
}

Dieser Code wird wie folgt in die HTML-Seite integriert:

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/lt-ie7.css" />
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->

Hintergrundgrafiken im CSS können für Internet Explorer 6 bzw. 5.5. (in der Datei lt-ie7.css) ohnehin recht einfach transparent gemacht werden, ein Fix ist somit hierfür nicht notwendig:

div#content {
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/content-bg.png', sizingMethod='crop');
}

Zuerst wird das bereits für andere Browser vorhandene Hintergrundbild entfernt und dieses mit “filter” für den IE kompatibel wieder eingefügt.

May 02

Im Internet Explorer wird standardmäßig eine vertikale Scrollbar angezeigt, selbst wenn der Inhalt der Webseite nicht länger als das Browserfenster ist. Das hat den Vorteil, dass eine zentrierte Webseite nicht “springt”, wenn der Inhalt je Seite länger/kürzer als die Höhe des Browserfenster ist. Manche Kunden, vor allem aber Grafiker stört das “springen” der Seite, aber es gibt einen einfache Workaround um das zu verhindern.

Lösung für den Firefox:

Hierfür fügt man im Stylesheet folgenden Code ein:

html {
  overflow: -moz-scrollbars-vertical;
}

Leider funktioniert diese Lösung nur im Firefox und wird von allen anderen Browsern ignoriert.

Die Allround-Lösung:

Im Stylesheet setzt man die Höhe von html auf 100% und fügt einen Außenabstand von 1px ein:

html {
  height: 100%;
  margin-bottom: 1px;
}

Diese Lösung funktioniert in allen gängigen Browsern, allerdings entsteht dadurch ein Scrollbereich von 1px. Auch das kann als gleich störend empfunden werden, wie das “Springen” der Seite selbst.

Die CSS3-Lösung:

Auch diese Lösung kann man als “Allround-Lösung” bezeichnen. Obwohl die overflow-y-Eigenschaft erst in CSS3 enthalten sein wird, wird sie von den gängigsten Browsern (Firefox 1.5+, Safari 1.0+, Konqueror 3.3+,…) bereits unterstützt:

html {
  overflow-y: scroll;
}

In diesem Fall wird die Scrollleiste deaktiviert dargestellt, wenn der Inhalt der Seite kürzer als die Höhe des Browserfenster ist, andernfalls wie gewohnt eine Scrollleiste dargestellt.

Opera interpretiert diese Eigenschaft leider (noch) nicht, weshalb man in diesem Fall die “Allround-Lösung” als Workaround für Opera in die Seite integrieren muss. Hierfür fügt man diesen in opera.css ein und integriert ihn wie folgt in die Seite:

<link rel="stylesheet" href="opera.css" type="text/x-opera-css" />
Mar 10

In Europa sind die Marktanteile des alternativen Firefox-Browser auf 28 Prozent Durchschnitt gestiegen, wobei die Anteile mit 15-45% je Land sehr unterschiedlich sind. So konnte der Browser nicht nur in beinahe allen Ländern zulegen, sondern der Trend zeigt in allen Ländern nach oben. Weiterlesen »

Mar 06

Wie berichtet besteht nun auch der Internet Explorer in der Version 8 als letzter der weitverbreiteten Browser den Acid2 Browser-Test. Deshalb war es an der Zeit einen neuen Test zu entwerfen, um die Fähigkeiten der Browser zu überprüfen. Acid3 möchte nun mehr als nur ein per CSS erzeugtes Lächeln von den Browsern sehen. Weiterlesen »