Styling von Kommentar-Threads

Kommentar-Threads sind eines dieser Dinge, die, wenn sie richtig umgesetzt werden, wirklich einfach aussehen. Wenn Sie sie selbst gestalten, werden Sie feststellen, dass sie eher trügerisch einfach sind. Es steckt viel dahinter, schöne und benutzerfreundliche Kommentar-Threads zu gestalten, und in diesem Artikel werde ich mein Bestes tun, um Sie durch die Schritte zum Erstellen eines Kommentar-Threads zu führen, der gut aussieht und Freude macht zu benutzen.

Was macht einen guten Kommentar-Thread aus?

Bevor wir uns mit dem Design und dem Schreiben von Code befassen, wollen wir aufschlüsseln, was einen guten Kommentar-Thread eigentlich ausmacht. Ein **guter** Kommentar-Thread wird die folgenden Eigenschaften haben:

1. **Kommentare sind lesbar,** und alle wichtigen Datenpunkte sind für den Benutzer auf einen Blick sichtbar. Dazu gehören der Autor, die Anzahl der Stimmen, der Zeitstempel und der Inhalt.
2. **Verschiedene Teile von Kommentaren sind visuell unterscheidbar,** so dass der Benutzer sofort verstehen kann, was was ist. Dies ist besonders wichtig für die Aktionsschaltflächen (z. B. Antworten, Melden) und Links.
3. **Es muss visuelle Hinweise auf Hierarchien zwischen den Kommentaren geben.** Dies ist eine Voraussetzung für verschachtelte Kommentare, d. h. ein Kommentar ist eine Antwort auf einen anderen.
4. **Es sollte eine einfache Möglichkeit geben, schnell zu einem Kommentar zu scrollen,** insbesondere zum übergeordneten Kommentar von seinen Kindern (d. h. Antworten).
5. **Kommentare sollten auch eine Umschaltfunktion haben,** mit der Benutzer den Kommentar und seine Antworten ein- und ausblenden können.

Wie Sie sehen, ist das eine ganze Menge zu bedenken! Es gibt auch einige "nice-to-haves", die wir in diesem Artikel nicht behandeln werden, aber sicherlich gute Verbesserungen sind.

1. **Benutzer sollten einen Kommentar markieren können,** damit ein Moderator über unangemessene Inhalte informiert wird.
2. **Ein Kommentar kann hoch- oder runtergewählt werden,** um hilfreiche und nicht hilfreiche Kommentare zu kennzeichnen.
3. **Nur die ersten paar Kommentare werden angezeigt** und der Benutzer kann weitere Kommentare laden.

Die oben genannten Funktionen würden mindestens ein wenig JavaScript erfordern, um sie zu realisieren. Darüber hinaus könnten diese Funktionen, abhängig vom Tech-Stack, genauso gut serverseitig implementiert werden, insbesondere die Verfolgung der Anzahl der Stimmen und des Flag-Status von Kommentaren. Deshalb werden wir uns in diesem Artikel nur auf das **Styling** der Kommentar-Threads konzentrieren. Damit ist das aus dem Weg geräumt, lassen Sie uns den ersten Satz von Punkten abarbeiten und unseren Kommentar-Thread gestalten.

Ein grundlegender Kommentar-Thread

Ein Kommentar an sich hat eine ziemlich einfache Struktur. Hier ist ein Skelett eines einzelnen Kommentars:

Bisher alles gut. Beachten Sie, wie die Antworten zusätzlichen linken Rand haben. Dies soll die visuelle Hierarchie (Punkt Nr. 3 oben) verdeutlichen. Das Markup für die obige Struktur könnte ungefähr so aussehen:

<div class="comment">

  <!-- Comment heading start -->
  <div class="comment-heading">

    <!-- Comment voting start -->
    <div class="comment-voting">
      <button type="button">Vote up</button>
      <button type="button">Vote down</button>
    </div>
    <!-- Comment voting end -->

    <!-- Comment info (author, # of votes, time added) start -->
    <div class="comment-info">
      <a href="#" class="comment-author">{{ author }}</a>
      <p>
        {{ # of votes }} • {{ time_added }}
      </p>
    </div>
    <!-- Comment info (author, # of votes, time added) end -->
  </div>
  <!-- Comment heading end -->

  <!-- Comment body start -->
  <div class="comment-body">
    <p>
      {{ comment_content }}
    </p>
    <button type="button">Reply</button>
    <button type="button">Flag</button>
  </div>
  <!-- Comment body end -->

  <!-- Replies start -->
  <div class="replies">
    <!-- ... -->
  </div>
  <!-- Replies end -->

</div>

Hier gibt es nichts zu erklären – nur ein Haufen Container mit einigen grundlegenden Elementen. Schauen wir uns stattdessen ein reales Beispiel an, mit einem Kommentar, der auch eine Antwort hat.

Sieht ziemlich gut aus, oder? Das obige Beispiel erfüllt die ersten drei Punkte, also sind wir schon auf dem richtigen Weg. Ein paar Dinge, die man über den obigen Code verstehen muss:

• Die Antworten erhalten einen zusätzlichen linken Rand, um einen visuellen Hinweis auf die Hierarchie zu geben.
• Die Buttons "Hochwählen" und "Runterwählen" verwenden HTML-Zeichencodes für die Symbole.
• Die Klasse .sr-only blendet Elemente auf allen Geräten **außer** für Screenreader aus. Dies macht die Abstimmbuttons zugänglich. Wenn Sie ein Framework wie Bootstrap oder Halfmoon verwenden, ist diese Klasse automatisch enthalten.

Links hinzufügen, die zu Kommentaren springen

Nachdem wir nun einen grundlegenden Kommentar-Thread haben, wollen wir eine Funktion hinzufügen, die Benutzern hilft, schnell zu einem Kommentar zu scrollen. Wie oben erwähnt, ist dies besonders nützlich, wenn jemand zum übergeordneten Kommentar einer Antwort springen möchte.

Um dies zu erstellen, müssen wir entscheiden, wie diese Links aussehen. Während dies rein subjektiv ist, gefällt mir ein bestimmtes Design sehr gut: Ein klickbarer "Rand" auf der linken Seite des Kommentars, so etwas wie hier:

Um den Link zu ermöglichen, schieben wir den Kommentartext nach rechts und richten ihn an den Antworten aus. Dieses Design hat auch den zusätzlichen Vorteil, die Hierarchie zwischen den Kommentaren zu **verstärken**, da Sie einfach die Anzahl der Randlinks links ansehen und den Verschachtelungsgrad des Kommentars bestimmen können, den Sie gerade lesen. Und natürlich können Sie auch sofort zu jeder oberen Ebene springen, indem Sie auf die Randlinks klicken.

Um diese Randlinks tatsächlich zu erstellen, müssen wir Anker-Elemente (<a href="...">) in jeden unserer Kommentare einfügen und diese Anker-Elemente so stylen, dass sie wie klickbare Ränder aussehen. Fügen wir sie unserem ersten Codebeispiel oben hinzu.

Hier sind ein paar Dinge, die man über die vorgenommenen Änderungen verstehen muss:

• Anker-Links werden in jeden der Kommentare eingefügt, und diese werden so gestylt, dass sie wie Ränder auf der linken Seite aussehen.
• Der Kommentartext ist nun an den Antworten ausgerichtet.
• Die .comment-heading (die Stimmen, Autor und hinzugefügte Zeit enthält) hat eine feste height von 50px. Daher stellen wir durch die Verleihung der Eigenschaften position:absolute, top: 50px und height: calc(100% - 50px) an die Randlinks sicher, dass sie direkt unter der Überschrift beginnen und bis zum Ende des Kommentars reichen. Wenn Sie mit der calc()-Funktion nicht vertraut sind, können Sie diesen coolen Leitfaden von Chris lesen.
• Die Randlinks haben einen abgeschnittenen Hintergrund und erhalten außerdem eine width von 12px zusammen mit einer border-width von 4px links und rechts. Das bedeutet, dass die sichtbare Fläche nur 4px breit ist, während die tatsächliche **klickbare** Fläche 12px breit ist. Eine breitere Oberfläche hilft den Benutzern, ihre Zeiger leichter auf den Link zu positionieren und ihn anzuklicken, da 4px etwas zu schmal sind, aber alles breitere visuell nicht gut aussehen würde.

Damit haben wir die ersten vier der oben genannten Punkte abgearbeitet. Fügen wir dem Codebeispiel weitere Kommentare hinzu, um zu sehen, wie es aussehen würde.

Benutzern erlauben, Kommentare per Klick ein-/auszublenden

An diesem Punkt haben wir einen ziemlich zufriedenstellenden Kommentar-Thread. Dieses Design allein kann für viele reale Anwendungsfälle funktionieren. Lassen Sie uns jedoch einen Schritt weiter gehen und unsere Umschaltfunktion hinzufügen, d. h. Kommentare per Klick ein- und auszublenden.

Der schnellste und einfachste Weg, Benutzern das Ein- und Ausblenden von Kommentaren per Klick zu ermöglichen, ist die Verwendung der Elemente <details> und <summary>. Einfach ausgedrückt, kann die Sichtbarkeit des gesamten <details> durch Klicken auf <summary> umgeschaltet werden. Es ist kein JavaScript beteiligt, und diese Tags werden derzeit von **ca. 96 % der Browser** unterstützt. Auch hier gilt: Wenn Sie mit diesen Konzepten nicht vertraut sind, können Sie mehr in einem weiteren Artikel von Chris erfahren.

Wie auch immer, um dies tatsächlich zu implementieren, müssen wir die folgenden Änderungen an unserem Code vornehmen:

• Ändern Sie Kommentare von <div> zu <details>, d. h. alle Elemente mit der Klasse .comment werden jetzt ein <details>-Element.
• Wickeln Sie die Kommentarüberschrift (.comment-heading) in ein <summary>-Tag.
• Stellen Sie einen visuellen Hinweis für den Benutzer bereit, um ihm mitzuteilen, ob ein Kommentar ausgeblendet ist oder nicht.

Scheint einfach genug. Wie auch immer, hier ist unsere neue Implementierung:

Hier sind die letzten Dinge, die man über die vorgenommenen Änderungen verstehen muss:

• Die Kommentare sind jetzt <details> und sie erhalten alle das open-Attribut, sodass sie standardmäßig sichtbar (d. h. geöffnet) sind.
• Die Kommentarüberschriften sind nun in <summary>-Tags eingeschlossen. Der Standardpfeil wurde ebenfalls entfernt.
• Der Hinweis auf den Sichtbarkeitsstatus der Kommentare wird hauptsächlich durch kleinen Text rechts vom Kommentar erstellt. Der Inhalt dieses Textes ändert sich je nachdem, ob das übergeordnete <details>-Element das open-Attribut hat oder nicht. Der Text selbst ist ein einfaches Pseudoelement, das mit dem ::after-Selektor erstellt wird. Darüber hinaus haben geschlossene Kommentare auch einen unteren Rand, um den Benutzern zu zeigen, dass es mehr zu sehen gibt.
• Ganz am Ende des CSS-Codes finden Sie einige Stile innerhalb des @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {...}-Selectors. Dies ist ein Hack, der nur Internet Explorer gezielt anspricht. Sehen Sie, IE unterstützt <details> nicht, sodass sie dort immer standardmäßig geöffnet sind. Durch das Entfernen des Textes und das Zurücksetzen des Cursors sehen IE-Benutzer einen regulären Kommentar-Thread, nur ohne die Möglichkeit, die Kommentar-Sichtbarkeit tatsächlich umzuschalten. Also, kein Schaden, kein Foul.

Ehrenvolle Erwähnungen

Bevor wir diesen Artikel abschließen, sprechen wir über ein paar weitere Dinge, die bei der Gestaltung von Kommentar-Threads in realen Anwendungen zu berücksichtigen sind.

Was ist, wenn der Kommentar-Thread keine Kommentare zu zeigen hat?

Dies mag ein sehr einfaches Problem sein, aber oft übersieht man diese einfachen Dinge. Wenn ein Kommentar-Thread keine Kommentare hat (leerer Zustand), müssen wir das dem Benutzer klar mitteilen. Ein einfacher Absatz mit der Zeile _"Es wurden noch keine Kommentare abgegeben."_ zusammen mit einem Formular, das ein Textfeld und einen Submit-Button enthält, kann viel bewirken und sollte das absolute Minimum beim Umgang mit leeren Zuständen sein. Wenn Sie sich mehr Mühe geben möchten, können Sie auch ein schönes Bild (das die Botschaft vermittelt) zusammen mit dem Formular haben.

Wie behandelt man das Formular zum Antworten auf einen Kommentar?

Beim Formular zum Antworten auf einen Kommentar haben verschiedene Websites unterschiedliche Implementierungen. Einige verwenden den altmodischen Weg, Benutzer auf eine neue Seite weiterzuleiten, die das Formular enthält – ein einfaches Textfeld mit einem Submit-Button. Andere öffnen ein Formular direkt im Kommentar-Thread selbst, normalerweise mit einem einfachen Umschalter. Das letztere Paradigma erfordert offensichtlich JavaScript, ist aber heutzutage beliebter. Zum Beispiel könnten wir in unserem obigen Beispiel ein einfaches Formular haben, das durch Klicken auf die Schaltfläche **Antworten** umgeschaltet werden kann, wie hier:

Im obigen Beispiel haben wir einfache Formulare in die Kommentar-Bodies eingefügt und ihnen standardmäßig die Klasse .d-none gegeben, die display: none; setzt und sie ausblendet. Dank des einfachen Event Listeners kann jede Schaltfläche mit den Attributen data-toggle="reply-form" und data-target="{{ comment_reply_form_id }} angeklickt werden, um die Sichtbarkeit der Formulare umzuschalten. Dies ist ein sehr einfaches Beispiel für die einfache Handhabung von Antwortformularen.

Wo wird eine neue Antwort platziert, nachdem ein Benutzer sie gepostet hat?

Nehmen wir an, ein Benutzer antwortet auf einen Kommentar mit einem Formular, das dem oben gezeigten ähnelt. Zeigen Sie ihn über oder unter den vorhandenen Antworten an? Die Antwort ist, dass er immer **darüber** über den anderen Antworten angezeigt werden sollte, sobald der Benutzer ihn zum ersten Mal postet. Wenn eine Person ein Formular ausfüllt und absendet, möchte sie sofortiges Feedback erhalten, das ihr sagt, dass es funktioniert hat. Indem wir die neue Antwort über die anderen platzieren, geben wir dem Benutzer dieses Feedback, ohne dass er nach unten scrollen muss. Bei nachfolgenden Ladevorgängen können Sie Ihre Kommentarantworten natürlich nach jedem beliebigen Algorithmus anordnen, der für Ihre Website geeignet ist.

Umgang mit Markdown und Codeblöcken

Viele Websites, insbesondere Entwickler-Blogs, müssen Markdown und Codeblöcke in ihren Kommentaren unterstützen. Dies ist eine viel größere Diskussion, die vielleicht einen eigenen Artikel zu diesem Thema erfordert. Für den Zweck dieses Artikels wollen wir jedoch nur sagen, dass es viele Markdown-Editoren gibt, die Sie recht einfach an ein Textfeld anhängen können. Die meisten von ihnen arbeiten mit JavaScript, sodass sie relativ einfach in unsere Beispiele integriert werden können. Ein solches Plugin ist markdown-it, das eine freizügige MIT-Lizenz hat. Sie können sich auch WYSIWYG-Editoren ansehen, die im Hinblick auf Kommentare im Web einen sehr ähnlichen Zweck erfüllen.

Spam-Schutz und Benutzerauthentifizierung

Wenn Sie Benutzern ein Formular zur Eingabe ihrer Daten zur Verfügung stellen, können Sie garantieren, dass Spam auf Sie zukommt, daher ist dies offensichtlich ein Problem, das beim Erstellen von Kommentar-Threads angegangen werden muss. Eine gute Möglichkeit, Spam zu reduzieren, ist die Verwendung von Diensten wie reCAPTCHA von Google. In unserem Beispiel oben könnte beispielsweise ein reCAPTCHA-Feld direkt unter dem **Submit**-Button in den Antwortformularen platziert werden. Dies würde unsere Website vor Missbrauch schützen.

Eine weitere Möglichkeit, Spam zu verhindern, besteht darin, nur authentifizierten Benutzern das Posten von Kommentaren zu erlauben, d. h. ein Benutzer muss ein Konto haben und eingeloggt sein, um einen Kommentar zu posten. Jeder Kommentar wäre offensichtlich mit einem Konto verknüpft, so dass dies den Vorteil hat, dass Moderatoren Benutzer behandeln können, die kontinuierlich Spam oder inhaltlich minderwertige Kommentare posten. In Bezug auf die Handhabung in der Benutzeroberfläche ist eine gute Methode, Benutzer zu einer Anmeldeseite weiterzuleiten, wenn sie auf die Schaltfläche **Antworten** oder **Kommentar posten** klicken, wenn sie nicht eingeloggt sind. Sobald sie den Authentifizierungsprozess abgeschlossen haben, können wir sie einfach zum Kommentar-Thread zurückleiten und das Formular öffnen.

---

Und wir sind fertig! Wir haben alle fünf unserer Punkte erfüllt und einen gut aussehenden Kommentar-Thread entworfen, der sehr benutzerfreundlich und zugänglich ist, mit einigen coolen Funktionen wie dem Springen zu Kommentaren und dem Umschalten der Sichtbarkeit jedes Kommentars. Wir haben auch über Formulare in Kommentar-Threads gesprochen und andere Dinge erörtert, die in realen Anwendungen zu berücksichtigen sind. Der Großteil unseres Kommentar-Threads funktioniert nur mit CSS (kein JavaScript), was zeigt, wie weit CSS tatsächlich gekommen ist.