Boxen umsetzten

[Rolf B]

Hallo Bernd,

im Fall von markt.de machen sie einen kompletten Server-Roundtrip, die Ansichten-Buttons sind Links. Sogar die Listeninhalte sind verschieden (z.B. fehlt der Wohnungsflohmarkt in der Rasteransicht). Wie weit sich das HTML unterscheidet, habe ich mir jetzt nicht angeschaut.

Wenn deine Listenansicht die Bilder nicht enthalten soll, kannst Du das trotzdem per figure machen. Dieses Element ist nicht darauf festgelegt, ein Bild zu enthalten. Die Spec sagt:

The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.

Deine Listenansicht muss ja irgendwas enthalten. Wenn nicht das Bild, dann eine textuelle Beschreibung. Wie du das verteilst, wird von den Inhaltskategorien der Spec nicht festgelegt, figure und figcaption dürfen beide flow-content enthalten (was so ziemlich die allgemeinste Kategorie ist), die Bedeutung von figcaption als Überschrift sollte man allerdings beachten. Eine Listenansicht könnte ein Thumbnail des Images und dazu ein p Element mit Langtext enthalten. Die figcaption muss, damit die Lesereihenfolge stimmt, vor diesem p Element stehen.

Sowas kann man in einem HTML ausgeben und die Elemente je nach Ansicht ein- und ausblenden. Das figcaption Element sollte als erstes stehen und in der Rasteransicht nur visuell nach unten geschoben werden. Das ist über grid-templates am einfachsten, deswegen habe ich das nachstehende Fiddle mal auf grid-figures umgestellt.

https://jsfiddle.net/Rolf_b/f4jp2rq1/1

Es gibt 5 Ansichten: Überblick (kleine Bilder), Nur-Text, Vollansicht, Raster und "stillos". Die "stillos"-Ansicht deaktiviert alle Zusatzstyles der ersten 4 Ansichten und zeigt, wie die Liste "einfach" aussieht.

Mein Chrome und Firefox laden bei mir leider auch in der "Nur-Text" Ansicht die Bilder vom Server, obwohl das img auf display:none steht. Selbst ein "hidden" ändert nichts. Finde ich sehr ärgerlich, ein Start der Liste in der "Nur-Text" Ansicht hilft nicht beim Datensparen. Aber vielleicht macht das ein Mobilbrowser anders.

Rolf