Tag: html-css

Cuzillion: Website-Komponenten analysieren

Ich habe beim Surfen eine interessante Seite gefunden, auf die ich früher schon einmal gestoßen war: Das Projekt "Cuzillion" von Steve Souders stellt ein nützliches Tool dar, mit dem sich verschiedene Komponenten einer Website konfigurieren und testen lassen. Zu den Komponenten zählen Inline-Skripte, verlinkte Skript-Dateien, externe Stylesheets, Bilder und iframes. Mit dem Werkzeug lassen sich beliebige Blöcke in einem fiktiven HTML-Konstrukt platzieren und anpassen. Anschließend kann die Ladezeit getestet und die optimale Reihenfolge der Komponenten ermittelt werden.

Steve Souders ist ein Spezialist, was Komprimierung und Caching von Websites angeht. Ein interessanter Punkt, den er aufzählt, stellt beispielsweise die Tatsache dar, dass Firefox maximal 2 Dateien parallel herunterlädt, während Internet Explorer 8 bis zu 6 Elemente synchron laden kann. Cuzillion ist also dafür gedacht, Differenzen der verschiedenen Browser ausfindig zu machen und zu verstehen. Die Konfigurationen der Komponenten können als permanente Links verschickt und somit von mehreren Entwicklern verwendet werden.

Grid Designer 2: Raster und Typografie erstellen

Online-Portale und inhaltsstarke Websites benötigen ein durchdachtes Raster, um viele Inhalte unterbringen und ansprechend darstellen zu können. Für die Erstellung eines CSS-Rasters bieten sich etliche Werkzeuge an, die online abgerufen werden können (siehe Liste). Ein aktuelles Projekt, um entsprechende Raster und auch gleich die dazugehörigen Typografie-Einstellungen zu erzeugen, stellt der Grid Designer 2 von Rasmus Schultz dar. Hier können wie gewohnt die Anzahl und Größen der Spalten festgelegt werden — die restlichen Berechnungen übernimmt das Online-Tool.

Hat man sich für eine Einteilung entschieden, können im zweiten Abschnitt etliche Anpassungen für die Textdarstellung der Seite vorgenommen werden. Hierzu zählen Einstellungen wie Schriftgröße, Schriftart, Zeilenhöhe, Laufweite sowie gängige Textformatierungen. Im letzten Schritt kann schließlich der finale CSS- und HTML-Code eingesehen und kopiert werden. Bei Bedarf können ein skalierbares Raster und auch gleich ein CSS-Reset ausgegeben werden.
Da sich mittlerweile etliche Raster-Werkzeuge im Netz finden, gibt es hier eine kleine Liste der verbreiteten Projekte:

• Gridulator
• Grid System Generator
• ZURB CSS Grid Builder
• Yahoo! CSS Grid Builder
• Hashgrid
• GridFox
• Gridmaker

Von Online-Diensten über Photoshop-Skripte bis hin zu Firefox-Erweiterungen ist hier alles dabei. Die Werkzeuge können bei der Erstellung von komplexen Rastern viel Zeit sparen, so dass sich ein Blick auf die einzelnen Projekte lohnt.

CSS 3.0 Maker: CSS3-Effekte im Browser erstellen

Inzwischen sind Editoren, die fertigen CSS3-Code für neue Effekte generieren, massenhaft im Netz vertreten. Neben dem CSS3 Playground oder dem CSS3 Generator gibt es nun den CSS 3.0 Maker, der ebenfalls komfortable Werkzeuge für die Erstellung von neuen CSS-Effekten bietet.

So können mit dem Online-Editor CSS-Codes für Textschatten, Verläufe, abgerundete Ecken, Animationen, Rotationen oder @font-face-Deklarationen erstellt werden. Die Seite bietet schöne Echtzeit-Werkzeuge, mit denen sich die verschiedenen Effekte sehr gut anpassen und einstellen lassen. Derartige Editoren sind für CSS3-Effekte notwendig, da sich genaue Anpassungen und visuelle Kleinigkeiten direkt betrachten lassen. Aktuelle CSS3-Editoren unterscheiden sich kaum von ihrer Funktionalität — für Webentwickler zählen im Endeffekt nur die Bedienbarkeit eines Editors und der persönliche Geschmack.

CSS3 Playground: WYSIWYG-Edtior für CSS3-Effekte

Generatoren für CSS3-Code mit einer Echtzeit-Vorschau der Effekte gibt es mittlerweile mehrfach im Netz. Der CSS3 Generator zählt beispielsweise dazu. Einen virtuellen CSS3-Spielplatz hat nun Mike Plate mit seinem CSS3 Playground entwickelt — dabei handelt es sich um einen WYSIWYG-Editor, mit dem die neuen Effekte der Cascading Style Sheets im Browser eingestellt werden können.

Das Tool erlaubt es also, abgerundete Ecken, Schatteneffekte, Rotationen und Texteffekte zu erstellen. Die Einstellungen können über ein seitliches Menü vorgenommen werden und sind im Vorschau-Bereich direkt sichtbar. Als Resultat kann der fertige CSS3-Code eingesehen werden. Zusätzlich wird die CSS-Ausgabe angezeigt, wie sie vom jeweiligen Browser interpretiert wird.

HTML5: Die Frage nach einem Grundgerüst

Für ein neues Web-Projekt muss das Rad nicht jedes Mal neu erfunden werden. Aus bestehenden Projekten oder anderen Quellen kann eine individuelle Vorlage erstellt werden, die eine Grundlage für neue HTML-Kreationen darstellen kann. Inzwischen finden sich auch online diverse CSS-Resets und HTML-Grundgerüste, beispielsweise mit Instant Blueprint oder Deploy.
Die Frage nach einem HTML5-Grundgerüst wurde diese Woche mit zwei Projekten beantwortet: Zum einen gibt es das erste HTML5 Reset-Template und zum anderen haben Paul Irish und Divya Manian das HTML5 Boilerplate veröffentlicht. In beiden Fällen steht ein HTML5-Template zur Verfügung, das als Gerüst für frische Projekte dienen soll.

In den Paketen sind wie gewohnt diverse Resets, Browser-Hacks sowie eine mögliche Ordnerstruktur enthalten. Der Aspekt von HTML5-Grundgerüsten wird damit zwar aufgezeigt, allerdings bleibt die Frage der Notwendigkeit bestehen. Mit dieser Thematik hat sich auch Thomas Fuchs, der Entwickler von Script.aculo.us, in einem aktuellen Blog-Eintrag beschäftigt. So führt er ein pragmatisches HTML5-Template auf und empfiehlt den Verzicht auf CSS-Resets. Der kurze Artikel ist sehr interessant und dürfte bei der Entscheidung nach einem HTML5-Grundgerüst behilflich sein.

CSS: Mehr Möglichkeiten mit Conditional Comments

Eine Methode, um gesonderte Stile für verschiedene Versionen des Internet Explorers auszuliefern, stellen neben CSS-Hacks die beliebten "Conditional Comments" dar. Hierbei können durch spezielle Bedingungen im HTML-Code entsprechende Browser-Versionen angesteuert werden. Es bleibt dem Entwickler überlassen, was in dem "if"-Bereich definiert wird. Paul Irish empfiehlt beispielsweise in einem älteren Artikel die Benutzung von unterschiedlichen IDs für den body-Bereich — dadurch entfallen browserspezifische Stylesheets und auch CSS-Hacks werden überflüssig.
Ein Stück weiter hinten setzt man bei Impressive Webs an: Kürzlich wurde ein schöner Beitrag veröffentlicht, in dem erweiterte Möglichkeiten für Conditional Comments vorgestellt werden.

Dabei werden diverse Deklarationen beschrieben, die vielleicht nicht jedem CSS-Entwickler bekannt sind. So können noch genauere Angaben für den gewünschten Browser gemacht werden und auch erweiterte Operatoren wie "&" oder "|" sind in Verbindung mit Subexpression-Operatoren (Klammern) möglich. Der Artikel dürfte bestimmt für das eine oder andere Web-Projekt nützlich sein und sollte in den Bookmarks abgelegt werden.

Peculiar: Icon-Package mit CSS-Symbolen

Die wohl bekannteste Neuerung, die mit CSS3 möglich ist, dürften abgerundete Ecken sein. Dass sich durch diesen Effekt auch ansehnliche Symbole gestalten lassen, demonstriert der Designer Lucian Marin — sein Icon-Paket Peculiar besteht aus 45 Piktogrammen, die aus reinem CSS-Code erstellt wurden (border-radius) und somit auch bei einer vergrößerten Ansicht scharf dargestellt werden.

Die CSS-Symbole reichen von einfachen Video-Player-Icons bis hin zu Nachrichten-Symbolen oder Pfeilen. Durch den Einsatz der kleinen Piktogramme können unter Anderem HTTP-Requests eingespart werden. Das Paket darf zu Lernzwecken frei genutzt werden. Ist ein privater oder kommerzieller Gebrauch gewünscht, fällt ein kleiner Obolus von 25 USD an. In jedem Fall sind die Icons eine schöne Inspirationsquelle für die Möglichkeiten von CSS3. Die Grafiken können in allen modernen Browsern dargestellt werden und funktionieren auch in Internet Explorer, wenn CSS3 Pie auf der entsprechenden Seite integriert wird.

Intelligencefont: Schriftarten im Browser konfigurieren

Das Einstellen und Optimieren einer Schriftart für eine Website kann nicht im Grafik- oder Layout-Programm erfolgen, da noch keine Software existiert, die ein echtes Browser-Rendering simulieren kann (Anwendungen wie Adobe Dreamweaver bilden die Ausnahme) oder eine bestehende Browser-Engine integriert hat — daher besteht die einzige Möglichkeit in der Erstellung entsprechender CSS-Stile. Um den Prozess etwas zu beschleunigen, stehen diverse Tools wie CSS Type Set oder Typetester zur Verfügung. Eine Alternative mit weiteren Einstellungen gibt es mit Intelligencefont. Hier können Schriftbilder online angepasst und abgestimmt werden.

Auf der Website lassen sich Blöcke anlegen, die mit Texten gefüllt werden können. Auf die Makrotypografie bezogen können die Anzahl der Spalten eines Blocks sowie der Abstand zwischen den Spalten festgelegt werden. Wesentlich mehr Optionen stehen hinsichtlich der Mikrotypografie bereit: Hier können Schriftart, Schriftgröße, Zeilenabstand, Laufweite und Wortabstand bestimmt werden. Zusätzlich gibt es noch die Option "OS Version", durch die entsprechende Schriftarten zur Auswahl stehen. Ist man mit dem Schriftbild zufrieden, können die CSS- und XHTML-Codes generiert und kopiert werden.