Beliebige Tabellenzeilen mit <details> schalten?
bearbeitet von Rolf BHallo fietur,
das ist eine Variante des Checkbox-Hacks und "funktioniert"
entweder
: wenn Du das details-Element vor die Tabelle schaltest
oder
: wenn Du den zweiten Selektor so schreibst:
: .tabelle:has(details[open]) table tr.switch { display:block; }
Die :has Pseudoklasse prüft, ob der in Klammern stehende Selektor innerhalb des Elements zu finden ist, auf das sich die Pseudoklasse bezieht. Sie ist ziemlich neu in der Wildnis und muss im Firefox noch per Flag aktiviert werden ([caniuse.com](https://caniuse.com/css-has)),
Es hat aber alle Nachteile des [Checkbox-Hacks](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Radio-Buttons_und_Checkboxen#Exkurs:_Checkbox-Hack), was Zugänglichkeit angeht.
Unsere Wiki-Empfehlung, statt des Checkbox-Hacks ein details-Element zu verwenden, hast Du hier auf kreative Weise wörtlich genommen, aber so war sie nicht gemeint. Dumm ist nur, dass sich für Tabellenzeilen das details-Element so, wie wir es im Wiki gemeint hatten, nicht anwenden lässt. Stellst Du tabellarische Daten dar?!
Besser ist ein Button mit einem [aria-controls](https://wiki.selfhtml.org/wiki/HTML/Attribute/aria-*#aria-selected) Attribut, das auf die geschaltete Tabellenzeile verweist. Und eine Prise JavaScript, um ihn zum Leben zu erwecken.
Wenn Du mehr als eine .switch-Zeile hast, musst Du vermutlich die Tabelle per aria-controls referenzieren. Es könnte auch gut sein, der Tabelle ein [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live) Attribut zu geben mit [aria-relevant="all"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant). Dazu sollen unsere ARIen-Sänger mehr sagen 😉
_Rolf_
--
sumpsi - posui - obstruxi
Beliebige Tabellenzeilen mit <details> schalten?
bearbeitet von Rolf BHallo fietur,
das ist eine Variante des Checkbox-Hacks und "funktioniert"
entweder
: wenn Du das details-Element vor die Tabelle schaltest
oder
: wenn Du den zweiten Selektor so schreibst:
: .tabelle:has(details[open]) table tr.switch { display:block; }
Die :has Pseudoklasse prüft, ob der in Klammern stehende Selektor innerhalb des Elements zu finden ist, auf das sich die Pseudoklasse bezieht.
Es hat aber alle Nachteile des [Checkbox-Hacks](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Radio-Buttons_und_Checkboxen#Exkurs:_Checkbox-Hack), was Zugänglichkeit angeht.
Unsere Wiki-Empfehlung, statt des Checkbox-Hacks ein details-Element zu verwenden, hast Du hier auf kreative Weise wörtlich genommen, aber so war sie nicht gemeint. Dumm ist nur, dass sich für Tabellenzeilen das details-Element so, wie wir es im Wiki gemeint hatten, nicht anwenden lässt. Stellst Du tabellarische Daten dar?!
Besser ist ein Button mit einem [aria-controls](https://wiki.selfhtml.org/wiki/HTML/Attribute/aria-*#aria-selected) Attribut, das auf die geschaltete Tabellenzeile verweist. Und eine Prise JavaScript, um ihn zum Leben zu erwecken.
Wenn Du mehr als eine .switch-Zeile hast, musst Du vermutlich die Tabelle per aria-controls referenzieren. Es könnte auch gut sein, der Tabelle ein [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live) Attribut zu geben mit [aria-relevant="all"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant). Dazu sollen unsere ARIen-Sänger mehr sagen 😉
_Rolf_
--
sumpsi - posui - obstruxi