Bert
Bos, Style Activity LeiterCopyright © 1994–2021 W3C® Privacy policy
Created 7 July 2011;
Last updated Mi 06 Jan 2021 05:40:49 UTC
Dies ist eine Übersetzung. Es ist möglich, daß sie Fehler enthält oder veraltet ist im Vergleich zur englischen Version. Übersetzer: Axel Friedrich
See also the index of all tips.
Die beiden unten dargestellten Tabellen können vollständig dargestellt werden, oder es können Spalten weggelassen werden. Diese Seite beschreibt zwei Möglichkeiten um zwischen verschiedenen Ansichten zu wechseln. Entweder
| Item | Info | Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep | Oct | Nov | Dec |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| First | 1st | 56 | 28 | 85 | 24 | 67 | 27 | 67 | 20 | 21 | 74 | 45 | 48 |
| Second | 2nd | 34 | 28 | 84 | 74 | 95 | 77 | 21 | 31 | 54 | 34 | 84 | 47 |
| Item | Info | Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep | Oct | Nov | Dec |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| First | 1st | imo | boo | ba | fie | ro | ore | yu | ek | quo | phe | lei | ats |
| Second | 2nd | eu | eo | suh | ohn | hye | lef | wa | bu | orf | ir | soi | se |
Normalerweise nutzt man zum Verstecken eines Elementes die Eigenschaft 'display' und setzt sie auf 'none'. Nun hat CSS aber auch die Eigenschaft 'visibility', mit der sich Elemente auf zusätzliche Arten verbergen lassen. In dem beschriebenen Fall nutzt man 'visibility: collapse'. Diese Einklappen-Eigenschaft ist speziell zum Verstecken von Tabellenspalten und -zeilen gedacht.
Auf diese Weise wird die Struktur der Tabelle inklusive der eingeklappten Spalte aufgebaut, allerdings wird diese dann nicht angezeigt. Dadurch wird nicht genutzter Platz an der rechten Kante der Tabelle geschaffen.
Der Wert 'collapse' ist für interaktive Anwendungsfälle gedacht. So können zunächst erst einmal alle Spalten sichtbar sein, dann aber wird der Wert der 'visibility' Eigenschaft für einige Spalten von 'visible' zu 'collapse' geändert (durch was wird nachfolgend beschrieben). Die entsprechenden Spalten verschwinden nun, der Inhalt der übrigen Spalten jedoch bleibt unverändert. Die Spalten bewegen sich lediglich näher auf einander zu. Wird der Wert zurück auf 'visible' geändert, so erscheinen die eingeklappten Spalten wieder und die übrigen Spalten bewegen sich zurück an ihren vorherigen Platz. Dies geschieht abermals ohne dass sich die Struktur der Tabelle an sich geändert hat. Dieses Vorgehen beschleunigt zum Einen die Anzeige der geänderten Tabelle und hilft zum Anderem dem Betrachter die Spalten nachdem sie verschoben wurden wiederzuerkennen.
Um Tabellenspalten mit Style-Regeln zu versehen muss das
Dokument Elemente enthalten, die Spalten repräsentieren. In HTML,
sind das die <col> Elemente. Der HTML Code für
die obigen Tabellen sieht folgendermaßen aus:
<table> <col> <col> <col class=m01> <col class=m02> <col class=m03> <col class=m04> <col class=m05> <col class=m06> <col class=m07> <col class=m08> <col class=m09> <col class=m10> <col class=m11> <col class=m12> <thead> <tr> <th>...
Die 'class' Attribute werden verwendet um das Schreiben der Style-Regeln zu vereinfachen. Eine dieser Style-Regeln ist:
col.m04 { visibility: collapse }
Sie bewirkt das Einklappen sämtlicher Spalten der 'class' m04. Als Nächstes benötigt man eine Möglichkeit diese Regel an- und wieder auszuschalten.
Die erste Methode verwendet alternative Style Sheets (siehe “Alternative style sheets”). Diese Seite beschreibt nicht weniger als elf alternative Styles, genannt "View for...", welche elf verschiedenen Anzeigemöglichkeiten für Tabellen entsprechen. Der HTML Code sieht folgendermaßen aus:
<link rel="alternate stylesheet" href="foldingstyle/month02.css" title="View for February"> <link rel="alternate stylesheet" href="foldingstyle/month03.css" title="View for March"> <link rel="alternate stylesheet" href="foldingstyle/month04.css" title="View for April"> ...
Jeder dieser alternativen Styles umfasst nur zwei Zeilen: eine Zeile um den Standard Style Sheet zu importieren und eine Zeile um die relevanten Spalten einzuklappen. Z.B. ist hier die komplette month04.css Datei. Sie versteckt die .m01, .m02 und .m03 Spalten, d.h. die Spalten für Januar, Februar und März:
@import "../../CSS/w3c-2010/main.css";
.m01, .m02, .m03 { visibility: collapse }
Alternative Style Sheets sind einfach anzuwenden. Wie man sieht sind die Style Regeln kurz und einfach. Auf der anderen Seite geht der Wechsel zwischen Styles typischerweise nicht sehr schnell, weil der Nutzer den Style aus einem Menü auswählen muss. Dazu benötigt er mehrere Mausbewegungen und einige Tastendrücke.
Die zweite Methode beruht auf dem ':target' Selector. Er wählt das Element in einem Dokument aus (meistens genau Eines), welches das Ziel des Verweises ist, das den Nutzer zu diesem Dokument gebracht hat.(siehe “A tabbed interface” für weitere Informationen zum Element ':target'.)
Den Selector kann man nun nutzen um die Tabelle unterschiedlich anzuordnen je nachdem auf welches Element der aktuelle Verweis zeigt. So muss man lediglich Verweise auf alle diese Ziele zur Verfügung stellen und schon wird mit jedem Klick auf einen Verweis eine anderes Element zum aktuellen Ziel und ein anderer Style wird angewendet.
Man braucht daher genau so viele potentielle Ziele im Dokument wie es verschiedene Styles gibt und erstellt die entsprechenden Verweise. Diese Seite nutzt leere <div> Elemente als Ziele und setzt das <a> Element in die Köpfe der Spalten:
<div class=hack id=view02></div> <div class=hack id=view03></div> <div class=hack id=view04></div> ... <table> ... <th><a title="Click to hide earlier columns" href="#view02">Feb<a> <th><a title="Click to hide earlier columns" href="#view03">Mar<a> <th><a title="Click to hide earlier columns" href="#view04">Apr<a> ...
(Die 'title' Attribute versuchen zu beschreiben was für die entsprechenden Verweise passiert.)
Die zusätzlichen <div> und <a> Elemente haben keine weitere Funktion als den
Style zu unterstützen und deshalb kann man hier auch von einem Hack
sprechen. In zukünftigen Versionen von CSS wird es
höchstwahrscheinlich Möglichkeiten geben den Style von Elementen
direkt zu wechseln (siehe unten).
Die Style-Regeln sind etwas kompliziert. Hier ist eine:
#view02:target ~ * .m01 {
visibility: collapse }
Sie besagt dass das Element .m01 eingeklappt wird, wenn es ein Nachkomme eines Elementes ist, welches wiederum ein nachfolgendes Geschwisterelement von einem Element ist, welches die ID “view02” hat und das aktuelle Ziel ist. Siehe “view.css” style sheet für die komplette Liste der Regeln. (Es gibt 66 Regeln für dieses spezielle Beispiel.)
Diese Regeln erlauben es dem Leser Spalten zu zeigen und zu verbergen durch Klicken auf die Spaltenköpfe. Ein weiterer Vorteil ist, dass jede Art die Tabellen anzuzeigen ihre eigene URL hat, z.B. http://www.w3.org/Style/Examples/folding#view06 öffnet die Seite, wobei die Spalten Jan, Feb, Mar, Apr und May bereits versteckt sind.
Normalerweise wenn man einem Verweis folgt, scrollt der Browser das Fenster soweit, dass das Zielelement nahe dem oberen Rand angezeigt wird. Im folgenden Beispiel werden die Ziele jedoch verborgen:
.hack { display: none }
Es gibt keine Spezifikation die angibt wohin der Browser in diesem Fall scrollen soll, aber hoffentlich scrollt er in diesem Fall gar nicht erst.
Da diese Seite zwei verschiedene Methoden verwendet, um Spalten einzuklappen, muss eine der beiden Vorrang haben. In diesem Fall gewinnen die alternativen Style Sheets: wenn man den “View for June” Style auswählt und auf die Spalte August klickt, dann wird die Spalte June nicht eingeklappt.
Man kann die Vorrangreihenfolge jedoch ganz einfach umkehren. Der Verweis zum Style Sheet mit den ':target' Regeln sieht folgendermaßen aus:
<link rel=stylesheet href="foldingstyle/view.css" title="Main">
was bedeutet, dass der Style Sheet nur gemeinsam mit anderen Styles namens “Main” aufgerufen wird und nicht mit einem der Styles namens “View for…” Das Entfernen des 'title' Attributes ist ausreichend um den Style Sheet anzuwenden egal welcher alternative Style geladen ist.
Diese Seite zeigt zwei Tabellen mit Spalten, die sich auf gleiche Weise ein- und ausklappen lassen. Dadurch werden die Grenzen der zwei Methoden aufgezeigt: Es ist in der Tat unmöglich die beiden Spalten in den zwei Tabellen unabhängig voneinander einzuklappen.
Wie bereits erklärt benötigt die Methode mit dem ':target' Selector zusätzliche Elemente im Quellcode. Ebenso kann man Verweise nicht zum Einklappen von Tabellen verwenden wenn man die Verweise bereits für andere Zwecke, wie z.B. für ein Inhaltsverzeichnis, nutzt. (Andererseits könnte man einen ähnlichen Trick mit dem ':checked' Selector anstelle des ':target' Selektors nutzen. Dadurch würden die Verweise nicht mehr für das Einklappen benötigt, aber auch hier gibt es andere Einschränkungen.)
Aus diesen Gründen sollte CSS schlussendlich eine Möglichkeit erhalten um direkt zwischen zwei oder mehr Styles für ein Element wechseln zu können ohne die Verwendung expliziter Verweise.
Mit Stand Juli 2011 hat die CSS working group noch keinen Entwurf für eine solche Möglichkeit veröffentlicht. Es gibt jedoch Ideen dazu. Eine wäre die Einführung einer Pseudo class ':alternative'. Eine Regel wie
ul:alternative { content: "+" }
hieße dann, dass <ul> Elemente zwischen
zwei Zuständen wechseln können, wenn der Nutzer das Element zum
zweiten, alternativen Zustand wechselt, dann wird ein “+” anstelle
des Inhaltes des Elementes angezeigt.
Bert
Bos, Style Activity LeiterCreated 7 July 2011;
Last updated Mi 06 Jan 2021 05:40:49 UTC