Weniger div ist manchmal mehr …

Immer wieder schaut man sich das eine oder andere schicke Design an. Nicht das ich etwas dagegen hätte, aber warum muss die Seite aus einer riesigen Ansammlung von div-Elementen bestehen. In den meisten Fällen werden die div's nur eingebunden um Probleme und Unwissenheit im Stylesheet zu kompensieren. Eine sinnvollerere Nutzung von CSS-Selektoren könnte das Problem oft schon beheben.

In diesem Zusammenhang möchte ich nochmal auf den sehr schönen Artikel „Der div-Wahnsinn“ von Eric Eggert hinweisen.

Ein Beispiel dafür und einer eher ungewöhnlichen Nutzung möchte ich im folgenden Aufzeigen, weil ich es schon mal in betracht gezogen habe und die Idee nun zum Einsatz kam. Mit List-Elementen sollen Boxen genutzt werden, anstatt div also li.
Grundlegend ist die Idee recht simpel: Man streiche die Browserformatierung der Liste und formatiere ähnlich einem Container:



ul {
	width: 600px;
	text-align: left;
	list-style-type: none;
}

Die einzelnen Listelemente li werden dann ebenso entsprechend gestalltet.


ul li {
	margin: 0 0 10px 10px;
	border: 1px solid blue;
	width: 180px;
	background: #eee;
	float: left;
}

Alles weiter ist direkt im Markup zu sehen und sollte verständlich sein. Schaut auch mal die Seite ohne Styleangaben an, damit kann doch ein Leser ohne Nutzung des Stylesheets trotzdem etwas anfangen, beispielsweise per WAP, oder?

Ich denke, dass es eine ganze Reihe von möglichen Anwendungen dafür gibt. Denn in erster Linie soll doch das Markup bestehen bleiben und ein neues Design ausschließlich mittels CSS entstehen. Mit dieser Lösung könnte man auch etwaige Listen einmal anders darstellen, insofern sie nicht dem klassischen Listelement und so auch dem Leser zur Verfügung stehen sollten.

Demo

Damit man das ganze mal live und in Farbe sehen kann, habe ich es hinterlegt, viel Spass damit.

Download:



Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.
Download als txt-DateiDownload als txt-Datei: div_mit_list.txt - 3 KByte

14 Kommentare

  1. Mit Verlaub, aber das ist semantischer Quatsch. Die DIVs sind nunmal die optimalen Elemente, um semantisch neutrale "Platzhalter" fürs Layout zu generieren.

    Gegen DIVitis habe ich auch etwas, aber Listen als Layout-Blöcke zu missbrauchen, ist nicht der richtige Ansatz.

  2. Warum - stellen wir uns einen Footer-Bereich vor, der drei Listen mit weiteren Artikeln etc. beinhaltet. Wozu muss dieser Footer weitere div's innerhalb des Footer-div haben. Damit könnte man es lösen und die Lesbarkeit mir deaktiviertem CSS, warum auch immer, bleibt sauber strukturiert.

  3. Die Lesbarkeit bei deaktiviertem CSS und damit die Struktur bleibt doch auch bei floatenden DIVs erhalten (Überschrift/Artikel). Und mit Listen generiere ich nur wieder mehr Markup.

  4. Das ist richtig. Es ist ja auch ein Experiment, welches hier auch zur Kritik und Überlegung steht. Die Idee war lediglich: verzichte auf unnötiges Markup, in dem Fall div. Das es auch möglich ist, das beweisen eine ganze Reihe von Projekten im WWW.
    Aber trotzdem schätze ich es, dass ich deinen Standpunkt kennen lernen durfte.

  5. Ist ja sowieso eine rein fachliche Diskussion ohne persönliche Note - ich schätze Deine Arbeit und Deinen Blog auch 🙂

    Nochmal zum DIV: Ein floatender DIV-Container für Inhalte ist doch nicht überflüssig, der hat mehrere Vorteile:

    • ist bzgl. der Struktur neutral
    • taucht nicht im Layout auf
    • ist unkompliziert in der Handhabung

    Ich glaube, wir müssen für diese Dsikussion ganz scharf trennen, was überflüssige DIVs sind: Letztendlich zuviele Platzhalter für andere Elemente und Nicht-Elemente (man denke nur an reinen Text im DIV ohne Auszeichnung via hn oder p) - womit wir wieder bei semantischem Markup wären. Ein DIV als (Layout-)Platzhalter für ausgezeichnete Inhalte ist völlig korrekt.

    Ich verstehe die grundsätzliche Überlegung schon hinter Deinen Ausführungen, für mich ist das ganze Konstrukt aber "von hinten durch die Brust ins Auge". Warum komplziert, wenn es auch einfach geht?

  6. Mummpitz. Listen sind Listen. Und Blöcke sind Blöcke.

    Das von dir angesprochene Beispiel mit dem Footer beruht mit Sicherheit auf den Unwillen oder die Unwissenheit das man auch p-Tags hat.
    Eine Liste sollte wirklich nur dann verwendet werden, wenn etwas aufgelistet wird.

    Mit Div-Containern wird die Seite grob unterteilt (Header, Content, Sidebar, Footer, Navigation, usw.). Mit p-Tags kann man dann innerhalb der Container den Inhalt platzieren.
    Der große Nachteil an Listen ist der, sollte mal ein li-Element außerhalb von ul und /ul stehen, zerhackt es u.U. das ganze Dokument und die Seite wird, je nach Browser, ggf. komplett falsch dargestellt.

    Man sollte nicht vergessen das HTML lediglich eine Formatierung von Text-Elementen ist. Und die einzlenen HTML-Elemente nicht derart zweckentfremden.

  7. Richtig - dann sprechen wir ja doch eine Sprache.
    Aber vielleicht bringe ich mit einem derartigen extremen Beispiel die Leute zum Nachdenken: Muss wirklich jeder div sein? Alles andere überlasse ich gern der Fachwelt.

    * Danke für das Lob, auch ich schätze deine Artikel und verfolge per Feed das Blog.

  8. ... und ich dachte schon, dass ich einen kritischen Leser verloren habe. 😉
    Ich dachte, so ein Artikel rührt mal ein wenig in der Sommerpause der Blogosphäre und passt gut zu meiner kleinen Pause, die ich ab nun abtrete. Bekomme morgen früh ein neues Kreuzband und bin dann nächste Woche eventuell wieder mal online.

  9. @Ralf: Genaugenommen könnte man argumentieren, das mehrere Artikel eine Liste sind (im weitesten Sinne). Aber das führt zur theoretischen/akademischen Erbsenzählerei und führt damit auch den praktischen Nutzwert ad absurdum.

    @Frank: Gutes Gelingen und gute Besserung danach wünsche ich Dir!

  10. Ich finde auch einen anderen Aspekt bei dieser Diskussion relevant: Wenn du Listen nutzt, um "nichtlistbare Elemente" dazustellen, verstößt du gegen die semantische Funktion des li-Elements. Das ist erst einmal vielleicht nicht so wichtig, aber spätestens wenn ein Blinder oder sehbehinderter deine Seite sich vorlesen läßt, wird er sich wundern, wenn der Screenreader eine Liste ankündigt, aber keine Listeninhalte folgen.

    Außerdem sparst du dir zwar den div-Tag, setzt aber einen li-Tag UND (zusätzlich zum nötigen CSS) einen ul-Tag: Ersparnis adé! 🙂

  11. Die Idee ist, dass es eine Liste ist. Warum sollte es keine Liste sein, sie ist einfach nur für die Screen-Surfer anders aufbereitet. Ich würde es also auch mit Liste genauso machen, nur eben als "Liste" formatieren.

  12. Das Beispiel von Robert mit dem Screenreader ist sehr schön.

    Außerdem sieht es saublöd aus wenn das CSS abgeschaltet ist. Denn dann hast du vor den einzelnen Listenpunkten die Listenzeichen (Bullet o.ä.). Die lassen sich nämlich nur mit CSS abschalten. Die Erfahrungen mit IE haben gezeigt das nicht jeder Browser CSS gleich interpretiert. Es ist also keine Garantie gegeben das zukünftige Browser (z.B. Safari?) neue CSS-Versionen korrekt interpretieren.
    Wie schick sieht es denn aus wenn du im FF eine hübsche Navigation hast und in einem anderen Browser aufgrund von "Darstellungsfehlern" vor jedem Absatz ein Punkt steht?

    Ein gutes hat dein Beitrag allerdings: Ich werde in den nächsten Tagen mein Theme mal nach unnötig verwendeten Listen durchforsten und sie mit etwas sinnvollerem ersetzen. Denn auch ich habe Listen als Navigationselemente im Einsatz 😉

  13. Nachdem ich diese funktion von CSS "entdeckt" habe, konnte ich schon einige Zeilen Code sparen. Vor allem werden viele Klassen/Ids überflüssig.

Kommentare sind geschlossen.