<li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sat, 08 Sep 18 09:45:45 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731444#m1731444 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731444#m1731444 <p>Problem: Ich möchte den Default-Bullet vor den <li> einer <ul> durch einen Pfeil ersetzen.</p> <p><a href="/images/4b509e59-457e-4819-9880-053308eb3e36.jpg" rel="noopener noreferrer"><img src="/images/4b509e59-457e-4819-9880-053308eb3e36.jpg?size=medium" alt="" loading="lazy"></a></p> <p>Das Problem scheint nicht ganz trivial zu sein. Pfeil als "::before"... geht nicht, Manuelles Einrücken der 2. Zeile müsste man mit Verzicht auf den automatischen Textumbruch erkaufen.</p> <p>Ich habe mich bisher mit einer Tabelle mit einer 'Pfeilspalte' und einer 'Textspalte' statt einer <ul> beholfen …</p> <p>Weiss jemand eine Lösung mit <ul>?</p> <p>Herzlichen Dank!</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sat, 08 Sep 18 10:25:06 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731446#m1731446 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731446#m1731446 <p>hallo</p> <blockquote> <p>Problem: Ich möchte den Default-Bullet vor den <li> einer <ul> durch einen Pfeil ersetzen.</p> <p><a href="/images/4b509e59-457e-4819-9880-053308eb3e36.jpg" rel="noopener noreferrer"><img src="/images/4b509e59-457e-4819-9880-053308eb3e36.jpg?size=medium" alt="" loading="lazy"></a></p> <p>Das Problem scheint nicht ganz trivial zu sein. Pfeil als "::before"... geht nicht,</p> </blockquote> <p>Komisch, bei mir geht's ;)</p> <p>hast du <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Listen_mit_CSS_gestalten" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Tutorials/Listen_mit_CSS_gestalten</a> zur Kenntnis genommen?</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sat, 08 Sep 18 10:32:35 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731447#m1731447 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731447#m1731447 <p>Hallo Bruno,</p> <p>das mit dem ::before geht prinzipiell schon. Mit einem Unicode-Pfeil:</p> <pre><code class="block language-css"><span class="token selector">ul</span> <span class="token punctuation">{</span> <span class="token property">padding-left</span><span class="token punctuation">:</span> 3em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li::before</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"➞"</span><span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> -1em<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Das Problem ist, dass die meisten Pfeile zu hoch sind. Sind sie im <li> mit drin, wird es höher. Zieht man sie aus dem <li> heraus in ein ::before, stimmt die Ausrichtung nicht.</p> <p>Du könntest einen Workaround mit Hilfe der text-indent Eigenschaft ausprobieren. Die kennt negative Werte und funktioniert sogar im IE11. Du musst den Pfeil dann nur in einen span setzen und dem ein display:inline-block verpassen.</p> <p>Also so:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>➞<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>Eins<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>➞<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>Eine lange Geschichte, das mit der Nummer zwei. Sie dauert und dauert und hat soviel Sinn wie ein Eiswürfel am Nordpol.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-css"><span class="token selector">ul</span> <span class="token punctuation">{</span> <span class="token property">padding-left</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li</span> <span class="token punctuation">{</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li span</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">text-indent</span><span class="token punctuation">:</span> -1.5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Ob das andere Nachteile hat, kann ich gerade nicht erkennen.</p> <p>Es ist aber ein Workaround. Die richtige Lösung kommt erst noch und erlaubt die Angabe eines freien Listensymbols im CSS. Das kennt derzeit aber nur der Fuchs.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sat, 08 Sep 18 12:56:10 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731456#m1731456 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731456#m1731456 <p>@@Bruno Thomann</p> <blockquote> <p>Weiss jemand eine Lösung mit <ul>?</p> </blockquote> <p>Die Spec sieht vor, anstatt des Bulletzeichen auch Text verwenden zu können:</p> <pre><code class="block language-css"><span class="token selector">ul</span> <span class="token punctuation">{</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> <span class="token string">'→ '</span> <span class="token punctuation">}</span> </code></pre> <p>Im Firefox ist es implementiert, anderswo Fehlanzeige. [<a href="https://developer.mozilla.org/de/docs/Web/CSS/list-style-type#Browserkompatibilit%C3%A4t" rel="nofollow noopener noreferrer">MDN</a>]</p> <p>Man kann auch ein Bild verwenden, das funktioniert browserübergreifend. Im Beispiel ein SVG als data-URL:</p> <pre><code class="block language-css"><span class="token selector">ul</span> <span class="token punctuation">{</span> <span class="token property">list-style-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20448%20512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m190.5%2066.9%2022.2-22.2c9.4-9.4%2024.6-9.4%2033.9%200l194.4%20194.3c9.4%209.4%209.4%2024.6%200%2033.9l-194.4%20194.4c-9.4%209.4-24.6%209.4-33.9%200l-22.2-22.2c-9.5-9.5-9.3-25%20.4-34.3l120.5-114.8h-287.4c-13.3%200-24-10.7-24-24v-32c0-13.3%2010.7-24%2024-24h287.4l-120.5-114.8c-9.8-9.3-10-24.8-.4-34.3z%22%2F%3E%3C%2Fsvg%3E'</span><span class="token punctuation">)</span></span> <span class="token punctuation">}</span> </code></pre> <p>Pfeil von: Font Awesome Free 5.2.0 by @fontawesome - <a href="https://fontawesome.com" rel="nofollow noopener noreferrer">https://fontawesome.com</a><br> License - <a href="https://fontawesome.com/license" rel="nofollow noopener noreferrer">https://fontawesome.com/license</a> (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)</p> <p>Die von Rolf gezeigte Möglichkeit ist aufwendig. Und auch eher ein Hack als eine Lösung.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sun, 09 Sep 18 14:03:38 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731501#m1731501 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731501#m1731501 <p>Danke an alle, die sich mit meinem Problem beschäftigen! Habe offensichtlich eine Mini-Lawine losgetreten, die sich in fundamentalere Gefilde zu bewegen scheint. Gefällt mir an sich, und das kommt in meiner Branche fast noch häufiger vor … Dennoch benötige ich jetzt eine kleine Bilanz. Wenn ich alles richtig verstanden haben, gibt es (aktuell) zwei Wege: (a) Rolf und sein 'Hack' (falls das einer wäre, wäre das eigentlich 'schlimm'?), relativ aufwendig, funktioniert aber. (b) Gunnar und sein SVG als Bullet-Ersatz. Strukturell einfacher und elegant, aber - wie mir scheint - mit einem noch immer ungelösten Problem, was die zu wählende Hintergrundfarbe des Pfeils innerhalb der Grafik betrifft (z.B. bei einem Farbverlauf im <body> …)</p> <p>Daher also doch: ::before und Co. und warten, bis man den Bullet 'offiziell' frei ersetzen darf?</p> <p>Nochmals Dank und noch schöner Sonntagabend.</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sat, 08 Sep 18 10:56:54 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731448#m1731448 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731448#m1731448 <p>Danke Beat Habe natürlich als erstes wiki konsultiert. Die von Rolf (s.u.) angegebene Lösung ist dort allerdings nicht aufgeführt … Schönes Wochenende! Gruss Bruno</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sat, 08 Sep 18 11:10:06 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731449#m1731449 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731449#m1731449 <p>Herzlichen Dank, Rolf, für die ausführliche, ausgezeichnete und v.a. rasche Antwort! Schon die erste Version funktioniert tadellos. Von den Pfeilen geht der von Dir vorgeschlagene am besten. Ich habe es gar nicht mit Positionierungen und 'Content' versucht. Und Du hast sicher Recht. Da müsste mal etwas einfacheres kommen, die Frage stellen sich ja sicher viele. Und dass im CSS via Content Inhalte platziert werden statt im HTML, ist ja eigentlich unschön. Kann man eigentlich einen solchen Content auf einfache Weise einfärben, z.B. rot? Oder macht man zuerst die ganze Liste rot und die Listenelemente danach schwarz?</p> <p>Nochmals herzlichen Dank! Bin immer wieder erfreut zu sehen, wie vorbehaltlos so viele 'Freiwilligenarbeit' für uns Gelegenheitsprogrammierer geleistet wird …</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sat, 08 Sep 18 11:24:33 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731450#m1731450 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731450#m1731450 <p>Hallo Bruno,</p> <p>Du kannst dem ::before-Element eigentlich alle CSS Eigenschaften verpassen, die Du möchtest. Nicht alle sind sinnvoll, das ergibt sich dann aber von selbst. Z.B. wäre display:table Unfug, ein ::before::before würde auch nicht funktionieren.</p> <p>color:red ist kein Problem. Farbverläufe als Background, Animationen, Schrift, Größe, Rahmen, geht alles.</p> <blockquote> <p>Und dass im CSS via Content Inhalte platziert werden statt im HTML, ist ja eigentlich unschön.</p> </blockquote> <p>Das kommt drauf an, danke dass Du das ansprichst. Inhalte gehören ins HTML. Aber diese Pfeile sind kein Inhalt (im Sinne von: Das vermittelt dem Leser Information), sondern Dekoration, und gehören deshalb ins CSS. D.h. die ::before-Lösung ist formal richtig, mit Formatierungsproblemen die ich nicht hinreichend universell gelöst bekommen habe. Für einen bestimmten Font könnte man die Pfeile wohl noch passend hinschieben, aber das kann man ja nicht voraussetzen.</p> <p>Der Span-Workaround mit text-indent ist vom Prinzip her FALSCH! Eigentlich müsste der span noch ein aria-hidden="true" bekommen, damit ein Screen-Reader den Pfeil nicht vorzulesen versucht.</p> <p>Eine bessere Lösung wäre vielleicht ein ::before mit leerem Content und einer gegebenen Breite, in der ein SVG-Pfeil steckt. Aber auch bei dem hat man das Problem, ihn sauber an der mittleren Orientierungslinie des für li verwendeten Font auszurichten.</p> <p>Vielleicht hat ja einer der CSS Wizards hier noch eine bessere Idee (ein Teil davon sitzt gerade in Dortmund in der Mitgliederversammlung).</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Wed, 12 Sep 18 04:42:46 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731635#m1731635 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731635#m1731635 <p>Hej Bruno,</p> <blockquote> <p>Herzlichen Dank, Rolf, für die ausführliche, ausgezeichnete und v.a. rasche Antwort!</p> </blockquote> <p>Schön, dass Rolf Dein Problem so schnell lösen konnte. Manchmal lässt sich ein Problem auch nicht so rasch oder gar nicht lösen. Daher wäre es nett, wenn du die hilfreiche Antwort als Lösung akzeptieren würdest (gibt dafür einen Button). Dann haben es andere mit einem ähnlichen Problem leichter die Antwort mit der Lösung zu finden. Auch du, wenn du die noch mal nachschlagen möchtest. </p> <p>Marc</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sat, 08 Sep 18 12:00:10 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731452#m1731452 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731452#m1731452 <p>Nochmals vielen Dank! Natürlich, man muss dem ::before-Element die Farbe mitgeben, nicht dem content … Dann: Die Pfeile in einem Content als Hinweis, nicht als Inhalt, leuchtet ein, nur: Das ist eigentlich eine 'stillschweigende' (durchaus sinnvolle) Verabredung der Nutzer, oder? Zwischen die beiden " " kann ich ja auch die Bibel hineinschreiben, wenn ich wollte, oder zumindest einen wiederkehrenden Text. Schönes Wochenende! Bruno</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sat, 08 Sep 18 12:12:46 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731453#m1731453 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731453#m1731453 <p>hallo</p> <blockquote> <p>Hallo Bruno,</p> <p>Du kannst dem ::before-Element eigentlich alle CSS Eigenschaften verpassen, die Du möchtest. Nicht alle sind sinnvoll, das ergibt sich dann aber von selbst. Z.B. wäre display:table Unfug, ein ::before::before würde auch nicht funktionieren.</p> </blockquote> <p>es wurde mal ein ::before(2) vorgeschlagen.</p> <blockquote> <p>Eine bessere Lösung wäre vielleicht ein ::before mit leerem Content und einer gegebenen Breite, in der ein SVG-Pfeil steckt. Aber auch bei dem hat man das Problem, ihn sauber an der mittleren Orientierungslinie des für li verwendeten Font auszurichten.</p> </blockquote> <p>Es ist möglich:</p> <p><a href="https://beat-stoecklin.ch/pub/website_iconsets.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/website_iconsets.html</a></p> <p>Dateien dürfen frei benutzt werden.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sat, 08 Sep 18 13:46:23 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731458#m1731458 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731458#m1731458 <p>Danke, Gunnar, für Deinen Alternativvorschlag. An ein list-style-image habe ich auch zuerst gedacht. Ich habe auch in einem anderen Projekt schon mal einen Pfeil.jpg selbst gemalt und verwendet, weil ich nie von einer externen Quelle abhängig sein möchte. Natürlich fällt damit alles mit ::before und positions weg, dafür bezahle ich mit zwei Nachteilen, wenn ich das richtig sehe: (1) Hintergrundfarbe des Pfeils bei Änderung der Seitenhintergrundfarbe (2) Verpixelung des Pfeils, wenn der Nutzer die Schriftgrösse vergrössert. Ich denke, man muss abwägen … Auch Dir ein schönes Wochenende! Bruno</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sat, 08 Sep 18 19:10:53 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731469#m1731469 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731469#m1731469 <p>Hallo Gunnar,</p> <p>ich habe jetzt keine Lust, fontawesome zu studieren, um herauszufinden wie man von dort eine SVG Datei bekommt. Muss man da eine bezahltes Konto haben?</p> <p>Und mein SVG ist wohl auch zu schwach belegt. Ich habe die URL mal in Chromes Adresszeile eingefügt und mir dann im Debugger das SVG Element angeschaut.</p> <pre><code class="block"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <path d="m190.5 66.9 22.2-22.2c9.4-9.4 24.6-9.4 33.9 0l194.4 194.3c9.4 9.4 9.4 24.6 0 33.9l-194.4 194.4c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3l120.5-114.8h-287.4c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4l-120.5-114.8c-9.8-9.3-10-24.8-.4-34.3z"/> </svg> </code></pre> <p>m190.5 66.9 - das verstehe ich noch. Ein relativer Move mit dx=190.5, dy=66.9. Aber was passiert dann? Es müsste ein neuer Path-Befehl kommen. Statt dessen kommt eine Art Subtraktion (die 0 ergibt) und dann erst ein Cubic-Befehl (c). Der braucht 3 Koordinatenpaare, durch Komma getrennt. Kommas sind keine zu sehen. Statt dessen wieder negative Zahlen, die ohne Space an anderen Zahlen dranhängen. Was ist das?</p> <p>Und die zweite Frage: Wenn der Pfeil zu klein ist, wie skaliert man ihn?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Optimizing SVGs in data URIs Mon, 08 Oct 18 12:27:55 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1733779#m1733779 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1733779#m1733779 <p>@@Gunnar Bittersmann</p> <blockquote> <p>… ein SVG als data-URL:</p> </blockquote> <p>Und wenn man außen doppelte und innen einfache Anführungszeichen verwendet, muss man weniger escapen. Leerzeichen nicht, was den Quellcode deutlich lesbarer macht.</p> <p><a href="https://codepen.io/tigt/post/optimizing-svgs-in-data-uris" lang="en" rel="noopener noreferrer">Optimizing SVGs in data URIs</a> (Taylor Hunt)</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sat, 08 Sep 18 18:15:21 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731467#m1731467 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731467#m1731467 <p>Hi,</p> <blockquote> <p>Danke, Gunnar, für Deinen Alternativvorschlag. An ein list-style-image habe ich auch zuerst gedacht. Ich habe auch in einem anderen Projekt schon mal einen Pfeil.jpg selbst gemalt und verwendet, weil ich nie von einer externen Quelle abhängig sein möchte. Natürlich fällt damit alles mit ::before und positions weg, dafür bezahle ich mit zwei Nachteilen, wenn ich das richtig sehe: (1) Hintergrundfarbe des Pfeils bei Änderung der Seitenhintergrundfarbe (2) Verpixelung des Pfeils, wenn der Nutzer die Schriftgrösse vergrössert.</p> </blockquote> <p>Es hatte schon seinen Grund, daß Gunnar eine svg-Graphik verwendet hat, nicht ein jpeg.</p> <p>cu,<br> Andreas a/k/a MudGuard</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sun, 09 Sep 18 05:28:23 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731478#m1731478 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731478#m1731478 <p>@@Bruno Thomann</p> <blockquote> <p>Danke, Gunnar, für Deinen Alternativvorschlag. An ein list-style-image habe ich auch zuerst gedacht. Ich habe auch in einem anderen Projekt schon mal einen Pfeil.jpg selbst gemalt und verwendet, weil ich nie von einer externen Quelle abhängig sein möchte. Natürlich fällt damit alles mit ::before und positions weg, dafür bezahle ich mit zwei Nachteilen, wenn ich das richtig sehe: (1) Hintergrundfarbe des Pfeils bei Änderung der Seitenhintergrundfarbe (2) Verpixelung des Pfeils, wenn der Nutzer die Schriftgrösse vergrössert.</p> </blockquote> <p>Das zweite Problem löst sich bei Vektorgrafiken (SVG) in Luft auf. Der Pfeil skaliert mit der Schriftgröße und ist immer scharf.</p> <p>In meinem naiven Glauben hatte ich gedacht, der Pfeil würde auch die Textfarbe annehmen. Dem ist aber nicht so; ein als Bild eingebundenes SVG lässt sich nicht von außen mit CSS stylen, auch <code>fill="currentColor"</code> beeindruckt das SVG nicht – alle Pfeile schwarz.</p> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/jvaJxE" rel="noopener noreferrer">Beispiel</a></p> <p>Und Firefox scheint hier einen Bug zu haben: Mal sind die Pfeile zu sehen, dann wieder nicht …</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sat, 08 Sep 18 19:21:43 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731471#m1731471 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731471#m1731471 <p>hallo</p> <p>etwas besser formatiert</p> <pre><code class="block">m190.5 66.9 l 22.2-22.2 // l ergänzt c 9.4 -9.4 24.6 -9.4 33.9 0 l 194.4 194.3 c 9.4 9.4 9.4 24.6 0 33.9 l-194.4 194.4 c-9.4 9.4 -24.6 9.4 -33.9 0 l -22.2 -22.2 c-9.5 -9.5 -9.3 -25 .4 -34.3 l 120.5-114.8 h-287.4 c-13.3 0-24-10.7-24-24 v-32 c 0 -13.3 10.7 -24 24 -24 h 287.4 l-120.5 -114.8 c-9.8 -9.3 -10 -24.8 -.4 -34.3 z </code></pre> <blockquote> <p>Und die zweite Frage: Wenn der Pfeil zu klein ist, wie skaliert man ihn?</p> </blockquote> <p>transform="scale(n,x0,y0)"</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> Font-Awesome-Icons als SVG Tue, 11 Sep 18 06:26:08 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731553#m1731553 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731553#m1731553 <p>@@Rolf B</p> <blockquote> <p>ich habe jetzt keine Lust, fontawesome zu studieren, um herauszufinden wie man von dort eine SVG Datei bekommt. Muss man da eine bezahltes Konto haben?</p> </blockquote> <p>Nein.</p> <p><a href="https://fontawesome.com/" rel="nofollow noopener noreferrer">Font Awesome</a> > <a href="https://fontawesome.com/free" rel="nofollow noopener noreferrer">Free</a> > <a href="https://github.com/FortAwesome/Font-Awesome" rel="noopener noreferrer">Github</a> > <a href="https://github.com/FortAwesome/Font-Awesome/tree/master/advanced-options" rel="noopener noreferrer">advanced-options</a></p> <p>Unter <a href="https://github.com/FortAwesome/Font-Awesome/tree/master/advanced-options/raw-svg" rel="noopener noreferrer">raw-svg</a> findest du die Icons als einzelne SVGs. Die kannst du zu einer Sammlung zusammenstellen, indem du <code><svg></code> in <code><symbol></code> änderst.</p> <p>Unter <a href="https://github.com/FortAwesome/Font-Awesome/tree/master/advanced-options/svg-sprites" rel="noopener noreferrer">svg-sprites</a> findest du fertige Sammlungen. Die haben aber ihre Dateigröße – da bietet sich auch an, nur diejenigen Icons herauszupicken, die man wirklich verwendet.</p> <p></p> <blockquote> <p>Und die zweite Frage: Wenn der Pfeil zu klein ist, wie skaliert man ihn?</p> </blockquote> <p><a href="https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731524#m1731524" rel="noopener noreferrer">So (in Safari).</a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sat, 08 Sep 18 19:24:22 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731472#m1731472 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731472#m1731472 <p>Hallo beatovich,</p> <p>transform - aua. danke.</p> <p>Ist l optional? Ist das Space vor einem Minus optional? Wusste ich bisher nicht.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> SVG skalieren Wed, 12 Sep 18 03:24:30 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731630#m1731630 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731630#m1731630 <p>Servus!</p> <blockquote> <blockquote> <p>Und die zweite Frage: Wenn der Pfeil zu klein ist, wie skaliert man ihn?</p> </blockquote> <p>transform="scale(n,x0,y0)"</p> </blockquote> <p>Du kannst aber neben Transform (da gibt's sowohl was bei SVG: <a href="https://wiki.selfhtml.org/wiki/SVG/Transformationen" rel="nofollow noopener noreferrer">SVG/Transformationen</a> als auch bei CSS: <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/%C3%A4u%C3%9Fere_Gestaltung/Transformationen" rel="nofollow noopener noreferrer">CSS/Eigenschaften/äußere Gestaltung/Transformationen</a> auch die <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_in_responsiven_Webseiten#viewBox" rel="nofollow noopener noreferrer">viewBox</a> verändern:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/Grundformen" rel="nofollow noopener noreferrer">SVG/Tutorials/Einstieg/Grundformen</a></li> </ul> <p>Hier wird eine 3x2 Pixel (besser: <em>unitless numbers</em>) große Grafik auf jede gewünschte Größe skaliert.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> <em>"Survive or die trying!"</em> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sat, 08 Sep 18 19:34:16 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731473#m1731473 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731473#m1731473 <p>hallo</p> <blockquote> <p>Hallo beatovich,</p> <p>transform - aua. danke.</p> <p>Ist l optional? Ist das Space vor einem Minus optional? Wusste ich bisher nicht.</p> </blockquote> <p>SVG beschreibt die Syntax Regeln, hab die Site aber nicht parat. Diese enthält einige Shorthand Regeln die einen Pfad unverständlich machen können.</p> <p>eine Serie von lineto Folgen kann man etwa so schreiben.</p> <p>l 10,2 -5,3 4,-5</p> <p>Ich setze immer ein Komma zwischen x und y Komponenten.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sun, 09 Sep 18 06:04:19 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731479#m1731479 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731479#m1731479 <p>@@Rolf B</p> <p><a href="https://www.w3.org/TR/SVG2/paths.html#PathData" rel="nofollow noopener noreferrer">§9.3 Path data</a> in [SVG 2] und <a href="https://www.w3.org/TR/SVG11/paths.html#PathData" rel="nofollow noopener noreferrer">§8.3 Path data</a> in [SVG 1.1] ist nun nicht so schwer zu finden.</p> <blockquote> <p>Ist l optional?</p> </blockquote> <p>In der Grammatik <a href="https://www.w3.org/TR/SVG2/paths.html#PathDataBNF" rel="nofollow noopener noreferrer">SVG 2 §9.3.9</a> bzw. <a href="https://www.w3.org/TR/SVG11/paths.html#PathDataBNF" rel="nofollow noopener noreferrer">SVG 1.1 §8.3.9</a>:</p> <pre><code class="block">moveto: ( "M" | "m" ) wsp* moveto-argument-sequence moveto-argument-sequence: coordinate-pair | coordinate-pair comma-wsp? lineto-argument-sequence </code></pre> <p>Also: ja. (Dass <code>lineto-argument-sequence</code> dann als <code>l</code> und nicht als <code>L</code> gewertet wird, steht sicher auch noch irgendwo geschrieben.)</p> <blockquote> <p>Ist das Space vor einem Minus optional?</p> </blockquote> <p><em lang="en">“The processing of the BNF must consume as much of a given BNF production as possible, stopping at the point when a character is encountered which no longer satisfies the production. Thus, in the string "M 100-200", the first coordinate for the "moveto" consumes the characters "100" and stops upon encountering the minus sign because the minus sign cannot follow a digit in the production of a "coordinate". The result is that the first coordinate will be "100" and the second coordinate will be "-200".”</em></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sun, 09 Sep 18 12:18:48 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731499#m1731499 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731499#m1731499 <p>@@Gunnar Bittersmann</p> <blockquote> <p>Und Firefox scheint hier einen Bug zu haben: Mal sind die Pfeile zu sehen, dann wieder nicht …</p> </blockquote> <p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1489849" rel="nofollow noopener noreferrer">Bug-Ticket</a> erstellt.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sun, 09 Sep 18 11:58:19 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731498#m1731498 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731498#m1731498 <p>@@Gunnar Bittersmann</p> <blockquote> <p>In der Grammatik <a href="https://www.w3.org/TR/SVG2/paths.html#PathDataBNF" rel="nofollow noopener noreferrer">SVG 2 §9.3.9</a> bzw. <a href="https://www.w3.org/TR/SVG11/paths.html#PathDataBNF" rel="nofollow noopener noreferrer">SVG 1.1 §8.3.9</a>:</p> <pre><code class="block">moveto: ( "M" | "m" ) wsp* moveto-argument-sequence moveto-argument-sequence: coordinate-pair | coordinate-pair comma-wsp? lineto-argument-sequence </code></pre> </blockquote> <p>Das war aus [SVG 1.1]; in [SVG 2] steht’s etwas anders, kommt aber letzendlich auf das Gleiche hinaus.</p> <blockquote> <p>Also: ja. (Dass <code>lineto-argument-sequence</code> dann als <code>l</code> und nicht als <code>L</code> gewertet wird, steht sicher auch noch irgendwo geschrieben.)</p> </blockquote> <p>Da ha’m wa’s ja: <em lang="en">“If a moveto is followed by multiple pairs of coordinates, the subsequent pairs are treated as implicit lineto commands. Hence, implicit lineto commands will be relative if the moveto is relative, and absolute if the moveto is absolute.”</em></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Sun, 09 Sep 18 13:16:08 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731500#m1731500 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731500#m1731500 <p>Hallo Gunnar,</p> <p>hmpf, wenn man es weiß, findet man das sogar im <a href="https://wiki.selfhtml.org/wiki/SVG/Elemente/Pfade" rel="nofollow noopener noreferrer">Self Wiki</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Mon, 10 Sep 18 07:28:26 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731518#m1731518 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731518#m1731518 <p>Hallo Bruno,</p> <p>die Hintergrundfarbe ist nicht das Problem, weil das SVG transparent ist.</p> <p>die Vordergrundfarbe schaffe ich dagegen nicht zu setzen. Die Object URL scheint wie ein externes SVG behandelt zu werden, und das kann man nicht stylen.</p> <p>Das Thema Größe ist mir trotz des Hinweises auf Transform auch immer noch unklar. Wie transformiere ich ein list-style-image?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Mon, 10 Sep 18 08:03:25 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731522#m1731522 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731522#m1731522 <p>@@Bruno Thomann</p> <blockquote> <p>(a) Rolf und sein 'Hack' (falls das einer wäre, wäre das eigentlich 'schlimm'?), relativ aufwendig, funktioniert aber.</p> </blockquote> <p>Wenn du ein Unicode-Zeichen wie ➞ als Aufzählungszeichen verwenden möchtest, bist du mit Rolfs Hack wohl gegenwärtig noch am besten dran – solange, bis Browser <code>list-style-type: <string></code> unterstützen. Für dieses Zeichen kannst du natürlich auch eine eigene Schriftart angeben.</p> <p>Wenn du ein eigenes Icon verwenden willst, dann nicht PNG oder GIF, schon gar nicht JPEG, sondern dann ist SVG Mittel der Wahl.</p> <blockquote> <p>(b) Gunnar und sein SVG als Bullet-Ersatz. Strukturell einfacher und elegant, aber - wie mir scheint - mit einem noch immer ungelösten Problem, was die zu wählende Hintergrundfarbe des Pfeils innerhalb der Grafik betrifft (z.B. bei einem Farbverlauf im <body> …)</p> </blockquote> <p>Wie Rolf schon sagte, ist der Hintergrund gar kein Problem – der ist transparent.</p> <p>Wenn du gar nichts angibst, ist die Vordergrundfarbe schwarz. <code>fill="currentColor"</code> war in meinem Beispiel zu Testzwecken drin; das bewirkt nichts, kann also weg.</p> <p>Wenn du die Aufzählungszeichen in einer anderen Farbe haben möchtest, kannst du diese im SVG angeben, statt <code>currentColor</code> bspw. <code>rebeccapurple</code> oder eine HSL-, HSB- oder RGB-Angabe.</p> <p>Problemtatisch wird’s erst, wenn das Aufzählungszeichen in verschieden Farben haben möchtest. Dann müsstest du für jede Farbe jeweils ein eigenes SVG angeben – obwohl doch die Kontur immer wieder dieselbe ist. Der Kompressionsalgorithmus holt bei der Übertragung des Stylesheets da zwar einiges raus, aber schön ist trotzdem anders.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Wed, 12 Sep 18 05:03:02 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731637#m1731637 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731637#m1731637 <p>Hej Bruno,</p> <blockquote> <p>Danke an alle, die sich mit meinem Problem beschäftigen! Habe offensichtlich eine Mini-Lawine losgetreten, die sich in fundamentalere Gefilde zu bewegen scheint.</p> </blockquote> <p>Und noch ist nciht alles bedacht </p> <p>Sorry, sehe das jetzt erst. Die Hintergrundfarbe <strong>ist</strong> ein Problem, <strong>gerade wegen</strong> der Transparenz. Was passiert denn mit einem schwarzen Pfeil auf schwarzem Hintergrund? - Eben: er wird unsichtbar. Nutzer mit Blendempfindlichkeit machen sich die Hintergründe von Webseiten dunkel.</p> <p>Grafiken verschwinden dann in zwei Fällen:</p> <ol> <li>es handelt sich um eine Hintergrundgrafik. Da diese die gewählte Hintergrundfarbe überlagern würden, werden Hintergrundgrafiken bei eigenen Farben ignoriert (also schlicht nicht angezeigt)</li> <li>Grafiken sind transparent und die eingestellte Hintergrundfarbe ist ähnlich oder identisch mit dem Symbol</li> </ol> <p>Man sollte also gerade <strong>keine</strong> Transparenz in seinen Bildern verwenden oder dafür sorgen, dass sich mit der Hintergrundfarbe auch die Farbe des Icons ändert. Das lässt sich nicht machen, aber ich gehe mal davon aus, dass jemand, der eine eigene Hintergrundfarbe verwendet, auch eine eigene Schriftfarbe verwendet. Sondern wären ja alle Texte schwarz auf schwarz und damit unsichtbar.</p> <p>Wenn er sich nun eine hellere Schriftfarbe einstellt, sollte sich die auch auf das Icon auswirken. So wird das wieder sichtbar.</p> <p>Also ist die Lösung von Rolf hier eine der besseren, trotz Hack-Charakter — anders geht es IMHO nur folgendermaßen: man könnte ein inline-SVG nehmen und im CSS mit <code>fill: currentColor;</code> sicherstellen, dass das Symbol dieselbe Farbe hat wie der Text.</p> <p>Marc</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Mon, 10 Sep 18 07:55:54 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731521#m1731521 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731521#m1731521 <p>hallo</p> <blockquote> <p>Hallo Bruno,</p> <p>die Hintergrundfarbe ist nicht das Problem, weil das SVG transparent ist.</p> <p>die Vordergrundfarbe schaffe ich dagegen nicht zu setzen. Die Object URL scheint wie ein externes SVG behandelt zu werden, und das kann man nicht stylen.</p> <p>Das Thema Größe ist mir trotz des Hinweises auf Transform auch immer noch unklar. Wie transformiere ich ein list-style-image?</p> </blockquote> <p>you don't!</p> <p>Ein list-style-image ist kein Element das du separat selektieren könntst.</p> <p>Alle Transformationen haben wenn schon im SVG zu geschehen, relativ zu der eigenen svg viewBox</p> <p>Mein eigener Versuch über</p> <p><view id="view1" viewBox="0 0 96 96"><use xlink:href="#p2"/></view></p> <p>und</p> <p>list-style-image: url("../images/gui.svg#view1");</p> <p>versagt aber kläglich (falsches Symbol), falsche Grösse.</p> <p>Fazit: unbrauchbar.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Mon, 10 Sep 18 08:08:25 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731524#m1731524 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731524#m1731524 <p>@@Rolf B</p> <blockquote> <p>Das Thema Größe ist mir trotz des Hinweises auf Transform auch immer noch unklar. Wie transformiere ich ein list-style-image?</p> </blockquote> <pre><code class="block language-css"><span class="token selector">::marker</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 3em <span class="token punctuation">}</span> </code></pre> <p>Demnächst <a href="https://caniuse.com/#search=%3A%3Amarker" rel="noopener noreferrer">vielleicht auch in Ihrem Browser</a>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Tue, 11 Sep 18 12:54:39 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731602#m1731602 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731602#m1731602 <p>Nochmals herzlichen Dank! Komisch: Ich habe das Gefühl, 'meine' Lösung mit einer Tabelle von vor 8 Jahren sei eigentlich gar nicht so schlecht gewesen … Gibt es unterdessen etwas Grundsätzliches, das dagegen spricht? Ich meine mitbekommen zu haben, dass Tabellen nicht mehr so 'in' seien, deshalb meine ursprüngliche Frage nach Listen.</p> <p>HTML</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>⭢<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Kurzer Titel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>⭢<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Ein langer Titel, braucht zwei Zeilen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>⭢<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Das ist ein ganz besonders langer Titel, braucht drei Zeilen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>⭢<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Titel mit Untertitel: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>⭢<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>kurzer Untertitel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>⭢<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>ein sehr langer Untertitel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> </code></pre> <p>CSS (Breite als Beispiel)</p> <pre><code class="block language-css"> <span class="token selector">.menu</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.menu td</span> <span class="token punctuation">{</span><span class="token property">vertical-align</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.3em<span class="token punctuation">;</span><span class="token punctuation">}</span> </code></pre> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Tue, 11 Sep 18 23:00:37 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731627#m1731627 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731627#m1731627 <p>@@Bruno Thomann</p> <blockquote> <p>Ich meine mitbekommen zu haben, dass Tabellen nicht mehr so 'in' seien</p> </blockquote> <p>Und wenn sie doch Verwendung finden sollten, dann sollten sie zumindest als Layouttabellen gekennzeichnet sein:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none presentation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>deshalb meine ursprüngliche Frage nach Listen.</p> </blockquote> <p>Wenn du vorhast, den Pfeil mit ins Markup zu bringen, kannst das auch mit Listen tun: <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span></code> anstatt <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span></code>; <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span></code> anstatt <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span></code>; <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>marker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> anstatt <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span></code>.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>marker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>→<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> Kurzer Titel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>marker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>→<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> Ein langer Titel, braucht zwei Zeilen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>marker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>→<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> Das ist ein ganz besonders langer Titel, braucht drei Zeilen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>marker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>→<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> Titel mit Untertitel: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>marker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>→<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> kurzer Untertitel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>marker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>→<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> ein sehr langer Untertitel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>Die Bullets machst du mit <code class="language-css"><span class="token selector">.menu, .menu ul</span> <span class="token punctuation">{</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none <span class="token punctuation">}</span></code> weg. Das Tabellenlayout könntest du umsetzen mit</p> <pre><code class="block language-css"><span class="token selector">.menu, .menu ul</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> table <span class="token punctuation">}</span> <span class="token selector">.menu li</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> table-row <span class="token punctuation">}</span> <span class="token selector">.marker</span> <span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span> table-cell <span class="token punctuation">}</span> </code></pre> <p>Die Pfeile sind in der Textfarbe ihres jeweiligen Listenitems, siehe <a href="https://codepen.io/gunnarbittersmann/pen/BOrxPg" rel="noopener noreferrer">Beispiel 1</a></p> <p>Wenn du vorhast, den Pfeil mit ins Markup zu bringen, dann kannst auch SVG so verwenden, <a href="https://forum.selfhtml.org/self/2018/aug/23/icon-png-mit-transperenten-hintergrund-mittels-css-faerben/1729891#m1729891" rel="noopener noreferrer">wie ich unlängt schrieb</a>: ein SVG (intern oder extern) mit <code class="language-svg"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>symbol</span><span class="token punctuation">></span></span></code>s und anstelle von <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>marker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>→<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></code> steht dann <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>use</span> <span class="token attr-name"><span class="token namespace">xlink:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#arrow-right<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code>.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>use</span> <span class="token attr-name"><span class="token namespace">xlink:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#arrow-right<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span>Kurzer Titel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>use</span> <span class="token attr-name"><span class="token namespace">xlink:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#arrow-right<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span>Ein langer Titel, braucht zwei Zeilen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>use</span> <span class="token attr-name"><span class="token namespace">xlink:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#arrow-right<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span>Das ist ein ganz besonders langer Titel, braucht drei Zeilen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>use</span> <span class="token attr-name"><span class="token namespace">xlink:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#arrow-right<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span>kurzer Untertitel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>use</span> <span class="token attr-name"><span class="token namespace">xlink:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#arrow-right<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span>ein sehr langer Untertitel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>Auch dann sind die Pfeile in der Textfarbe ihres jeweiligen Listenitems, siehe <a href="https://codepen.io/gunnarbittersmann/pen/WgzJBQ" rel="noopener noreferrer">Beispiel 2</a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 07:07:26 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731744#m1731744 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731744#m1731744 <p>Danke, Gunnar, für diese geniale Version. Hab's erst jetzt gesehen. Auf so etwas käme ich nie. Aber das ist wohl der Unterschied zwischen den Profis und uns Gelegenheitsprogrammierern …</p> <p>Noch etwas: Du hat auch ein Talent, dich in unser beschränktes Wissen und Können einzudenken und die Dinge entsprechend verständlich zu erklären. Das ist nicht immer so. Oftmals sieht man, wie eine für den 'Verzweifelten' dunkle Sache schlicht mit einer noch dunkleren erklärt wird …</p> <p>Letzte Frage, nicht dringlich, nur aus prinzipiellem Interesse: Warum sind Tabellen so in Verruf geraten, wie es scheint?</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Wed, 12 Sep 18 07:57:16 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731648#m1731648 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731648#m1731648 <p>hallo</p> <blockquote> <p>Hej Bruno,</p> <blockquote> <p>Danke an alle, die sich mit meinem Problem beschäftigen! Habe offensichtlich eine Mini-Lawine losgetreten, die sich in fundamentalere Gefilde zu bewegen scheint.</p> </blockquote> <p>Und noch ist nciht alles bedacht </p> <p>Sorry, sehe das jetzt erst. Die Hintergrundfarbe <strong>ist</strong> ein Problem, <strong>gerade wegen</strong> der Transparenz. Was passiert denn mit einem schwarzen Pfeil auf schwarzem Hintergrund? - Eben: er wird unsichtbar. Nutzer mit Blendempfindlichkeit machen sich die Hintergründe von Webseiten dunkel.</p> </blockquote> <p>Hast du das mal schwarz auf weiss?</p> <p>Es wäre nämlich ein ziemlich disparates Unternehmen, Farb-Sichtprobleme dadurch zu lösen, dass man einzelne Componenten einer Website manipuliert.</p> <p>Aber die Essenz deines Einwands ist: Wann immer man eine Vordergrundfarbe definiert, soll man auch den Hintergrund kontrollieren. Das ist kein Argument gegen transparente Hintergründe, solange man den übergeordneten Hintergrund kontrolliert.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Wed, 12 Sep 18 16:16:08 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731702#m1731702 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731702#m1731702 <p>Hej beatovich,</p> <blockquote> <p>hallo</p> <blockquote> <p>Hej Bruno,</p> <blockquote> <p>Danke an alle, die sich mit meinem Problem beschäftigen! Habe offensichtlich eine Mini-Lawine losgetreten, die sich in fundamentalere Gefilde zu bewegen scheint.</p> </blockquote> <p>Und noch ist nciht alles bedacht </p> <p>Sorry, sehe das jetzt erst. Die Hintergrundfarbe <strong>ist</strong> ein Problem, <strong>gerade wegen</strong> der Transparenz. Was passiert denn mit einem schwarzen Pfeil auf schwarzem Hintergrund? - Eben: er wird unsichtbar. Nutzer mit Blendempfindlichkeit machen sich die Hintergründe von Webseiten dunkel.</p> </blockquote> <p>Hast du das mal schwarz auf weiss?</p> </blockquote> <p>Du meinst als <a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=148#visual-presentation" rel="nofollow noopener noreferrer">Link</a>?</p> <blockquote> <p>Es wäre nämlich ein ziemlich disparates Unternehmen, Farb-Sichtprobleme dadurch zu lösen, dass man einzelne Componenten einer Website manipuliert.</p> </blockquote> <p>Ist dennoch recht weit verbreitet Hintergrund und Schriftfarbe anzupassen. Ist schließlich eine der einfachsten Anpassungen, da Browser so was von haus aus anbieten.</p> <blockquote> <p>Aber die Essenz deines Einwands ist: Wann immer man eine Vordergrundfarbe definiert, soll man auch den Hintergrund kontrollieren. Das ist kein Argument gegen transparente Hintergründe, solange man den übergeordneten Hintergrund kontrolliert.</p> </blockquote> <p>Du meinst damit den dahinterliegenden? Dem Argument liegt die irrige Annahme zugrunde, dass ein Autoren-Stylesheet mehr ist als eine Empfehlung. Das hat was mit der Kaskade zu tun.</p> <p>Die Reihenfolge ist</p> <ol> <li>Browser-Styles</li> <li>Autoren-Styles</li> <li>Nutzer-Styles</li> </ol> <p>Je höher die Nummer, desto eher setzen sich die Angaben durch. Sonst würden Nutzer-Stylesheets nicht funktionieren (es gab mal eine Zeit, da hat !important im Autoren-Stylesheet das verhindert, aber das ist glücklicherweise Schnee von gestern).</p> <p>Marc</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Wed, 12 Sep 18 16:48:54 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731706#m1731706 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731706#m1731706 <p>@@marctrix</p> <blockquote> <p>Die Reihenfolge ist</p> <ol> <li>Browser-Styles</li> <li>Autoren-Styles</li> <li>Nutzer-Styles</li> </ol> </blockquote> <p>Nein.</p> <blockquote> <p>Je höher die Nummer, desto eher setzen sich die Angaben durch. Sonst würden Nutzer-Stylesheets nicht funktionieren (es gab mal eine Zeit, da hat !important im Autoren-Stylesheet das verhindert, aber das ist glücklicherweise Schnee von gestern).</p> </blockquote> <p>Da irrst du. Eine !important-Deklaration im Autorenstylesheet überschreibt eine normale Deklation aus dem Nutzerstylesheet.</p> <p lang="en"><a href="https://www.w3.org/TR/CSS22/cascade.html#cascading-order" lang="en" rel="nofollow noopener noreferrer">CSS 2.2 §6.4.1 Cascading order:</a></p> <ol> <li>user agent declarations</li> <li>user normal declarations</li> <li>author normal declarations</li> <li>author important declarations</li> <li>user important declarations</li> </ol> <p lang="en">In <a href="https://drafts.csswg.org/css-cascade-3/#cascade-origin" rel="nofollow noopener noreferrer">Level 3</a> ist da noch einiges hinzugekommen:</p> <ol> <li>Normal user agent declarations</li> <li>Normal user declarations</li> <li>Normal author declarations</li> <li>Animation declarations</li> <li>Important author declarations</li> <li>Important user declarations</li> <li>Important user agent declarations</li> <li>Transition declarations</li> </ol> <p>(in die vorher verwendete Reihenfolge gebracht)</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Wed, 12 Sep 18 16:52:23 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731707#m1731707 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731707#m1731707 <p>hallo</p> <blockquote> <p>Hej beatovich,</p> <blockquote> <p>hallo</p> <blockquote> <p>Hej Bruno,</p> <blockquote> <p>Danke an alle, die sich mit meinem Problem beschäftigen! Habe offensichtlich eine Mini-Lawine losgetreten, die sich in fundamentalere Gefilde zu bewegen scheint.</p> </blockquote> <p>Und noch ist nciht alles bedacht </p> <p>Sorry, sehe das jetzt erst. Die Hintergrundfarbe <strong>ist</strong> ein Problem, <strong>gerade wegen</strong> der Transparenz. Was passiert denn mit einem schwarzen Pfeil auf schwarzem Hintergrund? - Eben: er wird unsichtbar. Nutzer mit Blendempfindlichkeit machen sich die Hintergründe von Webseiten dunkel.</p> </blockquote> <p>Hast du das mal schwarz auf weiss?</p> </blockquote> <p>Du meinst als <a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=148#visual-presentation" rel="nofollow noopener noreferrer">Link</a>?</p> </blockquote> <p>Nein, ich meinen einen Beleg für</p> <blockquote> <p>Nutzer mit Blendempfindlichkeit machen sich die Hintergründe von Webseiten dunkel.</p> </blockquote> <p>Du musst ja verstehen, jemand mit so einem Problem hat ein generelles problem, für welches man besser eine Grafikkarte manipuliert.</p> <blockquote> <p>Ist dennoch recht weit verbreitet Hintergrund und Schriftfarbe anzupassen. Ist schließlich eine der einfachsten Anpassungen, da Browser so was von haus aus anbieten.</p> </blockquote> <p>Ja, immer mehr über die Leseansicht, und da brauch mich mein CSS gar nicht mehr zu kümmern.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 05:14:45 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731732#m1731732 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731732#m1731732 <p>Hej Gunnar,</p> <blockquote> <p>@@marctrix</p> <blockquote> <p>Die Reihenfolge ist</p> <ol> <li>Browser-Styles</li> <li>Autoren-Styles</li> <li>Nutzer-Styles</li> </ol> </blockquote> <p>Nein.</p> </blockquote> <p>Na ja, es ist nicht vollständig…</p> <blockquote> <blockquote> <p>Je höher die Nummer, desto eher setzen sich die Angaben durch. Sonst würden Nutzer-Stylesheets nicht funktionieren (es gab mal eine Zeit, da hat !important im Autoren-Stylesheet das verhindert, aber das ist glücklicherweise Schnee von gestern).</p> </blockquote> <p>Da irrst du. Eine !important-Deklaration im Autorenstylesheet überschreibt eine normale Deklation aus dem Nutzerstylesheet.</p> </blockquote> <p>Echt? - Das ist komisch, ich dachte immer die in den Einstellungen gemachten Angaben würden als User-CSS realisiert. Ist das dann vielleicht gar nicht so?</p> <p>Habe einen <a href="https://codepen.io/haunschild/pen/yxjrVd?editors=1100#" rel="noopener noreferrer">Test-Pen für Farben mit <code>!important</code></a> erstellt, in dem das mir bekannte und oben beschriebene Verhalten bestätigt wird…</p> <p><a href="/images/6391322e-217f-4df9-9f7b-8485f4d02bfb.png" rel="noopener noreferrer"><img src="/images/6391322e-217f-4df9-9f7b-8485f4d02bfb.png?size=medium" alt="Farben in Nutzereinstellungen des FF überschreiben auch !important-Direktiven. Codepen setzt das Icon vorbildlich in Szene (bleibt bei eigenen Farben sichtbar) schlampt aber bei diversen buttons (unbedienbar bei eigenen Farben)" loading="lazy"></a></p> <blockquote> <p lang="en">In <a href="https://drafts.csswg.org/css-cascade-3/#cascade-origin" rel="nofollow noopener noreferrer">Level 3</a> ist da noch einiges hinzugekommen:</p> <ol> <li>Normal user agent declarations</li> <li>Normal user declarations</li> <li>Normal author declarations</li> <li>Animation declarations</li> <li>Important author declarations</li> <li>Important user declarations</li> <li>Important user agent declarations</li> <li>Transition declarations</li> </ol> </blockquote> <p>Ich sehe, das muss ich mir noch mal anschauen und rausfinden, welche Browser das so umsetzen und wieso sich Farbangaben in Browsern (welchen?) dann nicht daran halten (offenbar ist das dann eben kein User-Stylesheet?!?)…</p> <p>Hier noch etwas zu den Transparenzen: man stelle sich vor, das weiß in Gunnars Icon wäre nicht weiß, sondern transparent (in der annahme, dass der Hintergrund weiß ist). Oder überlegt mal, wie beat auf einem grauen Hintergrund aussähe. es bliebe nur ein Kreis, der ohne das darunter wohl niemanden an einen Kopf erinnern würde…</p> <p><a href="/images/64fcb5ea-d5f2-48cf-9c93-d1c6ab1487f4.png" rel="noopener noreferrer"><img src="/images/64fcb5ea-d5f2-48cf-9c93-d1c6ab1487f4.png?size=medium" alt="schwarzes Gesicht auf weißem Grund - dank echter Hintergrundfarbe auch bei eigenen Farben erkennbar, Symbol mit Transparenz wird je nach Hintergrundfarbe teilweise unsichtbar, die Bedeutung geht verloren" loading="lazy"></a></p> <p>Icons sollten keine Transparenzen haben.</p> <p>Es sei denn, sie verhalten sich wie Schrift. Siehe das Codepen-Icon (Codepen baut dann allerdings bei den Buttons unten Mist).</p> <p>Funfact: FF bekommt es selber ausgerechnet da nicht hin, wo man eigenen Farben einstellen kann…</p> <p><a href="/images/3270dcc6-42bc-4805-bb56-15c24396f54e.png" rel="noopener noreferrer"><img src="/images/3270dcc6-42bc-4805-bb56-15c24396f54e.png?size=medium" alt="FF-Einstellungen normal mit Auswahl, wann eigene Farben verwendet werden sollen" loading="lazy"></a></p> <p><a href="/images/8f166e89-47fc-4a9f-b56a-22a5b7f8450c.png" rel="noopener noreferrer"><img src="/images/8f166e89-47fc-4a9f-b56a-22a5b7f8450c.png?size=medium" alt="FF-Farbeinstellungen lassen sich nur mit Glück wieder zurücknehmen, da der entscheindede Button unsichtbar ist" loading="lazy"></a></p> <p>Ich sach ja immer: schlecht sehende Menschen zu unterstützen ist viel schwieriger, als blinde Menschen zu unterstützen!</p> <p>Schaut euch auch mal die alt-Texte zu den hier geposteten Bildern an… </p> <p>Marc</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Wed, 12 Sep 18 17:11:02 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731709#m1731709 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731709#m1731709 <p>@@beatovich</p> <blockquote> <blockquote> <p>Nutzer mit Blendempfindlichkeit machen sich die Hintergründe von Webseiten dunkel.</p> </blockquote> <p>Du musst ja verstehen, jemand mit so einem Problem hat ein generelles problem,</p> </blockquote> <p>Nein, die Beeinträchtigung kann auch situationsbedingt sein. (<a href="https://speakerdeck.com/gunnarbittersmann/children-of-a-lesser-dev?slide=7" rel="nofollow noopener noreferrer">Folie 7</a>)</p> <p>Bei geringer Umgebungshelligkeit möchte ich ein dunkles UI – helle Schrift auf dunklem Grund. Meine Twitter-App stelle ich ständig um; wünsche mir das auch für SELFHTML.</p> <blockquote> <p>für welches man besser eine Grafikkarte manipuliert.</p> </blockquote> <p>?? Wenn ich ich helle Schrift auf dunklem Grund haben will, heißt das nicht, dass ich Fotos als Negativ zu sehen bekommen möchte.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 05:18:42 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731733#m1731733 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731733#m1731733 <p>Hej beatovich,</p> <blockquote> <blockquote> <p>Ist dennoch recht weit verbreitet Hintergrund und Schriftfarbe anzupassen. Ist schließlich eine der einfachsten Anpassungen, da Browser so was von haus aus anbieten.</p> </blockquote> <p>Ja, immer mehr über die Leseansicht, und da brauch mich mein CSS gar nicht mehr zu kümmern.</p> </blockquote> <p>Mag sein, aber als Forderer von Belegen: woher weißt du das? Hast du das mal schwarz auf weiß? - In meinen Kursen ernte ich immer ziemlich viele Aaaah und Ooooh wenn ich die Lesefunktion zeige. Die scheint noch längst nciht jedem bekannt, geschweige denn, dass die von denen, die sie kennen, ständig genutzt wird.</p> <p>Aber ja, sinnvoll wäre das. Leider funktioniert die aber auch gar nicht auf allen Seiten, da kommt wieder Semantik ins Spiel…</p> <p>Marc</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Wed, 12 Sep 18 17:36:44 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731711#m1731711 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731711#m1731711 <p>hallo</p> <blockquote> <p>Bei geringer Umgebungshelligkeit möchte ich ein dunkles UI – helle Schrift auf dunklem Grund. Meine Twitter-App stelle ich ständig um; wünsche mir das auch für SELFHTML.</p> </blockquote> <p>Gibt es kein User-CSS mehr?</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Wed, 12 Sep 18 17:48:06 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731712#m1731712 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731712#m1731712 <p>Hallo beatovich,</p> <blockquote> <blockquote> <p>Bei geringer Umgebungshelligkeit möchte ich ein dunkles UI – helle Schrift auf dunklem Grund. Meine Twitter-App stelle ich ständig um; wünsche mir das auch für SELFHTML.</p> </blockquote> <p>Gibt es kein User-CSS mehr?</p> </blockquote> <p>Das wäre aber nicht benutzerfreundlich. Für edge auf Laptops ginge <a href="https://wiki.selfhtml.org/wiki/CSS/Media_Queries#light-level" rel="nofollow noopener noreferrer">light-level</a>. Ob das wirklich klug ist, die Kamera immer eingeschaltet zu haben, ist eine ganz andere Frage.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 18:44:03 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731880#m1731880 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731880#m1731880 <p>@@beatovich</p> <blockquote> <blockquote> <p>Bei geringer Umgebungshelligkeit möchte ich ein dunkles UI – helle Schrift auf dunklem Grund. Meine Twitter-App stelle ich ständig um; wünsche mir das auch für SELFHTML.</p> </blockquote> <p>Gibt es kein User-CSS mehr?</p> </blockquote> <p>Wie sollte das behilflich sein? Ich will – wie ich ja sagte – nicht immer hell auf dunkel, sondern nur manchmal.</p> <p>Was hilfreich wäre: verschiedene Profile für einunddenselben Nutzer. Und das gibt es (noch) nicht.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Wed, 12 Sep 18 17:56:53 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731714#m1731714 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731714#m1731714 <p>hallo</p> <blockquote> <p>Hallo beatovich,</p> <blockquote> <blockquote> <p>Bei geringer Umgebungshelligkeit möchte ich ein dunkles UI – helle Schrift auf dunklem Grund. Meine Twitter-App stelle ich ständig um; wünsche mir das auch für SELFHTML.</p> </blockquote> <p>Gibt es kein User-CSS mehr?</p> </blockquote> <p>Das wäre aber nicht benutzerfreundlich. Für edge auf Laptops ginge <a href="https://wiki.selfhtml.org/wiki/CSS/Media_Queries#light-level" rel="nofollow noopener noreferrer">light-level</a>. Ob das wirklich klug ist, die Kamera immer eingeschaltet zu haben, ist eine ganz andere Frage.</p> </blockquote> <p>Noch viel Benutzerfreundlicher ist die Taste die die Helligkeit meines Bildschirms reguliert.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 05:21:01 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731734#m1731734 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731734#m1731734 <p>Hej beatovich,</p> <blockquote> <blockquote> <blockquote> <blockquote> <p>Bei geringer Umgebungshelligkeit möchte ich ein dunkles UI – helle Schrift auf dunklem Grund. Meine Twitter-App stelle ich ständig um; wünsche mir das auch für SELFHTML.</p> </blockquote> <p>Gibt es kein User-CSS mehr?</p> </blockquote> <p>Das wäre aber nicht benutzerfreundlich. Für edge auf Laptops ginge <a href="https://wiki.selfhtml.org/wiki/CSS/Media_Queries#light-level" rel="nofollow noopener noreferrer">light-level</a>. Ob das wirklich klug ist, die Kamera immer eingeschaltet zu haben, ist eine ganz andere Frage.</p> </blockquote> <p>Noch viel Benutzerfreundlicher ist die Taste die die Helligkeit meines Bildschirms reguliert.</p> </blockquote> <p>Wie du siehst, gibt es zahlreiche Möglichkeiten. Auf einer barrierefreien Website hat jeder die Möglichkeit, die zu nutzen, die für ihn am bequemsten ist. Denn da sollten alle diese Möglichkeiten funktionieren.</p> <p>Selbst wenn man sie miteinander (und mit anderen Maßnahmen wie Zoomen) kombiniert.</p> <p>Was nicht heißt, dass man als Autor noch etwas machen kann, wenn sich jemand absichtlich weiß auf weiß einstellt. Ich gehe mal von sinnvollen Einstellungen aus. Barrierefreiheit kann Sabotage nicht verhindern.</p> <p>Marc</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 06:26:05 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731738#m1731738 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731738#m1731738 <p>hallo</p> <blockquote> <p>Icons sollten keine Transparenzen haben.</p> </blockquote> <p>Icons sollten für zwei Szenarien vorliegen:</p> <ul> <li>dunkel auf hell</li> <li>hell auf dunkel</li> </ul> <p>Man kann die grauen Körper des Profil-Icons bemängeln. Da fehlt ein klarer Stroke im SVG.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 07:16:07 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731747#m1731747 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731747#m1731747 <p>Hej beatovich,</p> <blockquote> <p>hallo</p> <blockquote> <p>Icons sollten keine Transparenzen haben.</p> </blockquote> <p>Icons sollten für zwei Szenarien vorliegen:</p> <ul> <li>dunkel auf hell</li> <li>hell auf dunkel</li> </ul> </blockquote> <p>Warum? Heydon Pickering beispielsweise bittet ausdrücklich um leicht abgedunkelte (also graue bis hellgraue) Hintergründe, weil es ihn dann bereits nicht mehr so unangenehm blendet wie reines weiß.</p> <p>So etwas kann sich ja auch entwicklen und am Beginn so einer Entwicklung steht nicht, sich in einen schwarzen Raum einzuschließen, sondern eine sonnebrille mit leichter Tönung zu nutzen.</p> <p>Wir können und dürfen Nutzern nicht vorschreiben, dass sie nur zwischen zwei Optionen zu wählen haben, wenn eine Webseite für alle bedienbar sein soll (und das sollte sie - warum freiwillig auf einen teil der Besucher verzichten oder ihnen ein unangenehmes Erlebnis liefern. sie sollen ja gerne wieder kommen aufgrund positiver Erfahrunegn — wo wir wieder mal bei den wirtschaftliche nAspekten von inklusivem Design wären)…</p> <blockquote> <p>Man kann die grauen Körper des Profil-Icons bemängeln. Da fehlt ein klarer Stroke im SVG.</p> </blockquote> <p>Finde ich persönlich hässlicher als ein weißer Hintergrund für die normal-Darstellung auf weißem Hintergrund. Bei umgekehrten Farben mag es dann weniger ästhetisch aussehen, das betrifft aber nciht nur viel weniger Leute, es ist auch praktisch unmöglich bei den 16,8 Millionen Möglichkeiten für hintergrundfarben immer ein ästhetisch einwandfreies Ergebnis sicherzustellen. Darauf kommt es ja bei so einer Darstellung auch nicht mehr so sehr an, sondern auf gute Erkennbarkeit. Und der Stroke würde es auch in der Darstellung mit eigenen Farben IMHO hässlicher machen.</p> <p>Aber über Geschmack lässt sich cniht streiten. In einem Flat-Design-konzept würden die allerdings das gesamte Konzept kaputt machen…</p> <p>Marc</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 07:25:46 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731752#m1731752 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731752#m1731752 <p>Hej Bruno,</p> <blockquote> <p>Letzte Frage, nicht dringlich, nur aus prinzipiellem Interesse: Warum sind Tabellen so in Verruf geraten, wie es scheint?</p> </blockquote> <p>Sie sind schlciht umständlicher zu handeln als moderne Techniken wie flexbox oder Grid. Selbst Layouts mit float waren leichter responsiv umsetzbar als Tabellen-Layouts.</p> <p>Außerdem blähen Tabellen den Quellcode auf, sind semantisch nicht das an der Stelle benötigte Element (wenn sie aus Layout-Gründen verwendet werden) und bedürfen der extra-Behandlung um im barrierefreien Umfeld nicht zu stören (role="presentation").</p> <p>Man muss auch darauf achten, dass die in Tabellen dargestellten Inhalte linearisierbar sind, das heißt sie müssen linear gelesen (von links nach rechts, Zeile für Zeile) sinn ergeben, weil das genau die Reihenfolge ist, die Screenreader ausgeben.</p> <p>Beispiel für Öffnungszeiten:</p> <p>| Montag | Dienstag | Mittwoch | Donnerstag | Freitag | |vorm. | nachm. | vor- und nachm.| vorm.|nachm. |</p> <p>würde wie folgt vorgelesen:</p> <p>Montag, Dienstag, Mittwoch, Donnerstag, Freitag, vorm., nachm., vor- und nachm., vorm., nachm.</p> <p>Das ist natürlich vollkommen unverständlich…</p> <p>Marc</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 07:31:17 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731754#m1731754 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731754#m1731754 <p>Hallo</p> <blockquote> <p>Letzte Frage, nicht dringlich, nur aus prinzipiellem Interesse: Warum sind Tabellen so in Verruf geraten, wie es scheint?</p> </blockquote> <p>Tabellen wurden über Jahr(zehnt)e hinweg für das Layout von Webseiten benutzt <strong>[edit]<strong>um Seitenelemente in einem Raster anzuordnen</strong>[/edit]</strong>, weil <strong>[edit]<strong>dafür</strong>[/edit]</strong> keine andere Technik verfügbar war. Nun sind andere Techniken da, in der neueren Zeit mit Grid auch eine explizit dafür vorgesehene, aber viele Seiten benutzen immer noch Tabellen zu diesem Zweck. Das wird an vielen Stellen gebetsmühlenartig bemängelt. Dass Tabellen immer noch als Layoutmittel gefunden und verwendet werden, mag daran liegen, dass viele Seiten seit Jahr und Tag nicht überarbeitet wurden und auch daran, dass sich viele Ersteller von Webseiten nur schwerfällig von eingefahrenen Gleisen herunterbegeben.</p> <p>Aber, um zu verhindern, dass das Kind mit dem Bade ausgeschüttet wird, sei gesagt, dass Tabellen keineswegs per se verteufelt werden. Für die Darstellung tabellarischer Daten sind und bleiben sie nämlich das einzig geeignete Werkzeug.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 20:17:08 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731896#m1731896 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731896#m1731896 <p>@@Bruno Thomann</p> <blockquote> <p>Danke, Gunnar, für diese geniale Version. Hab's erst jetzt gesehen. Auf so etwas käme ich nie. Aber das ist wohl der Unterschied zwischen den Profis und uns Gelegenheitsprogrammierern …</p> </blockquote> <p>Zum <a href="https://forum.selfhtml.org/cites/776" rel="noopener noreferrer">Unterschied zwischen Anfänger, Fortgeschrittenem und Profi</a> hier entlang. </p> <blockquote> <p>Noch etwas: Du hat auch ein Talent, dich in unser beschränktes Wissen und Können einzudenken und die Dinge entsprechend verständlich zu erklären.</p> </blockquote> <p>Vielen Dank für die Blumen … wie lieb von dir.</p> <blockquote> <p>Letzte Frage, nicht dringlich, nur aus prinzipiellem Interesse: Warum sind Tabellen so in Verruf geraten, wie es scheint?</p> </blockquote> <p>Vom Unfug der falschen Semantik bei der Auszeichnung (was man mit <code>role="none presentation"</code> entkräften könnte) abgesehen, wird es schwer, mit Layouttabellen responsives Design hinzubekommen. Es ist möglich, Tabellenzellen auf schmalen Viewports anders anzuordnen (Beispiel: <a href="https://codepen.io/gunnarbittersmann/pen/qVZpzV" lang="en" rel="noopener noreferrer">responsive table</a>), aber besser ist schon, unpassende CSS-Eigenschaften gar nicht erst zu setzen als sie hinterher wieder zurückzusetzen.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 07:24:26 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731750#m1731750 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731750#m1731750 <p>hallo</p> <blockquote> <p>Hej beatovich,</p> <blockquote> <p>hallo</p> <blockquote> <p>Icons sollten keine Transparenzen haben.</p> </blockquote> <p>Icons sollten für zwei Szenarien vorliegen:</p> <ul> <li>dunkel auf hell</li> <li>hell auf dunkel</li> </ul> </blockquote> <p>Warum? Heydon Pickering</p> </blockquote> <p>der auch nur eine subjektive unausgegorene Meinung verbreitet.</p> <blockquote> <p>... beispielsweise bittet ausdrücklich um leicht abgedunkelte (also graue bis hellgraue) Hintergründe, weil es ihn dann bereits nicht mehr so unangenehm blendet wie reines weiß.</p> </blockquote> <p>Lass ihn die Helligkeitstaste seines Bildschirms entdecken. Kontrast einschränken ist leicht möglich. Einen bereits eingeschränkten Kontrast wieder zu erweitern, nicht so leicht.</p> <p>Aber du darfst natürlich auch grau auf grau... ;)</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 07:34:58 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731756#m1731756 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731756#m1731756 <p>Hej beatovich,</p> <blockquote> <blockquote> <blockquote> <blockquote> <p>Icons sollten keine Transparenzen haben.</p> </blockquote> <p>Icons sollten für zwei Szenarien vorliegen:</p> <ul> <li>dunkel auf hell</li> <li>hell auf dunkel</li> </ul> </blockquote> <p>Warum? Heydon Pickering</p> </blockquote> <p>der auch nur eine subjektive unausgegorene Meinung verbreitet.</p> </blockquote> <p>Selbst wenn du dich in der Materie, in der er ein ausgewiesener Fachmann ist, ebenso gut auskennen würdest wie er, wäre ein Begründung dieser Aussage nötig.</p> <p>allerdings spielt das für meine Argumentation keine rolle. Bitte lies doch noch mal meinen letzten Beitrag und verstehe ihn, statt hier auf Nebensächlichkeiten rumzureiten.</p> <p>Pickering ist nur ein (prominentes) Beispiel für eine Persona…</p> <blockquote> <blockquote> <p>... beispielsweise bittet ausdrücklich um leicht abgedunkelte (also graue bis hellgraue) Hintergründe, weil es ihn dann bereits nicht mehr so unangenehm blendet wie reines weiß.</p> </blockquote> <p>Lass ihn die Helligkeitstaste seines Bildschirms entdecken.</p> </blockquote> <p>Oder CSS lernen oder die n Einstellungen seines Browsers konfigurieren oder was auch immer.</p> <p>Seine Entscheidung.</p> <p>Du baust Webseiten in in jedem Fall funktionieren oder eben schlechte.</p> <p>Deine Entscheidung!</p> <blockquote> <p>Aber du darfst natürlich auch grau auf grau... ;)</p> </blockquote> <p>Irgendwie stellst du dich dumm um zu trollen oder ich weiß auch nicht, was das soll. Es ist vollkommen ok und kein bisschen lächerlich, wenn ich <strong>schwarz auf grau</strong> möchte. <strong>Der Webseitenbetreiber bzw. Entwickler (also im Zweifelsfall du) muss dafür sorgen, dass die Icons dann <em>nicht</em> grau auf grau sind</strong>. Hatte ich das nicht deutlich genug gesagt? Wo ist Dein Verständnis-Problem?</p> <p>Marc</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 07:39:02 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731758#m1731758 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731758#m1731758 <p>Hallo</p> <blockquote> <blockquote> <blockquote> <p>Icons sollten für zwei Szenarien vorliegen:</p> <ul> <li>dunkel auf hell</li> <li>hell auf dunkel</li> </ul> </blockquote> </blockquote> <p>Lass ihn die Helligkeitstaste seines Bildschirms entdecken.</p> </blockquote> <p>Dann dunkelt er eine Seite ab und hat graue Schrift (und Icons) auf dunklem Grund oder dunkelgraue/schwarze Schrift (und Icons) auf grauem Grund <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>. In jedem Fall hat er ein kontrastärmeres Ergebnis als es das Original hergibt. Es wird ja schließlich <strong>alles</strong> auf dem Bildschirm heller beziehungsweise dunkler.</p> <blockquote> <p>Kontrast einschränken ist leicht möglich. Einen bereits eingeschränkten Kontrast wieder zu erweitern, nicht so leicht.</p> </blockquote> <p>Was machst du denn anderes, als den Kontrast einzuschränken, wenn du am Bildschirm Helligkeit wegnimmst?</p> <blockquote> <p>Aber du darfst natürlich auch grau auf grau... ;)</p> </blockquote> <p>… sagt der, der genau das empfiehlt.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Du darfst die angegebenen Farben aus gegen andere austauschen. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 19:54:27 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731889#m1731889 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731889#m1731889 <p>@@beatovich</p> <blockquote> <blockquote> <p>Warum? Heydon Pickering</p> </blockquote> <p>der auch nur eine subjektive unausgegorene Meinung verbreitet.</p> </blockquote> <p>Auf das Getrolle haben Marc und Auge schon genug gesagt.</p> <blockquote> <p>Lass ihn die Helligkeitstaste seines Bildschirms entdecken.</p> </blockquote> <p>Schwarz auf grau (wenig Kontrast, aber viel Licht) ist was anderes als weiß auf schwarz/dunkelgrau (hoher Kontrast, wenig Licht), <a href="https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731709#m1731709" rel="noopener noreferrer">wie ich es bei dunkler Umgebung wünsche</a>.</p> <p>Wo das helle Licht andere stören würde, zum Beispiel beim Twittern im Theater, beim Konzert o.ä. Das macht man doch nicht, könnte jetzt jemand einwerfen. Doch, manchmal schon: <a href="https://twitter.com/search?q=%23ElisabethMusical%20%40g16n&src=typd" rel="nofollow noopener noreferrer">#ElisabethMusical</a>, <a href="https://twitter.com/search?q=%23TIPIcabaret%20%40g16n&src=typd" rel="nofollow noopener noreferrer">#TIPIcabaret</a> #tweetup</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Fri, 14 Sep 18 18:14:40 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731986#m1731986 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731986#m1731986 <p>Danke! Leuchtet sehr ein.</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Fri, 14 Sep 18 18:15:12 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731987#m1731987 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731987#m1731987 <p>Danke! Sehr informativ!</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 07:56:18 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731764#m1731764 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731764#m1731764 <p>hallo</p> <blockquote> <p>Was machst du denn anderes, als den Kontrast einzuschränken, wenn du am Bildschirm Helligkeit wegnimmst?</p> </blockquote> <p>Das entscheidende ist, dass du dir selber Kontrast/Helligkeit anpassen kannst, und nicht einen von mir vorsätzlich eingeschränkten Kontrast im CSS bekommst.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 08:01:49 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731766#m1731766 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731766#m1731766 <p>Hej beatovich,</p> <blockquote> <blockquote> <p>Was machst du denn anderes, als den Kontrast einzuschränken, wenn du am Bildschirm Helligkeit wegnimmst?</p> </blockquote> <p>Das entscheidende ist, dass du dir selber Kontrast/Helligkeit anpassen kannst, und nicht einen von mir vorsätzlich eingeschränkten Kontrast im CSS bekommst.</p> </blockquote> <p>Das bedeutet, du propagierst, dass Webseiten nur schwarze Texte auf weißem Grund anbieten dürfen? Hast du eine einzige Website als Beispiel, bei der du dich selber an diese Regel gehalten hast?</p> <p>Es gibt <strong>objektive Kriterien für ausreichende Kontraste</strong>, die dem deiner Meinung nach subjektiv und unausgegoren argumentierenden Heydon Pickering bekannt sind und an die er sich in all seinen Artikeln und Empfehlungen hält.</p> <p>Marc</p> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 08:03:49 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731769#m1731769 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731769#m1731769 <p>Hallo</p> <blockquote> <blockquote> <p>Was machst du denn anderes, als den Kontrast einzuschränken, wenn du am Bildschirm Helligkeit wegnimmst?</p> </blockquote> <p>Das entscheidende ist, dass du dir selber Kontrast/Helligkeit anpassen kannst, und nicht einen von mir vorsätzlich eingeschränkten Kontrast im CSS bekommst.</p> </blockquote> <p>Das kann ich mit einem User-CSS auch und zudem sehr viel besser und feiner granuliert.</p> <p>Wenn ich den Bildschirm dunkler mache, weil mich der weiße Hintergrund einer Seite/eines Fensers blendet, wird eben nicht nur der Hintergrund dunkler, sondern, soweit es geht, auch Schrift und Bilder. Ist mir eine Seite/ein Fenster zu dunkel und ich erhöhe ich die Helligkeit des Bildschirms wird nicht nur der Hintergrund heller, sondern auch die Schrift und die Bilder. In jedem Fall sinkt der Kontrast und in vielen Fällen ist das nicht erwünscht.</p> <p>Die Fälle von eingeschränkter Farbwahrnehmung sind mit deinem Vorschlag gleich garnicht sinnvoll zu lösen.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 08:03:41 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731768#m1731768 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731768#m1731768 <p>hallo</p> <blockquote> <p>Hej beatovich,</p> <blockquote> <blockquote> <p>Was machst du denn anderes, als den Kontrast einzuschränken, wenn du am Bildschirm Helligkeit wegnimmst?</p> </blockquote> <p>Das entscheidende ist, dass du dir selber Kontrast/Helligkeit anpassen kannst, und nicht einen von mir vorsätzlich eingeschränkten Kontrast im CSS bekommst.</p> </blockquote> <p>Das bedeutet, du propagierst, dass Webseiten nur schwarze Texte auf weißem Grund anbieten dürfen? Hast du eine einzige Website als Beispiel, bei der du dich selber an diese Regel gehalten hast?</p> </blockquote> <p>Nein, ich propagiere eben nicht, dass #fff eine verbotene Background-Farbe ist.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 08:06:09 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731770#m1731770 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731770#m1731770 <p>Hallo</p> <blockquote> <p>Nein, ich propagiere eben nicht, dass #fff eine verbotene Background-Farbe ist.</p> </blockquote> <p>Das tut auch niemand anderes. Also warum stellst du hier eine solch hanebüchene Behauptung in den Raum?</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 08:12:09 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731771#m1731771 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731771#m1731771 <p>hallo</p> <blockquote> <p>Die Fälle von eingeschränkter Farbwahrnehmung sind mit deinem Vorschlag gleich garnicht sinnvoll zu lösen.</p> </blockquote> <p>Welche Einschränkung soll ich präferieren?</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 08:17:59 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731773#m1731773 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731773#m1731773 <p>hallo</p> <blockquote> <p>Hallo</p> <blockquote> <p>Nein, ich propagiere eben nicht, dass #fff eine verbotene Background-Farbe ist.</p> </blockquote> <p>Das tut auch niemand anderes. Also warum stellst du hier eine solch hanebüchene Behauptung in den Raum</p> </blockquote> <p>Zitat marctrix</p> <blockquote> <p>Warum? Heydon Pickering beispielsweise bittet ausdrücklich um leicht abgedunkelte (also graue bis hellgraue) Hintergründe,</p> </blockquote> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 08:47:52 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731780#m1731780 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731780#m1731780 <p>Hallo</p> <blockquote> <blockquote> <p>Die Fälle von eingeschränkter Farbwahrnehmung sind mit deinem Vorschlag gleich garnicht sinnvoll zu lösen.</p> </blockquote> <p>Welche Einschränkung soll ich präferieren?</p> </blockquote> <p>Du sollst keine Einschränkung präferieren oder gar auf eine hin optimieren. Der sinngemäß zitierte Spruch eine Optimierung auf ein Ziel hin ist eine Verschlechterung für alle Anderen ist <em>hier</em> ja wohl bekannt.</p> <p>Es war dein Vorschlag, die Helligkeit des Bildschirms zu verändern, das wäre quasi die Lösung „für alles“™️. Das ist es aber nicht. Wenn ich bestimmte Teile einer Website farblich verändern muss, damit ich sie wahrnehmen kann, nützt mir eine Helligkeitsänderng mit der damit einhergehenden Kontrastverringerung nullkommanix. Dass das auch mit einem User-CSS alles andere als trivial ist, sei mal dahingestellt. Jedenfalls ist deine Lösung <em>keine</em> Lösung.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 08:37:46 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731779#m1731779 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731779#m1731779 <p>Hallo</p> <blockquote> <blockquote> <blockquote> <p>Nein, ich propagiere eben nicht, dass #fff eine verbotene Background-Farbe ist.</p> </blockquote> <p>Das tut auch niemand anderes. Also warum stellst du hier eine solch hanebüchene Behauptung in den Raum</p> </blockquote> <p>Zitat marctrix</p> <blockquote> <p>Warum? Heydon Pickering beispielsweise bittet ausdrücklich um leicht abgedunkelte (also graue bis hellgraue) Hintergründe,</p> </blockquote> </blockquote> <p>Meine Güte! Ist dir der Unterschied zwischen einer Bitte und einem Verbot nicht geläufig?</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 09:02:38 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731782#m1731782 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731782#m1731782 <p>hallo</p> <blockquote> <p>Hallo</p> <blockquote> <blockquote> <p>Die Fälle von eingeschränkter Farbwahrnehmung sind mit deinem Vorschlag gleich garnicht sinnvoll zu lösen.</p> </blockquote> <p>Welche Einschränkung soll ich präferieren?</p> </blockquote> <p>Du sollst keine Einschränkung präferieren oder gar auf eine hin optimieren. Der sinngemäß zitierte Spruch eine Optimierung auf ein Ziel hin ist eine Verschlechterung für alle Anderen ist <em>hier</em> ja wohl bekannt.</p> </blockquote> <p>einverstanden.</p> <p>Also zurück zum Urprung, bovor Pickerings Schatten aufgekreuzt ist.</p> <p>Ich habe gesagt, man sollte am besten 2 iconsets vorplanen.</p> <p>Das bringt mich übrigens zum Gedanken, dass ich diese einfach austauschen kann, wenn sie nicht über svg/use eingebunden sind.</p> <p>Darf man sich auch mal Gedanken dazu machen.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 18:58:25 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731883#m1731883 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731883#m1731883 <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Was hilfreich wäre: verschiedene Profile für einunddenselben Nutzer. Und das gibt es (noch) nicht.</p> </blockquote> <p>Ja. Weil es offensichtlich nicht so einfach zu programmieren ist. Denn mit einem einfachen CSS-Umschaltknopf ist es ja nicht getan.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Fri, 14 Sep 18 06:05:20 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731907#m1731907 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731907#m1731907 <p>@@Matthias Apsel</p> <blockquote> <blockquote> <p>Was hilfreich wäre: verschiedene Profile für einunddenselben Nutzer. Und das gibt es (noch) nicht.</p> </blockquote> <p>Ja. Weil es offensichtlich nicht so einfach zu programmieren ist.</p> </blockquote> <p>Nicht?</p> <p>Möglicherweise ist nicht so einfach, Nutzeraccounts (so wie es sie jetzt gibt) in mehrere Profile aufzuteilen; aber doch nicht so schwierig, mehrere Profile (so wie es sie jetzt gibt) zu einem Nutzeraccount zusammenzufassen.</p> <p>Aber das weiß <a href="/users/1" class="mention registered-user" rel="noopener noreferrer">@Christian Kruse</a> besser als ich.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Thu, 13 Sep 18 20:48:26 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731901#m1731901 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731901#m1731901 <p>hallo</p> <blockquote> <p>@@beatovich</p> <blockquote> <blockquote> <p>Warum? Heydon Pickering</p> </blockquote> <p>der auch nur eine subjektive unausgegorene Meinung verbreitet.</p> </blockquote> <p>Auf das Getrolle haben Marc und Auge schon genug gesagt.</p> <blockquote> <p>Lass ihn die Helligkeitstaste seines Bildschirms entdecken.</p> </blockquote> <p>Schwarz auf grau (wenig Kontrast, aber viel Licht) ist was anderes als weiß auf schwarz/dunkelgrau (hoher Kontrast, wenig Licht), <a href="https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731709#m1731709" rel="noopener noreferrer">wie ich es bei dunkler Umgebung wünsche</a>.</p> <p>Wo das helle Licht andere stören würde, zum Beispiel beim Twittern im Theater, beim Konzert o.ä. Das macht man doch nicht, könnte jetzt jemand einwerfen. Doch, manchmal schon: <a href="https://twitter.com/search?q=%23ElisabethMusical%20%40g16n&src=typd" rel="nofollow noopener noreferrer">#ElisabethMusical</a>, <a href="https://twitter.com/search?q=%23TIPIcabaret%20%40g16n&src=typd" rel="nofollow noopener noreferrer">#TIPIcabaret</a> #tweetup</p> </blockquote> <p>Ich kann dir das anbieten</p> <pre><code class="block"> <style> .browsercolors {background-color:initial !important; color: initial !important;} .browsercolors *:not(a) { color: inherit !important;} .browsercolors * { background-color:inherit !important; border-color:#666 !important;} </style> <button onclick="document.documentElement.classList.contains('browsercolors') ? document.documentElement.classList.remove('browsercolors') </code></pre> <p>Hoffentlich macht's dein Browser besser als Firefox, Und hoffentlich bist du für die dunkle Twitterstunde vorbereitet.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> <li>-Bullet bei <ul> durch Pfeil ersetzen. Problem bei mehrzeiligen Listenelementen Fri, 14 Sep 18 08:35:15 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731938#m1731938 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1731938#m1731938 <p>Hallo Gunnar,</p> <p>der Hauptgrund, warum es noch keine unterschiedlichen Konfigurationen gibt, ist Zeit.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Optimizing SVGs in data URIs Mon, 08 Oct 18 13:41:07 Z https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1733782#m1733782 https://forum.selfhtml.org/self/2018/sep/8/li-bullet-bei-ul-durch-pfeil-ersetzen-problem-bei-mehrzeiligen-listenelementen/1733782#m1733782 <p>Servus!</p> <blockquote> <p>@@Gunnar Bittersmann</p> <blockquote> <p>… ein SVG als data-URL:</p> </blockquote> <p>Und wenn man außen doppelte und innen einfache Anführungszeichen verwendet, muss man weniger escapen. Leerzeichen nicht, was den Quellcode deutlich lesbarer macht.</p> <p><a href="https://codepen.io/tigt/post/optimizing-svgs-in-data-uris" lang="en" rel="noopener noreferrer">Optimizing SVGs in data URIs</a> (Taylor Hunt)</p> </blockquote> <p>Cool! Es gibt ja einige SVG-Encoder.</p> <p>Das wäre aber der Anlass einen eigenen mit diesen Parametern zu entwickeln und unter den <a href="https://wiki.selfhtml.org/wiki/Hilfsmittel" rel="nofollow noopener noreferrer">Helferlein</a> zu posten.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> <em>"Bin ich denn der Einzigste hier, wo Deutsch kann?"</em> </div>