Das Beste an CSS ist, dass es Webentwicklern ermöglicht, mit weniger mehr zu erreichen. Was genau bedeutet das? Nun, zum einen ermöglicht CSS Entwicklern,
- Viel, viel weniger XHTML zu coden
- Die Formatierung der Website vom Inhalt trennen
- Kontrolliere so viel wie möglich vom Website-Thema/Design, wie es der Entwickler selbst zulässt, mit einer einzigen CSS-Datei
- Passe die Anzeige der Website einfach an den Benutzer an, anstatt dass sich der Benutzer an die Website anpasst
- Ändere die Darstellung unserer Website für spezifische Geräte und besondere Umstände
Die Liste geht immer weiter. Die Funktionalität, großartige Dinge mit weniger Code zu erreichen, ist vorhanden; es liegt am Entwickler, das XHTML so zu gestalten, dass die volle Kraft von CSS genutzt wird. Ein Bereich, in dem CSS meiner Meinung nach oft unterbeansprucht wird, sind Navigationsmenüs.
Abhängig vom Design Ihrer Website können Sie eine vertikale Navigation oder eine horizontale Navigation verwenden. Sie können auch beides verwenden. Wenn Sie XHTML-Listen, <ol>- oder <ul>-Elemente, für Ihre Navigation verwenden, ist die Wahrscheinlichkeit groß, dass Sie zusätzlichen Code schreiben. Es ist an der Zeit, die display-Eigenschaft von CSS zu nutzen. Wir werden…
<div id="navigation">
<h3>Categories</h3>
<ul class="nav-list">
<li><a href="/css">CSS</a></li>
<li><a href="/html">HTML</a></li>
<li><a href="/mootools">MooTools</a></li>
<li><a href="/php">PHP</a></li>
<li><a href="/xml">XML</a></li>
</ul>
</div>…in…
<div id="navigation">
<h3>Categories</h3>
<a href="/css">CSS</a>
<a href="/html">HTML</a>
<a href="/mootools">MooTools</a>
<a href="/php">PHP</a>
<a href="/xml">XML</a>
</div>…mit sehr grundlegendem, browserübergreifend kompatiblem CSS umwandeln.
Der einzige wirkliche Vorteil der Verwendung der Listen-/Listenelementmethode der Struktur in diesem Fall ist, dass <li>-Elemente im Wesentlichen „Block“-Elemente sind; sie sind solide Container, die in die nächste Zeile fallen, es sei denn, sie werden gefloatet. CSS ermöglicht es uns, angegebene Elemente mit der Eigenschaften-/Wertkombination display:block; als Blöcke zu definieren. Um den oben genannten aufgeblähten Listencode zu vermeiden, können wir display:block; für jedes Link-Element (<a>) innerhalb des Navigationsmenüs angeben.
#navigation a { display:block; }Das obige Beispiel ist alles, was Sie für die vertikale Navigation benötigen. Für die horizontale Navigation müssen Sie einen float-Wert angeben, genau wie Sie es bei den Listenelementen tun würden.
#navigation a { display:block; float:left; }Das war's? Ja! In vielen Fällen können Sie einfach die früheren <li>-Eigenschaften nehmen und sie auf den Link-Selektor übertragen! Der obige Code ist ein enormer Vorteil sowohl für den Entwickler als auch für den Benutzer, weil
- der Entwickler viel Bandbreite sparen kann
- die Seite für Benutzer schneller lädt
- weniger Code kann schnellere Wartung bedeuten
- Listen-Eigenschaften nicht mit Ihren Anker-Eigenschaften interferieren
Wenn Sie noch nicht überzeugt sind oder diese CSS/XHTML in Aktion sehen möchten, können Sie gerne den Quellcode meiner Website einsehen unter: davidwalsh.name.
Bevor Sie kommentieren…
Meine Methode wurde kritisiert, daher möchte ich ein paar absehbare Fragen/Kommentare beantworten.
1. Das ist hässlicher Code!
Ich hatte noch nie einen Kunden, der mir sagte, mein Code sei hässlich. Ich wurde jedoch dafür gedankt, dass ich Websites erstellt habe, die schnell laden. Denken Sie daran, dass Entwickler in den meisten Fällen die Einzigen sind, die sich darum kümmern, wie Ihr Code aussieht. Funktionalität ist der Schlüssel.
2. Das spart nicht viel Code!
Denken Sie daran, wie oft Ihre Seite von Benutzern heruntergeladen wird! Denken Sie an die zusätzliche Downloadzeit, die Ihre JavaScript-Bibliotheken hinzufügen! Alle Webentwickler sollten die Downloadzeit berücksichtigen.
3. Ihr Code ist nicht gut abwärtskompatibel.
Barrierefreiheit ist immer eine Überlegung, die ich anstelle. Wenn Sie alle CSS-Stile ausschalten würden, würde die Seite einfach Links anzeigen, die durch ein Leerzeichen getrennt sind. So gut wie eine Liste? Nein, aber immer noch klar lesbar.
Im Gespräch mit Chris kam er auf einen sehr cleveren Punkt. Man könnte einen <h2>-Tag (oder welchen auch immer Sie wählen) erstellen, ihn „Navigation“ nennen und ihn mit CSS verstecken. Wenn CSS ausgeschaltet ist, wird die Überschrift „Navigation“ angezeigt und es ist für den Benutzer klar, dass er die Navigation sieht.
Ich möchte Chris ein besonderer Dank aussprechen, dass er mir erlaubt hat, meine Methode mit Ihnen zu teilen. Ich plane, die Kommentare zu beobachten, also teilen Sie bitte Ihre Ideen und Vorschläge mit.
Was ist mit der Zugänglichkeit von Screenreadern?
Was ist mit Semantik?
Was ist mit display:block für IE?
Ich bin kein großer Fan dieser Technik, hauptsächlich weil Sie die Semantik des HTMLs wegnehmen: Anstatt einer strukturierten Liste von Navigationslinks haben wir jetzt eine mehrdeutige Menge von Anker-Tags, die theoretisch die Navigation Ihrer Seite bilden. Es gibt keine klare Gruppierung von Links und Navigationspunkten.
Außerdem denke ich, dass das Listenbeispiel, das Sie gegeben haben, etwas aufgebläht war. Die Klasse nav-list ist wahrscheinlich unnötig, da die Liste leicht mit #nav ul ausgewählt werden könnte.
Der andere Vorteil der Verwendung einer Liste in Verbindung mit einer Reihe von Links ist, dass sie zusätzlichen Markup bereitstellt, an dem CSS angehängt werden kann, sodass Techniken wie Douglas Bowmans Sliding Doors möglich sind.
Was das Sparen von Bandbreite angeht… Ich schätze, das kann helfen, aber das Kürzen Ihrer ID-Namen könnte auch ziemlich ähnliche Leistungsverbesserungen bringen!
So gut wie eine Liste? Nein, aber immer noch klar lesbar.
Ist das so klar lesbar, wie es sein könnte? Denn so würden Ihre Links in einem Browser erscheinen, der CSS nicht unterstützt (ich denke an die mobile Art).
Warum nicht alle Listen so machen? Eigentlich könnten wir dafür eine Tabelle verwenden… (/sarkasmus)
@Romz & @Mathew: Die einzelnen „h“-Tags repräsentieren die Navigationsgruppierungen, so zu sagen, daher verschwindet die Trennung zwischen verschiedenen Navigationsabschnitten mit diesem System nicht. Display:block funktioniert in allen IE und modernen Browsern, also ist das kein Problem. Ich weiß, dass eine Verkürzung einer ID funktionieren wird, aber ich habe eine längere für das Beispiel verwendet. Eine verkürzte Element-ID kommt jedoch nicht annähernd an die Byte-Anzahl heran, die für die Erstellung einer Liste benötigt wird.
Zuletzt wird die obige Lösung nicht in allen Situationen funktionieren, daher wird das Sliding Doors-Beispiel mit meinem Beispiel nicht funktionieren (es sei denn, Sie haben unterschiedliche Button-Bilder für jeden Link). Für viele Zwecke wird diese Lösung jedoch funktionieren.
@James: Ihr „IsThisAsPlainReadableAsItCouldBe?“ sollte „Is This As Plain Readable As It Could Be?“ lauten. Zeilenumbrüche werden als Leerzeichen gerendert. Ihr Sarkasmus ist aber ziemlich clever.
Man könnte Sliding Doors zum Laufen bringen, ohne <li>-Elemente zu verwenden. Benutzen Sie einfach spans als zusätzlichen Hook anstelle des Listenelements.
@Chris: Ich schätze, mein Punkt bezüglich Sliding Doors ist, dass es ein Bonusfeature der Verwendung von Listen ist, sowie semantische Markup zu haben. Sicher, Sie können spans verwenden, aber der Punkt ist, dass spans keine strukturelle Bedeutung hinzufügen, während eine Liste das tut.
@James: Für mich scheint eine Liste eine perfekte Möglichkeit zu sein, eine Reihe von Navigationspunkten anzuzeigen, anstatt eine Masse von ununterscheidbaren Links, aber das würde stark vom mobilen Gerät abhängen. Mit Geräten wie dem iPhone und Googles Android wird dieses Argument meiner Meinung nach jedoch immer weniger relevant.
Sie können auch den Whitespace entfernen und satte 20 Bytes sparen, 168 von 188. Bytes, Leute…
Das Original ist aufgeblähte 270 Bytes auf 239 Bytes reduziert.
Beide zeigen jedoch 4,00 KB an, wer weiß.
In einem meiner Kurse für Interface Design wurde uns beigebracht, dass die Verwendung von Listen für Links korrekte Semantik ist (Gruppen von Dingen, die in einer relevanten Liste zusammengefasst sind). Ich habe jedoch schon einmal „geschummelt“ und Links nicht in Listen gesetzt, weil es einfacher zu codieren und zu stylen war! Ich schätze, was auch immer Sie entscheiden, sollte wahrscheinlich davon abhängen, wie viel Traffic Ihre Website haben wird – Sie schneiden nur Ecken, wenn es viel Bandbreite spart?
http://www.peachpit.com/articles/article.aspx?p=369225&rl=1
http://www.csslounge.co.uk/2005/06/16/the-semantic-web/
Bei einer kurzen Suche bin ich auf diese beiden Seiten gestoßen, die die Verwendung von Listen anstelle von nur Links in der Reihenfolge ohne UL oder OL erklären.
Nachdem ich Ihren Artikel gelesen hatte, habe ich nach weiteren Informationen gesucht, wie Screenreader oder ähnliches Listen für die Navigation verwenden, und es scheint, dass Listen für das Verständnis und die korrekte Übersetzung für beeinträchtigte Personen sehr wichtig sind. Für die Barrierefreiheit funktioniert die Lösung mit dem Titel „Navigation“ also nicht und ich muss mich gegen diese Methode des Code-Sparrens aussprechen.
Ich schätze, Sie haben diese Art von Antwort von den Lesern bereits erwartet :)
Wie auch immer, ich denke, es ist eine völlig vernünftige Vorgehensweise.
Dies erreicht nicht mehr mit weniger… es erreicht weniger mit weniger. Den semantischen Sinn und die Barrierefreiheit zu verlieren, ist keine Entschuldigung für weniger Tastenanschläge. Das ist einfach Faulheit. Ich würde diesen Ansatz keinem Webentwickler empfehlen.
Danke für Ihre Gedanken.
-Nate
Mein Ziel hierbei ist nicht zu sagen: „So sollten Sie es tun.“ Es ist zu sagen: So könnten Sie es tun. Ich verstehe, dass Leute Listen verwenden und das ist für mich in Ordnung; ich möchte nur darauf hinweisen, dass Listen oft nicht notwendig sind und CSS Ihnen die Möglichkeit gibt, Listen NICHT verwenden zu müssen.
@Chris: Was die Bandbreitennutzung und den Übergang von 270 auf 239 Bytes angeht, hängt die gesparte Menge offensichtlich von der Größe Ihres Navigationsmenüs ab. Multiplizieren Sie das dann mit der Anzahl der Seitenaufrufe Ihrer Website. Multiplizieren Sie diese Zahl dann mit der Anzahl der Besucher pro Tag. Das ist die Einsparung, die Ihr häufiger Besucher zu schätzen wissen wird.
Ich habe diese Antwort erwartet – ich neige dazu, CSS bis zum Äußersten zu treiben, wenn ich kann. Ich habe die gleiche Antwort erhalten, als ich dieses hier auf meinem Blog veröffentlicht habe.
Sicher, es ist vielleicht nicht semantisch korrekt, aber es ist effektiv.
@Yaili: Ich liebe dein Blog-Design!
Eine weitere Ergänzung zum versteckten -Tag wäre, einen versteckten -Tag hinzuzufügen, um jede Artikelauflistung (z.B. auf einer Startseite) zu trennen. Der/die Titel der Artikel sollten eine h1 oder h2 sein (sowohl für SEO als auch für beste Barrierefreiheitsoptionen), aber wenn man CSS ausschalten müsste, wäre es einfacher zu verstehen, wann ein Text endet.
Verdammt. Ohne das Vorschau-Skript habe ich nicht gesehen, ob die Tags so gerendert würden, wie ich es wollte. Tag 1:
<h2>und Tag 2:<hr />Bandbreite sparen, hm? Die meisten Browser cachen lokale Kopien von Seiten, die häufig im Verlauf besucht werden.
Ich würde definitiv gerne eine Navigation mit Unternavigation auf diese Weise sehen. Glauben Sie, Sie können es pushen?
Etwas wie….
Das, was Sie präsentiert haben, ist gut für eine Linkliste in einem Absatz, NICHT für echte Navigation irgendeiner Art.
Um zu wiederholen, was ich gesagt habe, das funktioniert nicht in allen Fällen. Um Unternavigation für visuelle Zwecke hinzuzufügen, würden Sie eine Klasse zu den Unternavigationspunkten hinzufügen. Für Screenreader möchten Sie Listen verwenden.
Ich habe eine Antwort auf diesen Artikel auf meiner Website geschrieben. Wenn es um Semantik, Barrierefreiheit und Flexibilität geht, erfüllt diese Methode keine der Anforderungen oder Empfehlungen, um irgendjemanden zu berücksichtigen, der kein Computer-basierter Browser mit perfekter Sicht verwendet (und selbst dann ist es ein Dehnen).
Ich hatte auch einen Gedanken, dass es höchstwahrscheinlich nicht mit einer Sitemap-Seite funktionieren würde. Ich hoffe, wenn es auf einer Website verwendet wird, dass Sie eine richtige Sitemap einfügen.
Während ich das „abgefahrene“ CSS schätze, denke ich einfach nicht, dass es gut für die Website namens CSS Tricks ist. Es ist nicht CSS-Fehler und wir sollten keine schlechten semantischen, xhtml- und CSS-Kodierung lehren.
Es gibt einen Unterschied zwischen die Grenzen erweitern und sie brechen. Ich bin einfach froh, dass so viele Leute ihre Kommentare zu diesem Thema hinterlassen haben, um sie zu archivieren.
XHTML 2 wird die neuen Elemente NL und LABEL haben, wird das nicht schön sein! Ältere Browser werden es jedoch nicht unterstützen. Aber glücklicherweise unterstützen fast alle Browser UL, OL und DL.
Ich möchte hier weiterhin den Advocatus Diaboli spielen, weil ich denke, das ist eine interessante Unterhaltung.
Der Begriff Semantik wird hier viel herumgeworfen. Ich habe Zweifel, wie gut eine ungeordnete Liste semantisch Navigationslinks beschreibt. Listen sind großartig für Dinge, die man für ein Rezept oder eine Schritt-für-Schritt-Anleitung zum Zerlegen seines Vergasers braucht, aber ich bin mir nicht sicher, ob die Seitenavigation das erfordert.
Semantisch muss die Navigation „eingepackt“ sein. Ich weiß, dass divs zu viel missbraucht und überstrapaziert werden, aber ich würde argumentieren, dass eine „Division“ hier genauso semantisch angemessen ist wie eine ungeordnete Liste, wenn nicht sogar mehr.
Die wichtigere Überlegung hier ist die Barrierefreiheit und wie diese Navigation mit und ohne CSS aussehen wird. Ich habe ein schnelles Beispiel für eine Seitenavigation zusammengestellt, das meiner Meinung nach bei beidem eine gute Figur macht.
Das einzige Problem bei der Verwendung eines Divs ist, dass ein Div verwendet wird, um eine Seite in Abschnitte zu unterteilen. Derzeit ist die semantischste Art, Navigation aufzulisten, eine Liste. Es ist eine Liste von Navigationslinks, die Sie zu anderen Stellen auf der Website führen. Wie Chris S sagte, wird XHTML 2.0 mit weiteren semantischen Möglichkeiten aufwarten. Das heißt, wenn HTML 5 es nicht schlägt.
Die gesamte Zukunft des Webdesign-Markup wird verwirrend, ganz nebenbei.
Auf jeden Fall ist derzeit das semantischste verfügbare Markup eine Liste für die Navigation. Meiner Meinung nach zumindest.
@ Chris S: Mein Beispielcode qualifiziert sich für mich als Trick – ein Ergebnis mit weniger Code erzielen. Erkennen Sie an, dass diese Website auch nicht „CSS-Standards“ oder „CSS-empfohlene-semantische-Praktiken“ ist. Sie legen viel zu viel Wert auf diese Dinge. Dies ist ein Artikel, der zeigt, was Stile können, nicht was Sie tun sollten. Eines meiner Ziele mit diesem Artikel ist es, den Advocatus Diaboli zu spielen – frische Ideen entstehen nicht unbedingt durch Befolgen von Regeln.
@ Chris C: Danke für das Beispiel – hoffentlich macht das die Dinge etwas klarer.
Nur eine Anmerkung, nicht zum Artikel, sondern tatsächlich zu Ihren Aufzählungslisten. Der untere Teil des Bildes fehlt. Wenn Sie einen Screenshot benötigen, lassen Sie es mich wissen!!
Bei der Verwendung von Firebug bemerkte ich, dass in Zeile 170 (glaube ich) die Zeilenhöhe für das li 1,5em beträgt, ich habe 1,7 versucht und das Bild von der Aufzählungszeichenkugel vollständig angezeigt.
.post li {style.css (Zeile 170)font-size:1.2em;
line-height:1.7em;
margin-bottom:0.9em;
margin-top:0.5em;
}
Hoffe, es hilft
Nun, ich bin fast völlig neu im Gestalten von Seiten und bin auf Davids Technik selbst gekommen. Ich hatte Listen für die Navigation auf der ersten Seite verwendet, die ich je von Grund auf neu erstellt habe, aber dann beschloss ich, dass ich auf meiner nächsten Übungsseite eine horizontale Navbar wollte. Anstatt eine Liste, die meistens vertikal ist, zu tricksen, um horizontal zu werden, habe ich einfach beschlossen, die Navigationslinks inline in einer Leiste zu platzieren.
Natürlich, wenn Sie etwas Komplizierteres erstellen, muss der Code komplizierter sein, aber für eine einfache Navigationsleiste denke ich, dass die von David vorgestellte Technik recht gut funktioniert. Wie David sagte, werden die Links durch Leerzeichen getrennt angezeigt und auch wenn CSS komplett ausgeschaltet ist, sieht es immer noch perfekt aus. Wenn der ScreenReader mit „Link Home“ usw. beginnt, denke ich, dass der Benutzer schnell merkt, dass es sich um einen Navigationsbereich handelt.
Aus der Perspektive von jemandem, der neu im Seitendesign ist, scheint die Verwendung von Listen eigene Probleme zu haben, vielleicht haben sich Vollzeit-Designer einfach an diese Probleme gewöhnt. Während diese Technik möglicherweise nicht für alle Designs anwendbar ist, wird sie für einige Leute funktionieren.
Nachdem ich mehrere Beiträge zu diesem Thema gelesen habe, bin ich mir nicht sicher, ob ich zustimme, dass Listen unbedingt besser sind als ein Div. Man kann seine Navigation als Liste von Links oder als Block von Buttons betrachten. Da es derzeit kein spezifisches Tag für Navigationselemente/-punkte gibt, scheint es mir, dass man Navigation nur in etwas quetscht, das derzeit verfügbar ist. Macht das es semantisch/bedeutungsvoll? Da es kein „Standard“ ist, ist es für mich eher eine Theorie oder persönliche Meinung als eine semantische absolute.