responsive Tabellen; JS-Problem mit custom properties im Firefox

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Mit custom properties (CSS-Variablen) steht nun ein Mittel zur Verfügung, das Beste beider Welten zu erreichen und keinen der Nachteile inkaufnehmen zu müssen

… und in Browsern, in denen custom properties nicht zur Verfügung stehen, bleibt die Tabelle so wie sie ist und kann horizontal gescrollt werden. Progressive enhancement at its best.

Für ersteres kommt das ganze Tabelle-als-Liste-Darstellen in einen @supports()-Block.

Für zweiteres wird die Tabelle in ein <div role="region" tabindex="0"> mit overflow: auto gepackt, siehe „Scrolling“ in Adrian Roselli, A Responsive Accessible Table und Steve Faulkner, Short note on improving usability of scrollable regions.

Ich hab sämtliche Codepens angepasst.

LLAP 🖖