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 stellt die YUI-Bibliothek fest, dass ein erstklassiges Erlebnis 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 das Einbetten von Rastern mit einer bis vier Spalten innerhalb der Kapazität der von Ihnen verwendeten Vorlage. Seitenraster: buildgridsgrids.css 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. Liste A <html><head> 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.
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:
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.
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 Anforderungen 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).
<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:
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.