JavaScript / CSS / HTML – Seite 8

display: inline-block; Internet Explorer

Die CSS-Eigenschaft display: inline-block; wird im Internet Explorer 6 und im Internet Explorer 7 eigentlich nicht unterstützt, aber mit einem kleinen Trick lässt sich diese Eigenschaft trotzdem darstellen.

View Code HTML5

<div class="inline_block">Diese beiden Blöcke sind nebeneinander angeordnet...</div>
<div class="inline_block">...und haben trotzdem eine feste Breite.</div>

View Code CSS

/* Neue Browser */
div.inline_block { display: inline-block; width: 200px; border: 1px solid #000; padding: 3px; }
 
/* IE 6 und 7 */
div.inline_block { display: inline; zoom: 1; }

Im IE 6 und IE 7 wird die Eigenschaft display einfach wieder zurück auf inline gesetzt und anschließend die Eigenschaft zoom hinzugefügt. Damit wird der Internet Explorer dazu gezwungen die Microsoft-proprietäre Eigenschaft hasLayout für dieses Element auf true zu setzten. Was an dieser Stelle genau passiert ist an dieser Stelle zu kompliziert zum beschreiben, jedenfalls erzielt es den selben Effekt wie display: inline-block; in neueren Browsern. Wer mehr über hasLayout erfahren möchte, sollte sich den Artikel On having Layout zu Gemüte führen.

Eine funktionierende Demo zum obigen Beispiel gibt es natürlich auch.

Firebug für den IE6 (IE Developer Toolbar)

Ja, der Internet Explorer 6 hat einen Firebug: die IE Developer Toolbar. Die Toolbar weißt zwar nicht mal ansatzweise die Funktionsvielfalt auf wie man sie vom Firebug gewöhnt ist, sie ist aber trotzdem manchmal hilfreich.
Ihr könnt das Tool hier runterladen.

Hier die wichtigsten Features:

DOM untersuchen
Anzeige der CSS-Eigenschaften
Outline für Container-Elemente anzeigen
Linear
Validierung von HTML und CSS
Cookies und Cache für Webseite löschen
Bilder und JS ausschalten
Color Picker
und noch weitere Kleinigkeiten

Das wichtigste fehlt leider: Die CSS-Eigenschaften lassen sich nicht live bearbeiten.

Die Toolbar lässt sich nach der Installation – und einem Neustart des Explorers – über Ansicht > Explorer-Leiste > IE Developer Toolbar aufrufen. Erwartet aber nicht zu viel…
Bitte beachten: Die IE Developer Toolbar ist nur mit dem Internet Explorer 6 und 7 kompatibel. Der IE 8 bietet dieses Feature bereits von Haus aus.

Dieser Artikel soll euch jetzt aber nicht dazu auffordern sämtliche Websites für den IE6 zu optimieren. Der Browser ist mehr als veraltet und wird daher auch kaum noch genutzt (weniger als 5% der Nutzer). Je weniger Websites diese Version des Internet Explorers unterstützen desto schneller fällt die Optimierung dieses „Höllenbrowsers“ komplett weg.

Bilder für das Web optimieren

Und wieder einmal geht es um Performance im Web. Heute werden Bilder optimiert.

Aber wie optimiert man Bilder für das Web ohne großen Qualitätsverlust? Man könnte natürlich Photoshop nehmen und jedes einzelne Bild auf einer Webseite nacheinander bearbeiten, aber das ist sehr mühsam. Und da wir alle faul sind, gibt es natürlich auch einen einfacheren Weg (und auch günstiger, weil man kein Photoshop kaufen muss). Dazu brauchen wir lediglich einen aktuellen Firefox und zwei Plugins.

Plugin #1: Firebug
Den sollte jeder Webentwickler standardmäßig installiert haben.

Plugin #2: Page Speed
Dieses Plugin ist noch nicht so bekannt, der Herausgeber dafür umso mehr. Das ist nämlich Google und die haben in dem Plugin viele Tipps zur Performance-Optimierung verbaut. Es wird die komplette Seite überprüft und anschließend aufgelistet, was man noch alles verbessern kann. Unter anderem gibt es dort einen Punkt zur Optimierung von Bildern. Dort gibt es eine Liste mit allen schwach komprimierten Bildern auf der Webseite.

Und das beste ist: Das Plugin bietet eine optimierte Version direkt zum Speichern an. Also die komprimierten Bilder abspeichern und die alten damit ersetzen. Fertig.

Die anderen Optimierungsvorschläge sollte man sich natürlich ebenfalls ansehen.
Mir gefällt das Google-Plugin übrigens besser als das vom Konkurrenten Yahoo (YSlow), weil die Anweisungen viel verständlicher sind und übersichtlicher dargestellt werden.