BEIER-CHRISTIAN.eu » css

SlickMap CSS – einfaches Erstellen von Sitemaps

Christian Beier — Sat, 11 Jul 2009 14:17:39 +0000

SlickMap CSS ist ein einfaches »Framework« zum Erstellen von Sitemaps, direkt als HTML. Dazu wird eine ungeordnete Liste genutzt die beliebig verschachtelt (bis zu drei Level) werden kann, woraus dann die Sitemap entsteht.

YAML Debug – Hilfreiches Analyse-Tool

Christian Beier — Sat, 18 Apr 2009 10:53:24 +0000

Für das CSS-Framework YAML gibt es jetzt ein sehr hilfreiches Debugging-Tool. Mit diesem lässt sich sehr schnell die semantische Struktur einer Webseite sichtbar machen und die Qualität des Codes überprüfen. Auch bestimmte Aspekte der Barrierearmut lassen sich abtesten und so u.a. Bilder mit fehlenden oder leeren Alt-Attributen hervorheben. Und obwohl YAML im Namen enthalten ist, ist das Bookmarklet nicht nur auf den Einsatz bei YAML-Websites beschränkt. YAML Debug stellt eine wunderbare Ergänzung zu Firebug da und kann unter Firefox (ab Version 3), Opera (ab Version 9) und allen Webkit-Browsern genutzt werden.

CSS Kompatibilität im IE 5.0 bis 8.0

Christian Beier — Wed, 07 May 2008 18:52:50 +0000

CSS Compatibility and Internet Explorer: In der sehr umfangreichen Übersicht zeigt Microsoft, welches CSS-Feature in den einzelnen Versionen des Internet Explorer unterstützt werden. Verglichen werden der IE5.0, 5.5, 6.0, 7.0, 8b1 und 8.0. Unterschieden wird zusätzlich zwischen CSS2.1 und CSS3. Bei Letzterem steht leider noch all zu oft NO anstatt YES.

Haufenweise CSS-Links

Christian Beier — Mon, 31 Mar 2008 15:33:51 +0000

CSS Development Collection Projekt sammelt Links zum Thema CSS. Die Liste ist schon jetzt unglaublich lang und sehr vielfältig.

Geht es jetzt im Web wieder vorwärts?

Christian Beier — Fri, 28 Mar 2008 19:04:28 +0000

Betrachtet mann die Meldungen der vergangenen Tage und Wochen, kann bei einem der Eindruck entstehen, dass die Entwicklung des Webs jetzt wieder schneller voranschreitet. Seit ein paar Jahren war ja doch eine ziemliche Flaute, was die Weiterentwicklung eines speziellen Browsers betrifft. Nachdem aber Microsoft eine erfreuliche Nachricht nach der Nächsten über den zukünftigen Internet Explorer 8 verbreitet hat, scheint es eine Art Wettkampf- und Aufbruchstimmung unter den Browserherstellern zu geben. Ok, der IE8 soll zum ersten Mal CSS 2.1 vollständig umsetzen und den Acid2-Test bestehen. Von einer umfangreichen Unterstützung vom neuen CSS3 ist da erst einmal noch nicht die Rede. Aber dabei muss ja auch bedacht werden, dass sich Microsoft jahrelang ausgeruht hat und jetzt erst einmal die verschlafenen Jahre wieder aufholen muss, während andere Hersteller schon zur Kür übergehen können.

Ganz vorne mit dabei sind die beiden Browser Opera und Safari. Diese sollen bereits in internen Versionen den Acid3-Test zu 100% bestehen. Bei den Acid-Tests wird in den Browsern überprüft, ob diese verschiedene Eigenschaften von CSS korrekt darstellen können. Die beiden Hersteller haben den Test sogar so schnell bestanden, dass mancher schon glaubt, der Acid3-Test sei zu einfach gewesen.

Damit auch die neuen Möglichkeiten von CSS3 im Alltag wirklich zuverlässig eingesetzt werden können, fehlen aber noch zwei Browser: Firefox und der Internet Explorer. Leider sind das die Beiden, die die größte Verbreitung haben. Aber vielleicht überrascht uns Microsoft auch noch eines Tages mit der Nachricht, dass sie auch versuchen werden die Unterstützung von CSS3 in den Internet Explorer 8 zu integrieren. Wenn dann auch noch Firefox mitmacht, sind wir gar nicht mehr so weit davon entfernt CSS3 und HTML 5 auch produktiv einzusetzen. Schon jetzt ist eine Entwicklung in Gang gesetzt worden, die ich mir vor einem halben Jahr noch nicht träumen lassen hätte.

Schöner HTML-Code

Christian Beier — Sun, 09 Dec 2007 15:47:44 +0000

Schöner HTML-Code: Auf CSS-Tricks bietet Chris Coyier in seinem Artikel »What Beautiful HTML Code Looks Like« eine Übersicht zum Download an. Diese zeigt, auf welche Dinge beim Schreiben von HTML-Code geachtet werden sollte.

Wie zukunftssicher ist modernes Webdesign wirklich?

Christian Beier — Fri, 15 Jun 2007 16:12:15 +0000

Unter den Webworkern ist modernes und standardkonformes Webdesign noch immer ein heißdiskutiertes Thema. Ganz oben steht in dieser Diskussion immer die Trennung von Inhalt und Design. Schließlich ist modernes Webdesign unter Einhaltung der Webstandards zukunftssicher, oder etwa doch nicht?

Unter zukunftssicherem Webdesign stelle ich mir eine Website vor, die auch noch in fünf Jahren und länger funktionstüchtig ist. Doch ist dies mit den heutigen Mitteln ohne Layout-Tabellen überhaupt zu erreichen? Derzeit stehen verschiedenen Möglichkeiten zur Realisierung von Websites zur Verfügung: Da gibt es HTML 4.0 und XHTML 1.0, sowie CSS 1.0, CSS 2.0 und demnächst CSS 3.0.

Meiner Meinung nach können nur Websites als zukunftssicher bezeichnet werden, wenn sie auf abgeschlossenen Standards basieren, an denen nicht mehr gearbeitet wird und die von den Browsern zufriedenstellend umgesetzt werden können. Dies ist bei HTML 4.0 und CSS 1.0 der Fall. Dürfen nun also auch Websites als zukunftssicher bezeichnet werden, die auf das moderne XHTML 1.0 und CSS 2.0 setzen?

An XHTML wird noch gearbeitet und die Unterstützung von CSS 2.0 ist in einigen Browsern noch als sehr mangelhaft zu bezeichnen. Daher kann es hier immer wieder zu Veränderungen bei der Unterstützung bzw. Interpretation des Quellcodes geben. Von daher würde ich modernes Webdesign mit XHTML und CSS 2.0 (zumindest derzeit) nicht als zukunftssicher bezeichnen, sondern eher als Alternative, die es einem in einigen Jahren leichter machen wird, die Website zukunftssicher zu realisieren.

Der Internet Explorer hat laut aktuellen Statistiken derzeit eine Verbreitung von 70-80%. Die Versionen 5.xx und 6.xx machen davon noch ca. 50 Prozent aus. Das Schlimme daran: Beide Versionen sind am weitesten verbreitet und beherrschen kaum CSS 2.0. Besonders schlampen tun sie ausgerechnet am stärksten bei dem Teil von CSS, welcher die »Layout-Tabellen« ersetzen soll.

Die nächste schlechte Nachricht ist: An dieser Situation wird sich leider so schnell nichts gravierendes ändern. Der überwiegendste Teil der Anwender sind nun einmal kein Webdesigner oder Informatiker, sondern einfacher Benutzer, der sich nicht mit der Materie beschäftigen möchte und daher lieber seine bisher eingesetzte Software weiterverwendet. Neue Anwendungen bzw. Versionen halten erst mit einem neuen Computer Einzug in die Wohnzimmer. Schließlich sind die Computer schon bei der Auslieferung Softwaremäßig heutzutage recht komplett ausgerüstet.

CSS-Hacks

Um jetzt doch Websites mit XHTML und CSS 2.0 entwickeln zu können – die auch im Internet Explorer einigermaßen korrekt angezeigt werden – werden meistens so genannte CSS-Hacks benötigt. Das sind kleine Codeschnipsel, die von bestimmten Browsern interpretiert und von den restlichen ignoriert werden. Dadurch ist es möglich, einzelnen Browsern unterschiedliche Anweisungen »untergeschummeln«. Die meisten Hacks gibt es für den Internet Explorer.

Diese Hacks funktionieren jedoch meist nur in einer Browser-Version. Soweit nicht sonderlich schlimm. Doch was passiert jetzt, wenn eine neue Version des Browsers veröffentlicht wird? Der Internet Explorer 7 kann beispielsweise CSS 2.0 schon etwas besser interpretieren und viele Hacks die unter dem IE 6 noch benötigt wurden, bewirken nun im IE 7 das glatte Gegenteil. Was geschieht dann? Die Hacks müssen wieder entfernt bzw. angepasst werden. Ist das zukunftssicheres Webdesign? Wohl eher nicht. Hinzukommt das bei Websites im Auftrag von Kunden durch die Mehrarbeit zusätzliche Kosten entstehen. Aber wer soll diese Kosten tragen? Der Webdesigner? Der Kunde? Microsoft jedenfalls sicherlich nicht.

Derzeit können Websites die standardkonform und ohne Layout-Tabellen realisiert sind wohl noch nicht als zukunftstauglich bezeichnet werden. Sie sind aber eine gute Grundlage für eine Zukunft, die vielleicht in fünf Jahren anfängt.

Standardisierte Formulare mit Uni-Form

Christian Beier — Sat, 28 Apr 2007 08:30:02 +0000

Formulare erstellen gehört wohl zu den gehasstesten Tätigkeiten eines Webentwicklers. Zumindest ist das bei mir so. Das Leid ein wenig lindern soll nun die Formular-Vorlage Uni-Form. Diese basiert auf sauberem XHTML/CSS-Code und benutzt ein wenig JavaScript von jQuery.

Damit lassen sich nun auch komplexere Formulare relativ schnell und einfach realisieren.

Uni-Form is an attempt to standardize form markup (xhtml) und css, “modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms.

In Zukunft muss auch nicht mehr so stark darauf geachtet werden, dass die Formulare in allen Browsern einigermaßen vernünftig aussehen und bedient werden können. Denn Uni-Form wird von allen bekannten Browsern unterstützt, darunter befindet sich der Internet Explorer, Firefox, Safari, Opera und Konqueror.

Die Vorlage ist sehr Modular aufgebaut und ein Formular wird mittels Baukastenprinzip zusammengebastelt. Hier ein paar CSS-Klassen, da ein wenig “Copy and Past” und zum Schluss noch ein bisschen Code. Das Formular an sich kann größtenteils mittels Codeschnipseln (die dort Units genannt werden) mehr oder weniger stark zusammenkopiert werden.

Dank Uni-Form lässt sich nun bei der Entwicklung eine Menge Zeit sparen und der Fun-Faktor der Arbeit wird weiter erhöht.

Für Uni-Form gibt es auch eine Community-Website mit einer ausführlichen Dokumentation, einem Forum zum Erfahrungsaustausch und einer Demo.

Website: http://dnevnikeklektika.com/uni-form/

Vergleich: CSS in E-Mail-Anwendungen

Christian Beier — Tue, 24 Apr 2007 20:27:02 +0000

Vergleich: CSS in E-Mail-Anwendungen: Für alle die hin und wieder HTML-E-Mails mit CSS entwerfen sicherlich sehr interessant: David Greiner hat im CampaignMonitor Blog einen Artikel über die Unterstützung von CSS in diversen E-Mail-Anwendung veröffentlicht. Mit dabei sind sowohl Desktop-Applikationen wie auch Online-Anwendungen.

Runde Ecke im Webdesign

Christian Beier — Wed, 04 Apr 2007 19:46:17 +0000

Runde Ecke im Webdesign: Um abgerundete Ecken auf Websites zu verwenden gibt es verschiedene Methoden. Die einen setzen ganz auf CSS und andere bedienen sich auch mit JavaScript oder kleinen Grafiken. Auch Kombinationen sind möglich. In dem Beitrag “CSS Rounded Corners ‘Roundup’” hat Christian Watson die verschiedenen Methoden zu einer umfangreichen Sammlung zum Thema Rounded Corners zusammengetragen. Via ContentSchmiede.