HTML Data-Attribut

[Gunnar Bittersmann]

@@dedlfix

Nun zum eigentlichen Punkt. Der lautet: Ändern von CSS-Eigenschaften (hier display) aufgrund gesetzter Attribute anderer Elemente. Das kann man allein mit CSS regeln (behaupte ich mal)

Beweis. ^[1]

wenn man einen Selektor zu formulieren in der Lage ist (technisch gesehen), der beide Elemente ansprechen kann. Das geht nur nicht quer durch das Dokument, sondern die Bedingungen müssen Elternelemente sein oder Geschwister (Siblings).

Oder Geschwister eines Vorfahrens, wie in meinem Beispiel.

Wenn man den Filter als progressive enhancement ansieht, ist der WebKit Adjacent/General Sibling & Pseudo Class Bug egal. In alten Androids funktioniert der Filter halt nicht; es wird alles angezeigt.

Das größere Problem der CSS-only-Lösung: Man will das Markup vermutlich besser strukturieren. Deshalb: ja, JavaScript.

Und das auch über das History-API die Änderung der Filtereinstellung im URI festhalten. Dann kann der Nutzer per Browser-Backbutton zu vorigen Einstellungen zurück. Und vor allem: Jede Einstellung hat ihren eigenen URI und kann gebookmarkt und an andere weitergegeben werden.

JavaScript heißt: Bei einem passenden Element (in meinem Beispiel der Liste #hand) in einem data-Attribut (o.a. Klassenattribut) die Filterauswahl festhalten. Das Verstecken erledigt nach wie vor CSS.

LLAP 🖖

---

1. Ich hab Klassen verwendet. data-category würde nichts anderes ausdrücken als eine Klassifizierung.

   Aber auch mit data-Attibuten ginge diese CSS-only-Lösung. Dann eben #show-spades:not(:checked) ~ #hand [data-category="spades"] usw. ^[2] ↩︎

2. Bei vielen Kategorien (Klassen) kann man bei Verwendung eines CSS-Präprozessors (bspw. Sass) eine Schleife zur Erstellung der Selektorenliste nutzen:

   $categories: (spades, hearts, diamonds, clubs);
   
   %hidden { display: none }
   
   @each $category in $categories
   {
     #show-#{$category}:not(:checked) ~ #hand .#{$category} { @extend %hidden; }
   }
   

   ↩︎