Dez 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
Okt 21

Flash wird in letzter Zeit wieder populärer, so wird es auf beinahe jeder neugestalteten Startseite von Firmen (z.B. A1 (zeitweise auch ohne Flash), aon, Dell,…) eingesetzt um neueste Produkte zu präsentieren. Der von Flash generierte Code zur Einbindung des Films hat bis jetzt noch nie einem vom W3C verabschiedeten Standard entsprochen, seit der letzten Version von Flash wird zusätzlich auch noch JavaScript zum Einbinden verwendet – der generierte Code sieht dann in etwa wie folgt aus:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>flash</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body bgcolor="#ffffff">
<!--Im Film verwendete URLs-->
<!--Im Film verwendeter Text-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("Diese Seite erfordert die Datei \"AC_RunActiveContent.js\".");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
			'width', '676',
			'height', '405',
			'src', 'flash',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'showall',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'flash',
			'bgcolor', '#ffffff',
			'name', 'flash',
			'menu', 'true',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', 'flash',
			'salign', ''
			); //end AC code
	}
</script>
<noscript>
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="676" height="405" id="flash" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="flash.swf" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#ffffff" />
	<embed src="flash.swf" quality="high" bgcolor="#ffffff" width="676" height="405" name="flash" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</noscript>
</body>
</html>
Betrachtet man ausschließlich den “noscript”-Teil (der für die Einbindung ausreichend wäre), so findet man bereits hier zwei verschiedene Ansätze der Einbindung vor. Zum einen mittels “classid” über ActiveX, zum anderen mittels “embed”-Tag. Der “embed”-Tag stellt kein valides (X)HTML dar, ActiveX ist reine Windows-Technologie und grenzt somit andere Betriebssysteme (diese greifen auf das nicht valide “embed” zurück) aus.
Mit dem MIME-Type “application/x-shockwave-flash” kann allerdings dem Browser mitgeteilt werden, dass es sich beim vorhandenen “object” um einen Flash-Film handelt. Dieser weiß anhand einer hinterlegten Tabelle, wie er mit diesem Format (z.B. auch mit “text/plain”, “image/jpeg”,…) umzugehen hat. Zufälligerweise Glücklicherweise kann dem “object”-Tag der MIME-Type mitgeteilt werden. Die valide Lösung sieht dann wie folgt aus:
<object width="676" height="405" id="flash" data="flash.swf" type="application/x-shockwave-flash">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="flash.swf" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#ffffff" />
</object>
Aus Gründen der Kompatibilität mit diversen Browsern muss der Dateiname sowohl im “object”-Tag (data) als auch mit einem “param”-Tag (movie) angegeben werden.
Okt 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 31

Normalerweise ist in TYPO3 der Doctype XHTML xhtml_trans voreingestellt. Allerdings ist es auch schon passiert, dass kein Doctype mehr angezeigt wurde und deshalb sollte immer ein Doctype explizit in TypoScript gesetzt werden.

Um den gewünschten Doctype in TYPO3 zu konfigurieren muss man in TypoScript eine der folgenden Option für config.doctype festlegen:

  • none (Kein Doctype – notwendig wenn die Seite in eine andere serverseitig eingebunden wird)
  • xhtml_trans
  • xhtml_strict
  • xhtml_frames (für öffentliche Webseiten aus SEO-Gründen nicht zu empfehlen)
  • xhtml_11
  • xhtml_20

Zu Problemen kommt es allerdings im Internet Explorer mit dem einleitenden XML-Prolog, da dieser in den Quirks-Modus schaltet und das Box-Modell falsch interpretiert. Deshalb sollte mit der Option config.xmlprologue = none der XML-Prolog für den Internet Explorer ausgeschaltet werden.

Eine vollständige und saubere Doctype-Konfiguration sieht deshalb wie folgt aus:

config {
	doctype = xhtml_trans
	xhtml_cleaning = all
}
[browser = msie]
config.xmlprologue = none
[global]
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)