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

[Gunnar Bittersmann]

@@Matthias Scharwies

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

Da das Stylesheets mit JavaScript umgeschaltet wird, kann auch die jeweilige Erklärung dazu mit JavaScript umgeschaltet werden.

Das lässt sich auf verschiedene Weisen implementieren:

• Die Erklärungen stehen mit in styleswitcher.js.

• Die Erklärungen stehen in einer JSON-Datei oder jede in ihrer eigenen.

• Die Erklärungen stehen in den jeweiligen Stylesheets. Diese sind keine CSS-Dateien, sondern HTML-Fragmente mit style-Elementen, die dann beim Wechsel ins DOM gehangen werden. (style darf ja auch im body stehen.)

😷 LLAP

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

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

Da das Stylesheets mit JavaScript umgeschaltet wird, kann auch die jeweilige Erklärung dazu mit JavaScript umgeschaltet werden.

Das lässt sich auf verschiedene Weisen implementieren:

• Die Erklärungen stehen mit in styleswitcher.js.

• Die Erklärungen stehen in einer JSON-Datei oder jede in ihrer eigenen.

Ja, da hatt' ich auch schon dran gedacht!

• Die Erklärungen stehen in den jeweiligen Stylesheets. Diese sind keine CSS-Dateien, sondern HTML-Fragmente mit style-Elementen, die dann beim Wechsel ins DOM gehangen werden. (style darf ja auch im body stehen.)

Ah, da hatt ich überhaupt nicht dran gedacht! Vielen Dank! Mal schauen, ob ich das so umsetzen kann!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Gunnar Bittersmann

• Die Erklärungen stehen in den jeweiligen Stylesheets. Diese sind keine CSS-Dateien, sondern HTML-Fragmente mit style-Elementen, die dann beim Wechsel ins DOM gehangen werden. (style darf ja auch im body stehen.)

• Es sind doch CSS-Dateien. Die Erklärungen stehen jeweils in einer custom property (mit Markup oder Markdown) und werden per JavaScript daraus ins DOM gehangen.

😷 LLAP

[Matthias Scharwies]

Servus!

@@Gunnar Bittersmann

• Die Erklärungen stehen in den jeweiligen Stylesheets. Diese sind keine CSS-Dateien, sondern HTML-Fragmente mit style-Elementen, die dann beim Wechsel ins DOM gehangen werden. (style darf ja auch im body stehen.)

• Es sind doch CSS-Datein. Die Erklärungen stehen jeweils in einer custom proterty (mit Markup oder Markdown) und werden per JavaScript daraus ins DOM gehangen.

Noch cooler! Hatte die ganze Zeit überlegt, wie man Inhalt in einem Stylesheet notieren könnte und bin über das unsägliche content="..."; nicht hinausgekommen.

Vielen Dank!

Ich glaube, dass es besser ist, ein Stylesheet als CSS einzubinden anstelle es als HTML-Fragment, bzw. Template einzuhängen!

Herzliche Grüße

Matthias Scharwies

[MudGuard]

Hi,

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

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?).

Ist das in diesem Fall wirklich so bäh?

Nutzen Leute, die auf Screenreader angewiesen sind, einen auf der Seite angebotenen Style-Switcher überhaupt?

Ich selbst nutze - noch (?) - keinen Screenreader, kann das also nicht wirklich beurteilen, aber ich könnte mir vorstellen, daß Blinden/Seh-geschwächten, die sich die Seite vorlesen lassen, ein Styleswitcher eher unwichtig ist. Ist doch egal (das wäre meine Vermutung als nicht-Screenreader-Nutzer), ob das, was ihnen vorgelesen wird, in apricot auf veilchenlila oder in grün auf rot dargestellt wird …

Sollten Screenreader-Nutzer wider meine Erwartung doch Style-Switcher nutzen, dann muß der Text zum Style natürlich auch für diese zugänglich sein.

cu,
Andreas a/k/a MudGuard

[Matthias Scharwies]

Servus!

Hi,

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

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?).

Ist das in diesem Fall wirklich so bäh?

Nutzen Leute, die auf Screenreader angewiesen sind, einen auf der Seite angebotenen Style-Switcher überhaupt?

Mit großer Wahrscheinlichkeit nicht. Da hast du Recht.

Aber hier geht es eben um die fertigen Layouts, die als Musterbeispiele best practices vorzeigen sollen.

So bin ich zu SELFHTML gekommen, als Matthias Apsel 2013-2014 die 10 „Siegerentwürfe“, die aber nur aus schönen Div-Suppen bestanden, in vorbildliches HTML5-Markup umwandeln wollte. Einige hatten damals schon Flexbox.

2018 haben wir die noch vorhandenen floats durch Grid Layout ersetzt. Da es eigentlich sinnlos ist, ein „perfektes“ Grundgerüst mit Lorem Ipsum-Text zu füllen, sind wir auf die Idee gekommen, einen CSS/fertige_Layouts/CSS-Garten mit mehreren Themes anzubieten.

Jetzt möchte ich eine Single-Page-Webseite vorstellen, bei dem man nicht nur umschalten kann, sondern zu jedem Theme eine kurze Erläuterung der Besonderheiten erhält.

Im Wiki sieht das z.B. so aus: CSS/fertige_Layouts/CSS-Garten#Besonderheiten

Im Template selbst sollten die Erklärungen nicht im HTML-Markup sein, da sich jemand sein Wunsch-Theme ohne viel Arbeit durch Entfernen des Styleswitchers und der überflüssigen Stylesheets erhalten sollte.

Deshalb fragte ich danach, wie man den Spagat Inhalt im Stylesheet zu haben mit der Trennung der Zuständigkeiten in Einklang bringen kann.

Das dauert noch, ich hoffe aber bis Jahresende etwas vorzeigen zu können.

Herzliche Grüße

Matthias Scharwies