Die meisten von uns haben ja sicherlich bereits von Listen in HTML-Dokumenten gehört, die gibt es als <ol>, <ul> oder auch <dl> (wozu es übrigens erst kürzlich einen tollen Artikel gab). Oftmals verwenden wir dabei Symbole zum verdeutlichen von Funktionalitäten, wie wir es etwa im Beispiel-Screenshot sehen können. Wir schalten die Listenpunkte durch list-style: none; im CSS einfach ab und verpassen den jeweiligen Punkten ein Symbol wie z.B. ein kleines Häuschen als Symbol für die Startseite.

Zur Realisierung solch grafischer Listenpunkte gibt es im Prinzip 3 Herangehensweisen die ich erst einmal kurz vorstellen möchte:

Kompletten Artikel lesen...


Wer ist für Überstunden, Haarausfall, Ratlosigkeit und Unproduktivität in unserer Branche verantwortlich? Richtig: Der Internet Explorer.

Nun ist bei David eine kleine Diskussion entbrannt, die sich darum dreht, in wie weit man heute bei der Umsetzung von Webseiten den Internet Explorer unter Version 7 unterstützen sollte.

Meine Meinung: Für Webseiten mit geschäftlichem Hintergrund, bei der es auf jeden Besucher ankommt, ist eine Optimierung für den Internet Explorer ohne zweifel notwendig, bei meiner Arbeit sogar teilweise noch für den IE5… je nach Zielgruppe.

Auf der anderen Seite sehe ich jedoch, das es wohl keinen anderen Weg mehr gibt die Nutzer zumindest zu einem Update auf den Internet Explorer 7 zu bewegen, als diese ganz einfach zu zwingen. Was helfen kleine Hinweise wie “Sie setzen einen veralteten Webbrowser ein, bitte aktualisieren Sie auf eine aktuelle Version”, wenn der Nutzer am anderen Ende eh alles auf der Seite ansehen kann? User sind Faul und niemanden interessiert solch ein Hinweis, solange nicht drastische Nachteile für Ihn dadurch entstehen.

Kompletten Artikel lesen...


Spam frisch aus der Dose

Es gibt ja unzählige Wege und Anleitungen wie man Spam in seinen Formularen mindern oder ganz verdrängen könnte. Ob Captchas, Rechenaufgaben oder Dienste wie Akismet, sie alle haben ihre Vor und Nachteile.

Bei Arne fand ich nun eine relativ simple Lösung die aber perfekt zu funktionieren scheint.

Der Trick ist denke ich nichts neues, aber dafür sehr effektiv. Um Spambots möglichst eindeutig zu erkennen wird in diesem Beispiel ein zusätzliches Input-Feld im Quelltext eingebunden und im Stylesheet über display:none; bzw. visibility:hidden; für alle CSS fähigen Browser ausgeblendet. Nun füllen Spambots in der Regel ja alle vorhandenen Formularfelder mit irgendwelchem Quatsch aus, beachten dabei jedoch kein CSS. Der “normale” User füllt also das zusätzliche Input-Feld nicht aus, da er es gar nicht sehen kann. Der Spambot hingehen füllt das Feld mit irgendwelchem Müll.

Nun muss man mit einer Programmiersprache wie PHP oder ASP nur noch checken ob das Feld gefüllt wurde, ist dies der Fall kann dann davon ausgegangen werden das es sich um Spam handelt.

Für mich stellt sich dabei nur die Frage der Barrierefreiheit. Soweit ich weis interpretieren Screenreader ja CSS auch teilweise und lesen Objekte mit display:none ebenfalls nicht vor… hat da vielleicht schon jemand Erfahrungen mit gemacht?

Zu guter letzt kann man sich dann noch fragen, wie lange die Spambetreiber denn brauchen werden um ihre Programme so zu stricken, das diese auch CSS halbwegs interpretieren können.


Mit Clearing habe ich als Float-Lover ja eher selten Problem, wenn ich in meinem Stylesheet bzw. meiner XHTML-Struktur denn mal ein Clearing benötige, dann habe ich dass ganz easy über <br class="c" />, wobei die Klasse c hier für clear:both steht, gelöst.

Das ist von der Semantik her vielleicht nicht ganz so schick, jedoch dafür mit allen Browsern funktionell, simpel und schlank im Quelltext.

Ich persönlich werde diese Lösung wohl auch noch weiter verwenden, bzw. werde bei festen Layouts auch weiterhin auf eine Umgebung aus gefloateten Elementen setzen, etwas besseres und kompatibleres gibt es für mich derzeit einfach nicht :)

Wer jedoch wirklich 100% semantischen Quelltext will, der kommt oft um eine Lösung ohne zusätzliches Markup nicht herum.

Für all diese CSS-Fanatiker hat Robert Nyman einmal die gängigsten Clearing-Methoden zusammengefasst. Mit Codebeispielen, Demos und den Nachteilen der jeweiligen Technik.

Ein guter Überblick wie ich finden,den man auf jeden Fall einmal gelesen haben sollte.


In letzter Zeit liest man als Webdesigner immer mehr von dem YAML-Framework für CSS basierte Webseiten. YAML soll, so habe ich es zumindest verstanden, viele grundlegende Elemente und Formatierungen bereits mit sich bringen, die im Nachhinein dann noch variiert und angepasst werden können.

Nun habe ich mir in letzter Zeit einige Projekte die mit YAML umgesetzt wurden angesehen, und ich verstehe einfach den Sinn des ganzen nicht? Eine Zeitersparnis? Wohl kaum!

CSS ist nicht wirklich komplex, jedenfalls bei weitem nicht so komplex wie z.B. Programmiersprachen wie PHP, JavaScript oder Ruby. Wozu hier ein Framework benötigt wird ist mir wirklich rätselhaft.

Bin ich mal ehrlich, so muss ich gestehen dass ich evtl. seit 18 Monaten effektiv auf CSS setze, und mich konsequent von Tabellen befreit habe. Anfangs war alles natürlich noch ein wenig holperig, doch schon nach 2-3 Umsetzungen brauchte kaum eine Webseite länger als einen Nachmittag zur reinen XHTML & CSS-Umsetzung, und das ohne sich dabei auf nur eine kleine Anzahl von Browsern festzulegen.

YAML hat zwar gute Ansätze, doch finde ich es persönlich einfach unnütz. Jeder der sich eine kurze Zeit mit semantischem XHTML und CSS auseinander setzt wird schnell in der Lage sein, flexible Layouts umzusetzen und das auch Browser übergreifend.

Für mich persönlich bietet YAML derzeit einfach kaum Vorteile. Der Quelltext ist bei manchen Seiten einfach alles andere als logisch, semantisch oft erst recht nicht. Es wird Code übertragen der einfach nicht sein müsste, auch in den CSS-Dateien.

Ein weiteres Manko ist wie ich finde die fehlende Unterstützung des IE5, der leider immer noch nicht das zeitliche gesegnet hat. Hier setzt YAML darauf, dem User einfach kein Stylesheet auszugeben. Ich will nicht angeben, doch bisher ist es mir fast immer gelungen meine Projekte fast vollständig für den IE5 umzusetzen, und das mit minimalem Aufwand und vielleicht 200 Byte mehr Quelltext.

Ich würde gerne von den Anwendern des Frameworks erfahren wo hier wirklich die Vorteile liegen, vielleicht erkenne ich Sie auch einfach nur nicht.

Ich würde an Anfänger jedoch appellieren, sich einfach ein gutes Buch zum Thema zu kaufen und anhand von Projekten gaaaaanz viel zu üben. Das ist auf lange Sicht hin sicherlich besser, als sich von einem Framework abhängig zu machen.

Eine kleine Starthilfe auf die ich persönlich seit einiger Zeit zurückgreife ist übrigens das schmale Standard Template von Manuela Hoffmann.

Zwar nicht perfekt, aber als Ausgangsbasis zu gebrauchen.

P.s.: Ich sollte mir in Zukunft angewöhnen nicht mehr so oft das Wort “einfach” zu verwenden ;)


PNG GAMMA BUG im IE 7

Als ich vor einiger Zeit begann das PNG-Format für mich zu entdecken, machte sich auch sehr schnell Ernüchterung bei mir breit.

Der Grund dafür war, dass der Internet Explorer in all seinen Version ein Problem mit den Gammawarten von PNG-Grafiken hat. Im Resultat macht sich das in sofern bemerkbar, dass der IE in der Regel alle PNG-Grafiken ein wenig dunkler darstellt als es z.B. Opera und Firefox tuen.

Das machte sich bei der Anwendungen von PNG-Grafiken in sofern schlecht, da die Grafiken sich oft von ihrer eigentlichen Hintergrundfarbe abheben, und man somit im Prinzip eine gesonderte CSS-Datei für den IE anlegen müsste.

Doch dieser Spuk ist nun endlich vorbei. Des Rätzels Lösung ist das kleine aber durchaus feine OpenSource-Tool TweakPNG. TweakPNG kann verschiedene Default-Werte von PNG-Grafiken modifizieren, hinzufügen oder löschen. Somit lässt sich z.B. die Standardhintergrundfarbe für Browser ohne Alpha-Kanal festlegen u.v.m.

Für das fixen des Bugs ist jedoch im besonderen der Wert “gAMA” wichtig. Öffnet man eine PNG-Datei mit TweakPNG, löscht die Chunk-Zeile “gAMA” und speichert die Datei wieder, so lässt sich beobachten, dass die PNG-Grafik fortan in allen Browsern identisch ausgegeben wird.

Wahrscheinlich für viele ein alter Hut, ich wollte es den Unwissenden unter euch aber dennoch nicht vorenthalten.

P.s.: Ein sehr guter Hack um dem IE6 ebenfalls den Umgang mit einem Alpha-Kanal beizubringen, findet sich in diesem Tutorial.



Ältere Einträge

Blogsuche

RSS-Feeds

Plaste & Plastik

plasteundplastik.de - Das Geocaching-Weblog

Die Kategorien


Netz-Fundstücke


Meta / Propaganda