Tag: html-css

CSS3: Generator für Cross-Browser-Deklarationen

Die Idee von Border-Radius.com scheint großen Anklang zu finden und so haben Paul Irish und Jonathan Neal einen Generator für moderne CSS3-Effekte entwickelt. Mit CSS3 Please! steht ein komfortabler Editor für die möglichen CSS-Regeln zur Verfügung, mit dem sich einfach Cross-Browser-Regeln erstellen lassen. Bei dem interaktiven Editor ist eine Echtzeit-Vorschau enthalten, so dass man die Effekte direkt anpassen kann. Per Knopfdruck kann der CSS-Code in die Zwischenablage kopiert werden.

Zur Auswahl stehen Effekte wie abgerundete Ecken, Schatten, Verläufe, Rotationen oder die @font-face-Technik. Sehr schön sind die generierten Deklarationen für Internet Explorer, da nahezu alle Effekte mit "DXImageTransform"-Filtern realisiert werden können. Eine Ausnahme bilden runde Ecken, die erst mit Version 9 des Microsoft-Browsers verwendet werden können. Erlaubt es die Zielgruppe eines Webprojektes, kann mit der Verwendung von CSS3-Effekten viel Zeit gespart werden, da unnötige Verschachtelungen und transparente PNG-Grafiken entfallen.

Border-Radius.com: Vorschau für abgerundete Ecken

CSS3-Effekte und WebKit-Funktionen erfreuen sich trotz der relativ geringen Verbreitung großer Beliebtheit. Die Entscheidung über die Verwendung von modernen CSS-Deklarationen liegt nicht zuletzt beim Kunden und dessen gewünschter Zielgruppe für ein Projekt. Es wird sicherlich noch eine Zeit vergehen, bis die neue Browser-Ära einen globalen Anklang gefunden haben wird. Besonders Microsofts Internet Explorer 9 dürfte noch eine Weile auf sich warten lassen. Version 6 wurde am 1. März 2010 offiziell in Denver begraben (sogar Microsoft schickte Blumen mit Gruß).
Der Microsoft-Browser stellt das eigentliche Dilemma bei abgerundeten Ecken dar: Hierfür gibt es nur diverse Workarounds, ein HTC-Skript sowie eine offizielle Stellungnahme der Microsoft-Entwickler.
Wer bei Projekten dennoch modernen CSS-Code einsetzen kann, findet auf Border-Radius.com einen schönen Echtzeit-Generator für abgerundete Ecken.

Das kleine Online-Tool bietet die Möglichkeit, für jede Ecke einen anderen Radius zu definieren. Als Ausgabe erhält man Deklarationen für WebKit, Gecko und CSS3. Die CSS3-Eigenschaft "border-radius" ist hauptsächlich für Opera notwendig, da Apple- und Mozilla-Browser mit den eigenen Definitionen auskommen.

ZURB CSS Grid Builder: CSS-Code für Raster erstellen

Für das Erstellen von CSS-Rastern gibt es mittlerweile verschiedene Tools: Mit dem Yahoo! CSS Grid Builder oder Plumb lässt sich CSS-Code für die entsprechenden CSS-Frameworks erstellen. Eine Overlay-Grafik kann beispielsweise mit dem Gridmaker von Paul Holliday generiert werden und mithilfe von Hashgrid lässt sich per jQuery ein Raster über der Website einblenden.
Wer nun ein CSS-Raster erstellen möchte, ohne dabei auf ein CSS-Framework zurückgreifen zu wollen, kann den ZURB CSS Grid Builder nutzen. Die Online-Anwendung bietet komfortable Möglichkeiten, fertigen CSS-Code aus benutzerdefinierten Vorgaben zu generieren.

Neben der Spaltenbreite kann der Abstand zwischen den Spalten angegeben werden. Schließlich lässt sich noch die Anzahl der Unterteilungen definieren. Sehr schön bei dem Werkzeug ist die verkleinerte Browserfenster-Vorschau, in der das finale Raster betrachtet werden kann. Das Miniatur-Fenster kann auf verschiedene Breiten (1440, 1280 und 1024 Pixel) eingestellt werden. Per Knopfdruck wird im unteren Seitenbereich der fertige CSS-Code angezeigt. Interessant sind unter Anderem die Korrekturen für Internet Explorer 6, die für eine konstante Browser-Darstellung sorgen.

Ketchup: Moderne Formular-Validierung mit jQuery

Zur Überprüfung von Benutzereingaben in HTML-Formularen eignet sich JavaScript bestens. Für jQuery gibt es diverse Plugins, mit denen Formulare in Echtzeit verifiziert werden können. Ein aktuelles Skript dieser Art stellt Ketchup dar — mit dieser jQuery-Erweiterung werden bei fehlenden Eingaben über den entsprechenden Feldern (input) Hinweise eingeblendet, die den Benutzer auf das Pflichtfeld aufmerksam machen.

Das Skript erwartet spezielle Klassen (class) und wird im JavaScript-Code auf das Formular-Element (form) angewendet:

• HTML:
• <form id="element" action="index.php" method="post">
• <input type="text" class="validate(required, username)" />
• </form>
•  
• jQuery:
• $("#element").ketchup();

Neben einfachen Pflichtfeldern können damit auch weitere Funktionalitäten realisiert werden. So kann etwa überprüft werden, ob es sich bei der Benutzereingabe um eine valide Datumsangabe oder E-Mail-Adresse handelt. Das Aussehen der Hinweise lässt sich per CSS anpassen und konfigurieren. Die Nachrichten sind in einer separaten Datei ("jquery.ketchup.messages.js") gespeichert. Beim Download des Skriptes sind bereits diverse Beispiele und Möglichkeiten enthalten.
Interessant bei der Klassen-Schreibweise im HTML-Teil ist übrigens die W3C-Validierung.

Replace CSS Colors: Farben in Stylesheets ersetzen

Manchmal kann es der Fall sein, dass das Farbschema einer Website geändert werden soll. Neben Grafiken müssen vor allem die CSS-Farbwerte angepasst werden. Die Suche nach den entsprechenden Codes kann aufwendig werden, wenn es sich um komplexe Stylesheets handelt. Für diesen Zweck steht mit "Replace CSS Colors" eine schöne Lösung zur Verfügung, mit der sich die Farbwerte einer CSS-Datei per Klick ändern lassen. Die gewünschte Datei kann per Formular hochgeladen und anschließend editiert werden.

Zum Einsatz kommt der Farbwähler (Color Picker) von COLOURlovers, so dass die neuen Farben exakt bestimmt werden können. Hat man die neue Farbwelt erstellt, wird vom Skript eine aktualisierte CSS-Datei erstellt und kann schließlich heruntergeladen werden.
Die Webanwendung eignet sich natürlich nicht nur zum Ändern von Farbwerten — gerade bei Änderungen an Stylesheets kann es sehr nützlich sein, die unterschiedlichen Farben einer Website aufgelistet zu haben.

Deploy: Fertige HTML-Grundgerüste generieren

Am Anfang eines Webprojekts steht in der Regel ein frisches HTML-Gerüst sowie eine gängige Ordnerstruktur (beispielsweise "images" für Bilder). Das Erstellen des Markup-Codes kann per Hand erfolgen oder auf Templates bzw. vergangenen Projekten basieren. Eine weitere Möglichkeit steht mit Deploy zur Verfügung. Die kleine Online-Anwendung generiert ein fertiges HTML-Grundgerüst (Kickstart), das durch einige Einstellungen angepasst werden kann. So lassen sich Dokumenttyp, CSS-Vorgaben, jQuery-Verknüpfungen (und Plugins) oder Verzeichnisse hinzufügen.

Per Knopfdruck generiert Deploy eine fertige ZIP-Datei, die alle notwendigen Dateien enthält. Alternativ kann als Index-Dokument auch eine PHP-Datei ausgegeben werden. So lassen sich schnell und einfach die grundlegenden Zeilen für ein Webprojekt erstellen.
Wer noch einen Schritt weiter gehen möchte, kann mit dem Markup Maker von Accessify auch gleich CSS-Bausteine (IDs) sowie die dazugehörige HTML-Struktur generieren lassen.

Webentwicklung: Checkliste für Website-Launch

Wenn die Programmierung an einem Webprojekt abgeschlossen ist, kann die Seite in der Regel veröffentlicht und der Zielgruppe zugänglich gemacht werden. Mit dem Upload der entsprechenden Dateien oder der Freischaltung durch ein Content-Management-System ist der Vorgang prinzipiell abgeschlossen. Dennoch können sich bei dem Launch einer Website schnell Fehler einschleichen oder banale Dinge unbeachtet bleiben. Gemeint sind hier in erster Linie technische Details und Kleinigkeiten, die etwa für Suchmaschinen relevant sind. Die Überprüfung der Dateien nach dem Upload sollte selbstverständlich sein. Zudem verläuft die Live-Schaltung einer Website von Projekt zu Projekt unterschiedlich, weshalb sich nur allgemeine Tipps geben lassen.

Ich habe daher eine kleine Checkliste erstellt, in denen die wichtigsten Punkte enthalten sein sollen, die vor dem Launch beachtet werden sollten.

CSS-Frameworks: Übersicht mit Beschreibungen

Durch den Einsatz von CSS-Frameworks lässt sich Zeit sparen, so dass bei der Entwicklung der Fokus auf die Ausgestaltung der Stile und Designvorgaben gelegt werden kann. Bekannte Frameworks wie Blueprint oder Tripoli erfüllen schon seit geraumer Zeit ihren Zweck. Dennoch gibt es eine große Auswahl an unterschiedlichen CSS-Bibliotheken, die teilweise für verschiedene Einsatzgebiete ausgelegt sind.
Die Wahl des perfekten Frameworks ist von diversen Faktoren und nicht zuletzt von den Projektvorgaben abhängig. Ein guter Leitfaden wurde gestern bei DevSnippets veröffentlicht, in dem sowohl aktuelle als auch altbekannte CSS-Frameworks vorgestellt und beschrieben werden.

Die Auflistung ist knapp und dennoch ausreichend. Zu jedem Framework wurde abschließend in einem Satz festgehalten, was die jeweilige Bibliothek bietet. So finden sich in der Liste sehr interessante Systeme wie das "Fluid 960 Grid System" oder das "1KB CSS Grid" — Letzteres generiert per Konfigurator den gewünschten CSS-Code mit Reihenanzahl und Größenangaben.
Sicherlich eignen sich derartige Frameworks nicht für jedes Projekt und die Entscheidung liegt letztendlich beim Entwickler. Das Angebot an CSS-Bibliotheken sollte man dennoch im Hinterkopf behalten.

Webdesign: Font Stacks überarbeiten und optimieren

Anlässlich der Thematik "Typografie im Web" gibt es aktuell noch einen sehr schönen Artikel von Amrinder Sandhu. In dem Beitrag befasst sich der Autor mit Font Stacks und deren Optimierung. Neben modernen Technologien wie WOFF oder Font Replacement besteht eine weitere Möglichkeit für individuelle Web-Schriftarten in der Benutzung von entsprechenden Font Stacks — viele Anwender haben neben unterschiedlichen Betriebssystemen Office-Pakete oder andere Programme mit zusätzlichen Schriftarten installiert, so dass hier für einen Teil der Zielgruppe ungewöhnliche Zeichensätze verwendet werden können.

Amrinder Sandhu hat in seinem Beitrag interessante Statistiken über die Verteilung von Schriftarten zusammengetragen. Zudem hat er diverse Font Stacks unter die Lupe genommen und analysiert. Er weist auf die Lesbarkeit von verschiedenen Serifenschriften hin und gibt Tipps für die Überarbeitung von bestehenden Font Stacks.
Weiterhin steht mit dem Font Stack Builder ein kleines Werkzeug für die Erstellung von Schriftart-Listen zur Verfügung.

Auch auf der Seite des Font Stack Builders erhält man zu jeder Schriftart die jeweiligen Statistiken, was die Wahl der Zeichensätze erleichtert. Weiterhin sollte man den Einsatz von Windows 7-Schriftarten in Erwägung ziehen.

Yahoo! CSS Grid Builder: CSS-Raster erstellen

Mit der Yahoo! User Interface Library (YUI) steht sowohl ein JavaScript-Framework als auch eine gute CSS-Bibliothek zur Verfügung, mit der sich Layouts leicht an definierte Raster anpassen lassen. Die Bibliothek ist aktuell in Version 3 verfügbar, mit der die Stylesheet-Vorgaben "CSS Base", "CSS Reset" und "CSS Fonts" genutzt werden können. Nichtsdestotrotz können die Einstellungen von Version 2 weiterhin produktiv eingesetzt werden. So stellt der Yahoo! CSS Grid Builder stets noch ein gutes Werkzeug für das schnelle Erstellen von CSS-Rastern dar.

Der Editor ist einfach zu bedienen und bietet die Optionen der "reset-fonts-grids.css" des YUI-Frameworks an. Dementsprechend können mehrspaltige Layouts (mit 1, 2, 3 oder 4 Spalten) angelegt und beliebig erweitert werden. Das Größenverhältnis der Aufteilungen kann eingestellt und die Anzahl der Reihen (Rows) frei gewählt werden. Zudem lässt sich ein Seitenbereich (Sidebar) anlegen.
Ist man mit dem Layout zufrieden, kann per "Show Code" die finale HTML-Ausgabe betrachtet und kopiert werden.