Andi Portmann – Interessantes aus dem Alltag, Tipps und Tricks, Anleitungen

Webdesign: CSS-Management für den geliebten Internet Explorer.

19. März 2009, Abgelegt unter Webdesign, 5 Kommentar(e)

Passend zum heutigen Ereignis – dem Veröffentlichungstag des Internet Explorer 8 – habe ich mir gedanken über mein CSS-Management gemacht.

Mit dem Aufkommen der Conditional Comments war es auf einfache Art und Weise – also ohne CSS-Hacks – möglich, eine Internet Explorer Version gezielt anzusprechen.

Diese Möglichkeit nahm ich dankend an und so sah mein Grundgerüst für das CSS-Managenet bald folgendermassen aus:

<link rel="stylesheet" href="bildschirm.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="druckausgabe.css" type="text/css" media="print" />
<!--[if lte IE 6]>
	<link rel="stylesheet" href="ie_6.css" type="text/css" media="screen" />
<![endif]-->
<!--[if lt IE 6]>
	<link rel="stylesheet" href="ie_5.css" type="text/css" media="screen" />
<![endif]-->

Mit der Erscheinung des Internet Exlorer 7 ergänzte sich das Grundgerüst nochmals um weitere Zeilen:

<!--[if lte IE 7]>
	<link rel="stylesheet" href="ie_7.css" type="text/css" media="screen" />
<![endif]-->

Mittlerweile gab es also fünf CSS-Dateien, welche es zu pflegen galt. Dieser Umstand machte mich nicht glücklich und so suchte ich nach einer Lösung, welche übersichtlicher in der Wartung war. Schnell war diese gefunden.
Für den Internet Exlorer wurde nur noch eine separate CSS-Datei verwendet, welche für alle Versionen sichtbar war. Innerhalb dieser CSS-Datei konnte jede Version angesprochen werden:

• Ohne Hack, alle Versionen inkl. Version 7
• * html für Version 6 und tiefer
• Attribut /**/: Wert; für Version 5

<link rel="stylesheet" href="bildschirm.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="druckausgabe.css" type="text/css" media="print" />
<!--[if lte IE 7]>
	<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->

Bislang war ich damit glücklich. Mit dem Erscheinen des Internet Explorer 8 kommt eine neue Version ins Spiel, welche weiterhin den einen oder anderen Fehler beherbergt. Die Anpassung am Conditional Comment ist schnell gemacht. Langsam werden die CSS-Hacks jedoch auch unübersichtlich, zudem gibt es zwar einen Hack für die Version 7, jedoch nicht für Version 7 und tiefer. Aus diesem Grund stelle ich einmal mehr alles wieder in Frage und überlege mir, wieder auf einzelne CSS-Dateien pro Version umzusteigen …

<link rel="stylesheet" href="bildschirm.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="cms/css/druckausgabe.css" type="text/css" media="print" />
<!--[if lte IE 8]>
	<link rel="stylesheet" href="ie_8.css" type="text/css" media="screen" />
<![endif]-->
<!--[if lte IE 7]>
	<link rel="stylesheet" href="ie_7.css" type="text/css" media="screen" />
<![endif]-->
<!--[if lte IE 6]>
	<link rel="stylesheet" href="ie_6.css" type="text/css" media="screen" />
<![endif]-->
<!--[if lt IE 6]>
	<link rel="stylesheet" href="ie_5.css" type="text/css" media="screen" />
<![endif]-->

… oder nur den Internet Explorer 8 separate zu behandeln und alles wie gehabt zu belassen.

<!--[if lte IE 8]>
	<link rel="stylesheet" href="ie_8.css" type="text/css" media="screen" />
<![endif]-->
<!--[if lt IE 8]>
	<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->

Es Interessiert mich, wie ihr eure CSS-Dateien organisiert. Gerne könnt ihr eure Erfahrung in den Kommentaren hinterlassen.

Webdesign: IETester stürzt beim öffnen des ersten Tabs ab.

9. Februar 2009, Abgelegt unter Webdesign, 1 Kommentar(e)

Wird nach dem Start von IETester als Erstes ein IE 5.5 oder IE 6 Tab geöffnet, verabschiedet sich das noch im alpha-stadium befindliche Programm mit einem Absturz.
Um Websites trotzdem in diesen beiden Browsern testen zu können reicht es, erst einen IE7 oder IE 8 beta 2 Tab zu öffnen. Ist ein solcher Tab geöffnet, können weitere Tabs für IE 5.5 und IE 6 ohne Absturz verwendet werden.

Webdesign: pcdtr unterstützt nun sämtliche CSS-Selektoren.

27. August 2008, Abgelegt unter Webdesign, 0 Kommentar(e)

pcdtr wurde überarbeitet und ist nun nochmals um einiges flexibler – dank der Verwendung von CSS-Selektoren.

Heute morgen hat mich Joao auf seine neue Version von pcdtr aufmerksam gemacht.

Kompletten Artikel lesen ...

Webdesign: Wie man Safari für die Webentwicklung aufrüstet.

26. Mai 2008, Abgelegt unter Webdesign, 3 Kommentar(e)

Firefox ist dank seiner vielen Erweiterungen schnell zum Liebling vieler Webentwickler avangiert.

Zum normalen «surfen» im Internet nutze ich Safari 3. Gründe dafür sind die Schnelligkeit und .mac-Synchronisation sowie die optische Integration ins Betriebssystem OS X.
Für die Webentwicklung kommt jedoch Firefox zum Einsatz. Mit den Erweiterungen «Web Developer», «Firebug» und «HTML Validator» werden meine Anforderungen komplett abgedeckt. Doch was hat Safari dagegen zu bieten? Es folgt ein kleiner Überblick.

Kompletten Artikel lesen ...

Webdesign: Grafische Überschriften ohne Javascript und Flash.

19. Mai 2008, Abgelegt unter Webdesign, 0 Kommentar(e)

Immer häufiger kommt der Wunsch auf, auch im Web die typografischen Freiheiten aus dem Printbereich zu haben. Ohne Hilfsmittel ist die Auswahl jedoch eher begrenzt.

Kompletten Artikel lesen ...