CSS-Garten mit (eingefügten) Erklärungen

[Matthias Scharwies]

Guten Morgen!

Ich würde gerne den CSS-Garten, bzw. eine entsprechende OnePager-Version mit zusätzlichen inhaltlichen Informationen anreichern und frage mich, was die beste Vorgehensweise wäre.

Struktur:

• 1 HTML-Datei
• n Stylesheets
• 1 styleswitcher.js, der die CSS-Dateien wechselt.

Jedes Stylesheet soll nun eine Erklärung (1 Überschrift, 1-2 Absätze) bekommen.

Mögliche Vorgehensweisen:

1. Den Inhalt als HTML in die index.html setzen und alle auf hidden setzen und durch den Styleswitcher den passenden sichtbar machen

   • Problem: HTML, das ja als Blaupause für andere Projekte dienen soll, wird aufgebläht.
   • mögl. Lösung: Diese Informationen ans Ende des templates setzen und mit CSS nach vorne „schieben“?

2. Inhalt ins Stylesheet schreiben (Bäh) und dann in Pseudoelement sichtbar machen (Bäh, bäh How is CSS pseudo content treated by screen readers?) oder dann per Styleswitcher in leeres HTML schreiben.

   • Vorteil: HTML bliebe als Vorlage relativ übersichtlich (Es ist eh schwierig, eine Beispielseite so zu gestalten, dass sie realitätsnah aussieht, viele unserer fertigen Layouts leiden am Lorem Ipsum-Text.)
   • Nachteil: ???
   • Wie sollte der Text im Stylesheet gespeichert sein, um bequem ausgelesen zu werden?

3. ??? - gibt es einen besseren Ansatz?

   • Eigentlich sollten die fertigen Layouts nur Layout-Beispiele sein; jetzt haben schon 3 einen Style-/Themeswitcher - was ich aber gar nicht schlecht finde. Sie sollten aber eben auch nicht zu komplex werden.

Wie denkt ihr drüber?

Herzliche Grüße

Matthias Scharwies