Im letzten Artikel über Responsive Tabellen mit Annotationen hatten wir einen Weg gezeigt, Tabellen mit zusätzlichen Links in einzelnen Zellen auch auf Mobilgeräten zugänglich und trotzdem visuell ansprechend zu gestalten.

Screenshot: Tabelle im Desktoplayout

Auf www.berlinonline.net nutzen wir diese Grundlage, um die Inhalte einzelner Zellen der Tabelle mit Erklärungstexten zu versehen, die bei Bedarf eingeblendet werden können.

Screenshot: Infodialog "Superbanner"

Solche Dialoge werden meist mittels JavaScript umgesetzt, es ist allerdings auch mit bloßem CSS möglich. Dazu bedienen wir uns des :target-Selektors, der ein Element selektiert, dessen ID-Attribut dem aktuellen URL-Fragment entspricht. Diese URL-Fragmente werden durch die Links in der Tabelle angesprungen:

HTML

<!-- Link zur Annotation -->
<th scope="row">
  <a href="#superbanner" class="table-info__label">
    Superbanner
    <sup>[2]</sup>
  </a>
</th>

<!-- ... -->

<!-- Content der Annotation --> <aside class="table-infocontent" id="superbanner"><h1>Superbanner</h1> <p>Ein Superbanner wird meist oberhalb des Seiteninhalts angezeigt und erstreckt sich über dessen gesamte Breite.</p> <p>Es kann mit einem <a href="#skyscraper">Skyscraper</a> zu einer gemeinsamen Werbefläche verbunden werden, die den Inhalt der Seite umschließt.</p> <a class="table-infoclose" href="#!"></a> </aside>

SCSS

.table-info__content {
    display: none;
    position: fixed;
    min-width: 300px;
    min-height: 150px;
    padding: 20px;
    top: 50%;
    left: 50%;
    $transform: translateX(-50%) translateY(-50%);
    transform: $transform;
    -webkit-transform: $transform;

<span class="nl">z-index</span><span class="p">:</span> <span class="m">10</span><span class="p">;</span>

}

.table-info__content:target { display: block; }

Im Fall unserer Tabellen befinden sich die Annotationen als Fußnoten im <tfoot> der jeweiligen Tabelle, sie könnten aber ebenso z.B. in einem <footer>-Element am Ende der Seite befinden.

Dadurch, dass jeder Dialog per Deeplink ansprechbar ist, kann auch der Browserverlauf und die "Zurück"-Funktion uneingeschränkt genutzt werden, um durch die zuvor geöffneten Dialoge zu navigieren. Deeplinks auf die Inhalte der Dialoge sind auch möglich. Ebenso können Dialoge untereinander verlinken, wie z.B. obiger "Superbanner"-Dialog, der auf die Erläuterung zum "Skyscraper" verweist:

Screenshot: Infodialog "Skyscraper"

Ein Problem ergibt sich bei dieser Lösung: Browser scrollen die Seite automatisch zur Position eines Elements, dessen ID angesprungen wurde. Das stört den Lesefluss der Seite erheblich. Um dieses Problem zu lösen, setzen wir die IDs, die angesprungen werden nicht auf die Annotationene selbst, sondern auf ein leeres <div>, welches im DOM direkt davor steht:

HTML

<div class="table-infoid" id="superbanner"></div>
<aside class="table-infocontent"><h1>Superbanner</h1>
<p>Ein Superbanner wird meist oberhalb des Seiteninhalts angezeigt und erstreckt sich über dessen gesamte Breite.</p>
<p>Es kann mit einem <a href="#skyscraper">Skyscraper</a> zu einer gemeinsamen Werbefläche verbunden werden, die den Inhalt der Seite
umschließt.</p>
<a class="table-infoclose" href="#!"></a>
</aside><a href="#!" class="table-infobackground"></a>

SCSS

.table-infoid:target + .table-infocontent {
    display: block;
}

Da die eigentlichen Linkziele nun immer in der linken oberen Bildschirmecke liegen, wird beim Aufruf einer Annotation die Scrollposition der Seite nicht verändert. Die Annotation selbst wird dann über den Adjacent-Sibling-Selektor (+) eingeblendet. Es ist immer die Annotation sichtbar, die in der DOM-Reihenfolge auf das aktuell angesprungene unsichtbare <div> folgt.

Das graue Overlay, dass über die gesamte Seite gelegt wird, funktioniert ähnlich, wird aber über den allgemeinen Sibling-Selektor (~) angesprochen. Das Overlay dient gleichzeitig als Link, der das URL-Fragment zurücksetzt und damit die aktuelle Annotation wieder ausblendet, genau wie das Schließen-Icon im Dialog selbst. Damit wird das übliche Verhalten von Lightboxen angeboten.