tag:forum.selfhtml.org,2005:/selfBild sensitiv machen – SELFHTML-Forum2021-03-09T19:47:34Zhttps://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785148?srt=yes#m1785148Gerrit2021-03-02T19:28:27Z2021-03-02T19:28:27ZBild sensitiv machen<p>Hallo,<br>
wenn ich auf ein Bild klicke, soll ein zunächst unsichtbarer Bereich (z.B. div)
nach Möglichkeit ohne Javascript sichtbar gemacht werden?
Geht dies und finde ich dann im Wiki etwas (womit muss ich suchen)?</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785149?srt=yes#m1785149Der Martin2021-03-02T19:37:31Z2021-03-02T19:37:31ZBild sensitiv machen<p>n'Abend.</p>
<blockquote>
<p>wenn ich auf ein Bild klicke, soll ein zunächst unsichtbarer Bereich (z.B. div) nach Möglichkeit ohne Javascript sichtbar gemacht werden?</p>
</blockquote>
<p>ist das eine Frage.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p>
<blockquote>
<p>Geht dies und finde ich dann im Wiki etwas (womit muss ich suchen)?</p>
</blockquote>
<p>Das mag unter sehr speziellen Voraussetzungen möglich sein, aber für den allgemeinen Fall ist die Antwort: Nein. Nur mit Javascript-Unterstützung.</p>
<p>Für eine spezifischere Antwort müsstest du schon ein bisschen von deinen Gegebenheiten zeigen.</p>
<p>Live long and <s>pros</s> healthy,<br>
Martin</p>
<div class="signature">-- <br>
Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.<br>
(mit freundlichem Dank an <a href="https://forum.selfhtml.org/self/2021/feb/20/telefonbuch-ruckwartssuche/1784617#m1784617" rel="noopener noreferrer">Tabellenkalk</a> für die Ergänzung )
</div>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Tipp: Feststellungen (Aussagesätze) schließt man normalerweise mit einem Punkt ab, nicht mit einem Fragezeichen. <a href="#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785153?srt=yes#m1785153Gerrit2021-03-02T19:55:57Z2021-03-03T09:57:30ZBild sensitiv machen<p>Danke, auf Rechtschreibtipps kann ich verzichten.
Dazu gibt es andere Foren.
Wenn ich erst noch auf Flüchtigkeitsfehler prüfen muss, dann bin ich hier wohl falsch! n'Abend genügt im übrigen auch nicht den deutschen Rechtschreibregeln!
A+</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785156?srt=yes#m1785156Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2021-03-02T20:57:31Z2021-03-02T20:57:31ZBild sensitiv machen<p>@@Der Martin</p>
<blockquote>
<p>Das mag unter sehr speziellen Voraussetzungen möglich sein</p>
</blockquote>
<p>Wie ein moderner Browser?</p>
<blockquote>
<p>Nein. Nur mit Javascript-Unterstützung.</p>
</blockquote>
<p><a href="https://codepen.io/gunnarbittersmann/pen/yLVjmqy" rel="noopener noreferrer">Look Ma, no JavaScript.</a></p>
<p> LLAP</p>
<div class="signature">-- <br>
<em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785158?srt=yes#m1785158Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2021-03-02T21:02:19Z2021-03-02T21:02:19ZBild sensitiv machen<p>@@Gerrit</p>
<p>Findest du es klug, in die Hand zu beißen, die dich füttert?</p>
<p>Ich finde das ziemlich dumm.</p>
<p> LLAP</p>
<div class="signature">-- <br>
<em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785159?srt=yes#m1785159Der Martin2021-03-02T21:12:20Z2021-03-02T21:12:20ZBild sensitiv machen<p>Hallo Gunnar,</p>
<blockquote>
<blockquote>
<p>Das mag unter sehr speziellen Voraussetzungen möglich sein</p>
</blockquote>
<p>Wie ein moderner Browser?</p>
</blockquote>
<p>den hatte ich sowieso vorausgesetzt. Ich dachte eher an ein durch CSS beschreibbares Verhältnis von Bild und dem dynamisch sichtbaren Element.</p>
<p>Das hast du in deinem Pen einfach vorausgesetzt. Ich nicht, weil ich es in Gerrits Schilderung nicht erkennen konnte.</p>
<p>Live long and <s>pros</s> healthy,<br>
Martin</p>
<div class="signature">-- <br>
Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.<br>
(mit freundlichem Dank an <a href="https://forum.selfhtml.org/self/2021/feb/20/telefonbuch-ruckwartssuche/1784617#m1784617" rel="noopener noreferrer">Tabellenkalk</a> für die Ergänzung )
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785176?srt=yes#m1785176Gerrit2021-03-03T09:33:37Z2021-03-03T09:33:37ZBild sensitiv machen<p>@Gunnar</p>
<blockquote>
<p>Ich finde das ziemlich dumm.</p>
</blockquote>
<p>Ich finde es ziemlich dumm, wenn man anstatt zu helfen, schulmeisterliche Belehrungen absondert.</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785180?srt=yes#m1785180Gerrit2021-03-03T10:06:29Z2021-03-03T10:06:29ZBild sensitiv machen<p>Hi,
ich habe das Beispiel von Gunnar angesehen. Verstanden habe ich es nicht, da ich nirgendwo ein display: none oder visibility: hidden gefunden habe.
Gedacht habe ich an so etwas wie das Bild mit 3 Balken. Wenn man darauf klickt, öffnet sich ein Auswahlbereich.</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785177?srt=yes#m1785177Rolf B2021-03-03T09:45:35Z2021-03-03T09:46:06ZBild sensitiv machen<p>Hallo Gerrit,</p>
<p>du hast, nachdem Martin aus deiner Frage nicht ganz schlau geworden ist, von Gunnar den Hinweis auf <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/details" rel="nofollow noopener noreferrer">details/summary</a> bekommen. Möchtest Du vielleicht lieber dazu was sagen? Ist das etwas, was Dir hilft? Das kannst Du unter <a href="https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785156#m1785156" rel="noopener noreferrer">Gunnars Beitrag</a> mit dem Link zu seinem Codepen gern tun.</p>
<p>Oder passt das nicht zu deinen Vorstellungen (könnte ja durchaus sein). Dann könntest Du die an dieser Stelle genauer darstellen.</p>
<p>Zum Thema "dumm" etc. setze ich nun noch mein Moderatoren-Käppi auf :</p>
<pre><code class="block">ask("Bitte lasst es gut sein", MODE_NICELY);
flameWar.abort();
branch.close();
</code></pre>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785183?srt=yes#m1785183Tabellenkalk2021-03-03T10:20:32Z2021-03-03T10:20:32ZBild sensitiv machen<p>Hallo,</p>
<blockquote>
<p>Gedacht habe ich an so etwas wie das Bild mit 3 Balken.</p>
</blockquote>
<p>Ah, du suchst ein "Hamburger-Menü"…<br>
Das ist im Wiki eine Weiterleitung auf <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation/Grundstruktur" rel="nofollow noopener noreferrer">Grundstruktur der Navigation</a>. Da ist aber leider der Hamburger nicht erwähnt...</p>
<p>Gruß<br>
Kalk</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785186?srt=yes#m1785186Rolf B2021-03-03T10:35:58Z2021-03-03T10:36:42ZBild sensitiv machen<p>Hallo Gerrit,</p>
<blockquote>
<p>Verstanden habe ich es nicht, da ich nirgendwo ein display: none oder visibility: hidden gefunden habe.</p>
</blockquote>
<p>Aber Du hättest recherchieren können, was die Dir unbekannten Elemente <details> und <summary> tun . Ein vollständiges <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zug%C3%A4ngliche_Dropdown-Navigation" rel="nofollow noopener noreferrer">Menü mit details/summary</a> hat Jürgen einmal in unserem Wiki aufgeschrieben. Auf einem genügend schmalen Bildschirm kollabiert es auch zu einem "Hamburger"-Button. Leider mit viel JavaScript dabei, also nicht das, was Du willst. Aber vielleicht kannst Du dort ein paar Ideen abgucken.</p>
<p>Für eine reine CSS Lösung ist details/summary aber eigentlich der beste Ansatz, andere Lösungen wie :hover oder Checkbox-Hack leiden an fehlender Bedienbarkeit (was meint: Bedienbarkeit für <strong>jeden</strong>, ob Maus, Touch, Tastatur, Screenreader oder Braille-Zeile). Du hängst da allerdings die kleine Schar derjeniger ab, die noch zur Nutzung des Internet Explorers gezwungen sind. Die bekommst Du nur mit einer Javascript-Lösung richtig unterstützt.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785187?srt=yes#m1785187Rolf B2021-03-03T11:02:43Z2021-03-03T11:02:43ZBild sensitiv machen<p>Hallo Gerrit,</p>
<p>mein naiver Versuch mit details sähe so aus: <a href="https://jsfiddle.net/Rolf_b/gc1j4drL/" rel="noopener noreferrer">https://jsfiddle.net/Rolf_b/gc1j4drL/</a></p>
<p>Das ::marker Pseudoelement ist seit Oktober 2020 in den Evergreen-Browsern nutzbar. Für den Internet Explorer habe ich noch eine Browserweiche drin, mit @supports. Das kennt der IE nicht, das Menü ist dann ständig offen.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785188?srt=yes#m1785188JürgenBhttps://www.j-berkemeier.de2021-03-03T11:24:34Z2021-03-03T11:24:34ZBild sensitiv machen<p>Hallo Rolf,</p>
<blockquote>
<p>… Ein vollständiges <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zug%C3%A4ngliche_Dropdown-Navigation" rel="nofollow noopener noreferrer">Menü mit details/summary</a> hat Jürgen einmal in unserem Wiki aufgeschrieben. Auf einem genügend schmalen Bildschirm kollabiert es auch zu einem "Hamburger"-Button. Leider mit viel JavaScript dabei, …</p>
</blockquote>
<p>das viele Javascript ist aber nur dem Komfort und dem IE11 und den alten Edge geschuldet. Ich habe leider keine Möglichkeit gefunden, schon im css Browser zu erkennen, die details/summary nicht unterstützen.</p>
<p>Im fiddle aus der anderen Antwort verwendest du</p>
<pre><code class="block language-css"><span class="token atrule"><span class="token rule">@supports</span> <span class="token punctuation">(</span><span class="token property">width</span><span class="token punctuation">:</span> max-content<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
...
<span class="token punctuation">}</span>
</code></pre>
<p>Damit wird aber nur der IE11 gefunden, nicht aber alte Edge?</p>
<p>Gruß<br>
Jürgen</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785194?srt=yes#m1785194Rolf B2021-03-03T14:42:31Z2021-03-03T14:42:31ZBild sensitiv machen<p>Nachtrag: Bei der Gelegenheit habe ich festgestellt, dass sich bei ::marker einiges in der Browser-Unterstützung getan hat. Zudem polemisiert der <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/details#Formatierung_des_details-markers" rel="nofollow noopener noreferrer">Text in unserem Wiki</a> darüber, dass die Browser Müll machen würden - aber einiges von diesem Müll steht gar nicht (mehr) in der Spec; die Formatierungsmöglichkeiten des ::marker Pseudoelements sind limitiert.</p>
<p>Insbesondere sieht die Spec <strong>nicht</strong> vor, eine Positionierung oder transform:scale einzusetzen. Ich habe diese Teile aus dem Wiki entfernt (<a href="/users/2" class="mention registered-user" rel="noopener noreferrer">@Matthias Apsel</a> - du hattest das geschrieben). Ein Test mit einem aktuellen Opera und Safari wäre noch gut, kann das jemand tun?</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785259?srt=yes#m1785259Gerrit2021-03-04T23:13:11Z2021-03-04T23:13:11ZBild sensitiv machen<p>Hallo Rolf,
in Deinem jsfiddle-Beispiel ist die Struktur</p>
<pre><code class="block"><header>
<nav>
......
</code></pre>
<p>Für mein "Erstlingswerk" hatte ich aus SELFHTML folgendes übernommen:</p>
<pre><code class="block"><!doctype html>
<html lang="de">
<head>
…
</head>
<body>
<header>
<h1>Name unserer Seite</h1>
</header>
<nav>
…
</nav>
<main>
<h1>Überschrift des Artikels</h1>
<p>weiterer Inhalt</p>
</main>
</body>
</html>
</code></pre>
<p>Kann ich, damit Dein Beispiel passt das <nav> in <article></article> oder etwas ähnliches einbetten und das CSS entsprechend abändern?
Ein anderer Weg wäre statt header das nav zu verwenden und unter dem nav ein <div> zu setzen.Beides würde wohl so funktionieren, aber widerspricht es dann der Philosophie oder ist es dann nicht mehr barrierefrei?</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785189?srt=yes#m1785189Rolf B2021-03-03T11:48:47Z2021-03-03T11:48:47ZBild sensitiv machen<p>Hallo JürgenB,</p>
<p>das war jetzt ein reiner Glücksgriff mit max-content. Edge-Edge kann @supports, aber details <strong>und</strong> max-content werden beide erst mit Chromium-Edge eingeführt. Sagt caniuse jedenfalls.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785191?srt=yes#m1785191JürgenBhttps://www.j-berkemeier.de2021-03-03T12:12:43Z2021-03-03T12:12:43ZBild sensitiv machen<p>Hallo Rolf,</p>
<p>der erkennst also den IE11 nur dran, dass er supports nicht kennt.</p>
<p>Wenn ich eine Möglichkeit hätte, auch MS-Edge im css zu erkennen, wäre die Navigation im Wiki-Tutorial nicht so Javascriptabhängig.</p>
<p>Gruß<br>
Jürgen</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785192?srt=yes#m1785192Rolf B2021-03-03T12:31:39Z2021-03-03T12:31:39ZBild sensitiv machen<p>Hallo JürgenB,</p>
<p>dann nimm doch max-content. Das ist zwar eine leicht unredliche Abfrage, aber da wir von einem Blick in die Historie reden, passt das.</p>
<p>MDN sagt, dass heute alle Browser außer Edge-Edge und IE max-content unterstützen.
MDN sagt, dass heute alle Browser außer Edge-Edge und IE <details> unterstützen.</p>
<p>If it walks like duck, swims like a duck and quacks like a duck, I call it a duck...</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785193?srt=yes#m1785193MudGuardhttp://www.andreas-waechter.de/2021-03-03T12:38:12Z2021-03-03T12:38:12ZBild sensitiv machen<p>Hi,</p>
<blockquote>
<p>der erkennst also den IE11 nur dran, dass er supports nicht kennt.</p>
<p>Wenn ich eine Möglichkeit hätte, auch MS-Edge im css zu erkennen, wäre die Navigation im Wiki-Tutorial nicht so Javascriptabhängig.</p>
</blockquote>
<p>leider wurde</p>
<pre><code class="block language-css"><span class="token selector">* html</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre>
<p>zu früh abgeschafft …</p>
<p>cu,<br>
Andreas a/k/a MudGuard</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785195?srt=yes#m1785195Matthias Scharwiesmscharwies@selfhtml.org2021-03-03T14:55:40Z2021-03-03T14:55:40ZBild sensitiv machen<p>Servus!</p>
<blockquote>
<p>Ich habe diese Teile aus dem Wiki entfernt</p>
</blockquote>
<p>Vielen Dank!</p>
<blockquote>
<p>Ein Test mit einem aktuellen Opera und Safari wäre noch gut, kann das jemand tun?</p>
</blockquote>
<p>Herzliche Grüße</p>
<p>Matthias Scharwies</p>
<div class="signature">-- <br>
Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785196?srt=yes#m1785196JürgenBhttps://www.j-berkemeier.de2021-03-03T15:13:07Z2021-03-03T15:13:07ZBild sensitiv machen<p>Hallo Rolf,</p>
<p>details-marker:</p>
<p>Safari<br>
zu: roter Pfeil nach rechts
offen: grüner Pfeil nach unten
Klick außerhalb des Elements: roter Pfeil nach unten</p>
<p>MacOS Firefox<br>
Kennt das Symbol nicht und zeigt „Kasten“</p>
<p>details mit eigenem Marker:</p>
<p>Safari<br>
zeigt grünes + und rotes x wie vorgesehen, die Originalsymbole bleiben aber.</p>
<p>MacOS Firefox<br>
OK</p>
<p>Im Tutorial behandle ich die Symbole browserübergreifend so:</p>
<pre><code class="block language-css"><span class="token comment">/* Originalsymbole vor den Summary entfernen und eigene Symbole definieren */</span>
<span class="token selector">#sitenav summary::-webkit-details-marker</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#sitenav summary</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">#sitenav details summary::after</span> <span class="token punctuation">{</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> arial_unicode_ms<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 punctuation">}</span>
<span class="token selector">#sitenav ul details:not([open]) > summary::after</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 punctuation">}</span>
<span class="token selector">#sitenav ul details[open] > summary::after</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>
</code></pre>
<p>Gruß<br>
Jürgen</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785197?srt=yes#m1785197kai3452021-03-03T15:42:50Z2021-03-03T15:42:50ZBild sensitiv machen<blockquote>
<p>Ein Test mit einem aktuellen Opera und Safari wäre noch gut, kann das jemand tun?</p>
</blockquote>
<p><strong>Opera</strong> Windows:<br>
<a href="/images/f240c51c-7c36-11eb-9384-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/f240c51c-7c36-11eb-9384-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a><br>
<a href="/images/027cd0ec-7c37-11eb-b1b2-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/027cd0ec-7c37-11eb-b1b2-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p>
<div class="signature">-- <br>
Stur lächeln und winken, Männer!
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785222?srt=yes#m1785222Gerrit2021-03-04T13:34:58Z2021-03-04T13:34:58ZBild sensitiv machen<p>Hallo Rolf,<br>
besten Dank für das Beispiel. Wenn es in den gängigsten Browsern läuft, so genügt dies mir am Anfang auch.<br>
Ich finde solche Beispiele (für meine Herangehensweise) ideal.<br>
Ich muss nicht zuerst (neben einer Einführung) alles über flex oder grid lesen, sondern ich habe sofort ein Ergebnis, auf dem ich aufbauen kann.<br>
Und ich kann dann gezielt nachschauen, was die einzelnen für mich unbekanten Elemente/Parameter bedeuten (learning ba doing).
Schönen Gruß
Gerrit</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785198?srt=yes#m1785198Rolf B2021-03-03T15:46:39Z2021-03-03T16:03:17ZBild sensitiv machen<p>Hallo JürgenB,</p>
<blockquote>
<p>Safari<br>
zu: roter Pfeil nach rechts<br>
offen: grüner Pfeil nach unten<br>
Klick außerhalb des Elements: roter Pfeil nach unten</p>
</blockquote>
<p>WTF? Grüner Pfeil nach unten sollte angezeigt werden, wenn die Details zu sind und öffnet sie. Das andere Ding soll ein roter Pfeil nach <strong>oben</strong> sein und die Details schließen.</p>
<p>Liegt das am verwendeten Font? Das Frickl verwendet Zeichen aus Plane 1 (Navigation Arrows):<br>
- 1f871 - Pfeil nach oben<br>
- 1f873 - Pfeil nach unten</p>
<p>Nachdem ich die hier eingefügt hatte, ist erstmal auch die Edit-Box des Forums ausgeflippt. Die "normalen" Pfeile ↑ und ↓ sind allerdings recht unansehnlich. Hier im Forum geht's noch, im Frickl gar nicht (Chrome/Windows). Aber was gibt's in der BMP? ⭣⬇⮯⮋⮛⮟, alles nicht so dolle. Im SMP Block "zusätzliche Pfeile C" gibt es eine Inflation an Pfeilen: - aber wenn die nicht sauber dargestellt werden ist es Käse. Ich mag in so ein einfaches Beispiel aber auch kein SVG-Bild einfügen oder mit CSS-Tricks einen Pfeil generieren.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785225?srt=yes#m1785225Rolf B2021-03-04T14:22:00Z2021-03-04T14:51:09ZBild sensitiv machen<p>Hallo kai345,</p>
<p>das ist natürlich total blöd - da sind die Open/Close Symbole gar nicht ersetzt worden. War das Opera 73 oder 74?</p>
<p>Edit: Hab mir den aktüllen Opera 74 nun selber installiert. Content wird ignoriert, Farben, font-size und transition funktionieren. Und ::marker funktioniert nicht, es muss die -webkit Variante sein. Angeblich basiert Opera 74 auf Blink 88, da muss wohl zwischen 88 und 89 noch was passiert sein.</p>
<p>Fun Fact: da ein summary-Element den Anzeigetyp display:list-item hat, kann man mit list-style-type: " " das Symbol ebenfalls setzen. In Chrome jedenfalls.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785243?srt=yes#m1785243kai3452021-03-04T18:25:00Z2021-03-04T18:25:00ZBild sensitiv machen<blockquote>
<p>Edit: Hab mir den aktüllen Opera 74 nun selber installiert. Content wird ignoriert, Farben, font-size und transition funktionieren. Und ::marker funktioniert nicht, es muss die -webkit Variante sein. Angeblich basiert Opera 74 auf Blink 88, da muss wohl zwischen 88 und 89 noch was passiert sein.</p>
</blockquote>
<p><strong>Opera 75 beta</strong> [Chromium 89]:</p>
<p><a href="/images/6f4153ee-7d16-11eb-bb93-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/6f4153ee-7d16-11eb-bb93-b42e9947ef30.png?size=medium" alt="Ansicht in Opera75beta - zu" title="gechlossen/Opera75" loading="lazy"></a><br>
<a href="/images/7877f030-7d16-11eb-94f0-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/7877f030-7d16-11eb-94f0-b42e9947ef30.png?size=medium" alt="Ansicht in Opera75beta - offen" title="geöffnet/Opera75" loading="lazy"></a></p>
<div class="signature">-- <br>
Stur lächeln und winken, Männer!
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785260?srt=yes#m1785260Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2021-03-05T06:14:01Z2021-03-05T06:14:01ZBild sensitiv machen<p>@@Gerrit</p>
<blockquote>
<p>Für mein "Erstlingswerk" hatte ich aus SELFHTML folgendes übernommen:</p>
<pre><code class="block"><!doctype html>
<html lang="de">
<head>
…
</head>
<body>
<header>
<h1>Name unserer Seite</h1>
</header>
<nav>
…
</nav>
<main>
<h1>Überschrift des Artikels</h1>
<p>weiterer Inhalt</p>
</main>
</body>
</html>
</code></pre>
</blockquote>
<p>Kannst du uns die Stelle In SELFHTML sagen, von wo du das übernommen hast, damit das dort berichtigt werden kann?</p>
<p>Es ist nämlich falsch: „Name unserer Seite“ ist nicht <code class="bad">h1</code>, sondern <code>p</code>.</p>
<p>„Überschrift des Artikels“ ist auf der Seite die <code class="good">h1</code> – und davon sollte es nur eine geben. (Das h in <code>h1</code> steht für Highlander.)</p>
<blockquote>
<p>Kann ich, damit Dein Beispiel passt das <nav> in <article></article> oder etwas ähnliches einbetten und das CSS entsprechend abändern?</p>
</blockquote>
<p>In <code>article</code> wohl nicht, aber in <code>div</code> kannst du einbetten, was du willst. Warum solltest du das brauchen?</p>
<blockquote>
<p>Ein anderer Weg wäre statt header das nav zu verwenden und unter dem nav ein <div> zu setzen.Beides würde wohl so funktionieren, aber widerspricht es dann der Philosophie oder ist es dann nicht mehr barrierefrei?</p>
</blockquote>
<p>So ist es. HTML-Elemente sind nicht wahllos, sondern genau ihrer Bestimmung nach zu verwenden.</p>
<p>„Name unserer Seite“ gehört nicht ins <code>nav</code>-Element. Das Navigationsmenü gehört in ein <code>nav</code>-Element.</p>
<p>Und wenn es sich bei deinem Bild um ein Hamburger-Icon zum Öffnen des Menüs handelt, dann gehört dieser Button auch mit ins <code>nav</code>-Element.</p>
<p>Und ja, ein <code>button</code>-Element, das per JavaScript das Menü auf- und zumacht und entsprechende Attribute für die Barrierefreiheit setzt.</p>
<p>S.a. <a href="https://codepen.io/gunnarbittersmann/pen/RwaMoWd" rel="noopener noreferrer">Beispiel</a> und Hinweise auf den <a href="https://speakerdeck.com/gunnarbittersmann/til-wie-man-ein-menu-serviert" rel="nofollow noopener noreferrer">Folien „TIL wie man ein Menü serviert“</a>.</p>
<p> LLAP</p>
<div class="signature">-- <br>
<em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785262?srt=yes#m1785262Tabellenkalk2021-03-05T06:47:22Z2021-03-05T06:47:22ZBild sensitiv machen<p>Hallo,</p>
<p>es ist nicht einfach, sowas im Wiki zu finden, aber <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Seitenstrukturierung#So_sieht_das_fertige_Beispiel_aus:" rel="nofollow noopener noreferrer">hier</a> fand ich ein Beispiel, das noch 2 h1-Elemente nutzt…</p>
<p>Gruß<br>
Kalk</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785266?srt=yes#m1785266Rolf B2021-03-05T07:25:53Z2021-03-05T07:25:53ZBild sensitiv machen<p>Hallo Gunnar,</p>
<blockquote>
<p>Und ja, ein button-Element, das per JavaScript das Menü auf- und zumacht</p>
</blockquote>
<p>Du widersprichst der Idee, ein Dropdown-Menü mit details/summary zu realisieren? Genau darum geht es hier doch.</p>
<p>Du widersprichst damit auch dem Wiki-Artikel von Jürgen über eine zugängliche Dropdown-Navigation?</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785263?srt=yes#m1785263Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2021-03-05T06:50:57Z2021-03-05T06:50:57ZBild sensitiv machen<p>Hallo Tabellenkalk,</p>
<blockquote>
<p>es ist nicht einfach, sowas im Wiki zu finden,</p>
</blockquote>
<p>in der Tat.</p>
<p>aber <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Seitenstrukturierung#So_sieht_das_fertige_Beispiel_aus:" rel="nofollow noopener noreferrer">hier</a> fand ich ein Beispiel, das noch 2 h1-Elemente nutzt…</p>
<p>Ich habe werde es mal geändert haben.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Du kannst das Projekt SELFHTML unterstützen,<br>
indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt.
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785264?srt=yes#m1785264Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2021-03-05T06:54:45Z2021-03-05T06:54:45ZBild sensitiv machen<p>Hallo Matthias Apsel,</p>
<blockquote>
<p>aber <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Seitenstrukturierung#So_sieht_das_fertige_Beispiel_aus:" rel="nofollow noopener noreferrer">hier</a> fand ich ein Beispiel, das noch 2 h1-Elemente nutzt…</p>
<p>Ich habe werde es mal geändert haben.</p>
</blockquote>
<p>Das Beispiel selbst war schon seit 2014 korrekt, zu einer Zeit also, als das vielleicht noch gar nicht korrekt war.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Du kannst das Projekt SELFHTML unterstützen,<br>
indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt.
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785284?srt=yes#m1785284Gerrit2021-03-05T10:54:21Z2021-03-05T10:54:21ZBild sensitiv machen<p>Hallo Ihr Lieben,
jetzt bin ich aber total verwirrt!
Welche Struktur und welche Art Dropdown-Menu ist "state of the art"?
Gruß
Gerrit</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785286?srt=yes#m1785286Rolf B2021-03-05T10:59:52Z2021-03-05T11:00:59ZBild sensitiv machen<p>Hallo Gerrit,</p>
<p>ich bin's auch, darum habe ich Gunnar gespiegelt, wie ich seinen Beitrag verstanden habe, und rechne mit einer Stellungnahme von ihm.</p>
<p>Also, erstmal Ruhe bewahren, wir diskutieren das aus </p>
<p>Die Button-Lösung ist die "klassische", braucht aber JavaScript. Die details/summary Lösung kommt ohne JS aus, aber der Internet Explorer kennt dieses Element noch nicht. Deswegen habe ich meinen Vorschlag so gebaut, dass er im IE einfach als "ständig offen" und ohne das Menübild dargestellt wird. Das ist nicht schön, aber die Seite ist nutzbar. Auf "schönes" Layout hat ein IE-Opfer heute keinen Anspruch mehr.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785287?srt=yes#m1785287Gerrit2021-03-05T11:09:19Z2021-03-05T11:09:19ZBild sensitiv machen<p>Hallo Rolf,<br>
ich bin auch der Meinung, wer den IE nutzt, ist selber schuld.<br>
Gruß<br>
Gerrit</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785292?srt=yes#m1785292JürgenBhttps://www.j-berkemeier.de2021-03-05T12:05:06Z2021-03-05T12:05:06ZBild sensitiv machen<p>Hallo Rolf,</p>
<p>auf meiner(!) Site kennen z.Zt. von den Besuchern mit eingeschaltetem Javascript 2% kein details/summary, Tendez abnehmend. Laut caniuse sind es noch weniger. Es lohnt sich also nicht, da viel zu investieren. Im Wiki-Tutorial habe ich einen einfachen auf dieses Problem zugeschnittenen Poyfill, evtl. was für Gerrit. Ich habe auch beschrieben, wie dieser nur bei Bedarf nachgeladen wird. Über dieses Nachladen messe ich übrigens die 2%.</p>
<p>Gruß<br>
Jürgen</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785309?srt=yes#m1785309Gerrit2021-03-06T11:24:17Z2021-03-06T11:24:17ZBild sensitiv machen<p>Hallo Rolf</p>
<blockquote>
<p>ich bin's auch, darum habe ich Gunnar gespiegelt, wie ich seinen Beitrag verstanden habe, und rechne mit einer Stellungnahme von ihm.</p>
<p>Also, erstmal Ruhe bewahren, wir diskutieren das aus </p>
</blockquote>
<p>Hat sich Gunnar schon bei Dir gemeldet, hier ja noch nicht, oder seid Ihr noch tief in der Diskussion?<br>
Schönen Gruß<br>
Gerrit</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785288?srt=yes#m1785288Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2021-03-05T11:27:29Z2021-03-05T11:27:29ZBild sensitiv machen<p>Hallo Gerrit,</p>
<blockquote>
<p>ich bin auch der Meinung, wer den IE nutzt, ist selber schuld.</p>
</blockquote>
<p>In den seltensten Fällen ist er wirklich <strong>selbst</strong> schuld.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Du kannst das Projekt SELFHTML unterstützen,<br>
indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt.
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785290?srt=yes#m1785290Der Martin2021-03-05T11:49:38Z2021-03-05T11:49:38ZBild sensitiv machen<p>Hallo,</p>
<blockquote>
<blockquote>
<p>ich bin auch der Meinung, wer den IE nutzt, ist selber schuld.</p>
</blockquote>
<p>In den seltensten Fällen ist er wirklich <strong>selbst</strong> schuld.</p>
</blockquote>
<p>dem schließe ich mich an. Meist sind es wohl Vorgaben des eigenen Arbeitgebers.</p>
<p>Während bei uns im Unternehmen die Menge der tatsächlich genutzten Browser recht vielfältig ist (Chrome in allen Geschmacksrichtungen einschließlich Microsoft, Firefox und Varianten<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>), empfiehlt unsere IT zumindest fürs Intranet immer noch den IE11. Der lässt sich nämlich so einstellen, dass er sich überall, wo eine Anmeldung gefordert ist, erstmal ungefragt mit den Windows-Credentials anzumelden versucht.<br>
Das kann man als Vorteil oder als Risiko kommunizieren, je nachdem, wo man gerade steht.</p>
<p>Benutzt man einen anderen Browser fürs Intranet, muss man sich halt mit ständig aufpoppenden Login-Abfragen abfinden. Oder die Anmeldedaten für die diversen Dienste im Browser speichern. Das möchte ich aber auch wieder nicht.</p>
<p>Also fahre ich zweigleisig: Für hausinterne Web-Dienste (z.B. Sharepoint, das ESS-Modul von SAP oder das bei uns verwendete e-Learning-Portal) den alten IE, für externe Sites Pale Moon, seltener auch den "echten" Firefox.</p>
<p>Live long and <s>pros</s> healthy,<br>
Martin</p>
<div class="signature">-- <br>
Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.<br>
(mit freundlichem Dank an <a href="https://forum.selfhtml.org/self/2021/feb/20/telefonbuch-ruckwartssuche/1784617#m1784617" rel="noopener noreferrer">Tabellenkalk</a> für die Ergänzung )
</div>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Ein älterer Kollege benutzt sogar für alles nur den IE11. "Den bin ich gewöhnt, mit dem komme ich gut zurecht, ich brauch nichts anderes." <a href="#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785293?srt=yes#m1785293JürgenBhttps://www.j-berkemeier.de2021-03-05T12:16:38Z2021-03-05T12:16:38ZBild sensitiv machen<p>Hallo Martin,</p>
<blockquote>
<p>Meist sind es wohl Vorgaben des eigenen Arbeitgebers.</p>
</blockquote>
<p>oder veraltete System mit Windows 7 und weder Geld noch Hilfe, um da etwas dran zu ändern.</p>
<p>Aber ich finde auch, schmuckloses Design und z.B. offene Details sind zumutbar. Die Seite bleibt ja bedienbar.</p>
<p>Über den Einsatz „moderner“ Javascriptmethoden, die den IE auf einen Syntaxfehler laufen lassen, sollte man aber schon nachdenken und evtl. statische Alternativen anbieten. Syntaktischer Zucker rechtfertigt nicht, alte Browser auszusperren.</p>
<p>Gruß<br>
Jürgen</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785294?srt=yes#m1785294Gerrit2021-03-05T12:39:57Z2021-03-05T12:39:57ZBild sensitiv machen<p>Hallo,</p>
<blockquote>
<p>Ein älterer Kollege benutzt sogar für alles nur den IE11. "Den bin ich gewöhnt, mit dem komme ich gut zurecht, ich brauch nichts anderes."</p>
</blockquote>
<p>Ich war auch zufrieden mit Windows XP.<br>
Ja man kann natürlich auf alles Rücksicht nehmen.<br>
Und ich wünschte mir dies für mein nicht sehr altes Smartphone, auf dem die Corona-App nicht lauffähig ist.</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785295?srt=yes#m1785295Der Martin2021-03-05T12:45:52Z2021-03-05T12:45:52ZBild sensitiv machen<p>Hallo,</p>
<blockquote>
<blockquote>
<p>Meist sind es wohl Vorgaben des eigenen Arbeitgebers.</p>
</blockquote>
<p>oder veraltete System mit Windows 7 und weder Geld noch Hilfe, um da etwas dran zu ändern.</p>
</blockquote>
<p>nein, das lasse ich nicht gelten. Sich einen Firefox oder Chrome herunterladen und installieren ist so einfach, dass das eigentlich jeder schaffen sollte.</p>
<p>Firefox fragt beim Setup sogar, ob er Daten eines bereits vorhandenen Browsers übernehmen soll (z.B. Bookmarks). Chrome bestimmt auch, oder?</p>
<blockquote>
<p>Aber ich finde auch, schmuckloses Design und z.B. offene Details sind zumutbar. Die Seite bleibt ja bedienbar.</p>
</blockquote>
<p>Für den hier aktuellen Fall: Ja, finde ich auch okay. Wer archaisches Zeug nutzt, ist daran gewöhnt, dass nicht immer alles so schick aussieht wie beim Nachbarn, möchte das vielleicht sogar so.</p>
<blockquote>
<p>Über den Einsatz „moderner“ Javascriptmethoden, die den IE auf einen Syntaxfehler laufen lassen, sollte man aber schon nachdenken und evtl. statische Alternativen anbieten. Syntaktischer Zucker rechtfertigt nicht, alte Browser auszusperren.</p>
</blockquote>
<p>Wohl wahr.</p>
<p>Live long and <s>pros</s> healthy,<br>
Martin</p>
<div class="signature">-- <br>
Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.<br>
(mit freundlichem Dank an <a href="https://forum.selfhtml.org/self/2021/feb/20/telefonbuch-ruckwartssuche/1784617#m1784617" rel="noopener noreferrer">Tabellenkalk</a> für die Ergänzung )
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785297?srt=yes#m1785297Rolf B2021-03-05T12:55:18Z2021-03-05T12:55:18ZBild sensitiv machen<p>Hallo Martin,</p>
<blockquote>
<p>nein, das lasse ich nicht gelten. Sich einen Firefox oder Chrome herunterladen und installieren ist so einfach, dass das eigentlich jeder schaffen sollte.</p>
</blockquote>
<p>Die Arbeitsplätze meines Arbeitgebers laufen unter Windows 7 (ok, Windows Server 2008 R2 plus Citrix) und das Selbstinstallieren eines Chrome ist nicht möglich. Ein Firefox ist drauf, aber für bestimmte Anwendungen limitiert. Seit einem halben Jahr gibt's endlich einen aktuellen Edge und die neue Sharepoint-Version, die damit klar kommt.</p>
<p>Eine Standardsoftware, die ich betreue, hatte bis vor kurzem noch ein Java Applet intus und ist immer noch nicht javafrei, sondern wurde vom Hersteller nur auf Java Webstart umgestellt.</p>
<p>Dieses Jahr findet bei uns der zweite oder dritte Anlauf für eine Win10 Migration statt. Und beginnt wieder mal auf eine Art, die das Coronamanagement der deutschen Verwaltungen bewundernswert erscheinen lässt ("Liefern Sie uns umgehend Ihre Software fertig paketiert und getestet!" - "Wo ist der Testserver für mich, der nach Maßgaben der neuen Umgebung konfiguriert ist?" - "Äh, da haben wir grad keine Zeit für..." - einen Testserver in Eigenregie aufsetzen bringt nichts; zum einen darf ich das nicht und zum anderen weiß ich ja nicht, was die an Policies eindrehen, die mich ggf. abschießen)</p>
<p>Manche Dinge sind einfach gruselig.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785298?srt=yes#m1785298Der Martin2021-03-05T13:03:14Z2021-03-05T13:03:14ZBild sensitiv machen<p>Hallo,</p>
<blockquote>
<blockquote>
<p>nein, das lasse ich nicht gelten. Sich einen Firefox oder Chrome herunterladen und installieren ist so einfach, dass das eigentlich jeder schaffen sollte.</p>
</blockquote>
<p>Die Arbeitsplätze meines Arbeitgebers laufen unter Windows 7 (ok, Windows Server 2008 R2 plus Citrix) und das Selbstinstallieren eines Chrome ist nicht möglich.</p>
</blockquote>
<p><a href="https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785290#m1785290" rel="noopener noreferrer">geh bitte nochmal einen Schritt zurück</a>. Ich sagte ganz bewusst: Wenn jemand den IE verwenden <em>muss</em>, ist das meistens eine vom Arbeitgeber verhängte Einschränkung.</p>
<blockquote>
<p>Manche Dinge sind einfach gruselig.</p>
</blockquote>
<p>Allerdings, ja.</p>
<p>Live long and <s>pros</s> healthy,<br>
Martin</p>
<div class="signature">-- <br>
Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.<br>
(mit freundlichem Dank an <a href="https://forum.selfhtml.org/self/2021/feb/20/telefonbuch-ruckwartssuche/1784617#m1784617" rel="noopener noreferrer">Tabellenkalk</a> für die Ergänzung )
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785327?srt=yes#m1785327Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2021-03-06T14:19:17Z2021-03-06T14:19:17ZBild sensitiv machen<p>@@Gerrit</p>
<blockquote>
<p>darum habe ich Gunnar gespiegelt, wie ich seinen Beitrag verstanden habe, und rechne mit einer Stellungnahme von ihm.</p>
<p>Hat sich Gunnar schon bei Dir gemeldet, hier ja noch nicht</p>
</blockquote>
<p>Der hat gerade <a href="https://cssbattle.dev/" rel="nofollow noopener noreferrer">andere Schlachten</a> zu schlagen. ⚔️</p>
<p> LLAP</p>
<div class="signature">-- <br>
<em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785331?srt=yes#m1785331Rolf B2021-03-06T14:53:37Z2021-03-06T14:53:37ZBild sensitiv machen<p>Hallo Gerrit,</p>
<blockquote>
<p>bei Dir gemeldet</p>
</blockquote>
<p>Gunnar lebt in Berlin, ich bei Köln. Wenn wir kommunizieren, dann hier offen im Forum. Oder über Moderationsfälle im Intern-Forum. Vieraugen-Diskussionen als Privatchat haben wir bisher nur über "Mathe zum ..." geführt </p>
<p>Aber wenn Gunnar die CSS-Battle wichtiger ist als eine kurze Stellungnahme zu "Button vs Details", dann ist der Unterschied da wohl auch nicht so wichtig. Bei einem gravierenden Accessibility-Fehler hätte er sich sicherlich schon deutlicher geäußert.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785335?srt=yes#m1785335Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2021-03-06T15:39:05Z2021-03-06T15:39:05ZBild sensitiv machen<p>@@Rolf B</p>
<blockquote>
<p>Aber wenn Gunnar die CSS-Battle wichtiger ist als eine kurze Stellungnahme zu "Button vs Details" …</p>
</blockquote>
<p>Es gibt hier keine 24/7-Anwesenheitspflicht. Und ich lasse mir da kein schlechtes Gewissen einreden.</p>
<p> LLAP</p>
<div class="signature">-- <br>
<em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785336?srt=yes#m1785336Tabellenkalk2021-03-06T15:41:46Z2021-03-06T15:41:46ZBild sensitiv machen<p>Hallo,</p>
<blockquote>
<p>Es gibt hier keine 24/7-Anwesenheitspflicht.</p>
</blockquote>
<p>Ist das neu?</p>
<p>Gruß<br>
Kalk</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785337?srt=yes#m1785337Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2021-03-06T16:48:06Z2021-03-06T16:48:06ZBild sensitiv machen<p>Hallo Gunnar Bittersmann,</p>
<blockquote>
<blockquote>
<p>Aber wenn Gunnar die CSS-Battle wichtiger ist als eine kurze Stellungnahme zu "Button vs Details" …</p>
</blockquote>
<p>Es gibt hier keine 24/7-Anwesenheitspflicht. Und ich lasse mir da kein schlechtes Gewissen einreden.</p>
</blockquote>
<p>zu Ende lesen!</p>
<blockquote>
<blockquote>
<p>Bei einem gravierenden Accessibility-Fehler hätte er sich sicherlich schon deutlicher geäußert.</p>
</blockquote>
</blockquote>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Du kannst das Projekt SELFHTML unterstützen,<br>
indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt.
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785344?srt=yes#m1785344Gerrit2021-03-06T17:44:57Z2021-03-06T17:44:57ZBild sensitiv machen<p>Hallo Gunnar, hallo Rolf,<br>
ich wollte auch nicht drängeln!<br>
Ich schaue einfach ab und zu noch einmal vorbei.<br>
Gruß<br>
Gerrit</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785543?srt=yes#m1785543Gerrit2021-03-09T14:15:11Z2021-03-09T14:15:11ZBild sensitiv machen<p>Hi,<br>
ist Gunnar noch mit der CSS-Battle zugange?<br>
Vielleicht kann mir jemand einen Tipp geben zu dem Problem:</p>
<p><a href="https://jsfiddle.net/Gerrit1/z19px3ec/1/" rel="noopener noreferrer">Hier </a><br>
schiebt sich der Seiteninhalt nach unten, wenn man auf "Menu" klickt.<br>
Wie erreiche ich, dass das Auswahlmenu über die aktuelle Seite gelegt wird?<br>
Gruß<br>
Gerrit</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785545?srt=yes#m1785545Rolf B2021-03-09T14:22:57Z2021-03-09T14:22:57ZBild sensitiv machen<p>Hallo Gerrit,</p>
<p>indem Du - wenn Du die Schachtelung der Elemente anders als in meinem Fiddle machst, auch das CSS entsprechend änderst.</p>
<p>Die CSS Selektoren gehen von einer bestimmten Hierarchie der Elemente aus.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785546?srt=yes#m1785546JürgenBhttps://www.j-berkemeier.de2021-03-09T14:24:27Z2021-03-09T14:24:27ZBild sensitiv machen<p>Hallo,</p>
<blockquote>
<p><a href="https://jsfiddle.net/Gerrit1/z19px3ec/1/" rel="noopener noreferrer">Hier </a><br>
schiebt sich der Seiteninhalt nach unten, wenn man auf "Menu" klickt.<br>
Wie erreiche ich, dass das Auswahlmenu über die aktuelle Seite gelegt wird?</p>
</blockquote>
<p>im <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zug%C3%A4ngliche_Dropdown-Navigation" rel="nofollow noopener noreferrer">Tutorial</a> mache ich das mit position: absolute, aber erst, nachdem ich sicher bin, das Javascript eingeschaltet ist, und ich prüfen kann, ob details/summary unterstütz wird und der Polyfill bei Bedarf geladen werden kann.</p>
<p>Details/summary würde z.B. im IE bei absoluter Positionierung den Inhalt überdecken. Ich teste aber gerade eine reine CSS-Abfrage mit</p>
<pre><code class="block language-css"><span class="token atrule"><span class="token rule">@supports</span> <span class="token punctuation">(</span><span class="token property">width</span><span class="token punctuation">:</span> max-content<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment">/* Nicht für IE und MS-Edge */</span>
<span class="token selector">#sitenav</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 punctuation">}</span>
<span class="token selector">#sitenav ul</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 punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Gruß<br>
Jürgen</p>
https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785584?srt=yes#m1785584Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2021-03-09T19:47:34Z2021-03-09T19:47:34ZBild sensitiv machen<p>@@Gerrit</p>
<blockquote>
<p>ist Gunnar noch mit der CSS-Battle zugange?</p>
</blockquote>
<p><a href="https://twitter.com/css_battle/status/1369244096691249155" rel="nofollow noopener noreferrer">Aber ja. </a></p>
<p> LLAP</p>
<div class="signature">-- <br>
<em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon
</div>