Boxen umsetzten

[Bernd]

Hallo,

wie würdet ihr folgende Boxen umsetzten?

Ich dachte an folgendes

<section>
	<div>
		<img src="" alt>
		<p></p>
	</div>
	<div>
		<img src="" alt>
		<p></p>
	</div>
	<div>
		<img src="" alt>
		<p></p>
	</div>
	<div>
		<img src="" alt>
		<p></p>
	</div>	
	<div>
		<img src="" alt>
		<p></p>
	</div>
	<div>
		<img src="" alt>
		<p></p>
	</div>
</section>

Das schwarze ins Logos oder Bilder. Ich weiß nie wie hoch die Sind wie ihr sehen könnt. Ich möchte gerne, dass der Text immer unten steht, die Höhe der Box ist immer gleich.

[ursus contionabundo]

grid.

https://css-tricks.com/snippets/css/complete-guide-grid/

[Gunnar Bittersmann]

@@ursus contionabundo

Solange Subgrid nicht implementiert ist, wird das so wohl nichts mit der Ausrichtung der Bildunterschrift.

LLAP 🖖

[Rolf B]

Hallo Bernd,

ich würde nicht an div und p denken, sondern an figure und figcaption.

Aber ja, ansonsten musst Du das so machen. Gib allen img die gleiche Breite, dann bekommen sie eine Höhe entsprechend ihres Seitenverhältnisses, und die figcaption landet darunter.

<section class="galerie">
<figure>
  <img src="..." alt="...">
  <figcaption>Dings</figcaption>
</figure>
<figure>
  <img src="..." alt="...">
  <figcaption>Bums</figcaption>
</figure>
</section>

.galerie {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
figure {
  flex: 0 0 300px;
  margin: 1em; padding: 1em; border: 1px solid red;
  background-color: #ccc;
}
figure img { width: 100%; background: white; }

flex oder grid, je nachdem, wie die Aufgabenstellung ist.

Rolf

[Bernd]

Hallo,

danke. Mein erster Versuch war so:
https://codepen.io/anon/pen/ZPbVKR?editors=1100

Ich schau mir gleich mal deinen Code an.

[Bernd]

Hallo,

deine sieht auch so aus wie meines, der Text darunter ist mal oben mal unten, kein Ordnung 😉 https://codepen.io/anon/pen/Ygyday?editors=1100

Lässt sich da vielleicht auch etwas mit CSS machen?

[Bernd]

Schade, geht wohl nicht. Muss ich doch mit Grafiken arbeiten die alle exakt gleich hoch sind, zu früh gefreut:

https://codepen.io/anon/pen/ZPbVKR?editors=1100

[Bernd]

Vielleicht ja so?
https://codepen.io/anon/pen/ZPbVKR

Wenn ich

position: absolute;

nutzen muss, warum dann den ganzen CSS Grid und Flex krempel? Hat ja mit neuer / besserer Technik nichts zu tun?

[ursus contionabundo]

Hat ja mit neuer / besserer Technik nichts zu tun?

Aber mit kleinen Anzeigegeräten. Deine Lösung scheint zu funktionieren. Falls Dir der Abstand unter dem Text nicht gefällt: Der kommt vom <p>. Ist dessen default-margin. Den setzt der Browser wenn Du nichts vorgibst.

[Bernd]

Hallo,

Aber mit kleinen Anzeigegeräten. Deine Lösung scheint zu funktionieren.

hätte man aber auch wie früher mit

display: inline-block;

umsetzten können und bei kleinen Geräten mit einer Media-Query das ganze auf

display: block;

setzten können?

[ursus contionabundo]

hätte man aber auch wie früher mit

display: inline-block;

umsetzten können und bei kleinen Geräten mit einer Media-Query das ganze auf

display: block;

setzten können?

Das hätte weit mehr Mühe gemacht. Allein die einheitliche Höhe der Blöcke einer Zeile ... grid hat schon was.

[Rolf B]

Hallo Bernd,

hat keiner gesagt dass die figures auch flexbox sein sollen. Nur der Container, wo die figures drin sind. Die figures sind die flexitems.

Hättest Du mal in der Schule schlechter aufgepasst, dann könntest Du besser abschreiben 😉

Rolf

[Bernd]

Hallo,

und was willst du mir damit jetzt sagen? ;)

[Tabellenkalk]

Hallo,

Hättest Du mal in der Schule schlechter aufgepasst, dann könntest Du besser abschreiben 😉

Ei, wie fies!
Vorallem, wenn man bedenkt, dass in der Vorlage gar kein 'display:flex-item' enthalten ist…

Gruß
Kalk

[Bernd]

Da hatte ich ein wenig rum gespielt, jetzt sind die Bildunterschriften auch unten:
https://codepen.io/anon/pen/RdrVqx?editors=1100

Allerdings benötige ich auch bei deinem Beispiel

figure {
  position: relative;
}

figcaption {
  position: absolute;
  bottom:0;
  padding-bottom: 0.5em
}

[Tabellenkalk]

Hallo,

Da hatte ich ein wenig rum gespielt, …

Und verwendest nachwievor keine flexitems?

Gruß
Kalk

[Bernd]

Keine Ahnung was du meinst!

[Tabellenkalk]

Hallo,

Keine Ahnung was du meinst!

Rolf sagte „Die figures sind die flexitems.“ Damit bekomme ich m.E. genau das Gewünschte.

Gruß
Kalk

[Rolf B]

Hallo Bernd,

oookay - ein Bild sagt mehr als 1000 Worte und die 1000 Worte deines Eingangspostings haben mich verwirrt. Ich dachte, du WOLLTEST die Texte direkt unter den Bildern haben.

Deine position:absolute Lösung ist ein Workaround. Wenn Du dabei bleiben willst, dann:

• kein min-height für die figure, sondern einen vergrößertes padding-bottom in das die Caption hineinpasst (z.B. so: padding: 1em 1em 3em 1em)
• statt padding-bottom auf der figcaption einfach die bottom-Eigenschaft auf 0.5em setzen.
• flex-direction:row auf der figure kann dann weg (ist bestimmt nur ein Bastel-Relikt...)

Mit dieser Verbesserung können die Bilder so hoch werden wie sie wollen, die Caption bleibt immer darunter.

Aber besser ist wohl, wenn jedes figure-Element ist nicht nur flexitem, sondern auch selbst flexbox ist, aber mit flex-direction:column und justify-content: space-between. Der figcaption gibst Du flex: 0 0 1em, dem img ein flex: 1 0 1em. Absolute Positionierung ist ein unnötiger Workaround.

Hätte ich mal besser in der Schule aufgepasst, dann hätte ich auch Lesen gelernt. Statt dessen habe ich zu viele Comics angeguckt, scheint mir 😉

Mein Fork:

https://codepen.io/anon/pen/bZERob?editors=1100

Rolf

[Bernd]

Hallo,

da gefällt mir deine Version besser ;) Danke dafür. Ich habe noch ein

figcaption {
  margin-top: 1.5em;
}

eingesetzt https://codepen.io/anon/pen/bZERQd?editors=1100

[Gunnar Bittersmann]

@@Rolf B

hat keiner gesagt dass die figures auch flexbox sein sollen.

Nicht? Sollte aber.

LLAP 🖖

[Bernd]

Hallo,

https://codepen.io/anon/pen/bZERQd
ich frag mich ja ob figure und figcaption wirklich das richtige ist, wenn ich ein Schritt weiter gehen möchte. Ich möchte gerne dem User die Möglichkeit bieten zwischen einer Boxen- und Listenansicht wechseln zu können. Dann sind figure und figcaption falsch am Platz?

Und wie müsste ich dieses umsetzten? Zwei HTML Bereiche einfügen? Oder mit CSS sämtliche Sachen ausblenden? Wie würdet ihr dieses machen?

[Rolf B]

Hallo Bernd,

wieso sollten figure und figcaption falsch sein? Die kannst Du genauso flexibel in die eine oder andere Richtung würzen wie eine fade div-Suppe.

Aber boah ey, ich hatte eigentlich alles fertig, und dann wollte ich ein großes W schreiben. Ich habe schon SO oft Ctrl-W statt Shift-W gedrückt, dass ich es mittlerweile besser wissen sollte. Nope, tschüss Browser. ICH HASSE DIESEN SHORTCUT AUS DER HÖLLE. Auf Alt+F4 kommt man nicht so schnell aus Versehen. Auf Ctrl-W ständig :(

Aber immerhin gibt's in Chrome noch Ctrl+Shift+T und damit ist der anonyme Codepen nicht verloren, den ich aus deinem Pen geforkt hatte.

https://codepen.io/anon/pen/rReYRy

Der Radiobutton-Hack ist nur drin weil ich kein JavaScript schreiben wollte. Wenn Du es lieber anders steuerst, gib der Galerie Klassen für den gewünschten View und ersetze im CSS die Hack-Selektoren (#cardview:checked ~ .galerie und #cardview:checked ~ .galerie) durch Klassenselektoren für die Views. Achtung, nicht zu viel ersetzen, aus #cardview:checked ~ .galerie figure müsste dann .cardview figure werden.

Vom Grundprinzip her ist es so, dass es einen gemeinsamen Grundstyle gibt, der für sich nicht reicht, und der durch die cardview und listview Bereiche zum gewünschten Ziel-View aufgepeppt wird. Das HTML bleibt unverändert, und so soll es auch sein.

Fragen, Wünsche, Anregungen?

Rolf

[Rolf B]

Update: Habe eine zweite Listenansicht hinzugefügt, wo die Bilder rechts sind. Ausschließlich CSS.

Rolf

[Bernd]

Hallo,

vielen vielen Dank! An diese Darstellung habe ich noch gar nicht gedacht 😱 Ich dachte daran, das Bild und den Rahmen komplett zu entfernen und nur die Bildunterschrift zu zeigen, also wirklich eine Listenansicht deshalb auch meine Frage von vorhin ob die eingesetzten figure und figcaption richtig sind. Aber deine Idee gefällt mir auch sehr gut bzw. fast noch besser.

Die Checkboxen sind auch sehr gut, das heißt ich kann mit PHP den Wert setzten, welcher in der Datenbank pro User gespeichert wird, entweder Listen oder Kartenansicht. Ich habe extra die DB Variante gewählt, da ich ja nie weiß ob der User an dem Gerät sitzt wo er es auch eingestellt hat, sonst könnte ich mit einem Cookie arbeiten.

Nur so wenn ich wirklich nur eine Listenansicht nehmen würde, wäre dann figure und figcaption auch noch richtig?

Wenn ich mit Grafiken für die Auswahl arbeiten möchte, wie es z.B. hier umgesetzt wurde:
https://www.markt.de/koeln/marktplatz/haushalt/

oder auch hier (die Version gefällt mir persönlich wesentlich besser)

Kann man dann auch mit dem Checkbox Trick arbeiten?

PS: Ich muss gleich mal schauen was passiert wenn ich Ctrl-W drücke. Ich kenne nur F4 oder Ctrl+Shift+T um ein Fester wieder zu öffnen, welches ich gerade geschlossen habe. Ich drücke während dem Schreiben öfters mal STRG + A / STRG + C um zu vermeiden dass alles weg ist, wenn der Browser hängt oder ich aus versehen etwas schließe weil meine Maus mal wieder spinnt.

[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

[Bernd]

Hallo,

das Problem mit den Buttons ist halt, ich kann nicht sagen welche Ansicht vom User gespeichert wurde und diese dann auch beim Betreten der Seite darstellen? Daher sind mir die Radio-Buttons am liebsten. Und warum soll dieses nur ein Hack sein? Ich meine es aut auf CSS auf und funktioniert ohne JavaScript, besser kann es ja nicht werden? Und wer meint auch noch sein CSS abschalten zu müssen, OK der hat eben Pech, irgendwann ist auch mal Schluss.

Dann muss ich schauen wie ich die Radio Buttons umgebaut bekomme um die so darzustellen wie auf mein Bild aus dem letzten Posting.

[Gunnar Bittersmann]

@@Bernd

Daher sind mir die Radio-Buttons am liebsten. Und warum soll dieses nur ein Hack sein? Ich meine es aut auf CSS auf und funktioniert ohne JavaScript, besser kann es ja nicht werden?

Checkbox-Hack? Nein, danke! gilt ebenso für Radio-Button-Hack.

LLAP 🖖

[Bernd]

Hallo,

Checkbox-Hack? Nein, danke! gilt ebenso für Radio-Button-Hack.

ich habe mir mal dein grid/list angesehen und dieses von Rolf das Problem ist, ich kann den Wert, der in der DB hinterlegt ist nicht als default nehmen um die Darstellung zu laden die der User gerne hätte?

Bei deinem kommt noch dazu, dass du alles über ein Button machst, was mir nicht so gefällt, da gefällt mir dieses von Rolf doch besser.

[Gunnar Bittersmann]

@@Bernd

ich habe mir mal dein grid/list angesehen

Auch das im Pen verlinkte Posting dazu?

das Problem ist, ich kann den Wert, der in der DB hinterlegt ist nicht als default nehmen um die Darstellung zu laden die der User gerne hätte?

… worin ich mich dazu geäußert hatte.

Bei deinem kommt noch dazu, dass du alles über ein Button machst

Auch darin: „Anstatt eines Buttons zum Wechsel der Darstellungsformen können auch Radiobuttons verwendet werden …“ Was man doch früher alles so für Unsinn geschrieben hat!

Auch sollte der Button ein Toggle-Button sein.

was mir nicht so gefällt, da gefällt mir dieses von Rolf doch besser.

Was dir gefällt, ist irrelevant. Relevant ist, was den Nutzern „gefällt“. In Anführungszeichen, da es hier nicht um Geschmacksfragen, sondern um Bedienbarkeit geht.

LLAP 🖖

[Bernd]

Hallo,

Auch das im Pen verlinkte Posting dazu?

das hier gefällt mir schon viel besser, da ist es über zwei Links geregelt:
https://codepen.io/gunnarbittersmann/pen/egwQRP

Aber auch du nutzt in diesem Beispiel Radio-Buttons. Also ist dieses Beispiel auch scheiße und sollte nicht genutzt werden?

das Problem ist, ich kann den Wert, der in der DB hinterlegt ist nicht als default nehmen um die Darstellung zu laden die der User gerne hätte?  … worin ich mich dazu geäußert hatte.

Du schlägst Cookies oder localStorage vor. Das heißt du gehst in diesem Fall davon aus, der User sitzt immer am gleichen Rechner. Denkst du da nicht ein wenig zu kurz? Ich bin den ganzen Tag mal am Handy, mal am PC oder vielleicht mal am Laptop. Ich möchte nicht immer wieder die Einstellungen neu setzten, warum auch. Findest du deine Idee wirklich User-Freundlich? Ich persönlich nicht.

Ist localStorage denn auf allen Browsern verfügbar?

Was dir gefällt, ist irrelevant. Relevant ist, was den Nutzern „gefällt“. In Anführungszeichen, da es hier nicht um Geschmacksfragen, sondern um Bedienbarkeit geht.

Wenn es große Webseite machen, die bestimmt sehr viele Geld in Tests von Bedienbarkeit gesteckt haben, wie z.B. Amazon oder Zalando, dann kann man sich daran auch orientieren?

[Bernd]

Hab hier etwas gefunden, was in meine Richtung geht:

https://codepen.io/BraadMartin/pen/NPPzJX
https://www.w3schools.com/howto/howto_js_list_grid_view.asp

[Gunnar Bittersmann]

@@Bernd

das hier gefällt mir schon viel besser, da ist es über zwei Links geregelt:
https://codepen.io/gunnarbittersmann/pen/egwQRP

Zwei Was-so-aussieht-wie-Links. UI-Elemente wie andere UI-Elemente aussehen zu lassen, ist auch nicht unbedingt die beste Idee.

Und was fehlt: die visuelle Hervorhebung, wenn die Radiobutton-Gruppe den Fokus hat. Ohne eine solche ist Tastaturbedienung nahezu unmöglich. Was hab ich damals für Unsinn verzapft‽

Also ist dieses Beispiel auch scheiße und sollte nicht genutzt werden?

Ja, so wollte ich „Was man doch früher alles so für Unsinn geschrieben hat!“ verstanden wissen.

Du schlägst Cookies oder localStorage vor. Das heißt du gehst in diesem Fall davon aus, der User sitzt immer am gleichen Rechner. Denkst du da nicht ein wenig zu kurz?

Hängt von der Anwendung ab. Möglicherweise will der Nutzer ja auf verschiedenen Geräten eine unterschiedliche Darstellung.

Und wenn nicht: Einmalig auf jedem Gerät die Ansicht zu wechseln, wäre wohl auch zumutbar.

Ist localStorage denn auf allen Browsern verfügbar?

Grün, soweit das Auge reicht.

Man könnte noch einen Fallback auf Cookie implementieren. Man kann sich das aber auch sparen und das Merken der gewählten Ansicht durchaus als progressive enhancement ansehen.

LLAP 🖖

[Bernd]

Ich habe in deinem Beispiel aber gar kein Wert, welchen ich in localStorage speichern könnte?
https://codepen.io/gunnarbittersmann/pen/ZLdrXy

Ich habe noch eine andere Idee, ich lade die Ansicht doch in die Datenbank und lade per include jeweils ein andere Template rein.

[Bernd]

Hallo,

hier mal meine Lösung:
https://codepen.io/anon/pen/rReEdL

allerdings wenn ich in der Listen Ansicht bin, springt es erst einmal was sehr unschön ist.

[Rolf B]

Hallo Bernd,

der Ready-Handler ist in 99% der Fälle der richtige Ort für Initialisierungen. Dies hier ist eine 1% Situation.

Wenn Du aus deinem Script die Zeile

$('.gallery-widget').toggleClass(localStorage.toggled);

entfernst (addClass wäre eh besser gewesen) und im HTML direkt hinter der Zeile

<div class="gallery-widget">

diese jQuery-freie Snippet hinzufügst:

<script>
  document.querySelector(".gallery-widget")
          .classList.add(localStorage.toggled || "");
</script>

zuckt nichts mehr.

Sobald das div Element im Dokument steht, ist es per querySelektor auffindbar. Inhalt hat es noch nicht, darum ist nun der ideale Moment, um die im localStorage gespeicherte Extraklasse hinzuzufügen.

Fork: https://codepen.io/anon/pen/QoENbM

QoENbM - das klingt klingonisch. Gunnar, ich hoffe, dass das keine todeswürdige Beleidigung ist?

Rolf

[Bernd]

Danke, jetzt springt wirklich nichts mehr. Ist es erlaubt JavaScript mitten in die Seite zu platzieren? Ich dachte dieses darf nur am Anfang bzw. am Ende der Seite vorkommen?

[Rolf B]

Hallo Bernd,

der Browser liest das HTML Dokument von oben nach unten ein. <script> darf innerhalb von head und body überall vorkommen, wo auch ein anderes Tag stehen darf. Es mag Ausnahmen geben, die müsste ich jetzt aber recherchieren. Die Spec sagt zum script-Element: „Permitted parents: Any element that accepts metadata content, or any element that accepts phrasing content.“

Sobald der Browser ein Script-Tag antrifft, unterbricht er die HTML Verarbeitung und führt das Script aus. Wenn es ein externes Script ist, wird es erstmal geladen, und der Browser wartet. Das liegt daran, dass das Script ein document.write ausführen kann und das, was da geschrieben wird, nach Script-Ende so verarbeitet wird, als hätte es an Stelle des Script-Bereichs gestanden.

D.h. man muss schon genau wissen, was man da tut, um den Seitenaufbau nicht zu ruinieren. Ein Inlinescript, dass mal schnell eine Klasse nachträgt, ist technisch kein Problem. Es widerspricht zwar der Idee des "unobtrusive javascript", und vermutlich könnte man das Problem auf unaufdringliche Weise mit einem MutationObserver lösen, der jede Änderung am body überwacht, dafür handelt man sich dann aber eine kräftige Performancebremse beim Laden der Seite ein (weil der Observer für jedes neue HTML Element im Body aufgerufen wird). Puristen mögen über meine Lösung die Nase rümpfen, aus meiner Sicht ist sie sinnvoll.

Der gestern gezeigte Vorschlag ist auch nicht mein erster Anlauf gewesen. Meine Annahme war nämlich, dass das gallery-widget erst im DOM verfügbar ist, wenn das schließende div Tag verarbeitet wurde. Deshalb hatte ich das Script zunächst hinter dem schließenden Tag des gallery-widget stehen. Daraufhin zuckte es kürzer, aber es zuckte immer noch.

Danach kam ich auf die folgende, abstruse Idee:

<script>
   // Demo, ergänze für produktiven Einsatz eine Prüfung, ob localStorage vorhanden ist!
   document.write("<div class='gallery-widget "+ (localStorage.toggle || "") + "'>");
</script>
<noscript>
   <div class='gallery-widget'>
</noscript>

Aber sowas als vorbildlich zu präsentieren, das widerstrebte mir. Und dann habe ich die gestern gezeigte Lösung einfach mal ausprobiert und - siehe und staune! - das Widget ist tatsächlich schon nach dem öffnenden Tag im DOM. Ist auch eigentlich logisch, wie sollen sonst die Kind-Elemente hineinkommen 🤦‍♂️^[1].

@Christian Kruse: Deine Emoji-Logik scheint bei Emojis, die aus zwei Zeichen kombiniert werden, nicht zu funktionieren. Im Editor sehe ich das richtige Emoji, im gespeicherten Beitrag das Basis-Emoji und das kombinierte Zeichen separat. Und du haust auch noch ein span dazu, damit es auf keinen Fall versehentlich richtig kombiniert wird 😉

Rolf

---

1. falls dein Browser das Emoji falsch anzeigt oder es zu klein ist ↩︎

[Gunnar Bittersmann]

@@Rolf B

Sobald der Browser ein Script-Tag antrifft, unterbricht er die HTML Verarbeitung und führt das Script aus. Wenn es ein externes Script ist, wird es erstmal geladen, und der Browser wartet.

Nicht, wenn das defer-Attribut gesetzt ist. [MDN, s.a. Efficiently load JavaScript with defer and async]

<script>
   // Demo, ergänze für produktiven Einsatz eine Prüfung, ob localStorage vorhanden ist!
   document.write("<div class='gallery-widget "+ (localStorage.toggle || "") + "'>");
</script>
<noscript>
   <div class='gallery-widget'>
</noscript>

Geht besser ohne document.write():

<div class='gallery-widget'>
<script>
	if (localStorage && localStorage.toggle)
	{
		document.querySelector('.gallery-widget').classList.add(localStorage.toggle);
	}
</script>

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Nicht, wenn das defer-Attribut gesetzt ist.

Ja... Klar... Äh, wollte Information Overload vermeiden (laber, ausflücht)

Geht besser ohne document.write():

sag ich doch 😉. Das hab ich doch ausdrücklich als "interims-Schnapsidee" bezeichnet.

Aber gut, dass Du nochmal zeigst wie man die Prüfung auf Vorhandensein von localStorage integriert.

Alaaf
Rolf

[Rolf B]

Hallo Bernd,

Kann man dann auch mit dem Checkbox Trick arbeiten?

Sorry, übersehen.

Müsste gehen, wenn man

• den Radiobuttons ein Label gibt
• erst die Buttons, dann die Label ins HTML setzt (und zwar immer abwechselnd radio/label/radio/label)
• die Radiobuttons visuell versteckt und per CSS dafür sorgt, dass ein radiobutton im checked-Status das auf ihn folgende Label entsprechend darstellt. Und bei :hover/:focus das Label ein Outline bekommt
• Im Label Icon und Text anzeigt

Aber das ist ein HACK, das sollte besser mit JavaScript gemacht werden. Soweit ich weiß, haben diese Hacks Accessibility-Probleme. Meine Beispiele hier nehmen nur auf die Darstellung Bezug, das Thema Bedienbarkeit habe ich zurückgestellt. Das solltest Du für deine Seiten nicht tun.

Das Problem bei diesen Hacks ist, dass die Buttons und das davon kontrollierte Element Kinder des gleichen Elternelements sein müssen. Das macht das Layouting gelegentlich schwierig. Sowas hier würde den Hack kaputt machen:

<div class="viewbuttons">
<input type="radio" value="cardview" id="cardview"><label for="cardview">☰ Rasteransicht</label>
</div>
<section class="galerie">
...
</section>

Rolf