Blogix

Die Web Developer Toolbar von Chris Pederick ist unverzichtbar für jeden Webentwickler. Sie ist kostenlos erhältlich und lässt sich in die Browser Firefox, Flock und Seamonkey integrieren. Bei der Web Developer Toolbar handelt es sich um eine umfangreiche Sammlung von nützlichen Werkzeugen, für die zuvor einige Plug-Ins installiert werden mussten, um die selben Ergebnisse erreichen zu können. So ist es damit möglich einige Einstellungen (Cache, Java, JavaScript,…) auf die Schnelle zu (de-)aktivieren. Weiters nützlich bei der Verwaltung von Cookies, Entwicklung von CSS, Erstellung/Änderung von Formularen und Einbindung von Grafiken. Mit einigen Einstellungen lässt sich die Seite so darstellen, wie sie eine Suchmaschine, oder auf Text-Browser angewiesene Menschen sehen würden. Sonstige Funktionen sind die Darstellungen mit unterschiedlichen Bildschirmauflösungen, hervorheben von Elementen, Benutzung von Lupe und Lineal. Leider konnte ich nur einen kurzen Überblick geben, denn die Möglichkeiten sind praktisch unendlich.

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.

Die sich noch in der Entwicklung befindlichen Browser Internet Explorer 8 und Firefox 3 bestehen den Acid2 Browser-Test. Bei diesem Test geht es darum CSS 2.1 korrekt zu interpretieren und ein Smiley samt Text, wie im nachstehenden Bild gezeigt, korrekt darzustellen. Weiterlesen »