In der Kolumne der letzten Woche habe ich das Yahoo! Developer Network besprochen und mich dabei auf die JavaScript-Funktionen (vor allem Kalender) konzentriert, die in der Yahoo! User Interface (YUI)-Bibliothek verfügbar sind. Ich wollte etwas mehr Zeit damit verbringen, einen anderen Bereich der YUI-Bibliothek abzudecken, der CSS-Tools bereitstellt. Mit diesen Tools können Sie CSS-basiertes Design problemlos mit Webanwendungen kombinieren.
Browserunterstützung
Eines der Hauptmerkmale des CSS-Tools ist, dass es so ausgelegt ist, dass es Klasse-A-Browser perfekt unterstützt. Bei der Bewertung der Browser-Unterstützung handelt es sich lediglich um eine Yahoo!-Bewertung. Die vollständige Beschreibung finden Sie auf der Website von Yahoo!, die im Wesentlichen beschreibt, wie sich CSS in den derzeit auf dem Markt erhältlichen Browsern gut verhält.
In dieser Online-Tabelle werden Browser in drei Ebenen der Browserunterstützung (A, C und X) unterteilt. Level A ist die höchste Unterstützungsstufe. Durch die Nutzung der Leistungsfähigkeit moderner Webstandards entdeckt die YUI-Bibliothek ein erstklassiges Erlebnis, das erweiterte Funktionalität und visuelle Wiedergabetreue bietet. Support-Kategorien und zugehörige Dateien geben Ihnen einen Eindruck davon, wo CSS unterstützt wird, es sollte jedoch in jedem Browser verfügbar sein (mit möglichen Downgrades).
Wiederverwendbares CSS
Die YUI-Bibliothek umfasst drei CSS-Bereiche oder -Funktionen, die Formatierung, Schriftarteneinführung und rasterbasiertes (Spalten- und Zeilen-)Layout abdecken. Diese Begriffe werden auf der Website verwendet, um diese drei Elemente zu beschreiben:
Seitenraster: Ermöglicht Ihnen, ein bis vier Spaltenraster in die Kapazität der von Ihnen verwendeten Vorlage einzubetten.
Schriftarten: Bietet eine browserübergreifende Standardisierung und Kontrolle der Typografie. Im Allgemeinen werden einheitliche Schriftarten und Zeilenhöhen bereitgestellt, während Benutzeranpassungen an Schriftarten (im Browser) vollständig unterstützt werden.
Zurücksetzen: Bietet eine browserübergreifende Standardisierung von Standardzuweisungen an HTML-Elemente. Außerdem werden gängige Standardausdrücke in Browsern entfernt, z. B. die Verwendung von Fettdruck für hervorgehobene Elemente, um sicherzustellen, dass alle Schriftartdefinitionen beabsichtigt sind und Elemente immer für ihre semantische Bedeutung und nicht für den üblichen visuellen Ausdruck verwendet werden.
Nach der Installation ist jedes Element des YUI-Bibliotheksdownloads in den folgenden Verzeichnissen/Dateien auf dem Webserver verfügbar:
Seitenraster : buildgridsgrids.css
Schriftarten: buildfontsfonts.css
Zurücksetzen: eset eset.css erstellen
Sie können diese Basisverzeichnisse auf Ihrem eigenen Webserver installieren oder auf Ihrer Site platzieren, damit Sie bei Bedarf darauf verweisen können. Ein wichtiges Merkmal von CSS (abgesehen davon, dass es kostenlos ist) besteht darin, dass es vor der Veröffentlichung gründlich getestet und debuggt wird. Schauen wir uns die CSS-Tools in Aktion genauer an.
Rasterseitenlayout
Das rasterbasierte Layout ist die treibende Kraft hinter fast jedem Website-Design oder Seitenlayout. In der Vergangenheit erfolgte dies oft über HTML-Tabellen, aber CSS bietet enorme Leistungsfähigkeit und Flexibilität für das Seitenlayout. Page Grid bietet Code zum Erstellen von Seiten mit Spalten und Zeilen entsprechend Ihren Anforderungen.
Auf der grundlegendsten Ebene des Seitenrasters werden sieben Webseitenvorlagen bereitgestellt, von denen sechs detaillierte Hauptinhalts-/Symbolleistenlayouts definieren. Die siebte Vorlage definiert ein Layout ohne Symbolleisten, und der Hauptinhalt nimmt die gesamte Seitenbreite ein. Die Namen dieser Vorlagen lauten wie folgt:
yui-t1: Enthält links eine Symbolleiste mit einer Breite von 160 Pixel und einen Hauptbereich mit einer Breite von 570 Pixel.
yui-t2: Enthält links eine Symbolleiste mit einer Breite von 180 Pixel und einen Hauptbereich mit einer Breite von 550 Pixel.
yui-t3: Enthält links eine Symbolleiste mit einer Breite von 300 Pixel und einen Hauptbereich mit einer Breite von 430 Pixel.
yui-t4: Enthält rechts eine Symbolleiste mit einer Breite von 180 Pixel und einen Hauptbereich mit einer Breite von 550 Pixel.
yui-t5: Enthält rechts eine Symbolleiste mit einer Breite von 240 Pixel und einen Hauptbereich mit einer Breite von 490 Pixel.
yui-t6: Enthält rechts eine Symbolleiste mit einer Breite von 300 Pixel und einen Hauptbereich mit einer Breite von 430 Pixel.
yui-t7: Enthält einen Hauptbereich mit einer Breite von 750 Pixeln und keine Symbolleisten.
Sie können diese Vorlagen entsprechend Ihren Zwecken kombinieren (oder bearbeiten, wenn Sie mutig genug sind). Listing A verwendet das erste Layout zum Layouten einer Seite (Hinweis: Das CSS-Tool ist im Standardverzeichnis des Webservers installiert).
Liste A
<html><head>
<title>Yahoo CSS Tools Beispiel 1</title>
<link rel="stylesheet" type="text/css" href="build/grids/grids.css">
</head>
<Körper>
<div id="doc" class="yui-t2">
<div id="hd">Seitenkopf</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">Hauptbereich</div>
</div><div class="yui-b">Linke Spalte</div>
</div>
<div id="ft">Seitenfuß</div>
</div></body></html>
Ein paar Hinweise zur HTML-Seite:
Das Layout wird der gesamten Seite zugewiesen – dem Haupt-Div-Tag wird die Klasse yui-t2 zugewiesen. Dies zeigt, dass die zweite Vorlage verwendet wird.
Die Seite ist in Kopf-, Haupt- und Fußzeilenbereiche unterteilt. Die Kopfzeile erhält die Kennung hd, der Textkörper die Bezeichnung bd und die Fußzeile die Bezeichnung ft.
Der Hauptteil der Seite ist in den linken Bereich (sofern die Vorlage dies unterstützt) und den Hauptbereich unterteilt. Beiden wird die Klasse yui-b zugewiesen, dem Hauptbereich wird jedoch das Attribut yui-main Identifier in seinem div-Tag angehängt.