WordPress & Webwork - perun.net

Ich hatte das Vergnügen für heise Developer einen CSS-Artikel zu schreiben:

CSS-Debugging: CSS-Hacks versus Conditional Comments

Ich weiß dass einige Kollegen hier anderer Meinung sind, aber ich persönlich bevorzuge bei der Fehlerbehandlung des Internet Explorer die Conditional Comments (CC). Warum? Mit den CC kann man ganz gezielt die einzelnen Version – 5, 5.5., 6, 7 und 8 – des IE ansprechen und <!--[if IE 6]> wird auch noch in einigen Jahren nur den IE 6 ansprechen und die neueren Version bleiben außen vor.

Natürlich muss man den Einsatz von CC, wie den von CCS-Hacks auch, immer kritisch hinterfragen. Viele Probleme lassen sich auch ohne den Einsatz von CSS-Hacks und CC lösen.

Ich habe vor knapp einer Woche eine Umfrage "CSS-Hacks vs. Conditional Comments" gestartet. Es ging darum zu erfahren welche Vorgehensweise gewählt wird, wenn es darum geht den Internet Explorer im Zaum zu halten. Und folgendes Ergebnis kann ich nach knapp einer Woche präsentieren:

Conditional Comments vs. CSS-Hacks

Sicherlich, einerseits ist die Umfrage nicht repräsentativ, aber mit 149 abgegebenen Stimmen haben sich recht viele Kollegen zu Wort gemeldet, so dass man durchaus eine Aussage treffen kann.

58% (87 von 149) der Kollegen bevorzugen Conditional Comments um den IE in den Griff zu bekommen. 23% (35 von 149) entscheiden sich von Fall zu Fall entweder für CC oder für CSS-Hacks. Lediglich 18% (27 von 149) setzen CC gar nicht ein. Somit kann man durchaus sagen, dass die CC nach wie vor bei einem Großteil der Webworker die erste Wahl sind wenn es darum geht, den älteren IE-Versionen (IE 7 und kleiner) die Flausen auszutreiben.

Sicherlich, sowohl CC als auch die Hacks haben Ihre Vor- und Nachteile (dazu später mehr), aber die CC haben den Vorteil, dass sie ganz gezielt einen Browser ansprechen können und der zusätzliche Aufwand (Notierung im HTML-Dokument) hält sich in Grenzen, wenn ein CMS oder Template-System zum Einsatz kommt.

Auch ist mir klar, dass einige Kollegen ganz andere Vorgehensweise anwenden, darauf wurde ich u. a. via Twitter aufmerksam gemacht, allerdings hat keiner der besagten Kollegen einen Kommentar hinterlassen, so dass wir nie erfahren werden welche Vorgehensweisen es so alles noch gibt.

Nehmen wir mal an du arbeitest an einem Layout und der Internet Explorer stellt sich quer. Nach dem du dich vergewissert hast, dass der Fehler nicht evtl. an dir liegt (Tippfehler) und du z. B. nicht aus Versehen den IE 6 in Quirksmodus geschickt hast (Stichwort: XML-Deklaration), was machst du danach? Setzt du CSS-Hacks ein, Conditional Comments oder entscheidest du dich von Fall zu Fall entweder für Hacks oder CC? (weiterlesen…)

Wie ich hier schon berichtet habe, hatte ich das Vergnügen für Microsoft Deutschland fünf neue Vorlagen für Expression Web 2 erstellen zu dürfen. Es war für mich ein sehr interessanter Auftrag, bei dem ich einiges dazu gelernt habe und daher dachte ich mir ich könnte hier eine kleine Anleitung schreiben, wie man die dynamischen Webvorlagen (DWT) erstellen kann, weil die offizielle Anleitung in der Hilfe-Datei doch recht mager ist und nur wirklich auf die absoluten Grundlagen eingeht. (weiterlesen…)

Ich hatte neulich das Vergnügen für eine bestehende Website auch eine CSS-Datei speziell für iPhone/iPod Touch einzubinden. Dabei hat mir der FAQ-Bereich von "Vorsprung durch Webstandards" sehr geholfen. Der Artikel ist schon etwas länger, daher kann ich euch hier eine kleine Kurzfassung von Punkten wiedergeben, die ich persönlich für wichtig halte:

• Die sichtbare Fläche von iPhone und iPod hat folgende Ausmaße: im Hochformat 320 x 356 Pixel und im Querformat 480 x 208 Pixel
• iPhone und iPod kann man nicht wie andere Handys mit <link rel="stylesheet" media="handheld" /> ansprechen
• Allerdings kann man mit etwas CSS3 doch zum Ziel kommen: media="only screen and (max-device-width: 480px)"
• Um das rauszoomen zu verhindern bzw. zu erreichen, dass iPhone/iPod die Website in voller Breite darstellt, sollte man folgendes im Kopfbereich eintragen: <meta name="viewport" content="width=320" />

Was man mit CSS alles machen kann zeigt die Demo von Roman Cortes. Er hat mit jede Menge div-Elementen und CSS das Portrait von Homer Simpson gezeichnet. Einfach mal in den Quelltext schauen.

Ned Batchelder hat die Demo erweitert und daraus mit ein bisschen jQuery eine Animation erstellt.

Vielen Dank an Sahanya für den Hinweis.

Seit sehr langer Zeit setze ich hier im Weblog eine CSS-Datei für die Druckausgabe, hier der Code aus dem entsprechenden Bereich:

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Das Ergebnis ist jedem halbwegs erfahrenem Webworker klar. Der Browser liest beide CSS-Dateien ein [1] und je nach dem im welchen Modus man sich befindet (z.B. Druckvorschau) wird die entsprechende CSS-Datei eingesetzt. Somit kann man z.B. für die Druckausgabe eine optimiertes Dokument ausgeben lassen. Hier in diesem Weblog blende ich so gut wie alles was nicht direkt zum Inhalt gehört aus. Einfach mal im Browser die Druckvorschau aufrufen oder auf den Druckvorschau-Link klicken. (weiterlesen…)