tag:forum.selfhtml.org,2005:/self CSS-Garten mit (eingefügten) Erklärungen – SELFHTML-Forum 2021-08-23T04:53:56Z https://forum.selfhtml.org/self/2021/aug/22/css-garten-mit-eingefugten-erklarungen/1790973#m1790973 Matthias Scharwies mscharwies@selfhtml.org 2021-08-22T08:07:11Z 2021-08-22T08:27:54Z CSS-Garten mit (eingefügten) Erklärungen <p>Guten Morgen!</p> <p>Ich würde gerne den <a href="https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts/CSS-Garten" rel="nofollow noopener noreferrer"><strong>CSS-Garten</strong></a>, bzw. eine entsprechende OnePager-Version mit zusätzlichen inhaltlichen Informationen anreichern und frage mich, was die beste Vorgehensweise wäre.</p> <p><strong>Struktur</strong>:</p> <ul> <li>1 HTML-Datei</li> <li>n Stylesheets</li> <li>1 styleswitcher.js, der die CSS-Dateien wechselt.</li> </ul> <p>Jedes Stylesheet soll nun eine Erklärung (1 Überschrift, 1-2 Absätze) bekommen.</p> <p><strong>Mögliche Vorgehensweisen:</strong></p> <ol> <li> <p>Den Inhalt als HTML in die index.html setzen und alle auf <code>hidden</code> setzen und durch den Styleswitcher den passenden sichtbar machen</p> <ul> <li>Problem: HTML, das ja als Blaupause für andere Projekte dienen soll, wird aufgebläht.</li> <li>mögl. Lösung: Diese Informationen ans Ende des templates setzen und mit CSS nach vorne „schieben“?</li> </ul> </li> <li> <p>Inhalt ins Stylesheet schreiben (Bäh) und dann in Pseudoelement sichtbar machen (Bäh, bäh <a href="https://accessibleweb.com/question-answer/how-is-css-pseudo-content-treated-by-screen-readers/" rel="nofollow noopener noreferrer">How is CSS pseudo content treated by screen readers?</a>) oder dann per Styleswitcher in leeres HTML schreiben.</p> <ul> <li>Vorteil: HTML bliebe als Vorlage relativ übersichtlich (<em>Es ist eh schwierig, eine Beispielseite so zu gestalten, dass sie realitätsnah aussieht, viele unserer fertigen Layouts leiden am Lorem Ipsum-Text.</em>)</li> <li>Nachteil: ???</li> <li><strong>Wie</strong> sollte der Text im Stylesheet gespeichert sein, um bequem ausgelesen zu werden?</li> </ul> </li> <li> <p><strong>???</strong> - gibt es einen besseren Ansatz?</p> <ul> <li>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.</li> </ul> </li> </ol> <p>Wie denkt ihr drüber?</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/aug/22/css-garten-mit-eingefugten-erklarungen/1790975#m1790975 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-08-22T08:32:47Z 2021-08-22T08:32:47Z CSS-Garten mit (eingefügten) Erklärungen <p>@@Matthias Scharwies</p> <blockquote> <ol start="3"> <li><strong>???</strong> - gibt es einen besseren Ansatz?</li> </ol> </blockquote> <p>Da das Stylesheets mit JavaScript umgeschaltet wird, kann auch die jeweilige Erklärung dazu mit JavaScript umgeschaltet werden.</p> <p>Das lässt sich auf verschiedene Weisen implementieren:</p> <ul> <li> <p>Die Erklärungen stehen mit in styleswitcher.js.</p> </li> <li> <p>Die Erklärungen stehen in einer JSON-Datei oder jede in ihrer eigenen.</p> </li> <li> <p>Die Erklärungen stehen in den jeweiligen Stylesheets. Diese sind keine CSS-Dateien, sondern HTML-Fragmente mit <code>style</code>-Elementen, die dann beim Wechsel ins DOM gehangen werden. (<code>style</code> darf ja auch im <code>body</code> stehen.)</p> </li> </ul> <p> LLAP</p> <div class="signature">-- <br> <em>„Guten Tag, mein Name ist Karl-Heinz. Ich will mich nicht impfen lassen und erwarte, dass die Solidargemeinschaft, die wegen Leuten wie mir weniger Freiheit hat, meine Tests weiter finanziert. Und das nenne ich dann Eigenverantwortung.“</em><br> — @Hoellenaufsicht </div> https://forum.selfhtml.org/self/2021/aug/22/css-garten-mit-eingefugten-erklarungen/1790990#m1790990 MudGuard http://www.andreas-waechter.de/ 2021-08-22T19:05:19Z 2021-08-22T19:05:19Z CSS-Garten mit (eingefügten) Erklärungen <p>Hi,</p> <blockquote> <p>Jedes Stylesheet soll nun eine Erklärung (1 Überschrift, 1-2 Absätze) bekommen.</p> <ol start="2"> <li>Inhalt ins Stylesheet schreiben (Bäh) und dann in Pseudoelement sichtbar machen (Bäh, bäh <a href="https://accessibleweb.com/question-answer/how-is-css-pseudo-content-treated-by-screen-readers/" rel="nofollow noopener noreferrer">How is CSS pseudo content treated by screen readers?</a>).</li> </ol> </blockquote> <p>Ist das in <strong>diesem</strong> Fall wirklich so bäh?</p> <p>Nutzen Leute, die auf Screenreader angewiesen sind, einen auf der Seite angebotenen Style-Switcher überhaupt?</p> <p>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 …</p> <p>Sollten Screenreader-Nutzer wider <strong>meine</strong> Erwartung doch Style-Switcher nutzen, dann muß der Text zum Style natürlich auch für diese zugänglich sein.</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2021/aug/22/css-garten-mit-eingefugten-erklarungen/1790976#m1790976 Matthias Scharwies mscharwies@selfhtml.org 2021-08-22T08:38:18Z 2021-08-22T08:38:18Z CSS-Garten mit (eingefügten) Erklärungen <p>Servus!</p> <blockquote> <p>@@Matthias Scharwies</p> <blockquote> <ol start="3"> <li><strong>???</strong> - gibt es einen besseren Ansatz?</li> </ol> </blockquote> <p>Da das Stylesheets mit JavaScript umgeschaltet wird, kann auch die jeweilige Erklärung dazu mit JavaScript umgeschaltet werden.</p> <p>Das lässt sich auf verschiedene Weisen implementieren:</p> <ul> <li> <p>Die Erklärungen stehen mit in styleswitcher.js.</p> </li> <li> <p>Die Erklärungen stehen in einer JSON-Datei oder jede in ihrer eigenen.</p> </li> </ul> </blockquote> <p>Ja, da hatt' ich auch schon dran gedacht!</p> <blockquote> <ul> <li>Die Erklärungen stehen in den jeweiligen Stylesheets. Diese sind keine CSS-Dateien, sondern HTML-Fragmente mit <code>style</code>-Elementen, die dann beim Wechsel ins DOM gehangen werden. (<code>style</code> darf ja auch im <code>body</code> stehen.)</li> </ul> </blockquote> <p>Ah, da hatt ich überhaupt nicht dran gedacht! Vielen Dank! Mal schauen, ob ich das so umsetzen kann!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/aug/22/css-garten-mit-eingefugten-erklarungen/1790977#m1790977 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-08-22T08:38:23Z 2021-08-22T08:39:30Z CSS-Garten mit (eingefügten) Erklärungen <p>@@Gunnar Bittersmann</p> <blockquote> <ul> <li>Die Erklärungen stehen in den jeweiligen Stylesheets. Diese sind keine CSS-Dateien, sondern HTML-Fragmente mit <code>style</code>-Elementen, die dann beim Wechsel ins DOM gehangen werden. (<code>style</code> darf ja auch im <code>body</code> stehen.)</li> </ul> </blockquote> <ul> <li>Es sind doch CSS-Dateien. Die Erklärungen stehen jeweils in einer <em>custom property</em> (mit Markup oder Markdown) und werden per JavaScript daraus ins DOM gehangen.</li> </ul> <p> LLAP</p> <div class="signature">-- <br> <em>„Guten Tag, mein Name ist Karl-Heinz. Ich will mich nicht impfen lassen und erwarte, dass die Solidargemeinschaft, die wegen Leuten wie mir weniger Freiheit hat, meine Tests weiter finanziert. Und das nenne ich dann Eigenverantwortung.“</em><br> — @Hoellenaufsicht </div> https://forum.selfhtml.org/self/2021/aug/22/css-garten-mit-eingefugten-erklarungen/1790978#m1790978 Matthias Scharwies mscharwies@selfhtml.org 2021-08-22T08:40:48Z 2021-08-22T08:40:48Z CSS-Garten mit (eingefügten) Erklärungen <p>Servus!</p> <blockquote> <p>@@Gunnar Bittersmann</p> <blockquote> <ul> <li>Die Erklärungen stehen in den jeweiligen Stylesheets. Diese sind keine CSS-Dateien, sondern HTML-Fragmente mit <code>style</code>-Elementen, die dann beim Wechsel ins DOM gehangen werden. (<code>style</code> darf ja auch im <code>body</code> stehen.)</li> </ul> </blockquote> <ul> <li>Es sind doch CSS-Datein. Die Erklärungen stehen jeweils in einer <em>custom proterty</em> (mit Markup oder Markdown) und werden per JavaScript daraus ins DOM gehangen.</li> </ul> </blockquote> <p>Noch cooler! Hatte die ganze Zeit überlegt, wie man Inhalt in einem Stylesheet notieren könnte und bin über das unsägliche <code>content="...";</code> nicht hinausgekommen.</p> <p>Vielen Dank!</p> <p>Ich glaube, dass es besser ist, ein Stylesheet als CSS einzubinden anstelle es als HTML-Fragment, bzw. Template einzuhängen!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/aug/22/css-garten-mit-eingefugten-erklarungen/1790992#m1790992 Matthias Scharwies mscharwies@selfhtml.org 2021-08-23T04:53:56Z 2021-08-23T04:53:56Z CSS-Garten mit (eingefügten) Erklärungen <p>Servus!</p> <blockquote> <p>Hi,</p> <blockquote> <p>Jedes Stylesheet soll nun eine Erklärung (1 Überschrift, 1-2 Absätze) bekommen.</p> <ol start="2"> <li>Inhalt ins Stylesheet schreiben (Bäh) und dann in Pseudoelement sichtbar machen (Bäh, bäh <a href="https://accessibleweb.com/question-answer/how-is-css-pseudo-content-treated-by-screen-readers/" rel="nofollow noopener noreferrer">How is CSS pseudo content treated by screen readers?</a>).</li> </ol> </blockquote> <p>Ist das in <strong>diesem</strong> Fall wirklich so bäh?</p> <p>Nutzen Leute, die auf Screenreader angewiesen sind, einen auf der Seite angebotenen Style-Switcher überhaupt?</p> </blockquote> <p>Mit großer Wahrscheinlichkeit nicht. Da hast du Recht.</p> <p><strong>Aber</strong> hier geht es eben um die <a href="https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts" rel="nofollow noopener noreferrer"><strong>fertigen Layouts</strong></a>, die als Musterbeispiele <em>best practices</em> vorzeigen sollen.</p> <p>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.</p> <p>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 <a href="https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts/CSS-Garten" rel="nofollow noopener noreferrer">CSS/fertige_Layouts/CSS-Garten</a> mit mehreren Themes anzubieten.</p> <p>Jetzt möchte ich eine <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Single-Page_Webseite" rel="nofollow noopener noreferrer">Single-Page-Webseite</a> vorstellen, bei dem man nicht nur umschalten kann, sondern zu jedem Theme eine kurze Erläuterung der Besonderheiten erhält.</p> <p>Im Wiki sieht das z.B. so aus: <a href="https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts/CSS-Garten#Besonderheiten" rel="nofollow noopener noreferrer">CSS/fertige_Layouts/CSS-Garten#Besonderheiten</a></p> <p>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.</p> <p>Deshalb fragte ich danach, wie man den Spagat Inhalt im Stylesheet zu haben mit der Trennung der Zuständigkeiten in Einklang bringen kann.</p> <p>Das dauert noch, ich hoffe aber bis Jahresende etwas vorzeigen zu können.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div>