Lesetip: responsive Tabellen (Inclusive Components)

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Was mich aber ein wenig verwundert. CSS ist für die Darstellung da. Warum beeinflusst diese die Semantik des zugrundeliegenden HTML?

Zum anderen kann man dieses Verhalten, dass die Änderung der Darstellung (womit nicht Nichtdarstellung gemeint ist) den Elementen ihre Bedeutung nimmt, durchaus als Bug ansehen. Was nichts daran ändert, dass man damit irgendwie umgehen muss.

Heydon schreibt: „Wie Adrian Roselli kürzlich bemerkte, hat die Verwendung von CSS-Anzeigeeigenschaften zum Ändern des Tabellenlayouts die Tendenz, die zugrunde liegende Tabellensemantik zu entfernen. Dies sollte wahrscheinlich nicht passieren, weil es mit dem Prinzip der Trennung der Interessen kollidiert. Es passiert trotzdem.“

Blöd.

Man könnte den Tabellenelementen explizit ihre Rolle per role-Attribut zuweisen; diese bliebe dann bei Änderung der display-Eigenschaft erhalten. Was aber ebenfalls nicht unproblematisch ist. Schon gar nicht, wenn die Tabelle als Liste dargestellt wird.

Wie sieht die Unterstützung von @media speech aus?

The ‘print’ and ‘screen’ media types are defined in HTML4. The complete list of media types in HTML4 is: ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’. CSS2 defines the same list, deprecates ‘aural’ and adds ‘embossed’ and ‘speech’. (https://www.w3.org/TR/css3-mediaqueries/#background)

Das scheint mir das richtige Werkzeug für solche Zwecke zu sein.

@media screen and (max-width: 42em) and not speech {
  /* Tabelle als Liste */
} 

was aber so nicht geht, weil not immer eine komplette MQ negiert (Es sei denn, sie sind durch Komma voneinander getrennt).

Aber in CSS3 gehen nested media queries

@media not speech {
  @media screen and (max-width: 42em) {
    /* Tabelle als Liste */
  }
} 

Bis demnächst
Matthias