Via Frank bin ich auf ein weiteres CSS-Framework aufmerksam geworden: Typogridphy, ein Projekt von Harry Roberts. Das Projekt steht am Anfang (z.Z. Version 0.1.1) und ist entstanden auf der Basis von 960 Grid System. Das Framework ist schlank und orientiert sich an das typische Layout von Druckmedien. Das Framework beachtet Skalierbarkeit (Schriftgrad) und Zugänglichkeit. Des CSS-Code ist übersichtlich und schlank gehalten. Beim Framework kann man das Eine oder das Andere auf jeden Fall abschauen.

Wer die eigene oder eine andere Homepage in verschiedenen Browsern betrachten möchte, muss nicht unbedingt alle möglichen Betriebssysteme und Browser installieren. Mit einem Online-Dienst von Johann C. Rocholl ist es nun leicht und kostenfrei möglich, die Ansicht einer Seite in fast allen verfügbaren Browsern und Betriebssystemen als Abbild (Screenshot) zu bekommen.

Browsershots macht Screenshots von deinem Webdesign in verschiedenen Browsern. Es ist ein freier Open-Source Online-Service von Johann C. Rocholl. Wenn du deine Webadresse einträgst, kommt sie in die Warteschlange. Einige verteilte Computer werden deine Webseite in ihrem Browser öffnen. Dann machen sie Screenshots und laden sie hier zum zentralen Server hoch.

Früher sind mir solche Dienste über den Weg gelaufen, die allerdings meistens kostenpflichtig waren. Der Dienst von Johann ist dagegen kostenlos; man kann sogar ohne Anmeldung den Dienst mit Einschränkung von 80 Bilder pro Tag ausprobieren. Nach einer einfachen Anmeldung fällt diese Einschränkung weg. Die Geschwindigkeit des Online-Services ist nicht berauschend, was angesichts der Generierung vieler Bilder nicht verwunderlich ist. Zudem wird man in eine Warteschlange gestellt. Gegen Bezahlung ist eine höhere Priorität möglich.

Wer bei der Erstellung von Screenshots mitmachen möchte, kann nach der Anmeldung eine Screenshot-Fabrik registrieren lassen.

Sehr gut Johann

Jochen Bauer stellt ein WordPress Theme mit dem Namen biltzblank zur Verfügung, welches er mit dem Framework YAML von Dirk Jesse erstellt hat. Ich finde es ist ein interessanter Ansatz HTML/CSS-Frameworks für WordPress zu verwenden. Ich habe auch die Version 1.2 ausprobiert. Es funktioniert, prima! Am Anfang haben mich die Sicherungsdateien mit “~” am Ende irritiert. Ich muss auch sagen, das Ganze ist nicht unbedingt sehr schlank. Aber so ist es halt bei einem HTML/CSS-Framework.

Übrigens greift Dirk die Diskussion zum Thema HTML/CSS-Frameworks in seinem Blog-Beitrag auf und äußert eigene Gedanken zum Thema, wo er auch u. a. den “must read” Artikel von Smashing Magazine erwähnt. Sehr lesenswert, wenn man einen Umstieg auf ein Framework in Erwägung zieht.

{via Dr. Web Weblog}

In diesem Beitrag stelle ich eine erweiterbare Linkliste zu den Webseiten zusammen, die CSS-Menüs zum Generieren/Runterladen anbieten. Vielleicht kann das eine oder andere irgendwann mal nützlich sein. Die aufgelisteten Seiten sollen Menüs möglichst kostenlos und ohne Werbung anbieten.

• CSS MENU MAKER – z.Z. 13 vertikale und 6 horizontale Menüs
• 13 STYLES css menu designs – z.Z. 9 horizontale kostenlose Menüs
• Dynamic Drive CSS Library – Vorlagen von Dynamic Drive
• List-u-Like CSS Generator – Formular zum Generieren eines Menüs
• Menu Builder beta v1.3 – auch Formulare zum Konfigurieren eines Menüs

Ein neues CSS-Framework ist ist von einem norvegischen Entwickler Olav Bjorkoj ins Leben gerufen worden. Wie der verweisende Blog beschreibt, ist Framework wegen seiner kleinen Größe und Schlankheit eher eine Hilfe für Entwerfen eines CSS Layouts. Ich kan zum Projekt noch nicht viel sagen: Die Homepage des Projektes finden Sie hier, momentan ist es bei Version 0.5 angelangt.

{via superdeluxe weblog}

A List Apart hat ein Workaround von Rob Swan veröffentlicht, in welchem das Thema “Absolute Position von div-Elementen in Browsern und Internet Explorer” noch mal aufgegriffen wird. Der Artikel beschreibt als Tutorial in gut verständlicher Form die Problemathik und Abhilfe für Internet Explorer. Es bleibt aber immer noch eine Kompromiss-Lösung: Der Autor setzt JavaScript für Internet Explorer ein. Trotz der Schwirigkeiten ist es eine für viele Fälle akzeptable Lösung.

Die neue Version 3.0 von YAML (Yet Another Multicolumn Layout) ist erschienen. Das (X)HTML/CSS Framework wird von einem deutschen Webentwickler Dirk Jesse unter Creative Commons Attribution 2.0 Lizenz (CC-A 2.0) zur Verfügung gestellt. Am besten lesen Sie über das Framework auf der Homepage des Projektes. Dirk Jesse berichtet über das neue Release auch in seinem Blog unter High Resolution.

Nachtrag vom 12.09.2007:
YAML wird immer bekannter, hat aber auch harte Konkurenz wie YUI mit seinem CSS Grid Builder. Nun hat er als Hilfswerkzeug den YAML Builder zur Verfügung gestellt {via EinfachfürAlle}. Das Tool in Form einer Toolbox schwebt über dem ausgewählten Layout. Lobenswert ist die Tatsache, dass YAML als Ausgabe das Format XHTML 1.0 Strict unterstützt.

Wer sich intensiver mit CSS beschäftigt, kennt die Situation nur allzu gut: In allen Browsern sieht das Layout aus wie gewünscht – nur nicht im Internet Explorer. Der Internet Explorer ist das Problemkind bei der Entwicklung von CSS-Layouts, wobei er der am häufigsten verwendete Browser ist und bleibt (z.Z. IE6 ~ 70%, IE7 ~ 12% und IE5 ~ 4% nach der Statistik von www.webhits.de). Deshalb möchte ich nachfolgend Infos zusammenstellen, die bei Abweichungen im Layout beim IE hilfreich sein könnten.

Konditionale Kommentare für Internet Explorer:

If-Block wird nur für IE ausgeführt:

<!--[if IE]>
...
<![endif]-->

If-Block für eine bestimmte Version des IE (z.B. 6 oder 7):

<!--[if IE 6]>
...
<![endif]-->

CSS-Anweisungen nur für IE (* html-Selektor):

* html .list ul { height: 0px; }
  html > body .list ul { overflow: auto; }

Darstellungsmodi im IE: Quirks & Standard:
Bei fehlender oder unvollständiger Dokumenttyp-Deklaration wechselt der Internet Explorer 6 und 7 in den Quirksmodus – Webseitendarstellung wie bei Internet Explorer der 5.x Generation.

Eine Abfrage des Modus ist mit JavaScript möglich:

<script type="text/javascript">
alert(document.compatMode);
</script>

Im Standardmodus wird “CSS1compat” ausgegeben, im Quirksmodus “BackCompat“.

Bei Problemen mit IE könnte die Internet Explorer Developer Toolbar hilfreich sein. Für die Arbeit mit CSS ist der Dominspector besonderes praktisch, Sie blenden ihn über ViewDom ein. So lässt sich auch feststellen, ob ein Element Layout hat oder nicht. Hat es Layout, so erscheint hier hasLayout: -1. Bei einem Element ohne Layout steht hingegen hasLayout: 0. Zum Thema hasLayout sehen Sie den Artikel Über hasLayout.

Links zu weiterführenden Informationen:
Explorer Exposed! – Demos einiger IE-Bugs
CSS tests and experiments by Bruno Fassino

Quelle: Auszüge aus dem Artikel “CSS-Problemkind” in Internet Professionell, Juni-Ausgabe S. 46 ff.