Bissinger’s Blog

Da ich doch immer mal wieder diversen Code hier niederschreibe hat sich ein Plug-In zum Syntax Highlighting namens “Snippet Highlight” in mein WordPress dazugesellt. Schlecht bzw. gut - weil ja eigentlich Sinn der Sache - ist, dass ein pre-formatierter Text eben genau so wiedergegeben wird, wie er eingetippt wurde. Die Folge ist meist, dass bei langen Strings diese regelmäßig schön über das Layout hinaus schießen oder, je nach Layout, auf einmal im nirgendwo verschwinden.

Mit HTML kann man das “Problem” lösen, indem man im pre-Tag einfach width=50 eingibt. Somit wird nach maximal 50 Zeichen ein Zeilenumbruch durchgeführt. Je nach genutztem WordPress-Plugin wird dies jedoch wieder entfernt, wenn man pech hat.

CSS ist da schon etwas sicherer. Im Blog “Unwakeable” von Tyler Longren bin ich mal auf ein schönes CSS-Format gestoßen, dass jeden Browser gut bedient.

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 width: 99%;
}

Alternativ dazu kann man sich natürlich auch einen div-Container drum herum bauen, mit fester Breite und Höhe und dem ganzen einen overflow verpassen. Kann man, muss man aber nicht, weil nicht wirklich elegant. Vorteil ist jedoch, dass es ins Layout passt und trotzdem die Formatierung erhalten bleibt.

Wollte mir heute mal die Software für Woopra herunterladen und musste dementsprechend auf deren Homepage. Erstmal war ich leicht irritiert, da mir die Seite im Firefox gänzlich ohne Design präsentiert wurde. Im Internet Explorer 6 bekommt man zwar ein Design zu sehen, allerdings ist die Navigation leicht zerschossen.

Beim durchsehen des Quelltextes stößt man zur Zeit auf folgenden, leicht kuriosen, Eintrag:

<link style="display: none;" rel="stylesheet" href="http://www.woopra.com/wp-content/themes/woopra/style.css" type="text/css" media="screen">

Der Fokus liegt hier auf dem style="display: none;", der im link-Tag meiner Meinung nach ziemlich überflüssig ist. Nach einem Test mit einer Beispielseite scheint dieser Eintrag jedoch vom Firefox wie auch vom IE6 gekonnt ignoriert zu werden. Ich habe mal über die Web Developer Toolbar für den Firefox das im link-Tag angegebene Stylesheet manuell eingebunden und siehe da, zumindest das Design wird wieder korrekt dargestellt. Allerdings ohne Bilder. Über die im Quelltext angegebenen Source-Links lässt sich jedoch darauf zugreifen und vor allem der IE6 zeigt diese auch ganz normal an.

Ich bastel ja jetzt schon seit einiger Zeit an Websites herum, aber diesen Effekt kann ich mir im Augenblick noch nicht so ganz erklären. Vor allem, da nur Firefox das Design und die Bilder verschmäht.

Update: Nach einigem suchen bin ich jetzt doch noch auf den Übeltäter gestoßen. Das Problem verursacht das Plug-In Adblock Plus. Hat man hier den “ABP Tracking Filter” abonniert erhält man eine Regel namens “.woopra.”. Diese deaktiviert jegliche Anzeige und Ausführung von Scripten, Bildern und Stylesheets, die über eine Website geladen werden. Ausgenommen ist hierbei die direkte Anzeige im Browser über einen URL-Aufruf, weshalb auch das direkte Laden der Bilder bzw. das manuelle Einbinden des Stylesheets funktioniert hat.

Manchmal sollte man schon wissen, was diverse Plug-Ins bzw. Addons so treiben und im Hintergrund anstellen.

Beim erstellen einer, wenn auch kleinen, Website stößt man doch immer mal wieder auf kleiner Probleme bei der Umsetzung. So hat sich z.B. jemand überlegt, es wäre doch ganz schick, wenn man um seinen Content einen grafischen Rahmen erstellt. Eine komfortable Funktion dafür gibt es im Bereich von CSS. Diese nennt sich border-image. Problem ist nur, dass es diese erst in der CSS-Version 3 geben wird. Aktuell nutzbar ist jedoch die Version 2.1, welche ohne eine solche Funktion auskommen muss. Dementsprechend muss man sich leider anderweitig behelfen. Hier jetzt eine kleine Anleitung zu meiner Lösung - es gibt ja bekanntlich immer mehrere für ein Problem.

Das ganze funktioniert jetzt erstmal nur bei der Vergabe einer festen Breite.

(more…)

Seit einiger Zeit beschäftige ich mich schon relativ intensiv mit dem Thema CSS. Vom ersten Tag an, als ich davon hörte, war ich begeistert. Das strikte trennen von Inhalt und Design hat unschlagbare Vorteile. Vor allem bei einem Re-Design einer Website. Zu diesem Thema habe ich mittlerweile einiges an Büchern, Websites, Videos und anderen Quellen auf mich einprasseln lassen. Was bis dahin jedoch leider zu kurz kam, war das Kommentieren und Dokumentieren der CSS-Dateien. Es wird zwar überall mehr oder weniger kurz angeschnitten, aber jeder kommentiert eben auf seine Art und Weise.

Beim durchstöbern vom Smashing Magazine bin ich zufällig über eine Anleitung oder auch Leitfaden gestoßen, der sich mit unterschiedlichen Ansätzen der Kommentierung auseinander setzt. Dementsprechend wird gezeigt, wie man seine CSS-Dateien durch Kommentare sauber aufbereitet, um auch nach Jahren immer noch den Durchblick zu behalten. Auch ist es eine große Hilfe bei Gemeinschafts-Projekten, wenn also mehrere Personen an einer CSS-Datei hantieren. Und generell bietet eine strukturierte Kommentierung einen schnellen Überblick des Inhalts und ein zügigeres Auffinden einzelner Elemente.

Für jeden, der effektiv, schnell und zukunftsorientiert “programmieren” will sollte sich diesen Leitfaden einmal ansehen und auch einige der Tipps und Vorschläge anwenden. Man macht dabei nur sich selbst und anderen damit das Leben und Umgestalten leichter.