CSS3 Count - HTML Elemente nummerieren - Tag 20 im CSS3 Adventskalender 2011

CSS3 Count - HTML Elemente nummerierenWie in vielen anderen Bereichen der Gestaltung, sind es auch beim Webdesign manchmal die kleinen Details, die den gewissen Unterschied ausmachen und somit unter Umständen die Benutzerführung einer Webseite signifikant verbessern können. Der heutige Artikel möchte sich der Nummerierung von Elementen widmen und mit der damit verbundenen Zähl-Eigenschaft eine Möglichkeit vorstellen, die eine verbesserte Wahrnehmung der Seitenstruktur und der damit verbundenen Inhalte ermöglicht. So könnte man bspw. bei Inhaltselementen wie Kommentaren in einem Blog, falls der Strukturierung der Elemente keine geordnete Liste zugrunde liegt oder bspw. einer Paginierung von Inhaltsseiten, die Eigenschaft counter-increment zur Nummerierung zuweisen. Diese Eigenschaft kann dazu verwendet werden, den Wert für Elemente hochzuzählen und je nach gestalterischem Bedarf entsprechend visuell abzubilden. Das hier vorgestellte exemplarische CSS3 Tutorial beinhaltet hierzu zu diesem Zweck drei Infoboxen, denen je nach Reihenfolge im HTML-Code die entsprechende Nummer über das Pseudo-Element :after zugewiesen. Aber seht selbst!

Modernes Webdesign mit CSS - Das neue Buch!

Da HTML-Elemente wie geordnete nummerierte Liste eine Nummerierung ihrer jeweiligen Listenpunkte ausgeben können und dieses Verhalten für bestimmte Anwendungsfälle durchaus wünschenswert sind, man aber nicht jedesmal eine entsprechende Liste strukturell zu Grunde legen möchte, wird der folgende HTML-Code mittels dem bereits erwähnten Pseudo-Element :after und der Eigenschaft counter-increment umgesetzt.

CSS3 Counter - HTML-Code
...
<div id="content">
    <div>
        <h2>Et dolore magna aliqam erat, sed diam</h2>
        <h3>Vel illum dolore</h3>
        <p>At vero eos et accusam et justo duo dolores...</p>
    </div>
    <div>
        ...
    </div>
    <div>
        ...
    </div>
</div>
...

Da diese visuelle Gestaltung mittels der Ziffern erzielt werden soll und Pseudo-Elemente zur Darstellung verwendet werden, bleibt der HTML-Code wie hier abgebildet unverändert. Optisch gesehen sollen im unteren rechten Bereich der drei Infoboxen die Nummern "1", "2" und "3" hinzugefügt werden. Um die Ziffern absolut und mit einem kleinen Abstand in diesem Container positionieren zu können, müssen die Container eine relative Position erhalten (siehe Zeile 3). Um die Nummerierung zu ermöglichen müssen die entsprechenden Elemente die Eigenschaft counter-increment und einer Bezeichnung der zu nummerierenden Elemente erhalten. In diesem Fall wurde die aussagekräftige Bezeichnung teaser gewählt. Somit werden alle div-Container die sich innerhalb des Elementes mit der ID #content befinden, gezählt.

Die zu nummerierenden Teaser
#content div {
    ...
    position:relative;
    counter-increment: teaser;
}

Da bis hierher noch kein Element definiert wurde, welches diese Nummerierung ausgeben soll, ist bisher von noch den Ziffern "1", "2" und "3" innerhalb der Teaserboxen noch nicht viel zu sehen. Das wird sich allerdings spätestens im nächsten Arbeitsschritt ändern.

CSS3 Count - ohne NummerierungCSS3 Count - ohne Nummerierung

Grundsätzlich verhalten sich absolut positionierte Elemente absolut zum Rahmen des Viewports. Allerdings kann sich absolute Positionierung auch relativ verhalten, und zwar dann, wenn das Elternelement relative Positionseigenschaften besitzt. Denn dann orientiert sich die absolute Positionierung an den Maßen des Elternelementes. Wichtig bei der Ausgabe der Ziffern die die Nummerierung der Elemente kennzeichnen ist in erster Linie das Aufgreifen der Bezeichung des zu zählenden Elementes (teaser).

Ausrichtung der Nummerierung
#content div:after {
    ...
    content: "" counter(teaser);
}

Auf die nähere Gestaltung des Pseudo-Elementes :after wird an dieser Stelle nicht näher eingegangen, da dies nicht Bestandteil dieses CSS3 Tutorials sein soll. Dieses Pseudo-Element :after wird dazu verwendet, die nun zusätzlich erzeugten Inhalte (die Zählung des Elemente) nach dem Inhalt des entsprechenden HTML-Elementes hinzuzufügen. Ermöglicht wird dies durch die Eigenschaft content. Diese Inhalte sind nicht Teil des HTML-Dokuments, da sie über die CSS-Datei eingefügt werden, und haben somit keinen Einfluss auf den Dokumentstammbaum! Der Bereich zwischen den Anführungsstrichen (siehe Zeile 3) bleibt, frei weil hier die Nummerierung ausgegeben wird.

CSS3 Count - mit NummerierungCSS3 Count - mit Nummerierung

Wenn diese Referenzierung auf Bezeichung "teaser" im übrigen nicht übereinstimmt, ist diese zu dem jeweiligen Element fehlerhaft und es würde wie in der folgenden Abbildung, eine "Null" ausgegeben werden. Der Vorteil dieses Ansatzes auf Basis von counter-increment und dem Pseudo-Element :after ist der, dass man der content-Eigenschaft nicht einen festes Wert zum ausgeben an geeigneter Stelle zuweisen muss, sondern diesen auf diese Weise dynamisch ausgeben lassen kann.

CSS3 Count - ohne NummerierungCSS3 Count - Wenn das Element welches nummeriert werden soll, nicht mittels CSS gekennzeichnet wurde

Nun muss man sich lediglich noch darum kümmern, das die Gestaltung und Ausrichtung dieser Ziffern auch bei 2- oder 3-stelligen Werten noch ins Layout passen und dieses nicht "zerschiessen".

View CSS3 Counter Demo

Unabhängig von den Möglichkeiten die sich mit counter-increment ergeben, ist wie die folgende Abbildung zeigt, auch die Browser-Unterstützung dieser Eigenschaft durchaus beachtlich.

CSS3 Counter - Browser-Support

Denn wer von euch in dem Besitz einer aktuellen Version von Google Chrome, Safari, Firefox, Opera und dem Internet Explorer ist, kann die Demo-Version dieses CSS3 Tutorials auch problemlos nachvollziehen.

CSS3 Counter - Browser-SupportVollständige Browserunterstützung des CSS3 Counter bei allen relevanten aktuellen Versionen

Im nächsten Beitrag wird es hier im Webstandard-Blog darum gehen einen Blick in die Zukunft - sprich CSS4 - zu werfen. Auch wenn eine Vielzahl an CSS3 Eigenschaften von Browsern wie dem Internet Explorer immer noch nicht unterstützt werden, gibt es keinen Grund in der Entwicklung stehen zu bleiben, sondern diese weiterhin voranzutreiben.

Bis dahin wünsche ich Euch noch viel Spaß & Erfolg mit CSS3!

  1. Simone 20 Dez 2011, 08:39

    Wieder ein schönes Anwendungsbeispiel, welches ich insbesondere bei mehreren unter einander abgebildeten Tabellen als Nummerierung dieser, durchaus als sehr praktisch ansehe. Wird gleich mal getestet!

    Schade das es hier bald mit den täglich CSS3-Tutorials vorbei ist ;o(


  2. Siegfried
    20 Dez 2011, 10:44

    Danke für das leicht nachvollziehbare Beispiel. Ich habe damit zwar auch schon experimentiert, aber ein funktionierendes Beispiel ist immer gut.

    Was mir noch fehlt: Es gibt, so weit ich weiss, eine Möglichkeit mit diesen countern eine Art Unter-Nummerierung vorzunehmen. Also beispielsweise so:

    1. Thema
    1.1. Unterthema
    1.1.1. Unter-Unterthema
    1.1.2. Noch ein Unter-Unterthema
    1.2. Noch ein Unterthema

    Und so weiter. Sowas hatte ich mal angedacht als Verzeichnis einer Seite, wenn darin viel derartiger Text steht. Habe das aber aus Zeitgründen nicht weiter verfolgt. Falls Du also zu viel davon haben solltest... :)


  3. Marion 20 Dez 2011, 17:39

    Kann mich Simone nur anschließen, schade das es mit den täglichen CSS Tutorials bald vorüber ist ;o((


  4. Webstandard-Team
    20 Dez 2011, 17:43

    @Simone & Marion: Es wird auch in Zukunft hier CSS Tutorial geben, vielleicht nicht im Rhythmus von zwei Tagen, aber es wird sie geben! Das es in den letzten Monaten hier etwas wenig zu diesem Thema gab, ist auch dem CSS3 Adventskalender geschuldet. Denn schließlich bietet dieses Thema nicht "unendliches Material".


  5. Patrick Zorn 21 Dez 2011, 12:33

    Willste eigentlich nichtmal Tuts bzgl. CSS3 und HTML5 machen? Da freuen sich bestimmt einige drüber :-)


  6. Webstandard-Team
    21 Dez 2011, 15:34

    @Patrick: Wie heißt eigentlich dieser Adventskalender noch mal genau???? Dann sollte deine Frage beantwortet sein!


  7. Kristina Prado 22 Dez 2011, 01:47

    Tolle Tutorials, danke dafür. Ich freue mich ja schon darüber, dass es weiterhin von euch Tuts geben wird. ^^


  8. Patrick Zorn
    27 Dez 2011, 15:51

    @team:

    der Kalender sagt nicht explizit HTML 5 :-P


  9. m9898 06 Jan 2012, 00:17

    Count ist schon im CSS2 Standard vorhanden ;)


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage