tag:forum.selfhtml.org,2005:/selfCSS-Garten mit (eingefügten) Erklärungen – SELFHTML-Forum2021-08-23T04:53:56Zhttps://forum.selfhtml.org/self/2021/aug/22/css-garten-mit-eingefugten-erklarungen/1790973#m1790973Matthias Scharwiesmscharwies@selfhtml.org2021-08-22T08:07:11Z2021-08-22T08:27:54ZCSS-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#m1790975Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2021-08-22T08:32:47Z2021-08-22T08:32:47ZCSS-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#m1790990MudGuardhttp://www.andreas-waechter.de/2021-08-22T19:05:19Z2021-08-22T19:05:19ZCSS-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#m1790976Matthias Scharwiesmscharwies@selfhtml.org2021-08-22T08:38:18Z2021-08-22T08:38:18ZCSS-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#m1790977Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2021-08-22T08:38:23Z2021-08-22T08:39:30ZCSS-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#m1790978Matthias Scharwiesmscharwies@selfhtml.org2021-08-22T08:40:48Z2021-08-22T08:40:48ZCSS-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#m1790992Matthias Scharwiesmscharwies@selfhtml.org2021-08-23T04:53:56Z2021-08-23T04:53:56ZCSS-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>