SELFHTML-Blog Das Weblog als Ergänzung zu SELFHTML https://forum.selfhtml.org/weblog Wir erzwingen Ihre Einstimmung! Mon, 18 Mar 24 09:15:06 Z https://forum.selfhtml.org/weblog/2024/mar/18/wir-erzwingen-ihre-einstimmung/1814147#m1814147 https://forum.selfhtml.org/weblog/2024/mar/18/wir-erzwingen-ihre-einstimmung/1814147#m1814147 <p>In der Netzgemeinde hat sich der Begriff des <strong>Cookie-Terror-Banners</strong> längst etabliert. Hintergrund ist eine EU-Vorgabe, dass Seitenbetreiber nur dann Cookies auf dem Gerät ihrer Besucher speichern dürfen, wenn diese dem zustimmen.</p> <p>Das hat dazu geführt, dass man seit Jahren auf sehr vielen Webseiten Einblendungen vorfindet, die sich über den eigentlichen Seiteninhalt ausbreiten und sehr aufdringlich nach der Zustimmung verlangen, dass die Seite Cookies speichern darf. Solche Einblendungen sind im Alltag störend und nicht selten absichtlich unbequem in der Bedienung, wenn man nicht blind einfach alles abnicken möchte.</p> <p><a href="/images/ecc3642e-e505-11ee-a4dd-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/ecc3642e-e505-11ee-a4dd-9c6b00263d9f.png?size=medium" alt="Ansicht der Seite heise.de mit offenem Cookie-Banner" title="Heise-Startseite mit Cookie-Banner" loading="lazy"></a></p> <p>Entweder man schont seine Nerven und willigt brav in alles ein, was <a href="https://blog.fefe.de/?ts=9ebe1abc" rel="nofollow noopener noreferrer">dem Ausspähen von Daten Tür und Tor öffnen</a> kann, oder man installiert sich ein passendes Browser-Plugin, das einem die Werbung und datenschnüffelnde Cookies vom Hals hält wie z.B. <a href="https://ublockorigin.com/" rel="nofollow noopener noreferrer">uBlock origin</a>. Wir wären aber nicht SELFHTML, wenn wir nicht auch eine Idee hätten, wie man sich nervige Einblendungen vom Hals halten könnte.</p> <p>Solche Cookie-Banner werden per JavaScript über den eigentlichen Seiteninhalt gelegt, indem sie das Dokument im Browser um gewisse Elemente erweitern. Könnte man jetzt sein eigenes JavaScript-Programm ausführen, wäre es denkbar, diese Elemente wieder aus dem Dokument zu entfernen. Aber wie soll man ein JavaScript in eine fremde Seite einbinden, wenn man keinen Schreibzugriff auf dem jeweiligen Webserver hat?</p> <h3>Userscripte im Browser via Plugin</h3><p>Mit entsprechenden Browser-Plugins wie z.B. <a href="https://www.tampermonkey.net/" rel="nofollow noopener noreferrer">Tampermonkey</a> kann man eigene JavaScript-Dateien im Kontext einer fremden Website ausführen lassen. Damit kann man sich ein Script schreiben, das so manches Cookie-Banner erkennt und entfernt.</p> <p>JavaScript im Browser bietet mit dem <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" rel="nofollow noopener noreferrer">MutationObserver</a> ein geeignetes Werkzeug an, um zu erkennen, wenn Teile des Dokuments im Browser verändert wurden, weil z.B. ein Element per JavaScript hinzugefügt wurde. Damit ist es dann ein Leichtes, auf bestimmte Elemente, Klassennamen oder Attributwerte zu prüfen, um die einschlägigen Banner zu finden. Das folgende Script bietet zwar nicht den Komfort und die Sicherheit, die ein Browser-Plugin wie uBlock origin bietet, aber als Spielerei gegen Cookie-Terror-Banner ist es allemal ein netter Zeitvertreib, vor allem dann, wenn man die jeweiligen Erkennungsmerkmale im Seiteninspektor herausfindet, um sie dann im Script zu ergänzen.</p> <p>Das folgende Code-Listing kann als lokale Script-Datei in Tampermonkey hinterlegt werden. Die einzeiligen Kommentare am Anfang steuern auf welchen Seiten im Internet es eingebunden werden soll (aktuell auf allen, siehe die @match-Regeln). Hinweise zu seiner Funktionalität stehen nach dem Code-Listing.</p> <pre><code class="block language-javascript"><span class="token comment">// ==UserScript==</span> <span class="token comment">// @name Anti Terror Banner Script</span> <span class="token comment">// @namespace http://tampermonkey.net/</span> <span class="token comment">// @version 0.1</span> <span class="token comment">// @description try to take over the world!</span> <span class="token comment">// @author Anti Terrorist Banner Coder</span> <span class="token comment">// @match https://*/*</span> <span class="token comment">// @match http://*/*</span> <span class="token comment">// @icon none</span> <span class="token comment">// @grant none</span> <span class="token comment">// @run-at document-end</span> <span class="token comment">// ==/UserScript==</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token string">'use strict'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> terrorBanners <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token comment">// sp_message_container</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">'[id^="sp_message_container"]'</span><span class="token punctuation">,</span> <span class="token literal-property property">classes</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token string">"html"</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"sp-message-open"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// onetrust</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">"#onetrust-consent-sdk"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// ion-modal</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">"ion-modal"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// cc_banner</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">".cc-banner"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// usercentrics</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">"#usercentrics-root"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// didomi</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">"#didomi"</span><span class="token punctuation">,</span> <span class="token literal-property property">classes</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token string">"body"</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"didomi-popup-open"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// cmpbox</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">"#cmpbox, #cmpbox2"</span><span class="token punctuation">,</span> <span class="token literal-property property">attributes</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token string">"body"</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"style"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// cmp-modal</span> <span class="token punctuation">{</span> <span class="token literal-property property">classes</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token string">"*"</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"modal-backdrop"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token string">"*"</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"modal-cmp"</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// needsclick</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">"div.needsclick"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// snigel</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">"div.snigel-cmp-framework"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// gdpr-consent-tool</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">"div#gdpr-consent-tool-wrapper"</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">const</span> observer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MutationObserver</span><span class="token punctuation">(</span><span class="token parameter">mutations</span> <span class="token operator">=></span> <span class="token punctuation">{</span> terrorBanners<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">banner</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>banner<span class="token punctuation">.</span>elements<span class="token punctuation">)</span> <span class="token punctuation">{</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span>banner<span class="token punctuation">.</span>elements<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span> <span class="token parameter">element</span> <span class="token operator">=></span> element<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>banner<span class="token punctuation">.</span>attributes<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> attributes <span class="token operator">=</span> <span class="token punctuation">(</span> banner<span class="token punctuation">.</span>attributes <span class="token keyword">instanceof</span> <span class="token class-name">Array</span> <span class="token operator">?</span> banner<span class="token punctuation">.</span>attributes <span class="token operator">:</span> <span class="token punctuation">[</span>banner<span class="token punctuation">.</span>attributes<span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> attributes<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>element <span class="token operator">&&</span> data<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token punctuation">{</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>element<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span> <span class="token parameter">element</span> <span class="token operator">=></span> element<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>banner<span class="token punctuation">.</span>classes<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> classes <span class="token operator">=</span> <span class="token punctuation">(</span> banner<span class="token punctuation">.</span>classes <span class="token keyword">instanceof</span> <span class="token class-name">Array</span> <span class="token operator">?</span> banner<span class="token punctuation">.</span>classes <span class="token operator">:</span> <span class="token punctuation">[</span>banner<span class="token punctuation">.</span>classes<span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> classes<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>element <span class="token operator">&&</span> data<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token punctuation">{</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>element<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span> <span class="token parameter">element</span> <span class="token operator">=></span> element<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> observer<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">subtree</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">childList</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">attributes</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token literal-property property">characterData</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token literal-property property">attributeOldValue</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token literal-property property">characterDataOldValue</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Im großen Array <code>terrorBanners</code> stehen einzelne Objekte, in denen die jeweiligen Erkennungsmerkmale hinterlegt sind. Ein solches Objekt kann diese Eigenschaften haben:</p> <ul> <li>elements - Selektor für Elemente, die zu entfernen sind</li> <li>attributes - Objekt (oder ein Array solcher Objekte), welches Namen von Attributen definiert, die von Objekten entfernt werden müssen: <ul> <li>element - Selektor für Elemente, die dieses Attribut haben können</li> <li>name - Name des Attributs</li> </ul> </li> <li>classes - Objekt (oder ein Array solcher Objekte), welches Namen von Klassen definiert, die von Objekten entfernt werden müssen: <ul> <li>element - Selektor für Elemente, die diese Klasse haben können</li> <li>name - Name der Klasse</li> </ul> </li> </ul> <h3>Fazit</h3><p>Ein solches Script kann die Bedienung von Seiten erleichtern, weil es die Einblendungen wieder entfernt, welche die Benutzung der Seite ansonsten blockieren. Es gibt aber Banner-Mechanismen, die den eigentlichen Seiteninhalt durch ein unscharfes Hintergrundbild ersetzen. Auf solchen Seiten sieht man dann natürlich keine brauchbaren Inhalte, wenn man das Cookie-Banner entfernt. Und es ist keinesfalls garantiert, dass eine Seite nicht schon vor der Einwilligung durch den Benutzer mindestens ein Cookie setzt, auch wenn das klar gegen die EU-Verordnung verstößt. Aber für den Hobby-Bastler kann es Vergnügen bereiten, sich auf diese Weise gegen allzu penetrante Gängelungen zu wehren.</p> @when das W3C aufSASSig wird - CSS Conditionals Level 5 und die Kompatibilität Sat, 17 Feb 24 16:47:05 Z https://forum.selfhtml.org/weblog/2024/feb/17/when-das-w3c-aufsassig-wird-css-conditionals-level-5-und-die-kompatibilitat/1813608#m1813608 https://forum.selfhtml.org/weblog/2024/feb/17/when-das-w3c-aufsassig-wird-css-conditionals-level-5-und-die-kompatibilitat/1813608#m1813608 <p>Die CSS Conditionals 5 Spezifikation entwickelt sich. Aber sie haben ein Problem: SASS</p> <p>Wer SASS kennt, weiß es: Man kann – auf dem Server, zur Generierungszeit – Bedingungen formulieren und damit beispielsweise steuern, welche CSS-Variante ein Mixin erzeugt. Das Schlüsselwort, das SASS dafür verwendet, heißt <code>@if</code> – und damit wildert es im Wald der generellen Syntax für @-Regeln, die CSS im Browser verwendet.</p> <p>Das war lange unkritisch, aber das W3C entwickelt seit ein paar Jahren an der Stufe 5 von CSS-Bedingungen (CSS Conditionals Level 5). Die bisherigen Stufen brachten uns <code>@media</code>-Queries für Medientypen und Medienfeatures, sowie <code>@supports</code>-Abfragen für Eigenschaften und Selektoren.</p> <p>Mit Stufe 5 wird <code>@supports</code> um Abfragen für Font-Technologien und Font-Formate erweitert. Die zugehörige Syntax lautet</p> <pre><code class="block language-css"> <span class="token atrule"><span class="token rule">@supports</span> <span class="token function">font-tech</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@supports</span> <span class="token function">font-format</span><span class="token punctuation">(</span>format<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> </code></pre> <p>Als Format können diejenigen Formate angegeben werden, die in der format()-Angabe der src-Eigenschaft einer <a href="https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face" rel="nofollow noopener noreferrer">@font-face Definition</a> zulässig sind, also beispielsweise <code>woff2</code>, <code>truetype</code> oder <code>eot</code>.</p> <p>Font-Technologien sind etwas, was in <a href="https://www.w3.org/TR/css-fonts-4/#font-tech-definitions" rel="nofollow noopener noreferrer">Abschnitt 11 der CSS Fonts 4 Spezifikation</a> beschrieben wird. Wenn Sie Spezialfonts verwenden wollen, die besondere Technologien verwenden, dann sollte sich bei dem jeweiligen Font ein Hinweis auf diese Technologien finden. Wenn nicht, dann sind diese Abfragen für Sie ohne Belang.</p> <h3>Und was hat es nun mit SASS auf sich?</h3><p>Die dritte Neuerung, die uns CSS Conditionals 5 bringen wird, ist eine Zusammenführung von <code>@media</code>- und <code>@supports</code>-Abfragen in eine generelle Abfragesyntax, die auch Abfrageketten und einen Defaultzweig ermöglicht. Also das, was Programmierer schon längst als</p> <pre><code class="block">if (bedingung) ... else if (bedingung) ... else ... </code></pre> <p>kennen.</p> <p>Und hier liegt die Crux: Die Spezifikation verwendet eine @-Regel Syntax, aber <code>@if</code> ist bereits von SASS reserviert worden. Würde natives CSS nun ein <code>@if</code> einführen, so wäre entweder SASS gezwungen, dem Präprozessor genug Intelligenz einzuhauchen, um ein SASS-<code>@if</code> von einem CSS-nativen <code>@if</code> zu unterscheiden – oder alle SASS-Quellen müssten von <code>@if</code> auf ein <code>@-sass-if</code> oder etwas ähnliches umsteigen.</p> <p>Weil SASS eine gewaltige Verbreitung hat, wollte man das vermeiden. Die Spezifikation verwendet statt <code>@if</code> deshalb eine Syntax mit <code>@when</code>:</p> <pre><code class="block">@when bedingung { ... } @else bedingung { ... } @else { /* Default-Fall */ ... } </code></pre> <p>Als Bedingung kommt eine Syntax zum Einsatz, wie sie für <code>@supports</code> eingeführt wurde. Für die bisherigen Abfragen auf Medienfeatures und unterstützte Eigenschaften werden die Pseudofunktionen <code>media()</code> und <code>supports()</code> eingeführt. <code>selector()</code>, <code>font-format()</code> und <code>font-tech()</code> wird von <code>@supports</code> übernommen:</p> <pre><code class="block">@when media(width > 50em) @when supports(background-music:url(foo.wav)) @when selector( body:has(:passive) ) @when font-format(woff2) @when font-tech(color-COLRv0) </code></pre> <p>Die Abfragen auf background-music und :passive sollten in aktuellen Browsern natürlich fehlschlagen…</p> <p>Das lässt sich auch mit <code>AND</code> und <code>OR</code> kombinieren, die Spec enthält dieses Beispiel:</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@when</span> <span class="token function">media</span><span class="token punctuation">(</span>width >= 400px<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token function">media</span><span class="token punctuation">(</span><span class="token property">pointer</span><span class="token punctuation">:</span> fine<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token function">supports</span><span class="token punctuation">(</span><span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment">/* A */</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@else</span> <span class="token function">supports</span><span class="token punctuation">(</span><span class="token property">caret-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token function">supports</span><span class="token punctuation">(</span><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">double-rainbow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment">/* B */</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@else</span></span> <span class="token punctuation">{</span> <span class="token comment">/* C */</span> <span class="token punctuation">}</span> </code></pre> <p>Das ist ziemlich großartig, und erspart uns umständliche Doppelabfragen auf <code>width > 50em</code> und <code>width <= 50em</code>. Her damit, sag ich!</p> <p>Womit man aber nicht gerechnet hatte, war der Aufschrei der Community. Wie man denn auf die Idee käme, das so naheliegende <code>@if</code> zu verwerfen, und einen Kniefall vor einem dahergelaufenen Toolfuzzi zu machen? „Tools kommen und gehen, Standards sind für die Ewigkeit“, wurde angeführt, also habe sich doch SASS gefälligst zu bewegen und der Spec Platz zu machen. Und weil die Änderung nicht die Benutzer, sondern die Autoren betrifft, ist das doch alles kein Thema. Schnell mal den Replace auf die Codebasis, SASS updaten, und gut ist. Höre ich da ein leises Mimimi? Pah! Nun gut, Lea Verou hat es freundlicher formuliert.</p> <p>Das ignoriert natürlich den Umstand, dass SASS nicht irgendein zusammengefrickeltes Tool mit 13 Anwendern ist. Es ist 4 Jahre älter ist als der erste CSS-3 Draft, der <code>@media</code>-Featurequeries und eine <code>@supports</code>-Regel einführte. Bei SASS kam damals niemand auf die Idee, dass 2021 ein erster Working Draft für CSS-Bedingungen mit <code>@when</code> (oder <code>@if</code> oder <code>@on</code> oder <code>@case</code> oder was auch immer) veröffentlicht werden würde. Und es ignoriert den Umstand, dass der größte Teil professionell erstellter Webseiten CSS Präprozessoren wie SASS verwendet. Das Mimimi wäre also eher ein Hurrikan.</p> <p>Gut, die Diskussion zu <code>@if</code> vs <code>@when</code> ist etwa 5 Jahre älter, wie Tab Atkins in einem der Zank-Threads zu diesem Thema schrieb, aber dennoch kann man von SASS nicht erwarten, so weit in die Zukunft zu schauen. Viellecht <strong>hätte</strong> man erwarten können, dass SASS nicht den "Namensraum" der @-Regeln in Beschlag nimmt und %-Regeln statt @ Regeln verwendet. Die Diskussionen dazu wirken allerdings teilweise so, als ginge es vor allem ums Rechthaben, und nicht darum, eine praktische Lösung zu finden.</p> <p>Werden wir nun als Partner für <code>@else</code> ein <code>@when</code> bekommen? Oder doch ein <code>@if</code>? Werden SASS-User einen globalen Search&Replace auf ihre Codebasis machen müssen, um <code>@if</code> durch <code>@-if</code> zu ersetzen? Oder gar eine Option, um <code>@if</code> durch <code>%if</code> zu ersetzen? In den Diskussions-Threads ist es stiller geworden, und bislang steht in der CSS Conditionals 5 Spec immer noch ein <code>@when</code>.</p> <p>Aber bisher hat es auch noch kein Browserhersteller unternommen, mit der Implementierung zu beginnen. Bei Chromium, Mozilla und Webkit existieren Implementierungstickets, aber bei keinem steht etwas von "Arbeit begonnen". Wir können uns nur wünschen, dass der Streit bald geklärt wird und @else endlich erfährt, wozu sie die Alternative liefern darf.</p> <p><strong>Quellen</strong></p> <ul> <li><a href="https://www.w3.org/TR/css-conditional-5/" rel="nofollow noopener noreferrer">CSS Conditionals Level 5 Spezifikation</a></li> <li>Kingsley Lubahn auf blog.logrocket.com: <a href="https://blog.logrocket.com/extending-css-when-else-chains-first-look/" rel="nofollow noopener noreferrer">Extending CSS when/else chains: A first look</a></li> <li><a href="https://tabatkins.github.io/specs/css-when-else/" rel="nofollow noopener noreferrer">Tab Atkins erste Idee zu @when und @else</a> und <a href="https://github.com/w3c/csswg-drafts/issues/112" rel="noopener noreferrer">eine Diskussion</a> dazu.</li> <li>Sie führt zum <a href="https://github.com/w3ctag/design-principles/issues/335" rel="noopener noreferrer">Streit um's @when</a> – Lea Verou vs Tab Atkins (Google) und Natalie Weizenbaum (SASS)</li> </ul> Navigation - alles inclusive Wed, 31 Jan 24 09:40:12 Z https://forum.selfhtml.org/weblog/2024/jan/31/navigation-alles-inclusive/1813156#m1813156 https://forum.selfhtml.org/weblog/2024/jan/31/navigation-alles-inclusive/1813156#m1813156 <p>Eigentlich sollten alle Fragen, die es je zu Navigationen geben könnte, bereits in unserer Doku beantwortet worden sein.</p> <p>Allerdings haben sich die Anforderungen über die Jahre immer wieder geändert, sodass es Zeit für eine Bestandsaufnahme und Komplett-Überarbeitung wurde:</p> <ul> <li><strong><a href="https://wiki.selfhtml.org/wiki/Navigation" rel="nofollow noopener noreferrer">Navigation</a></strong> - alles über Menüs und Navigationen</li> </ul> <h3>Konventionen geben Sicherheit!</h3><p>Bereits 2003 gab es in der alten Doku eine <a href="https://web.archive.org/web/20030308125507/http://de.selfhtml.org/dhtml/beispiele/navigation.htm" rel="nofollow noopener noreferrer">Dynamische Navigationsleiste</a>, die folgende Warnung enthielt:</p> <p><em><strong>Beachten Sie:</strong> Erklären Sie dem Anwender auf der ersten Seite, wo Sie eine solche Navigation verwenden, kurz mit einem Satz das Handling der Navigation. …</em> <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p>Aus heutiger Sicht fällt die Schwachstelle sofort auf: Niemand will raten oder nachlesen müssen, um eine Navigation bedienen zu können.</p> <p>So wie der gewohnte Ort für die Taschenlampe in der Schublade an der Haustür sicherstellt, dass ich sie im Falle eines Stromausfalls auch zur Hand habe, verlassen sich gute Webseiten auf <strong>Konventionen, die Anwendern vertraut sind</strong>, damit Webseiten schnell und kom­for­tabel bedient werden können.</p> <p>Solch ein gewohntes <em>Look & Feel</em> berücksichtigt …</p> <ol> <li>die Leserichtung von oben links nach rechts und positioniert die Navigation gut sichtbar.</li> <li>Die aktuelle Seite ist gekennzeichnet und</li> <li>die Linktexte sind klar und verständlich, damit Nutzer schnell und sicher zur gewünschten Seite kommen.</li> </ol> <p>Um eine Navigation übersichtlich zu halten, kann sie zweitrangige Links zunächst verbergen und diese durch eine Benutzerinteraktion sichtbar machen:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/Navigation/Dropdown-Men%C3%BC" rel="nofollow noopener noreferrer">Navigation/Dropdown-Menü</a></li> <li><a href="https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC" rel="nofollow noopener noreferrer">Navigation/Flyout-Menü</a></li> </ul> <h3>Dropdown ohne JavaScript?</h3><p>Früher war eine reine CSS-Lösung, die mit :hover aufgeklappt wurde, möglich, heute reicht das nicht mehr!</p> <p>Warum? Heute ist das Netz größer und vielfältiger geworden:</p> <ul> <li>Mehr als die Hälfte der Nutzer surft mit dem Handy oder Tablet. Dort gibt es keine Maus!</li> <li>Sehbehinderte - aber auch Autofahrer und Menschen am Herd - lassen sich Seiten vorlesen.</li> <li>In ihrer Motorik eingeschränkte Menschen - aber auch IT-Profis navigieren lieber mit der Tab-Taste.</li> </ul> <p>CSS-basierte Dropdown-Menüs basierten darauf, dass ein Nutzer einen Link zweifach benutzen konnte:</p> <ol> <li><code>:hover</code> mit der Maus öffnet das zuvor verborgene Submenü</li> <li>ein Klick aktiviert den Link und führt zur neuen URL</li> </ol> <p>Webseiten, die alle die oben erwähnten Nutzer mit einschließen wollen, müssen das trennen. Deshalb benötigt man neben dem Link einen Button, mit dem man das Untermenü per JS öffnen kann. Dies geschieht über das Setzen und Entfernen eine Klasse, die Formatierung übernimmt CSS.</p> <p>Das im überarbeiteten Tutorial vorgestellte Drowpdown-Menü wird Schritt für schritt aufgebaut und erklärt; bietet aber auch eine <a href="https://wiki.selfhtml.org/wiki/Navigation/Dropdown-Men%C3%BC#Kopiervorlage_f.C3.BCr_Ungeduldige" rel="nofollow noopener noreferrer"><strong>Kopiervorlage für Ungeduldige</strong></a>. Sie kann in bestehende Seiten eingebunden werden und erweitert eine „normale“ Navigation mit Liste und Unterlisten zu einem zugänglichen Drowpdown-Menü.</p> <hr> <p>BTW: Das oben erwähnte Beispiel aus dem Jahre 2003 war nicht der einzige Versuch einer Dropdown-Navigation. Dieser Screenshot zeigt ein Beispiel aus dem Jahre 2011 mit einer <code>parentNode</code>-Kette, , weil es den IE6 berücksichtigen musste.<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p> <p><a href="/images/70ae42c0-b13d-11ed-9996-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/70ae42c0-b13d-11ed-9996-b42e9947ef30.png?size=medium" alt="Screenshot einer Kette von parentNode, weil es den IE6 berücksichtigen musste" title="Screenshot einer `parentNode`-Kette, weil es den IE6 berücksichtigen musste " loading="lazy"></a></p> <p>Hoffen wir, dass unsere 2024er Version auch mehrere Jahre übersteht! </p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://web.archive.org/web/20030308125507/http://de.selfhtml.org/dhtml/beispiele/navigation.htm" rel="nofollow noopener noreferrer">Dynamische Navigationsleiste</a> (de.selfhtml.org/dhtml/beispiele/navigation.htm) <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><a href="https://wiki.selfhtml.org/wiki/Museum/Eine_zug%C3%A4ngliche_Multilevel-Dropdown-Navigation" rel="nofollow noopener noreferrer">Museum/Eine zugängliche Multilevel-Dropdown-Navigation</a> von Beatovich, 2011 <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> OKLCH: greller, bunter und so weiter? Sun, 21 Jan 24 08:01:14 Z https://forum.selfhtml.org/weblog/2024/jan/21/oklch-farbe-und-helligkeit/1812893#m1812893 https://forum.selfhtml.org/weblog/2024/jan/21/oklch-farbe-und-helligkeit/1812893#m1812893 <p>Auf unserer MV im November fielen uns unerklärliche Werte in unserer Farbpalette auf. Die Recherche dazu führte zu einer umfassenden Neubearbeitung unserer Wikiseiten zu Farbangaben und Farbpaletten:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/Farbe" rel="nofollow noopener noreferrer"><strong>Farbe</strong></a></li> </ul> <p>Unsere Farbpalette bestand aus vier Grundtönen und entsprechenden Pastellfarben:</p> <table> <tr> <td style="background:hsl(201 50% 40%);color:white;padding:0.5em 3em;">blau</td> <td style="background:hsl(201 50% 40% /0.1);padding:0.5em 1em;"">hsl(201 50% 40% /0.1)</td> </tr> <tr> <td style="background:hsl(44 75% 50%);padding:0.5em 3em;">gelb</td> <td style="background:hsl(44 75% 50% /0.1);padding:0.5em 1em;"">hsl(44 75% 50% /0.1)</td> </tr> <tr> <td style="background:hsl(13 96% 40%);color:white;padding:0.5em 3em;">rot</td> <td style="background:hsl(13 96% 40% /0.1);padding:0.5em 1em;"">hsl(13 96% 40% /0.1)</td> </tr> <tr> <td style="background:hsl(80 45% 50%);padding:0.5em 3em;">grün</td> <td style="background:hsl(80 45% 50% /0.2);padding:0.5em 1em;"">hsl(80 45% 50% /0.2)</td> </tr> </table> <p>Erste Reaktion unserer Mitglieder: <strong>„Wo sind die Kommas?“</strong></p> <p>Schon seit längerem wurde die Schreibweise der Farbfunktionen so angepasst, dass Parameter innerhalb von CSS-Funktionen mit Leerzeichen getrennt werden. Ein optionaler Alphawert wird - wie oben gezeigt - nach einem Slash notiert. Auch unser SELF-Wiki verwendet bereits seit Februar 2022 nur noch die neue, einfachere Schreibweise!</p> <p>Zweite Reaktion: <strong>„Warum ist der Alphawert bei Hellgrün anders?“</strong></p> <p>Ich hatte versucht, aus bestehenden HEX-Werten durch die Umrechnung in hsl() eine Systematik zu finden. Allerdings gibt es bei HSL, der Mischung aus Farbton (<em><strong>H</strong>ue</em>); Sättigung und Helligkeit (<em><strong>L</strong>ightness</em>) das Problem, dass die mit hsl() beschriebenen Werte nicht mit der <a href="https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle#Helligkeit_in_HSL" rel="nofollow noopener noreferrer">wahrgenommenen Helligkeit</a> übereinstimmen.</p> <h3>neue Farbräume</h3><p>Eigentlich jedem klar, aber dann doch wieder erwischt: Es gibt eben nicht <strong>die</strong> drei Grund- und x Sekundärfarben, die Farbnamen und die 16,7 Farben des RGB-Farbraums. In der Natur gibt viel mehr Farbtöne, auch das menschliche Auge kann mehr als den RGB-Farbraum erfassen. Die 8-Bit des RGB-Farbraums sind nur eine Festlegung.</p> <p>Um Farben besser darstellen zu können, gibt es nun die Möglichkeit weitere Farbräume in CSS zu nutzen.</p> <p>Unter den vielfältigen Möglichkeiten sticht besonders die oklch()-Funktion hervor, die im <a href="https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle#CIELAB_Farbmodelle" rel="nofollow noopener noreferrer">OKLAB-Farbraum</a> Farben durch ihre Bestandteile …</p> <ul> <li><em><strong>L</strong>ightness</em> (Helligkeit)</li> <li><em><strong>C</strong>hroma</em> (relative Buntwirkung)</li> <li><em><strong>H</strong>ue</em> (Farbton)</li> </ul> <p>definiert.</p> <p><strong>Anmerkung:</strong> Bei der Überarbeitung der Wikiseiten standen wir vor dem Problem, dass unsere Desktop-Monitore das volle Spektrum der Farben noch nicht ausnutzen und wir zum Testen immer wieder unsere fortschrittlicheren Mobilgeräte nutzen mussten. Auch wird die mächtige relative Syntax noch nicht im Firefox unterstützt. Trotzdem ist es eine interessante Entwicklung mit neuen Möglichkeiten!</p> <p>Entdecke die Welt der Farben:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/Farbe" rel="nofollow noopener noreferrer"><strong>Farbe</strong></a> <ul> <li><a href="https://wiki.selfhtml.org/wiki/Farbe/Farbangaben" rel="nofollow noopener noreferrer"><strong>Farbangaben</strong></a><br> Farbnamen, currentColor, etc</li> <li><a href="https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle" rel="nofollow noopener noreferrer"><strong>Farbmodelle</strong></a><br> rgb(), HEX, hsl() und das neue oklch()</li> <li><a href="https://wiki.selfhtml.org/wiki/Farbe/Farbkonzept" rel="nofollow noopener noreferrer"><strong>Farbkonzept</strong></a><br> vom Farbkreis über die Harmonielehre zur Farbpalette</li> <li><a href="https://wiki.selfhtml.org/wiki/Farbe/Farben_und_Kontraste" rel="nofollow noopener noreferrer"><strong>Farben und Kontraste</strong></a><br> der Klassiker von Jan Eric Hellbusch mit vielen Beispielen!</li> </ul> </li> </ul> <p><strong>PS</strong>: Im Zuge der Überarbeitung haben wir auch unsere Beispielvorlage um eine Direktansicht ergänzt. Vielen Dank an <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a></p> Trend 2024: eine eigene Webseite! Mon, 01 Jan 24 12:50:52 Z https://forum.selfhtml.org/weblog/2024/jan/01/trend-2024-eine-eigene-webseite/1812447#m1812447 https://forum.selfhtml.org/weblog/2024/jan/01/trend-2024-eine-eigene-webseite/1812447#m1812447 <p>2023 stand unter der Frage, zu welchem sozialen Netzwerk man denn nun gehen solle.</p> <p>SELFHTML war schon vorher bei <a href="https://bildung.social/@selfhtml" rel="nofollow noopener noreferrer">Mastodon</a> im <a href="https://wiki.selfhtml.org/wiki/Fediverse" rel="nofollow noopener noreferrer">Fediverse</a> präsent, aber leider nicht sehr aktiv. Ich gelobe dort regelmäßig Neuigkeiten aus der Webwelt dort hinauszutröten.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> Ein bisschen erstaunt war ich, dass einige, die vorher den Umstieg auf das Fediverse propagierten, plötzlich Einladungen zum <em>„blauen Himmel“</em> versprachen.<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> Ist das Fediverse nun die Zukunft oder gibt es etwas Besseres?</p> <p>Nachteil von Mastodon ist z.B. die fehlende Möglichkeit Text zu formatieren, selbst Markdown ist (noch) nicht möglich. Andererseits hat sich die anfängliche Leere im täglichen Feed mittlerweile mit Katzen- und Urlaubsbildern gefüllt. </p> <h3>Die Alternative</h3><p>Bereits im letzten Jahr schrieb <a href="https://bildung.social/@Daojoan@mastodon.social/111663265437904903" rel="nofollow noopener noreferrer">Joan Westenberg auf Mastodon</a>:</p> <div style="padding-left:2em"> <em>Own your own website. Own your mailing list. Own your newsletter. Own your blog and prioritise your RSS feed. </em> <p><em>This is the stuff that works in the long term. </em></p> <p><em>Chasing virality on every new shiny platform is a waste of time.</em></p> </div> <p>Und so wie die Seiten von StudiVZ längst im Orkus sind, werden auch andere Social Media Kanäle irgendwann mit Gebührenmodellen überzogen oder unvermittelt abgeschaltet, so dass eine eigene Webseite für Sicherheit sorgt, da sie ja in der eigenen Hand ist.</p> <p><a href="https://matthiasott.com/notes/2024-the-year-of-the-personal-website" rel="nofollow noopener noreferrer">Matthias Ott schrieb heute morgen </a></p> <div style="padding-left:2em"> <em> Ihre persönliche Website ist ein Ort, der Ihnen große kreative Freiheit und Kontrolle bietet. Sie ist ein Ort, an dem Sie schreiben, erstellen und teilen können, was immer Sie möchten, ohne jemanden um Erlaubnis fragen zu müssen. Sie ist auch der perfekte Ort, um neue Dinge zu erforschen und auszuprobieren, z. B. verschiedene Arten von Beiträgen, verschiedene Stile und neue Webtechnologien. Es ist Ihr Spielplatz, Ihre Plattform, Ihre persönliche Ecke im Web.</em> <small>(von mir ins Deutsche übersetzt)</small> </div> <h3>Fazit</h3><p>Eine Präsenz im <a href="https://wiki.selfhtml.org/wiki/Fediverse" rel="nofollow noopener noreferrer">Fediverse</a> ist gut, noch besser ist es jedoch, mit einer eigenen Webseite und einem eigenen Blog die volle Kontrolle über die Daten, den Inhalt und auch das Design zu erhalten!</p> <p>Oft ist ja bereits ein Webauftritt vorhanden, der aber mittlerweile in die Jahre gekommen ist. Hier stellt sich die Frage, ob sich ein Redesign lohnt oder völlig neu angefangen werden sollte.</p> <h3>Unser Ziel für 2024</h3><p>SELFHTML zweifelte in den letzten Jahren ein bisschen an sich selbst und an unserem <em>mission statement</em> <a href="https://wiki.selfhtml.org/wiki/SELFHTML#Everyone.E2.80.99s_a_publisher" rel="nofollow noopener noreferrer">Everyone’s a publisher</a>. Allerdings hatten sich in den letzten Tagen im Forum, auf Discord und per Mail (<em>„Ich habe seit Ewigkeiten nichts mehr gemacht und möchte jetzt mit der Frage nach einem aktuellen Editor nicht als Dummie dastehen!</em>“) Neu- und Wiedereinsteiger mit Fragen gemeldet.</p> <p>Anlass für uns in diesem Jahr das <a href="https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F" rel="nofollow noopener noreferrer"><strong>Wie fange ich an?</strong></a> in unserem Wiki zu überprüfen und gegebenfalls zu aktualisieren:</p> <ol> <li><a href="https://wiki.selfhtml.org/wiki/Wie fange ich an?/der richtige Code-Editor">Welchen Editor sollte ich verwenden?</a> <li><a href="https://wiki.selfhtml.org/wiki/Wie fange ich an?/von der Idee zum Projekt">von der Idee zum Projekt</a><br>eigene HTML-Seiten, Seitengeneratoren oder ein CMS?<ul><li> Hugo, Eleventy und …</li></ul> <li><a href="https://wiki.selfhtml.org/wiki/Wie fange ich an?/Web-Hosting">Web-Hosting</a> <li><a href="https://wiki.selfhtml.org/wiki/PHP/Tutorials/Templates">PHP/Tutorials/Templates</a><br>(Teile einer Webseite auslagern) <li><a href="https://wiki.selfhtml.org/wiki/PHP/Tutorials/Einen_RSS-Feed_auslesen">PHP/Tutorials/Einen RSS-Feed auslesen</a> <li>…</li> </ol> <p>Weitere Baustellen und Projekte werden sich dann wohl im Laufe des Jahres ergeben!</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Privat löste ich mich von Twitter, Telegram und WhatsApp - unter anderem, um nicht jeden Tag auf zig Kanälen nach Neuem suchen zu müssen, andererseits auch um ein konsequentes Zeichen zu setzen.<br>Ein Bekannter hat seinen Twitter-Account „stillgelegt“, folgt aber noch Donald Trump, der aus der Zahl seiner Follower Kraft und Bedeutung zieht. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p>Ehemalige Twitter-Funktionäre versuchten durch eine künstliche Verknappung - Interessierte benötigten eine Einladung eines schon bestehenden Mitglieds - Interesse an der Social-Media-Plattform <strong>Blue Sky</strong> zu wecken. <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Silvester-Knaller: Exklusive Akkordeons ohne JavaScript! Sun, 31 Dec 23 09:38:09 Z https://forum.selfhtml.org/weblog/2023/dec/31/silvester-knaller-exklusive-akkordeons-ohne-javascript/1812423#m1812423 https://forum.selfhtml.org/weblog/2023/dec/31/silvester-knaller-exklusive-akkordeons-ohne-javascript/1812423#m1812423 <p>Im Oktober stellten wir die neuen <a href="https://blog.selfhtml.org/2023/oct/25/popover-ohne-programmieren" rel="noopener noreferrer">Popover-Boxen</a> vor, mit der die <a href="https://open-ui.org/" rel="nofollow noopener noreferrer">open-ui.org</a> Tooltipps und Popover vereinheitlichen wollten. Schon da wunderte ich mich über die schnelle Umsetzung der sinnvollen Vorschläge durch die Browserhersteller. Verständlich wird dies, wenn man sieht, dass viele Mitglieder der Initative Google-Mitarbeiter sind.</p> <h3>Exklusive Akkordeons</h3><p>Ein gängiges UI-Muster im Web ist eine Akkordeonkomponente (neudeutsch: Offenlegungs-Widget), die einzeln maximiert (oder minimiert) werden können, um ihren Inhalt ein- oder auszublenden. Dafür gibt es das native <a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/details" rel="nofollow noopener noreferrer">details</a>-Element.</p> <p>Eine Variante des Akkordeon-Musters ist das <strong>exklusive Akkordeon</strong>, bei dem nur eines der Offenlegungs-Widgets gleichzeitig geöffnet werden kann.</p> <p>Bis jetzt musste das mit viel JavaScript und noch mehr ARIA-Attributen von Hand nachgebaut werden. <strong>Jetzt</strong> gibt es die Möglichkeit, mehrere details-Elemente mit demselben name-Wert zu einer semantischen Gruppe zusammenzufassen. Wenn du eines der details-Elemente aus der Gruppe öffnest, wird das zuvor geöffnete Element automatisch geschlossen.</p> <p>Im Oktober klang das noch wie Zukunftsmusik, im Dezember haben das die neuesten Versionen von Chrome, Edge und Safari schon implementiert:</p> <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML_details-6.html" width="900" height="600" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details#Exklusives_Akkordeon">Exklusives Akkordeon</a> </p> </iframe> <h3>Registerkarten</h3><p>Auch Registerkarten (<em>Tab Panels</em>) sind so möglich:</p> <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML_details-7.html" width="900" height="400" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details#Exklusives_Akkordeon">Exklusives Akkordeon</a> </p> </iframe> <p>Für den Firefox und ältere Browserversionen helfen einige Zeilen Javascript! Das ausführliche Tutorial kannst du im SELF-Wiki lesen:</p> <p><a href="https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details" rel="nofollow noopener noreferrer"><strong>Infobox/Akkordeon mit details</strong></a></p> <hr> <p>So endet 2023 mit einem wirklichen „Silvester-Knaller“ und wir können uns auf 2024 und viel Neues freuen!</p> Frohe Weihnachten! Sun, 24 Dec 23 04:44:32 Z https://forum.selfhtml.org/weblog/2023/dec/24/frohe-weihnachten/1812348#m1812348 https://forum.selfhtml.org/weblog/2023/dec/24/frohe-weihnachten/1812348#m1812348 <p>In den letzten Jahren sprach ich immer wieder von Krisen und Umbruch - mittlerweile scheint das schon normal zu sein.</p> <p>Andererseits zeigte die Ungewissheit im Spätsommer auch, was es alles Gutes gab.</p> <p>Unser Forum läuft dank Christian Kruse störungsfrei und - auch wenn die Frequenz langsam abnimmt - mittlerweile in einer freundlichen Atmosphäre.</p> <p>Das Wiki wächst immer weiter sowohl in die Tiefe als auch in die Breite. Seit März gibt es sogar eine Referenz und Tutorials zu <a href="https://wiki.selfhtml.org/wiki/MathML" rel="nofollow noopener noreferrer">MathML</a>, das jetzt in allen Browsern unterstützt wird. Die Zahl der Autoren bleibt erfreulich konstant, wobei hier Rolf B als Fachkundiger und stets Aktiver besonders zu danken ist. Auch der diesjährige Adventskalender ist ihm und seinen Ideen zu verdanken!</p> <p>Der Verein hat seit November einen neuen Vorstand. Herzlich willkommen Rolf und Wiebke!</p> <p>Monatliche Vorstandstreffen und drei Developer Teams sollen SELFHTML künfitg stetig weiterentwickeln.</p> <p>Im Namen des Vereins SELFHTML e.V. wünsche ich allen Mitgliedern, Förderern und Freunden des Vereins ein frohes Weihnachtsfest sowie ein gesundes und auch sonst rundum erfolgreiches neues Jahr.</p> HTMLHell - „Da brauchst du kein JavaScript für!“ Mon, 04 Dec 23 12:31:14 Z https://forum.selfhtml.org/weblog/2023/dec/04/htmlhell-der-etwas-andere-adventskalender/1811987#m1811987 https://forum.selfhtml.org/weblog/2023/dec/04/htmlhell-der-etwas-andere-adventskalender/1811987#m1811987 <p>Auch HTMLHell von Manuel Matuzović hat dieses Jahr einen <a href="https://www.htmhell.dev/adventcalendar/" rel="nofollow noopener noreferrer">Adventskalender</a>, der sich - anders als der Name vermuten lässt - für semantisches HTML und ein barrierefreies, benutzerfreundliches Web einsetzt.</p> <p>Am 02. Dezember fand ich dort den empfehlenswerten Artikel <a href="https://www.htmhell.dev/adventcalendar/2023/2/" rel="nofollow noopener noreferrer">„You don't need JavaScript for that“</a> von Kilian Valkhof, von dem ich hier die Kernaussage übersetzt wiedergeben möchte:</p> <h2>Das Prinzip der geringsten Leistung</h2> <p>(<em><strong>the rule of least power</strong></em>) <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p>„Dies ist eines der Grundprinzipien der Webentwicklung und bedeutet, dass Sie die <strong>am wenigsten leistungsfähige Sprache für einen bestimmten Zweck wählen sollten.</strong></p> <p>Im Web bedeutet dies, dass man HTML gegenüber CSS und dann CSS gegenüber JS vorzieht. JS ist die vielseitigste der drei Sprachen, weil man damit beschreibt, wie der Browser reagieren soll, aber es kann auch kaputt gehen, es kann nicht geladen werden und es braucht zusätzliche Ressourcen zum Herunterladen, Parsen und Ausführen. Außerdem ist es sehr einfach, Tastaturbenutzer und Menschen, die unterstützende Technologien verwenden, auszuschließen.</p> <p>Im Gegensatz zu JS, das imperativ ist, sind HTML und CSS deklarativ. Man sagt dem Browser, <strong>was er tun soll</strong>, <strong>nicht wie</strong> er es tun soll. Das bedeutet, dass der Browser selbst entscheiden kann, wie er es macht, und zwar auf die effizienteste Art und Weise.</p> <p>Da HTML- und CSS-Funktionen vom Browser gehandhabt werden, sind sie leistungsfähiger, nativer, anpassungsfähiger an Benutzerpräferenzen und allgemein zugänglicher. Das bedeutet nicht, dass dies immer der Fall sein wird (vor allem, wenn es um die Zugänglichkeit geht), aber wenn der Browser die schwere Arbeit für Sie erledigt, werden Ihre Endbenutzer im Allgemeinen eine bessere Erfahrung haben.“</p> <h2>Beispiele</h2> Kilian demonstriert dies an Beispielen, die wir ähnlich auch im Wiki haben. <h3>Flip-Flop-Schalter</h3> <p>Ein <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Radio-Buttons_und_Checkboxen#FlipFlop-Schalter" rel="nofollow noopener noreferrer">FlipFlop-Schalter</a> oder toggle-Switch ist ein Software-Feature, das zwischen zwei Zuständen hin- und her schaltet.</p> <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-Tut-button-5.html" width="900" height="550" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Radio-Buttons_und_Checkboxen#FlipFlop-Schalter">SELFHTML</a> </p> </iframe> <p>Wie Sie im Beispiel sehen, funktioniert so etwas <strong>ohne</strong> Javascript.</p> <p>Ich habe zwei Empfehlungen:</p> <ol> <li>Nutzen Sie das Standardverhalten der HTML-Elemente!</li> <li>Lesen Sie <a href="https://www.htmhell.dev/adventcalendar/2023/2/" rel="nofollow noopener noreferrer">den Artikel von Kilian Valkhof</a>!<br> Er demonstriert noch weitere Anwendungsfälle, in denen auf JavaScript verzichtet werden kann!<br> (Auch die anderen Artikel des Adventskalenders sind lesenswert!)</li> </ol> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://en.wikipedia.org/wiki/Rule_of_least_power" rel="nofollow noopener noreferrer">Rule of least power</a> (wikipedia.en.org) <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Advent, Advent, das Raumschiff brennt? Fri, 01 Dec 23 09:41:18 Z https://forum.selfhtml.org/weblog/2023/dec/01/advent-advent-das-raumschiff-brennt/1811913#m1811913 https://forum.selfhtml.org/weblog/2023/dec/01/advent-advent-das-raumschiff-brennt/1811913#m1811913 <p>Adventskalender 2023</p> <p>Liebe Selfhtml-Freunde,</p> <p>SELFHTML e. V. wünscht euch eine schöne und besinnliche Adventszeit. Lasst euch nicht zu sehr vom allzu plötzlich bevorstehenden Weihnachten stressen.</p> <p>Bei der Suche nach Themen für einen Adventskalender sind wir auf das Wirrwarr von Sonderzeichen gestoßen, die bei der Entwicklung von Software verwendet werden. Es gibt eine Menge davon, sie kommen oft genug auch noch in Kombination vor und das schlimmste ist, in jeder Programmiersprache bedeuten sie etwas anderes.</p> <p>Die Kalenderkärtchen sind als Teaser gedacht, die euch zu den entsprechenden Seiten im Selfhtml Wiki führen. Es kann gut sein, dass wir nicht alle Bedeutungsvarianten eines Zeichens oder Operators gefunden haben. Gebt uns dann gerne einen Tipp.</p> <p>Viel Spaß damit - <a href="https://forum.selfhtml.org/advent/2023" rel="noopener noreferrer">hier geht's zum Kalender</a><br> <em>Rolf</em></p> <div class="signature">-- <br> ️ </div> Blue-Beanie-Day Thu, 30 Nov 23 05:13:34 Z https://forum.selfhtml.org/weblog/2023/nov/30/blue-beanie-day/1811899#m1811899 https://forum.selfhtml.org/weblog/2023/nov/30/blue-beanie-day/1811899#m1811899 <p>Heute, am 30.11., ist wieder <a href="https://de.wikipedia.org/wiki/Blue_Beanie_Day" rel="nofollow noopener noreferrer"><strong>Blue Beanie Day</strong></a>; ein Aktionstag, um auf die Wichtigkeit von <a href="https://wiki.selfhtml.org/wiki/Webstandards" rel="nofollow noopener noreferrer"><strong>Webstandards</strong></a> aufmerksam zu machen. Er wird seit 2007 jährlich am 30. November begangen und wurde von Douglas Vos ins Leben gerufen.</p> <p>Webstandards sind dort nicht nur die Festlegungen durch die Spezifikationen, sondern das Bemühen Webseiten durch best practices für alle benutzbar zu machen. SELFHTML bemüht sich diesen Gedanken an Barrierefreiheit ständig im Blick zu halten.</p> SELFHTML - 410 GONE? Sun, 26 Nov 23 12:11:13 Z https://forum.selfhtml.org/weblog/2023/nov/26/selfhtml-410-gone/1811867#m1811867 https://forum.selfhtml.org/weblog/2023/nov/26/selfhtml-410-gone/1811867#m1811867 <p>Am 24.-26.11.2023 fand das jährliche SELF-Treffen in Mainz statt. Im Vorfeld gab es Stimmen, dass man die Gelegenheit zu einer Diskussion nutzen sollte, ob der Verein heute noch handlungsfähig sei und ob es nicht besser sei, ihn jetzt in Ruhe abzuwickeln. Trübe Stimmung im trüben Novemberwetter - als mich Felix plötzlich auf eine rote Ampel hinwies. Das Mainzelmännchen zauberte uns ein Lächeln ins Gesicht!</p> <p>Höhepunkt für mich war der Freitagabend im Eisgrub-Bräu. Wie jedes Jahr bangte ich, ob sich der reservierte Tisch denn überhaupt füllen würde. Keine Sorge - im Minutentakt tauchten reisegestresste SELFer auf, die sich im urigen Bierkeller schnell wohlfühlten und mit Staunen auf die Biersäulen am Nachbartisch schauten. Neben den Vereinsmitgliedern nutzte Linuchs aus dem Forum die Gelegenheit uns einmal live zu erleben! Sein Urteil: Wir sind gar nicht so schlimm!</p> <p><a href="/images/7f90d7c6-8cde-11ee-b136-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/7f90d7c6-8cde-11ee-b136-b42e9947ef30.jpg?size=medium" alt="Stadtführung durch Chnutz vom Hopfen" title="Stadtführung" loading="lazy"></a></p> <p>Um Acht kam Chnutz vom Hopfen und durfte wegen seiner Nachtwächterlampe leider nicht hineinkommen. Deswegen führte er uns auf einem Rundgang durch Mainz und unterhielt uns mit seinem kurzweiligen, sehr interessanten Fakten rund um Johann Gensfleisch und brachte uns die Stadtgeschichte näher.</p> <h3>Samstag</h3><p>Die Mitgliederversammlung (<a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Protokolle/Mitgliederversammlung_2023" rel="nofollow noopener noreferrer">Protokoll</a>) brachte viele Fragen und Diskussionen, aber auch schnell ein Ergebnis: wir hatten mehrere Freiwiliige, die sich für ein Amt zur Verfügung stellten und so konnte die Wahl schnell über die Bühne gehen. Vorstand sind:</p> <p>Matthias Scharwies</p> <p>Rolf Borchmann</p> <p>Wiebke Knäpper</p> <p>Der Verein bedankt sich bei den ausgeschiedenen Vorständen und wünscht ihnen alles Gute.</p> <p>Die Diskussionen sind nicht abgeschlossen - es haben sich Arbeitsgruppen gebildet, die ihre Ergebnisse bei einer <a href="https://forum.selfhtml.org/events/9" rel="noopener noreferrer">virtuellen Mitgliederversammlung am 27. Januar 2024</a> präsentieren werden.</p> <h3>Sonntag</h3><p>Nach einem gemeinsamen Spaziergang am Rhein trafen wir die anderen vor dem Gutenbergmuseum. Das Museum ist sehr sehenswert und hat einen Schatz an Drucken und Büchern - unter anderem stieß Jürgen auf Doctor Syntax:</p> <p><a href="/images/fc2c66ea-8ce0-11ee-8414-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/fc2c66ea-8ce0-11ee-8414-b42e9947ef30.jpg?size=small" alt="Doctor Syntax" title="Doctor Syntax" loading="lazy"></a></p> <p><a href="https://commons.wikimedia.org/wiki/File:SYNTAX(1813)_-_00_-_The_Revd_Doctor_Syntax_(frontispiece).jpg" rel="nofollow noopener noreferrer">"The Tour of Doctor Syntax: in search of the picturesque ... Fifth edition, with new plates. By William Combe." (1813)</a> (aus Wikimedia Commons)</p> <p>Ob er uns helfen kann, schwierige Fachbegriffe anschaulich zu vermitteln?</p> <h3>Fazit</h3><p><a href="/images/b6652b6e-8ce1-11ee-8d94-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/b6652b6e-8ce1-11ee-8d94-b42e9947ef30.jpg?size=small" alt="Mainzelmännchen in Ampel" title="Mainzelmännchen in Ampel" loading="lazy"></a></p> <p>Noch auf dem Weg zum Bahnhof kam ich wieder an „unserer“ Ampel vorbei, die diesmal auf Grün stand: <strong>Es geht weiter!</strong></p> <p><strong><a href="https://wiki.selfhtml.org/wiki/HTTP/Statuscodes#1xx:_Informativ" rel="nofollow noopener noreferrer">SELFHTML - 100 Continue</a></strong></p> <p>PS: Wir sehen uns am 03.05.2024 in Hannover zum <a href="https://forum.selfhtml.org/events/10" rel="noopener noreferrer">SELF-Treffen 2024</a> wieder und feiern dann das 20-jährige Jubiläum des Vereins.</p> Wird SELFHTML heute noch gebraucht? Wed, 01 Nov 23 04:59:56 Z https://forum.selfhtml.org/weblog/2023/nov/01/wird-selfhtml-heute-noch-gebraucht/1811436#m1811436 https://forum.selfhtml.org/weblog/2023/nov/01/wird-selfhtml-heute-noch-gebraucht/1811436#m1811436 <p>Diese Frage, ob SELFHTML heute angesichts sinkender Frequnzen im Forum noch relevant - also bedeutsam und wichtig sei - stellen wir uns immer wieder. Dabei taucht dann auch die Suche nach der Zielgruppe auf, die wir angeblich aus den Augen verloren hätten, bzw. die es gar nicht mehr gäbe.</p> <p>2018 und 2020 hatten wir im Wiki nach <a href="https://wiki.selfhtml.org/wiki/Hilfe:Verbesserungsvorschl%C3%A4ge" rel="nofollow noopener noreferrer">Verbesserungsvorschlägen</a> gefragt.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> Diesmal hatte ich mich per Mail an Ehemalige und Aktive aus Forum und Wiki gewandt, ob SELFHTML aus ihrer Sicht heute noch relevant sei.</p> <h3>These: Die Sprache des Webs ist Englisch!</h3><div style="padding-left:2em"> <em> „Jeder kann heute Englisch!“ <p>„Es gibt die MDN und die ist besser!“</em><sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p> <p><em>„Ich persönlich geh' auf StackOverflow!“</p> <p>„Wer so wenig Englisch kann, dass er im Forum nachfragen muss, versteht unsere Tutorials eh nicht.“</em></p> </div> <p>Für <strong>mich persönlich</strong> ist diese Frage eigentlich schon im <em><strong>mission statement</strong></em> von SELFHTML festgelegt:</p> <p>„ <em>… Anfänger gemäß dem aktuellen Stand der Technik an die Erstellung von Webseiten heranführen, aber auch Fortgeschrittenen und Profis als verlässliches Nachschlagewerk dienen.</em>“<sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup></p> <p>Die Dokumentation ist damals entstanden, um Menschen das <em><strong>„Everyone is a publisher“</strong></em> zu ermöglichen. Deshalb bietet SELFHTML seit 1995 eine Plattform für deutschsprachige Tutorials an und diesem Ansatz ist SELFHTML weiterhin verpflichtet.</p> <p>Auch wenn heute jeder Englisch „kann“, gibt es doch einen Unterschied zwischen der rezeptiven Beherrschung der Sprache - wenn man gut Englisch lesen oder Serien im Originalton verfolgen kann - und dem professionellen Mastering. So ist das Studium von Fachliteratur, bzw. das Formulieren von Fragen auf Stack Overflow doch eine größere Hürde, wenn dies auch noch in der Fremdsprache erfolgen muss.</p> <h3><strong>Anfänger … an die Erstellung von Webseiten heranführen</strong></h3><p>Als ich mich '99 auf das Staatsexamen vorbereitete, verließen zwei Mitstudenten meine Lerngruppe, da sie Webdesigner werden wollten - einer vor, einer nach dem Examen. Ach, was waren das für Zeiten, als HTML & CSS noch cool waren!</p> <p>Heute scheint die Zahl der wirklichen Anfänger überschaubar bis nicht vorhanden. Trotzdem führt die Doku Nutzer über die Seite <a href="https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F" rel="nofollow noopener noreferrer"><strong>Wie fange ich an?</strong></a> direkt zu unseren Anfänger-Kursen:</p> <div class="cards-container" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(17em,1fr)); gap: 2em;"> <div class="card bg-filled" style="grid-row: span 1;background:beige;"> <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg"><strong style="font-size: 1.15em;">Einstieg in <span style="color:#c82f04;">HTML</span></strong></a> <span style="float:right; display:block;text-align:end;line-height:100%;font-size:4.5em; color:#c82f04;"></></span><br> der Kurs für die ersten Schritte in HTML und CSS. <p>Schritt für Schritt zur eigenen Webseite</p> <p class="teaser"> <img src="/images/455f8376-67eb-11ee-baaf-b42e9947ef30.png?size=medium" alt="Screenshot unserer Webseite aus dem HTML-Einstieg"></p> </div> <div class="card"> <img src="/images/629240d6-67ec-11ee-a1c6-b42e9947ef30.png?size=medium" alt="CSS-logo" style="width:80px;float:right"> <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg"><strong style="font-size: 1.15em;">Einstieg in CSS</strong></a> <ul><li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden">Stylesheet einbinden</a></li> <li>Warum Layouts mit CSS?</li> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen">Webseiten responsiv umbauen</a></li> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/vom_Entwurf_zum_Layout">vom Entwurf zum Layout</a></li> </ul> <p class="teaser">Stylesheets für HTML und SVG</p> <p class="teaser"> <img src="/images/bc90606a-7870-11ee-b833-b42e9947ef30.png?size=medium" alt="Screenshot unserer Webseite aus dem CSS-Einstieg"></p> </div> <div> <img src="/images/39b200c6-67f0-11ee-b9d5-b42e9947ef30.png?size=medium" alt="Icon für JS-Einstieg" style="width:80px;float:right"> <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg"><strong style="font-size: 1.15em;">Einstieg in JavaScript</strong></a> <ul> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg/Erste_Schritte">Erste Schritte</a></li> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg/Programmieren_und_Debuggen">Programmieren und Debuggen</a></li> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg/Funktionen">Funktionen</a></li> </ul> </div> <div class="card"> <img src="/images/77669d3e-67ee-11ee-beb7-b42e9947ef30.png?size=medium" alt="SVG-Logo des W3C" style="width:80px;float:right"> <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg"><strong style="font-size: 1.15em;">Einstieg in SVG</strong></a> <ul> <li><a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg#Warum_SVG_nutzen.3F">Warum SVG nutzen?</a></li> <li><a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_stylen">SVG mit CSS stylen</a></li> <li><a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren">SVG mit CSS animieren</a></li> <li><a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/barrierefreie SVGs">barrierefreie SVGs</a></li> </ul> <p>Step by step eigene SVGs erstellen</p> </div> </div> <p>Uns als Autoren ist es dabei egal, ob die Nutzer aus einem jahrhundertealten Bauerngeschlecht oder einer Brennpunktschule in der Großstadt kommen. Das <a href="https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Artikel#Stil" rel="nofollow noopener noreferrer">Siezen unserer Leser ist Tradition</a>, bei neuen Tutorials könnte man auf das heute üblichere Du wechseln.</p> <h3><strong>… auch Fortgeschrittenen und Profis … dienen</strong></h3><p>Ich hatte in den letzten Wochen viele Ehemalige, sowie im Wiki Aktive angeschrieben und um ihren Eindruck, bzw. Rat gefragt. Dabei kam immer wieder zum Vorschein, dass wir zu wenig zu Fortgeschrittenen-Themen hätten.</p> <p>Hier müssen wir wohl unsere Hausaufgaben machen und mehr Tutorials für Fortgeschrittene anbieten, bzw. die vorhandenen Artikel besser präsentieren:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials" rel="nofollow noopener noreferrer"><strong>CSS/Tutorials</strong></a></li> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials" rel="nofollow noopener noreferrer"><strong>JavaScript/Tutorials</strong></a></li> <li><a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials" rel="nofollow noopener noreferrer"><strong>SVG/Tutorials</strong></a></li> </ul> <div style="padding-left:2em"> <em>„Ich mache nichts mehr mit HTML, ich arbeite jetzt im Backend.“</em> </div> <p>Unser Bereich <a href="https://wiki.selfhtml.org/wiki/Webserver" rel="nofollow noopener noreferrer"><strong>Webserver</strong></a> könnte ausgebaut werden, bietet aber bereits einiges.</p> <p>Im Feedback erhielt ich zwei Angebote zu Tutorials über <a href="https://wiki.selfhtml.org/wiki/Node.js" rel="nofollow noopener noreferrer">Node.js</a> und die neue WebGPU - ich freu' mich jetzt schon!</p> <h4><strong>Ab wann ist man denn ein Fortgeschrittener?</strong></h4><p>Ein häufig auftretendes Problem ist, dass sich viele im Forum Fragende gar nicht als Anfänger sehen.</p> <div style="padding-left:2em"> <p><em>„Einige Beispiele munter zusammenkopiert - funktioniert!“</em></p> <p><em>„Und noch was dazu - hoppla, was ist da los - der Browser muss einen Bug haben!“</em></p> </div> <p>Diese Fragesteller lassen sich nur mit Mühe von ihren fehlerhaften Ansätzen abbringen. Hier können Tutorials ein Problem von der Aufgabenstellung bis zur barrierefreien Lösung anschaulich und unterhaltsam behandeln.</p> <h3><strong>Warum die Frage nach der Zielgruppe?</strong></h3><p>Implizit beinhalten die Fragen nach Relevanz und Zielgruppe auch immer die Frage, ob man nicht besser Schluss machen sollte. Ich hoffe, dass ich einige überzeugen kann, weiterzumachen und zumindest 2025 die 30 Jahre vollzumachen.</p> <p>Hier möchte ich unseren Vorstand Janosch Zoller zitieren:</p> <div style="padding-left:2em;"> <em>Wir haben auch jetzt noch täglich tausende Seitenaufrufe, wo Menschen im Zweifel von unseren Inhalten profitieren. <p>Das wird immer wieder durch die Kleinspender bestätigt, die in Regelmäßigkeit ein paar Euronen da lassen - und das obwohl wir alles andere als aggressiv für Spenden werben. Insofern ist das wiki so wie es ist nicht verkehrt; es wird von einigen Menschen aktiv genutzt.</p> <p>… Wegen mir kann es einfach so weiterlaufen wie es ist - solange es zig Menschen täglich glücklich macht, ist es eine Bereicherung und erhaltenswert.</p> <p>Daher ist es für mich auch keine Option, den Verein dicht zu machen, solange wir noch derart aktiv gelesen werden.</p> <p>Der Vergleich mit den 00er-Jahren ist nicht repräsentativ und hinkt auf allen Ebenen. Man darf nicht immer dem Glanz alter Zeiten nachhängen, sondern muss sich fragen: "Was haben wir heute? Ist es erhaltenswert?". Ich beantworte für mich Letzteres mit einem uneingeschränkten Ja, deshalb mache ich weiter.</em><sup class="footnote-ref"><a href="#fn4" id="fnref4">[4]</a></sup></p> </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://wiki.selfhtml.org/wiki/Hilfe:Verbesserungsvorschl%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe:Verbesserungsvorschläge</a> im SELF-Wiki <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p>Die MSDN wurde depubliziert; die deutschsprachige MDN mittlerweile durch eine Weiterleitung auf die englischsprachige Version ersetzt. Wie das mit Mozilla und der finanziellen Unterstützung durch Google langfristig aussieht, wissen nur die Götter. <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> <li id="fn3" class="footnote-item"><p><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein#Wir_.C3.BCber_uns" rel="nofollow noopener noreferrer">SELFHTML:Verein - Wir über uns</a> <a href="#fnref3" class="footnote-backref">↩︎</a></p> </li> <li id="fn4" class="footnote-item"><p>Janosch Zoller am 20.06.2021 im <a href="https://forum.selfhtml.org/verein/2021/jun/20/interessanter-verein-umstandehalber-in-gute-hande-abzugeben/1789435#m1789435" rel="noopener noreferrer">internen Forum</a> <a href="#fnref4" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Popover ohne Programmieren! Wed, 25 Oct 23 07:33:13 Z https://forum.selfhtml.org/weblog/2023/oct/25/popover-ohne-programmieren/1811303#m1811303 https://forum.selfhtml.org/weblog/2023/oct/25/popover-ohne-programmieren/1811303#m1811303 <p>Aufklappbare Infoboxen gehören zu den immer wieder gefragten UI-Elementen. Bis jetzt wurden sie mit viel CSS und sogar JavaScript nachgebaut, bzw. gab es in diversen Frameworks voneinander abweichende Implementierungen.</p> <p>Jetzt gibt es eine <strong>Native Umsetzung in HTML</strong>, die von der <a href="https://open-ui.org/" rel="nofollow noopener noreferrer">open-ui.org</a> entworfen und zur Standardisierung vorgeschlagen wurde:</p> <p>Mit nur wenigen Zeilen HTML bauen Sie ein Popover:</p> <p><button popovertarget="t1">Tooltipp</button></p> <div id="t1" popover style="background-color:#c82f04;color:white;border:thin solid #333;padding:1rem;margin:2rem auto;">Infobox, die zusätzliche Informationen enthält.</div> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">popovertarget</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>t1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tooltipp<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>t1<span class="token punctuation">"</span></span> <span class="token attr-name">popover</span><span class="token punctuation">></span></span> Infobox, die zusätzliche Informationen enthält. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>Auch eine <a href="https://wiki.selfhtml.org/wiki/Bilder_im_Internet/Bilder_pr%C3%A4sentieren" rel="nofollow noopener noreferrer">Lightbox</a> ist so möglich:</p> <p><button popovertarget="t2"><img src="/images/5ebc6a26-73a0-11ee-9ec9-b42e9947ef30.jpg?size=thumb" alt="Burg in Nürnberg, Sonnenaufgang" loading="lazy"></button></p> <div id="t2" popover style="background-color:#999;position:absolute;color:white;border:thin solid #333;padding:1rem;"><button popovertarget="t2" popovertargetaction="hide" style=" border: none; border-radius: 0 0 0 8px; background-color: #c82f04; color: white; cursor: pointer; position: absolute; right: 0.25rem; font-size: 1.25em; font-weight: bold; padding: 0.25em 0.4em; text-align: center; top: 0.5rem;"> X </button><img src="/images/5ebc6a26-73a0-11ee-9ec9-b42e9947ef30.jpg?size=medium" alt="Burg in Nürnberg, Sonnenaufgang" loading="lazy">.</div> <p>Und das Gute - Es wird bereits von vielen Browsern unterstützt, für den Firefox gibt es einen Polyfill:</p> <p><a href="/images/810e8eb0-7337-11ee-b272-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/810e8eb0-7337-11ee-b272-b42e9947ef30.png?size=large" alt="" loading="lazy"></a></p> <p>Mehr erfahren Sie in unserem neuen Tutorial: <a href="https://wiki.selfhtml.org/wiki/Infobox/Tooltips_mit_Popover" rel="nofollow noopener noreferrer"><strong>Tooltips mit Popover</strong></a></p> <h3><strong>Warum nicht mit ein bisschen CSS selbst einen Tooltip bauen?</strong></h3><p>Dafür müsste man ein Element mit :hover oder :focus sichtbar machen, absolut positionieren und dann noch an den z-index denken. Doch nicht so einfach, oder?</p> <p>Im neuen Popover sind solche Dinge und die Fokusverwaltung bereits integriert.</p> <script src="https://cdn.jsdelivr.net/npm/@oddbird/popover-polyfill@latest" crossorigin="anonymous" defer ></script> Zwischenbilanz 2. + 3. Quartal Sun, 01 Oct 23 06:42:09 Z https://forum.selfhtml.org/weblog/2023/oct/01/zwischenbilanz-2-3-quartal/1810830#m1810830 https://forum.selfhtml.org/weblog/2023/oct/01/zwischenbilanz-2-3-quartal/1810830#m1810830 <p>Ich hatte ja im März eine <a href="https://forum.selfhtml.org/self/2023/mar/30/zwischenbilanz-1-quartal-2023/1807474#m1807474" rel="noopener noreferrer">Zwischenbilanz</a> für das erste Quartal gepostet.</p> <p>Hier kommt nun die ursprünglich für Juni geplante - leider etwas verspätete - Zwischenbilanz, was im <em><strong>2. und 3.</strong></em> Quartal angepackt wurde!</p> <p>Nicht alle Änderungen sind hier aufgeführt, aber Einiges ist doch besonders erwähnenswert:</p> <p> <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Element,_Tag_und_Attribut#Guter_HTML-Stil" rel="nofollow noopener noreferrer"><strong>Guter HTML-Stil</strong></a> ist jetzt direkt im HTML-Tutorial integriert, analog dazu <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Syntax#Guter_CSS-Stil" rel="nofollow noopener noreferrer"><strong>Guter CSS-Stil</strong></a> im CSS-Einstieg <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p> @Jürgen B hat die <a href="https://wiki.selfhtml.org/wiki/OnePager/Komfort-Version" rel="nofollow noopener noreferrer"><strong>Komfort-Version eines OnePagers</strong></a> entwickelt und in einem Tutorial erklärt. <sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p> <p> <a href="https://wiki.selfhtml.org/wiki/Webserver/htaccess" rel="nofollow noopener noreferrer"><strong>htaccess</strong></a>: Die 6-teilige Reihe ist inhaltlich und sprachlich geglättet und redigiert worden.</p> <p> <a href="https://wiki.selfhtml.org/wiki/MathML/Geometrie_mit_MathML,_SVG_und_JavaScript" rel="nofollow noopener noreferrer"><strong>Geometrie mit MathML, SVG und JavaScript</strong></a> ist ein Tutorial, das die Brücke zwischen HTML, MathML und SVG schlägt und unter anderem Drag&Drop für SVG erklärt.</p> <p> <a href="https://wiki.selfhtml.org/wiki/CSS/Media_Queries/Container_Queries" rel="nofollow noopener noreferrer"><strong>Container Queries</strong></a> erklärt die neuen Containerabfragen und auch die flexiblen <code>cqw</code>-Werte, mit denen fluide Typografie möglich wird.</p> <p> <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/Schachtelung" rel="nofollow noopener noreferrer"><strong>CSS/Tutorials/Selektoren/Schachtelung</strong></a> <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a> führt in die Welt des CSS-Nesting ein!</p> <h3>ToDo für's 4. Quartal</h3><p>Leider ist einiges liegen geblieben.</p> <blockquote> <p>Schaut mal auf unsere <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">Baustellenseite</a>. Hier sind die imho wichtigsten davon:</p> </blockquote> <p> <a href="https://wiki.selfhtml.org/wiki/File_Upload" rel="nofollow noopener noreferrer"><strong>File Upload</strong></a></p> <blockquote> <p>Das war Thema im Januar - ich habe 3 Artikel zusammengefasst, es bleibt ab <a href="https://wiki.selfhtml.org/wiki/File_Upload#Auswahl_mit_Drag_und_Drop" rel="nofollow noopener noreferrer">hier</a> einiges zu tun: Drag & Drop, Fetch ...</p> </blockquote> <p> <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Multimedia/Playlists" rel="nofollow noopener noreferrer"><strong>Multimedia/Playlists</strong></a></p> <blockquote> <p>Das hat Linuchs mal gefragt, Dauer und Ende von Medien mit JS ermitteln, mehrere Playlists als Liste haben und per JS an den Player senden.</p> </blockquote> <p> <a href="https://wiki.selfhtml.org/wiki/PHP/Tutorials/Templates" rel="nofollow noopener noreferrer"><strong>PHP/Tutorials/Templates</strong></a></p> <blockquote> <p>Hier sind sowohl in Kap 3. Verarbeitung als auch Kap 4. Ausgabe zwei ToDos drin.</p> </blockquote> <h3>Warum diese Übersichten?</h3><blockquote>Mir wäre wichtig, dass SELFHTML kein One-Man-Project eines Nicht-ITlers ist, sondern eben das Gesamtkunstwerk einer netten Truppe, bei der auch Neue mitmachen wollen.<br><cite>SELF-Forum: <a href="https://forum.selfhtml.org/self/2023/mar/30/zwischenbilanz-1-quartal-2023/1807474#m1807474">Zwischenbilanz 1 Quartal 2023</a> vom 30.03.2023</cite> </blockquote> <blockquote> <p>Ich würde mir wünschen, dass sich <strong>jeder</strong> SELFer im Q4 <strong>eine Aufgabe vornimmt</strong> und diese dann bearbeitet! (In der Schule würde ich die Aufgaben verteilen und dann bei Nichtgefallen mit dem Kollegen tauschen lassen!)</p> </blockquote> <p>Alles was vorzeigbar ist, sollten wir dann auf <a href="https://bildung.social/@selfhtml" rel="nofollow noopener noreferrer">Mastodon </a>/ <a href="https://discord.com/invite/BMbmbd4qUa" rel="nofollow noopener noreferrer">Discord </a>vorstellen, damit wir in der Öffentlichkeit wieder präsenter werden.</p> <p>Vielen Dank an <a href="/users/13769" class="mention registered-user" rel="noopener noreferrer">@Hörnchen</a> für unseren neuen Discord-Auftritt, der neues Leben in die Bude gebracht hat. <sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> PS: Ein Stammtisch wäre auch mal wieder nett! </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://wiki.selfhtml.org/wiki/Barrierefreiheit" rel="nofollow noopener noreferrer"><strong>Barrierefreiheit</strong></a> soll eben nicht nachträglich als Fremdkörper aufgepfropft, sondern von Anfang an berücksichtigt werden! <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><strong>Man könnte …</strong> da noch vieles einbauen. Wichtig ist, dass Interessierte ein funktionierendes Beispiel haben, mit dem sie weiterarbeiten können. <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> <li id="fn3" class="footnote-item"><p>Neben unserem Discord-Kanal kommt auch das zarte Pflänzchen YouTube-Kanal zwischen den Steinen hervor, wobei wir da noch nichts Vorzeigbares vorzuweisen haben. <a href="#fnref3" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Schicke Schachteln - CSS Nesting ist in den Browsern angekommen Mon, 25 Sep 23 19:10:53 Z https://forum.selfhtml.org/weblog/2023/sep/25/schicke-schachteln-css-nesting-ist-in-den-browsern-angekommen/1810776#m1810776 https://forum.selfhtml.org/weblog/2023/sep/25/schicke-schachteln-css-nesting-ist-in-den-browsern-angekommen/1810776#m1810776 <p>Geschachtelte CSS Regeln waren früher ein Anwendungsfall von CSS Präprozessoren. Aber nun schlägt das Imperium zurück!</p> <p>Kennt ihr das? Ihr habt ein <code><div></code>, eine <code><figure></code>, eine <code><section></code>, oder was auch sonst, und darin jede Menge Zeugs. Die Styles für dieses Zeug sollen aber nur dann zutreffen, wenn sie gerade in diesem speziellen Elternelement stecken.</p> <p>Also bekommt das Elternelement eine ID oder eine Klasse, und nun folgen siebenunddrölfzig CSS Regeln, die alle einen Selektor haben, der mit dieser ID oder dieser Klasse beginnt. Und dabei bleibt es natürlich nicht, es gibt weitere Schachtelungen, und irgendwann wird die Sache lästig.</p> <p>Herbei, LESS oder SASS oder SCSS oder wie auch immer der CSS Präprozessor eures geringsten Misstrauens heißt, und ihr könnt Dinge formulieren wie</p> <pre><code class="block language-css"><span class="token selector">#foo</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.1em<span class="token punctuation">;</span> <span class="token selector">h2</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span> <span class="token selector">img</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 30%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Und wenn euch dieser #foo Bereich nicht interessiert, klickt ihr im Editor eures Vertrauens auf das Einklapp-Icon und alles ist ausgeblendet.</p> <p>Und dafür müsst ihr in eurem Entwickler-Toolstack eine node.js-Instanz laufen lassen, die nach jedem Speichern eure .less-Dateien in .css Dateien konvertiert.</p> <p>Das geht besser! Die CSS Nesting Spezifikation ist in den Browsern angekommen und erlaubt es euch, die gezeigte Schachtelung exakt so in nativem CSS zu schreiben. Naja, nicht ganz, Chromium-Browser haben noch Schwierigkeiten mit Elementselektoren und wollen davor den speziellen Schachtelungselektor <code>&</code> sehen. Der Firefox hat die aktuelle Fassung der Spezifikation schon besser drauf und braucht das <code>&</code> nicht.</p> <p>Das <code>&</code> ist nur dann wichtig, wenn die Selektoren nicht stumpf von links nach rechts aneinandergehängt werden sollen, sondern wenn klargestellt werden muss, ob ein Nachfahrenkombinator (die Leerstelle) verwendet werden soll oder die Selektoren direkt zu einem verbundenen Selektor (z.B. <code>p.foo</code> als Verbund aus Element- und Klassenselektor) zusammengesetzt werden sollen.</p> <p>Man kann sogar „falsch herum“ schachteln, wofür das <code>&</code> ebenfalls gebraucht wird:</p> <pre><code class="block language-css"><span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em 1em<span class="token punctuation">;</span> <span class="token selector">aside > &</span> <span class="token punctuation">{</span> <span class="token property">padding-inline</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Hiermit bekommen p Elemente ein Block-Padding von 0.5em und ein Inline-Padding von 1em (ich rede hier von den <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Boxmodell/Logische_Eigenschaften" rel="nofollow noopener noreferrer">logischen Eigenschaften</a>), aber wenn das p Element direktes Kind eines aside ist, wird das Inline-Padding auf 0.5em reduziert.</p> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/Schachtelung" rel="nofollow noopener noreferrer">Lest den ausführlichen Artikel zu CSS-Nesting im Selfhtml-Wiki!</a></p> CSS Selektoren - :nth-match() vs :nth-child(... of S) Tue, 30 May 23 10:33:25 Z https://forum.selfhtml.org/weblog/2023/may/30/css-selektoren-nth-match/1809122#m1809122 https://forum.selfhtml.org/weblog/2023/may/30/css-selektoren-nth-match/1809122#m1809122 <p>Die Selektion von HTML-Elementen mit der CSS Pseudoklasse <code>:nth-child()</code> wird schwierig, wenn die Elemente noch zusätzlich über Klassen- oder Attributselektoren eingegrenzt werden sollen und die Kindelement-Zählung nur innerhalb der zusätzlichen Selektoren stattfinden soll.</p> <p>Um das zu lösen, wurde bereits 2011, im ersten Entwurf der CSS Selectors Level 4 Spezifikation, die Pseudoklasse :nth-match() vorgeschlagen.</p> <p>Lesen Sie hier, was daraus wurde.</p> <hr> <h3>Das Problem</h3><p>Angenommen, Sie hätten eine Tabelle und möchten die Lesbarkeit dadurch verbessern, dass Sie nach jeder dritten Zeile eine horizontale Linie einfügen. Das gelingt beispielsweise mit</p> <pre><code class="block language-css"><span class="token selector">#mytable tbody tr:nth-of-type(3n)</span> <span class="token punctuation">{</span> <span class="token property">border-bottom</span><span class="token punctuation">:</span> thin solid black<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Solange alle Rows der Tabelle dargestellt werden, wird auf diese Weise unter jeder dritten Zeile ein Strich gezogen. Aber was ist, wenn diese Tabelle noch eine Filterfunktion hätte, und die sichtbaren Zeilen mit einer Klasse <code>match</code> versehen werden. Die CSS-Regel für eine solche Filterung könnte so aussehen:</p> <pre><code class="block language-css"><span class="token selector">#mytable.filtered tbody tr:not(.match)</span> <span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>collapse<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Möchte man die Hilfslinien ergänzen, könnte man das so versuchen:</p> <pre><code class="block bad language-css"><span class="token selector">#mytable tbody tr.match:nth-of-type(3n)</span> <span class="token punctuation">{</span> <span class="token property">border-bottom</span><span class="token punctuation">:</span> thin solid black<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Aber das funktioniert nicht, weil der Selektor <code>tr.match:nth-of-type(3n)</code> aus drei Teilen besteht (Elementselektor, Klassenselektor, Pseudoklassenselektor), die alle unabhängig voneinander bewertet werden und deren Ergebnis UND-verknüpft wird.</p> <dl> <dt><strong>Teil 1:</strong> <em>Elementtypselektor <code>tr</code></em></dt> <dd>Betrachte nur <code>tr</code>-Elemente</dd> <dt><strong>Teil 2:</strong> <em>Klassenselektor <code>.match</code></em></dt> <dd>Betrachte nur Elemente mit der Klasse <code>match</code></dd> <dt><strong>Teil 3:</strong> <em>strukturelle Pseudoklasse :nth-of-type()</em></dt> <dd>Betrachte nur Elemente, die das 0-te, 3-te, 6-te, 9-te, … ihres Elementtyps sind</dd> </dl> <p>In einer Tabelle mit 5 Zeilen, in der die Zeilen 1 und 5 sichtbar sind, würde dieser Selektor auf keine Zeile zutreffen, weil in jeder Zeile entweder der Klassenselektor <code>.match</code> oder der Pseudoklassenselektor <code>:nth-of-type(3n)</code> unzutreffend ist.</p> <h3>Was tun?</h3><p>Was gebraucht wird, ist ein zweistufiges Vorgehen. Zunächst müssen alle sichtbaren Rows ermittelt werden, und von diesen Rows diejenigen mit gerader Nummer. Bisher ging das nur mit Hilfe von JavaScript.</p> <p>Tatsächlich gibt es schon seit 2011 einen Vorschlag für eine CSS-Lösung: die <code>:nth-match</code> Pseudoklasse. <code>tr.match:nth-match(3n)</code> würde das Gewünschte leisten. Diese Pseudoklasse wurde allerdings 2013 wieder verworfen, zu Gunsten einer erweiterten Syntax von <code>:nth-child()</code>:</p> <pre><code class="block language-css"><span class="token punctuation">:</span><span class="token function">nth-child</span><span class="token punctuation">(</span>An+B of S<span class="token punctuation">)</span> </code></pre> <p>Safari unterstützt das seit 2015. Der Rest der Browserwelt hat sich acht Jährchen Bedenkzeit gegönnt, aber seit März 2023 steht dieser Selektor in Chromium-Browsern (Version 111) zur Verfügung, im April erschien Opera 98 mit diesem Feature und Firefox ist im Mai mit Version 113 nachgezogen (siehe Kompatibilität bei <a href="https://caniuse.com/css-nth-child-of" rel="noopener noreferrer">caniuse.com</a>).</p> <h3>Wie ist dieses <code>S</code> zu verstehen?</h3><p>Dabei handelt es sich um einen CSS Selektor, der die Elemente bestimmt, die für :nth-child berücksichtigt werden sollen. Die Spezifikation ist hier noch etwas im Fluss. Der neueste Entwurf besagt, dass es sich dabei um eine „complex-real-selector-list“ handele, was bedeutet: ein CSS Selektor, in dem außer <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/Pseudoelement" rel="nofollow noopener noreferrer">Pseudoelementen</a> alles verwendet werden kann, selbst Kommata. Der offizielle Working Draft formuliert allgemeiner und spricht von einer "complex-selector-list parsed as a forgiving selector", d.h. die Einschränkung der Pseudoelemente ist nicht vorhanden. Dafür wird aber gefordert, dass für den Fall, dass eine <a href="https://wiki.selfhtml.org/wiki/Selektor-Liste" rel="nofollow noopener noreferrer">Selektorliste</a> einen ungültigen Selektor enthält, die übrigen Selektoren der Liste trotzdem berücksichtigt werden sollen.</p> <p>Für unser Beispiel mit der gefilterten Zebrastreifentabelle würden wir also schreiben können:</p> <pre><code class="block language-css"><span class="token selector">#mytable.filtered tbody tr:nth-child(3n of .match)</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #e0e0e0<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>wodurch dann nur die Elemente für die nth-child-Zählung berücksichtig werden, die die Klasse .match tragen.</p> <h3>Wo überall geht das?</h3><p>Die gleiche Erweiterung existiert für :nth-last-child().</p> <p>Was es <strong>nicht</strong> gibt, ist die of-Erweiterung für :nth-of-type. Das hat einen guten Grund: die <code>:nth-of-type()</code>-Pseudoklasse ist ein Sonderfall von <code>:nth-child(… of S)</code>:</p> <pre><code class="block bad language-css"><span class="token selector">#mytable tbody tr:nth-of-type(3n of .match)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> </code></pre> <p>Ziehen Sie den Elementselektor für <code>tr</code> einfach in die Klammer hinein, wodurch :nth-child ganz automatisch die Selektion des Elementtyps mit übernimmt.</p> <pre><code class="block language-css.good">#mytable tbody :nth-child(3n of tr.match) { ... } </code></pre> Wordpress - individuell mit CSS gestalten Sat, 25 Feb 23 04:59:40 Z https://forum.selfhtml.org/weblog/2023/feb/25/wordpress-individuell-mit-css-gestalten/1806481#m1806481 https://forum.selfhtml.org/weblog/2023/feb/25/wordpress-individuell-mit-css-gestalten/1806481#m1806481 <p>Herzlichen Glückwunsch! Mit WordPress haben Sie das erfolgreichste CMS installiert, dass sich ohne viel Kenntnisse des Anwenders in nur 8 Minuten fast von selbst installiert.</p> <p>Kann man das auch individuell mit CSS gestalten? - Ja, klar!</p> <p>Ausgangspunkt war die Frage, ob, man ein „Textelement über Bild positionieren“ könne.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <h3>Der schnelle Weg</h3><p>Um WordPress individuell anzupassen, können sie direkt im Blockeditor ihr HTML mit Klassen versehen und für diese dann CSS-Festlegungen deklarieren.<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p> <p><em>Design → Anpassen → Zusätzliches CSS:</em></p> <h3>Der bessere Weg</h3><p>Es gibt in Wordpress eine Vielzahl von Stylesheets und daneben komplette Themes, die neben Speziellen Seiten-Templates wieder viele Stylesheets mitbringen.</p> <p>Damit dort vorgenommene Änderungen bei einer automatischen Aktualisierung nicht überschrieben werden, empfiehlt es sich ein eigenes <em><strong>Child Theme</strong></em> zu definieren.</p> <p>→ <a href="https://wiki.selfhtml.org/wiki/WordPress/Child_Theme_einrichten" rel="nofollow noopener noreferrer"><strong>WordPress/Child Theme einrichten</strong></a></p> <h3>Und wie überlagert man nun ein Bild mit einem halbtransparentem Text?</h3><p>Wenn man Text über das Bild legen will, kann man nicht vom aktuellen Standpunkt am Monitor ausgehen.</p> <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Bilder_pr%C3%A4sentieren-4.html" width="800" height="400" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Bilder_pr%C3%A4sentieren-4.html">Einschwebende Bildunterschriften</a> </p> </iframe> <p>Hier muss der Bild-Container mit <code>position: relative</code>zum Bezugspunkt werden, in dem dann Bild und Beschreibungstext absolut positioniert werden.</p> <p>Dann kann die Bildunterschrift entsprechend oben oder unten „angeklebt werden“:</p> <pre><code class="block language-css"><span class="token selector">#gallery figure</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 punctuation">}</span> <span class="token selector">figure img</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#gallery > figure > figcaption</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">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>→ <a href="https://wiki.selfhtml.org/wiki/Bilder_im_Internet/Einbindung_mit_img#Einschwebende_Bildunterschriften" rel="nofollow noopener noreferrer"><strong>Bilder im Internet/Einbindung mit img</strong></a></p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>„<em>Das große Foto wird ja von einem halbtransparenten Textfeld überlagert. So ähnlich soll es auch aussehen. Ich habe dazu das Element mit margin -685px versehen. Das ist aber keine ideale Lösung, weil der Effekt auf unterschiedlichen Bildschirmen auch unterschiedlich ist.</em>“ <br>SELF-Forum <a href="https://forum.selfhtml.org/self/2023/feb/23/textelement-uber-bild-positionieren/1806452#m1806452" rel="noopener noreferrer">Textelement über Bild positionieren</a> vom 23.02.2023 <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><a href="https://wordpress.com/de/support/bearbeiten-von-css/" rel="nofollow noopener noreferrer">Hinzufügen von individuellem CSS</a> (wordpress.com) <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Gesucht: Autoren (m,w,d) Tue, 31 Jan 23 05:27:52 Z https://forum.selfhtml.org/weblog/2023/jan/31/gesucht-autoren-m-w-d/1805911#m1805911 https://forum.selfhtml.org/weblog/2023/jan/31/gesucht-autoren-m-w-d/1805911#m1805911 <p>ChatGPT ist in aller Munde und trotzdem muss manchmal trotzdem doch der (menschliche) Fachmann ran.</p> <p>Unser Wiki besteht mittlerweile aus über 8.000 Seiten, davon 2.742 Artikeln. Andererseits entwickelt sich die Welt von HTML und CSS immer weiter.</p> <h3>neue Methoden und Funktionen</h3><p>Im Januar ergänzte <a href="https://wiki.selfhtml.org/wiki/Spezial:Beitr%C3%A4ge/Heha" rel="nofollow noopener noreferrer">Heha</a> einige neue Methoden im Math-Object. Schnell fiel auf, dass es auch in CSS neue <a href="https://wiki.selfhtml.org/wiki/CSS/Funktionen/Math-Funktionen" rel="nofollow noopener noreferrer">Mathe-Funktionen</a> gibt. <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a> schrieb innerhalb kurzer Zeit einen neuen, umfangreichen Artikel. Live-Beispiele werden nachgereicht, wenn die Browserunterstützung - zur Zeit nur Safari und manchmal Firefox- besser wird (Chrome soll mit Version 111 nachziehen).</p> <p>Vielen Dank an die beiden!</p> <h3>Nicht alles, was früher galt, ist heute noch aktuell</h3><p>Auch die bestehenden Seiten müssen immer wieder angepasst werden. Oft sind es nur Kleinigkeiten wie das Einfügen eines Links, manchmal die Verbesserung eines Beispiels.</p> <p>Hier finden wir immer wieder Verbesserungswürdiges. Leider hat der Tag aber auch nur 24 Stunden und wir können nicht immer so viel schaffen, wie wir wollen.</p> <p>Deshalb nun unser Aufruf:</p> <h3><strong>HELP WANTED</strong></h3><h4>Was brauchen wir?</h4><p>Freiwillige, die sich an eins unserer <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDos</a> machen oder ein <a href="https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Artikel#Wie_sehen_gute_Tutorials_aus.3F" rel="nofollow noopener noreferrer">selbstgewähltes Thema veröffentlichen</a>. Tipps aus der Praxis kann eben doch kein Bot schreiben!</p> <h4>Wer ist unsere Zielgruppe?</h4><p>Interessierte Amateure, die …</p> <ul> <li>lieber verständliches Deutsch lesen, als sich technische Themen in einer Fremdsprache erkämpfen müssen</li> <li>Code-Snippets kopieren und ändern, dann aber doch wissen wollen, wie es genau funktioniert.</li> <li>Semi-professionelle Entwickler, die sich auf dem neuesten Stand halten wollen.</li> </ul> <h3>Deshalb:</h3><p><strong>Helfen Sie mit und verbessern Sie das SELF-Wiki durch <a href="https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Mitmachen" rel="nofollow noopener noreferrer">Ihre Mitarbeit</a>!</strong></p> Webdesign-Trend 2023 - Auf Direkt-Einbindung von Google-Fonts verzichten! Fri, 30 Dec 22 07:30:05 Z https://forum.selfhtml.org/weblog/2022/dec/30/webdesign-trend-2023-auf-google-fonts-verzichten/1805124#m1805124 https://forum.selfhtml.org/weblog/2022/dec/30/webdesign-trend-2023-auf-google-fonts-verzichten/1805124#m1805124 <p>Vor einem Jahr schreckte ein Urteil des Landgerichts München Seitenbetreiber auf: Eine ungefragte Einbindung von Google-Fonts stellt eine Verletzung des Persönlichkeitsrechts durch Datenschutzverstoß dar.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p>11 Monate später gab es neue Schlagzeilen: Ein Nachfolger des Freiherrn von Gravenreuth<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> ließ mit einem Programm Webseiten nach eingebundenen Google-Fonts suchen, täuschte Besuche einer realen Person vor und verschickte Abmahnungen.<sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup> Auch wenn die Staatsanwaltschaft <em>nur</em> die automatisierte Suche als kriminell einstuft, ist dies doch ein Rückschlag für das Unwesen der Abmahnungen vermeintlicher Mitbewerber.</p> <h3>Der rechtlich einwandfreie Weg</h3><p>Informieren Sie Seitenbesucher in einer <a href="https://wiki.selfhtml.org/wiki/Grundlagen/Rechtsfragen/Datenschutzerkl%C3%A4rung" rel="nofollow noopener noreferrer">Datenschutzerklärung</a> über die Speicherung und Weitergabe persönlicher Daten und holen Sie sich eine Einverständniserklärung ein.</p> <p>Leider wirkt so ein Cookie-Banner wie eine Barriere, die man erst überwinden muss, um an die Seiteninhalte zu kommen. Deshalb empfiehlt SELFHTML ...</p> <h3>Die praktische Variante</h3><p>Verzichten Sie auf externe CDN und binden Sie Fonts selbst ein. Dieses Tutorial zeigt, wie's geht:</p> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Google-Fonts_selbst_hosten" rel="nofollow noopener noreferrer"><strong>HTML/Tutorials/Google-Fonts selbst hosten</strong></a></p> <p>Zumal ein Grund, Fonts oder Anderes von CDNs zu verwenden, schon seit 2 Jahren nicht mehr existiert. Früher hatten Browser Ressourcen von CDNs gecachet. Wenn man auf eine Seite kam, die einen Font verwendete, den man beim Besuch einer anderen Website schon geladen hatte, wurde der Font aus dem Cache geholt. Heute tun Browser das nicht mehr. CDNs bringen keinen Performance-Gewinn.<sup class="footnote-ref"><a href="#fn4" id="fnref4">[4]</a></sup></p> <p><a href="/images/20169842-8813-11ed-b334-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/20169842-8813-11ed-b334-b42e9947ef30.jpg?size=medium" alt="Google-Fonts über CDN haben keine Vorteile mehr!" loading="lazy"></a></p> <p>Übrigens: Kein Verein, keine Schule und auch kein <a href="https://de.m.wikipedia.org/wiki/Kleine_und_mittlere_Unternehmen" rel="nofollow noopener noreferrer">KMU</a> <em><strong>braucht</strong></em> kostenlose Dienstleistungen wie Google Analytics. Wann haben Sie oder Ihr Systembetreuer diese Statistiken denn das letzte Mal ausgewertet?</p> <p>2023 wäre Zeit, einmal zu überprüfen, wie man seine Webseite unter dem Gesichtspunkt der Datensparsamkeit optimiert und auf das Cookie-Banner verzichten kann!</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://www.gesetze-bayern.de/Content/Document/Y-300-Z-BECKRS-B-2022-N-612" rel="nofollow noopener noreferrer">20.01.2022, Az. 3 O 17493/20</a> (gesetze-bayern.de) <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik/Recht_und_Links" rel="nofollow noopener noreferrer">SELFHTML:Verein/Chronik/Recht und Links</a> <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> <li id="fn3" class="footnote-item"><p><a href="https://www.tagesspiegel.de/berlin/abzocke-wegen-google-fonts-auf-webseiten-razzia-bei-berliner-abmahnanwalt-kilian-lenard-9071191.html" rel="nofollow noopener noreferrer">Betrugsmasche „Google-Fonts“: Razzia bei Berliner Abmahnanwalt Kilian Lenard</a> (tagesspiegel.de) <a href="#fnref3" class="footnote-backref">↩︎</a></p> </li> <li id="fn4" class="footnote-item"><p><a href="https://twitter.com/PixelAmbacht/status/1494272370076536840" rel="nofollow noopener noreferrer">Roel Nieskens</a> (twitter.com) <a href="#fnref4" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Frohe Weihnachten! Sat, 24 Dec 22 06:34:07 Z https://forum.selfhtml.org/weblog/2022/dec/24/frohe-weihnachten/1804981#m1804981 https://forum.selfhtml.org/weblog/2022/dec/24/frohe-weihnachten/1804981#m1804981 <p>Eigentlich hatte ich in Mails und Briefen dieses Jahr „ruhige und hustenfreie Zeit“ gewünscht.</p> <p>Nicht jeder hatte vorher gehustet und nicht jeder - wenn auch die meisten - braucht die Ruhe. Deshalb einen <em><strong>„frohen“</strong></em> Gruß an alle!</p> <h3>Was war</h3><p>Das letzte Jahr war geprägt vom Umbruch nach dem Vorstandswechsel. Martin Kunkel, im Forum seit 2005 als Der Martin aktiv, erklärte sich bereit, im Vorstand mitzuarbeiten und wurde zum 2. Vorsitzenden gewählt.</p> <p>Wir wollten zeigen, dass wir noch handlungsfähig sind und nahmen uns folgerichtig eine Erneuerung unserer seit 2010 nahezu unveränderten <em>Landing pages</em> vor. Das <a href="https://blog.selfhtml.org/2022/sep/30/makeover-fur-das-self-wiki" rel="noopener noreferrer">Makeover für das SELF-Wiki</a> ist leider noch nicht abgeschlossen, aber zumindest auf den Weg gebracht.</p> <p>Der Adventskalender des Jahres 2021 konzentrierte sich auf das Thema Barrierefreiheit. Vielen Dank an <a href="/users/821" class="mention registered-user" rel="noopener noreferrer">@Marc</a> für die Blogbeiträge und Aktualisierungen im Wiki.</p> <p>Dieses Jahr sammelten wir die häufigen Fragen, die wir künftig wieder prominenter präsentieren wollen.</p> <h3>Was wird</h3><p>Wir erhalten außerhalb des Forums viele Anfragen per Mail. In einer Standardantwort (da <em>„unsere manpower begrenzt ist, können wir individuelle Fachfragen leider nicht persönlich beantworten.“</em>) verweisen wir auf's Forum und das Wiki.</p> <p>Dieser Mangel an Freiwilligen, bzw. die Tatsache, dass unsere Aktiven eben auch in Familie und Beruf aktiv sind, führt dazu, dass wir leider nicht alle unsere - manchmal zugegebenermaßen hochfliegenden - Pläne realisieren konnten.</p> <p>Andererseits bietet das vorhandene SELFHTML-Wissen im Wiki eben bereits jetzt eine Antwort auf die meisten Fragen.</p> <p>In diesem Sinne …</p> <p>Frohe Weihnachten und ein gutes Jahr 2023!</p> <p>Matthias Scharwies</p> Adventskalender 2022 Wed, 30 Nov 22 18:44:20 Z https://forum.selfhtml.org/weblog/2022/nov/30/adventskalender-2022/1804275#m1804275 https://forum.selfhtml.org/weblog/2022/nov/30/adventskalender-2022/1804275#m1804275 <p>Auch in diesem Jahr möchte SELFHTML wieder einen Adventskalender für die Community anbieten.</p> <p>In unserem Forum und in den eingehenden Emails ist uns aufgefallen, dass es sich bei den Themen häufig nicht um <em>cutting-edge-technologies</em> für <em>early-adopter</em>, sondern um den ganz normalen Wahnsinn handelt, den man eigentlich doch auch selbst gewusst hat.</p> <p>Deshalb kommen hier die 24 häufigsten Fragen aus der FAQ, deren Antworten dem professionellen Entwickler leicht von der Hand gehen, unserer Zielgruppe - den Amateuren und semi-professionellen Webdesignern - jedoch Ideen und Anregungen für die eigene Arbeit geben.</p> <p>Der Worte sind genug gewechselt, … hier geht's endlich zum <a href="https://forum.selfhtml.org/advent/2022" rel="noopener noreferrer">Adventskalender</a>!</p> Oranger Text auf weißem Grund? Fri, 30 Sep 22 22:02:31 Z https://forum.selfhtml.org/weblog/2022/oct/01/oranger-text-auf-weissem-grund/1802407#m1802407 https://forum.selfhtml.org/weblog/2022/oct/01/oranger-text-auf-weissem-grund/1802407#m1802407 <p>Teil 2 unserer <a href="https://blog.selfhtml.org/2022/sep/30/makeover-fur-das-self-wiki" rel="noopener noreferrer">Makeover-Serie</a></p> <p>Die bis 2022 im SELF-Wiki verwendete Linkfarbe <code>#2673bf</code> hat auf weißem Hintergrund einen Kontrast von <a href="https://webaim.org/resources/contrastchecker/?fcolor=2673BF&bcolor=FFFFFF" rel="nofollow noopener noreferrer">4.90:1</a>, was für großen Text ausreicht, für kleinen Fließtext jedoch nicht akzeptiert werden kann. Auf farbigen Hintergünden ist der Kontrast noch schlechter.</p> <p>Als das CSS untersucht wurde, fiel auf, dass die Farbe der Linktexte bei <code>:hover</code> zu <span style="color:#df6c20">orange</span> (auf weiß! - Kontrast <a href="https://webaim.org/resources/contrastchecker/?fcolor=DF6C20&bcolor=FFFFFF" rel="nofollow noopener noreferrer">3.33:1</a>) wechselte.</p> <h2 id="Vergleich_der_verwendeten_Linkfarben">Vergleich der bisher verwendeten Linkfarben</h2> <p>In dieser Tabelle sieht man das alte <span style="padding:0 .5em;background:#3983ab; color:white;">dunkelblau</span> und weitere Farbvarianten im Vergleich zur aktuellen Linkfarbe und zum <span style="padding:0 .5em;background: #337599; color: white;">SELF-blau</span> der Farbtabelle. <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <table class="cf-default-table"> <tr> <th style="width:10.5em;">Farbe </th> <th> Beispiel </th> <th> Kontrast </th></tr> <tr> <td style="background-color: #2673bf; color: white; padding:.3em .5em;"> #2673bf <br> hsl(210 67% 45%) </td> <td> <span style="color:#2673bf;">aktuelle Linkfarbe im Wiki</span> </td> <td> <a rel="nofollow" class="external text" href="https://webaim.org/resources/contrastchecker/?fcolor=2673BF&bcolor=FFFFFF">4.90:1</a><br /><span style="color:white; background:#c82f04 ; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;">FAIL</span> </td></tr> <tr> <td style="background-color: #3481CD; color: white; padding:.3em .5em;"> #3481CD <br> hsl(210 60% 50%) </td> <td> <span style="color:#2673bf;">aktuelle Linkfarbe im Forum und Blog</span> </td> <td> <a rel="nofollow" class="external text" href="https://webaim.org/resources/contrastchecker/?fcolor=3481CD&bcolor=FFFFFF">4.06:1</a><br /><span style="color:white; background:#c82f04 ; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;">FAIL</span> </td></tr> <tr> <td style="background-color: #3983ab; color: white; padding:.3em .5em;">ehemaliges SELF-Blau <br> #3983ab <br /> hsl(201 50% 45%) </td> <td> <span style="color:#3983ab;">Linktext in SELF-blau</span> </td> <td> <a rel="nofollow" class="external text" href="https://webaim.org/resources/contrastchecker/?fcolor=3983AB&bcolor=FFFFFF">4.19:1</a><br /><span style="color:white; background:#c82f04 ; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;">FAIL</span> </td></tr> <tr> <td style="background-color: #337599; color: white; padding:.3em .5em;"> neues SELF-Blau <br> #337599 <br /> hsl(201 50% 40%) </td> <td> <span style="color:#337599;">Vorschlag, bei dem alle oben aufgeführten Hintergründe passen</span> </td> <td> <a rel="nofollow" class="external text" href="https://webaim.org/resources/contrastchecker/?fcolor=306F91&bcolor=FFFFFF">5.06:1</a><br /><span style="color:white; background:#8db243; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;">PASS</span> </td></tr> <tr> <td style="background-color: #24219d; color: white; padding:.3em .5em;"> visited <br> #24219d <br> </td> <td> <span style="color:#24219d;">bisheriges visited im Wiki</span> </td> <td> <a rel="nofollow" class="external text" href="https://webaim.org/resources/contrastchecker/?fcolor=24219d&bcolor=FFFFFF">11.8:1</a><br /><span style="color:white; background:#8db243; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;">PASS</span> </td></tr> <tr> <td style="background-color: #df6c20; color: white; padding:.3em .5em;"> orange <br> #df6c20 <br> </td> <td> <span style="color:#df6c20;">a:hover im Wiki</span> </td> <td> <a rel="nofollow" class="external text" href="https://webaim.org/resources/contrastchecker/?fcolor=DF6C20&bcolor=FFFFFF">3.33:1</a><br /><span style="color:white; background:#df6c20; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;">WTF&#160;?</span> </td></tr> <tr> <td style="background-color: #990909; color: white; padding:.3em .5em;"> rot-braun <br> #990909 <br> </td> <td> <span style="color:#990909;">a:hover im Wiki (in Navigationen)</span> </td> <td> <a rel="nofollow" class="external text" href="https://webaim.org/resources/contrastchecker/?fcolor=990909&bcolor=FFFFFF">8.75:1</a><br /><span style="color:white; background:#8db243; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;">PASS</span> </td></tr></table> <p>Höchste Zeit unser Farbkonzept zu überprüfen und zu verbessern!</p> <h2>unsere SELF-Farbpalette</h2> <p>... wurde 2010 von schuer aus dem gekauften Waipoua-Theme für den Wordpress-Blog entwickelt und 2012-2014 von performer für die ganze SELF-Welt angepasst:</p> <p>Die <a href="https://wiki.selfhtml.org/wiki/Hilfe:Farbtabelle#Farbt.C3.B6ne" rel="nofollow noopener noreferrer">SELF-Farbpalette</a> besteht aus je 4 Grund- und Pastelltönen, die die 0.1fache Deckung des Grundtons haben, (<strong>Ausnahme</strong> ist hellgrün mit 0.2)</p> <ul> <li>müssen in <code>hex</code> oder <code>rgb()</code> ohne Alphakanal umgerechnet werden, damit dunkler Hintergrund nicht durchscheint.</li> <li>die blaue Linkfarbe hat aber besonders bei Pastellhintergründen nicht genug Kontrast<br>→ 2 Alternativen: <ul> <li>dunklere Linkfarbe oder</li> <li>Verzicht auf farbigen Hintergrund!</li> </ul> </li> </ul> <p>Diese Farbpalette wurde so erweitert, dass sie überall ausreichende Kontraste erzielt und auch im Dunklen Modus noch ganz gut aussieht!</p> <h2 id="links">Kennzeichnungen von Links </h2> <p>Grundsätzlich sollten Links durch <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links/Gestaltung_mit_CSS#Mehrfachkennzeichnung" rel="nofollow noopener noreferrer">mehrere Merkmale erkennbar</a> sein, was gerade bei den Vorlagen mit den farbigen Hintergründen nicht eingehalten wurde. Im Fließtext sind Links durch die blaue Linkfarbe und Unterstreichung erkennbar. <sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> Bei <code>:hover</code> und <code>:focus</code> kommt hellblauer Hintergrund dazu.</p> <p>Blog-Serie zum Makeover 2022</p> <ol> <li><a href="https://blog.selfhtml.org/2022/sep/30/makeover-fur-das-self-wiki" rel="noopener noreferrer">Makeover für das SELF-Wiki</a></li> <li><strong>Oranger Text auf weißem Grund?</strong></li> <li>Icons und Grafiken</li> </ol> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Ist ihnen aufgefallen, dass die <code>hsl()</code>-Funktionen ohne Komma notiert wurden? - Normalerweise werden mehrere Werte in CSS durch Leerzeichen getrennt. Dies wurde nun vom W3C vereinheitlicht.<br>SELF-Wiki: <a href="https://wiki.selfhtml.org/wiki/Grafik/Farbe/Farbmodelle" rel="nofollow noopener noreferrer">Farbmodelle</a> <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p>Textlinks in Aufzählungen wie in der Sidebar oder auf den Inhaltsverzeichnissen der Portalseiten werden nur durch die Linkfarbe gekennzeichnet. Dies wird auch vom W3C <a href="https://www.w3.org/TR/css-color-4/" rel="nofollow noopener noreferrer">z. B. hier</a> so gehandhabt. <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Makeover für das SELF-Wiki Fri, 30 Sep 22 21:32:26 Z https://forum.selfhtml.org/weblog/2022/sep/30/makeover-fur-das-self-wiki/1802406#m1802406 https://forum.selfhtml.org/weblog/2022/sep/30/makeover-fur-das-self-wiki/1802406#m1802406 <p>Am 14. September wurde unser Wiki ein Achtel Jahrhundert (12,5 Jahre) alt! In unserer <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik#Der_Wiki-Neustart" rel="nofollow noopener noreferrer">Vereins-Chronik</a> gibt es einen Überblick mit vielen Screenshots aus vergangenen Jahren.</p> <p>Wir wollten das unrunde Jubiläum zum Anlass für ein Makeover nehmen, das auf der <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Protokolle/Mitgliederversammlung_2021#Landing_Page_und_Unterst.C3.BCtzerseiten" rel="nofollow noopener noreferrer">Mitgliederversammlung 2021</a> beschlossen wurde.</p> <h3>1. Landing page</h3><p>Die bisherige <em>Landing Page</em> unter selfhtml.org wurde depubliziert und in das SELF-Wiki integriert.</p> <p>Dafür wurden …</p> <ul> <li>die Inhalte der <em>Landing Page</em> auf die Seite <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein" rel="nofollow noopener noreferrer">SELFHTML:Verein</a> übertragen. <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></li> <li>die Navigationen des Wiki in der Werkzeugleiste links neu angeordnet</li> <li>die <a href="https://wiki.selfhtml.org/wiki/" rel="nofollow noopener noreferrer">Startseite des Wiki</a> völlig neu gestaltet</li> </ul> <h3>2. Startseite</h3><p>Bisher wurde die Startseite per JavaScript zum „Inhaltsverzeichnis“ umbenannt. Sie war eher eine alphabetische Linksammlung, in der viele Links doppelt und dreifach präsentiert wurden.</p> <p><a href="/images/4b655ab0-96c9-11ec-8367-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/4b655ab0-96c9-11ec-8367-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>Künftig stellt die neue <a href="https://wiki.selfhtml.org/wiki/" rel="nofollow noopener noreferrer">Startseite</a> Interessantes aus dem SELF-Universum vor. Es gibt aber weiterhin unser <a href="https://wiki.selfhtml.org/wiki/Inhalt" rel="nofollow noopener noreferrer">alphabetisches Inhaltsverzeichnis</a>!</p> <h3>3. CSS und Dark Mode</h3><p>Um das Wiki barrierefreier zu machen, wurden die seit 2010 verwendeten Vorlagen geprüft und überarbeitet. Viele, weniger oft benutzte Vorlagen wurden ersetzt; die <a href="https://blog.selfhtml.org/2022/feb/22/geht-das-auch-im-ie-eine-geschichte-der-iconsets-zur-browserunterstutzung" rel="noopener noreferrer">Vorlage:Iconset</a> depubliziert.</p> <p>Leider beschränkt sich die Mediawiki-Software, um eine Kompatibilität auch mit ältesten Browserversionen zu garantieren, auf HTML4.01-Elemente. Deshalb wurden die inhaltsleeren div-Elemente zumindest mit role-Attributen anstelle von nicht zugänglichen Klassen versehen.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>note<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>p</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>heading<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hinweis<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>Das CSS wurde behutsam angepasst und bis auf wenige Ausnahmen werden die Vorlagen jetzt ohne farbigen Hintergrund gestaltet. So wirkt es weniger bunt und ermöglicht höhere Kontraste, die das Lesen erleichtern.</p> <p><a href="/images/421baae4-2c11-11ed-ad02-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/421baae4-2c11-11ed-ad02-b42e9947ef30.png?size=medium" alt="Vorlagen und Boxen - vor und nach dem Wiki-Makeover" title="Vorlagen und Boxen - vor und nach dem Wiki-Makeover" loading="lazy"></a></p> <p>Zusätzlich ermöglicht das CSS nun das Eingehen auf Benutzerwünsche. Es gibt einen Dark Mode, der bei entsprechenden Einstellungen im OS oder Browser aktiviert wird, sowie den Verzicht auf Animationen bei entsprechenden Settings.</p> <p>Blog-Serie zum Makeover 2022</p> <ol> <li><strong>Makeover für das SELF-Wiki</strong></li> <li><a href="https://blog.selfhtml.org/2022/oct/01/oranger-text-auf-weissem-grund" rel="noopener noreferrer">Oranger Text auf weißem Grund?</a></li> <li>Icons und Grafiken</li> </ol> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Die bisherige Landing Page war nur über github erreichbar und so nur schwierig zu aktualisieren. Andererseits waren ihre Inhalte wie das <em>mission statement</em> oft bereits an anderer Stelle als <em>duplicate content</em> vorhanden. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Immer wieder gefragt … Wed, 31 Aug 22 17:37:04 Z https://forum.selfhtml.org/weblog/2022/aug/31/immer-wieder-gefragt/1801754#m1801754 https://forum.selfhtml.org/weblog/2022/aug/31/immer-wieder-gefragt/1801754#m1801754 <p>Oft steht man vor einem Problem und kommt nicht weiter, da man gar nicht weiß, was genau nicht funktioniert. Und falls man dann doch den Kern des Problems entdeckt hat, ist es gar nicht so einfach ohne Kenntnis des passenden Fachbegriffs eine Lösung im Netz zu finden.</p> <p>In solchen Fällen ist das SELF-Forum und immer wieder auch unsere Mailadresse ein beliebter Anlaufpunkt. Teilweise können die Fragenden direkt dort abgeholt werden, wo ihr Problem aufgetreten ist - oft erhalten sie auch Hinweise zu Aspekten, nach den sie gar nicht gefragt haben. Manche saugen diese zusätzlichen Informationen dankbar auf, andere ignorieren dies leider geflissentlich.</p> <p>In letzter Zeit schien es wieder einmal, also ob sich diese Fragen im Wochentakt wiederholen. Deshalb listen wir nun die häufigsten Fragen zusammen mit einer ausführlicheren Fehlerbeschreibung in unserem seit langem bestehenden FAQ-Bereich, der sich nun im moderneren Aussehen präsentiert:</p> <p><a href="https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F#FAQ" rel="nofollow noopener noreferrer"><strong>FAQ</strong> im SELF-Wiki</a></p> <p>Für jede Frage existieren auch Links auf entsprechende Tutorials in unserem Wiki.</p> Outline raus! Dafür ist hgroup wieder da! Fri, 22 Jul 22 04:31:25 Z https://forum.selfhtml.org/weblog/2022/jul/22/hgroup-ist-wieder-da/1800678#m1800678 https://forum.selfhtml.org/weblog/2022/jul/22/hgroup-ist-wieder-da/1800678#m1800678 <p>… oder war es nie weg?</p> <p>In seinem Artikel <a href="https://css-tricks.com/roundup-of-recent-document-outline-chatter/" rel="nofollow noopener noreferrer"><em>Roundup of Recent Document Outline Chatter</em></a> auf css-tricks gibt Geoff Graham die neuesten Entwicklungen um den <em><strong>document-outline-algorithm</strong></em> wieder.</p> <p>Dieser sollte HTML-Dokumente anhand ihrer Seitenstruktur, bzw. auf Elemente wie <code>section</code>, <code>article</code>und <code>aside</code> analysieren und dann eine semantisch passende Gliederung erstellen.</p> <p>Dies scheiterte an zwei Dingen: Es wurde von den Browser-Herstellern nie implementiert und mit der Überschriftenhierarchie von <code>h1</code> bis <code>h6</code> hätte man dies eigentlich bereits ohne Umwege bewerkstelligen können. Aus diesen Gründen wird nun der <em>document-outline-algorithm</em> entfernt.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p>An seine Stelle soll eine Überschriften-basierte Gliederung treten. Dabei gibt es vor allem das Problem, dass oft mehrere Überschriften verschiedener Hierarchien verwendet werden, um Überschriften mit Untertiteln zu kombinieren:</p> <pre><code class="block bad language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Willkommen in W3Docs<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Bei uns können Sie alles über HTML lernen.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Immer aktuell mit HTML 5!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> </code></pre> <p>Solche Kombinationen würden ein Inhaltsverzeichnis und auch eine Gliederung durch Robots unnötig kompliziert und unübersichtlich machen.</p> <p>Aus diesem Grund sollte ein umschließendes <a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/hgroup" rel="nofollow noopener noreferrer">hgroup</a>-Element nur die <code>h1</code> als Überschrift erkennen. <code>hgroup</code> wurde aber nicht in HTML5 übernommen und galt daher als obsolet. Im <em>Living Standard</em> der WHATWG blieb es aber erhalten.<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p> <p>Nachdem nun die HTML5-Spezifikation der W3C nicht weiterentwickelt wird, ist es ganz offiziell wieder dabei. Im Unterschied zu früher enthält es aber nur <strong>eine</strong> Überschrift, der ein oder mehrere Textabsätze voranstehen oder folgen:</p> <pre><code class="block good language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Willkommen bei SELFHTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Bei uns können Sie alles über HTML lernen.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Immer aktuell mit dem Living Standard von HTML!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>hgroup</span><span class="token punctuation">></span></span> </code></pre> <p>Der bestehende Wiki-Artikel zur <em>document-outline</em> wurde durch eine Weiterleitung auf <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Seitenstrukturierung#.C3.9Cberschriften" rel="nofollow noopener noreferrer">HTML/Tutorials/Seitenstrukturierung</a> ersetzt. Dieses Tutorial enthält nun auch ein Beispiel mit <code>hgroup</code>.</p> <p>Auch der Referenz-Artikel <a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/hgroup" rel="nofollow noopener noreferrer">HTML/Elemente/hgroup</a> ist aktualisiert!</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>whatwg/html: <a href="https://github.com/whatwg/html/pull/7829" rel="noopener noreferrer">replace current outline algorithm with one based on heading levels #7829</a> <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p>WHATWG: <a href="https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element" rel="nofollow noopener noreferrer">the-hgroup-element</a> <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Endlich - der Internet Explorer ist Geschichte! Thu, 16 Jun 22 19:02:29 Z https://forum.selfhtml.org/weblog/2022/jun/16/endlich-nach-27-jahren-ist-der-internet-explorer-geschichte/1799838#m1799838 https://forum.selfhtml.org/weblog/2022/jun/16/endlich-nach-27-jahren-ist-der-internet-explorer-geschichte/1799838#m1799838 <p>Erst darauf hingefiebert und dann fast vergessen - seit gestern ist der Internet Explorer Geschichte.</p> <p>Auf <a href="https://twitter.com/EddyVinckk/status/1536645664804941824" rel="nofollow noopener noreferrer">Twitter</a> wird gefeiert, dass der Internet Explorer endgültig ausläuft. Auch wenn er zum Schluss oft nur während der Installation eines neuen Systems benutzt wurde, um einen „richtigen“ Browser herunterzuladen, musste man in vergangen Jahren eben doch mehrere Stylesheets entwickeln und über <a href="https://wiki.selfhtml.org/wiki/Browserweiche" rel="nofollow noopener noreferrer">Browserweichen</a> oder CSS-Hacks aktivieren.</p> <p>Im SELF-Wiki gibt es noch etliche Hinweise auf das besondere Verhalten des Internet Explorers, die nun sukzessive entfernt werden können.</p> <p>Das SELF-Wiki ist ein Projekt, das auf gemeinsamer, freiwilliger Zusammenarbeit basiert. Bitte trauen Sie sich, solche <a href="https://wiki.selfhtml.org/index.php?search=Internet+Explorer&title=Spezial%3ASuche&go=Seite" rel="nofollow noopener noreferrer">Fundstellen</a> zu sichten und gegebenfalls zu aktualisieren!</p> Navigationen - oben oder unten? Sat, 30 Apr 22 20:30:28 Z https://forum.selfhtml.org/weblog/2022/apr/30/navigationen-oben-oder-unten/1798808#m1798808 https://forum.selfhtml.org/weblog/2022/apr/30/navigationen-oben-oder-unten/1798808#m1798808 <p>Aus einer unverfänglichen Frage im Forum (<a href="https://forum.selfhtml.org/self/2022/apr/25/warum-soll-die-navigation-im-quelltext-neuerdings-uber-dem-haupttext-stehen/1798713#m1798713" rel="noopener noreferrer">Warum soll die Navigation im Quelltext neuerdings über dem Haupttext stehen?</a>) entwickelte sich ein umfangreicheres Projekt, das noch nicht ganz abgeschlossen ist:</p> <h3>Position des nav-Elements im HTML-Markup</h3><p>Mit <strong>Erwartungskonformität</strong> (ISO 9241-110)<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup><sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> werden Konventionen zusammengefasst, die dem Nutzer eine einheitliche, ihm vertraute Gestaltung sichern.</p> <p>Nutzer sind es gewöhnt, die Hauptnavigation auf einer Webseite oben vorzufinden. Oder links. (Schreibrichtung von links nach rechts, Zeilen von oben nach unten vorausgesetzt.) Man bräuchte schon sehr gute Gründe, um von dieser Konvention abzuweichen.</p> <p>Oben bzw. links heißt: am Anfang im DOM. Die visuelle Reihenfolge sollte der Reihenfolge im DOM entsprechen; andernfalls dürften sehende Tastaturnutzer und sehende Screenreader-Nutzer ziemlich verwirrt sein. <sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup></p> <h3>Ein Flyout-Menü</h3><p>Aus der folgenden Diskussion um Skip-Links, die es ermöglichen direkt zum Inhalt zu springen, sollte ein neues Beispiel für das SELF-Wiki entstehen:</p> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation/Flyout-Men%C3%BC" rel="nofollow noopener noreferrer">HTML/Tutorials/Navigation/Flyout-Menü</a></p> <p>Bis jetzt finden sich dort zwei Varianten:</p> <ol> <li>Eine Variante erreicht die Interaktivität des Auf- und Zuklappens mit ein bisschen JavaScript.</li> <li>Die zweite Variante wählt die vermeintlich „einfachere“ Version mit dem details-Element. Allerdings zeigten Tests, dass hier die Zugänglichkeit nicht 100%ig gegeben ist, was in einem anderen Thread heiß diskutiert wurde. <sup class="footnote-ref"><a href="#fn4" id="fnref4">[4]</a></sup></li> </ol> <p>Sobald es beruflich etwas ruhiger wird, wird der Wiki-Artikel fertig gestellt! Versprochen!</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="http://www.kommdesign.de/texte/din.htm" rel="nofollow noopener noreferrer">Die EN ISO 9241 - 10</a> <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><a href="https://www.procontext.de/aktuelles/2020/06/iso-9241-110-in-neuer-auflage-erschienen.html" rel="nofollow noopener noreferrer">Dialogprinzipien wurden überarbeitet und heißen jetzt Interaktionsprinzipien – Usability-Norm ISO 9241-110 in neuer Auflage erschienen</a> <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> <li id="fn3" class="footnote-item"><p>Gunnar Bittersmann im <a href="https://forum.selfhtml.org/self/2022/apr/25/warum-soll-die-navigation-im-quelltext-neuerdings-uber-dem-haupttext-stehen/1798778#m1798778" rel="noopener noreferrer">SELF-Forum </a> <a href="#fnref3" class="footnote-backref">↩︎</a></p> </li> <li id="fn4" class="footnote-item"><p>SELF-Forum: <a href="https://forum.selfhtml.org/self/2022/may/01/menu-mit-details-und-summary-im-screenreader-voiceover/1798815#m1798815" rel="noopener noreferrer">Menü mit details und summary im Screenreader VoiceOver</a> <a href="#fnref4" class="footnote-backref">↩︎</a></p> </li> </ol> </section> GIF - heute noch aktuell? Sat, 26 Mar 22 04:06:59 Z https://forum.selfhtml.org/weblog/2022/mar/26/gif-heute/1797681#m1797681 https://forum.selfhtml.org/weblog/2022/mar/26/gif-heute/1797681#m1797681 <p>Vor wenigen Tagen starb Stephen E. Wilhite an Covid. Er wurde als Erfinder des GIF-Grafikformats berühmt. Das <em>Graphics Interchange Format</em>, kurz <strong>GIF</strong> ist ein <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen" rel="nofollow noopener noreferrer">Grafikformat</a> für Bilder mit einer Farbpalette von max. 256 Farben, inkl. einer „Transparenzfarbe“. Es erlaubt eine verlustfreie Kompression der Bilder.</p> <p>Besonders interessant: Es können mehrere (übereinanderliegende) Einzelbilder in einer Datei abgespeichert werden, die dann als Animationen interpretiert werden.</p> <p>Zwischenzeitlich waren <em>animated GIFs</em> als Klickibunti verpönt. WhatsApp, Facebook (aka <em>„Insta für alte Leute“</em>) und Twitter haben ihnen eine Renaissance verschafft.</p> <h2 id="alternativen">Alternativen heute</h2> <p>Im Webdesign ist gibt es heute mehrere Alternativen: Da Wilhite und seine Firma Compuserve den Lempel-Ziv-Welch-Algorithmus zur Komprimierung verwendeten, klagte der ursprüngliche Rechteinhaber Unisys auf Lizenzgebühren. <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> Deshalb wurde 1994 das rechtefreie <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#PNG_-_Grafiken_mit_Texten" rel="nofollow noopener noreferrer"><strong>PNG</strong>-Format</a> entwickelt, das ebenfalls Transparenzen, aber keine Animationen erlaubt. Für Rastergrafiken mit Text ist es heute der Standard.</p> <p>Mittlerweile gibt es neben GIF, JPEG und PNG noch das neue <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#WebP" rel="nofollow noopener noreferrer"><strong>WebP</strong></a>, das bereits von allen Brwosern unterstützt wird, sowie AVIF, die beide eine noch bessere Komprimierung aufweisen.</p> <p>Andererseits werden heute viele Grafiken <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials" rel="nofollow noopener noreferrer">direkt in <strong>SVG</strong></a> erstellt. Text in SVG kann von Suchmaschinen und Screenreadern gelesen und mit CSS gestaltet werden. Objekte in SVG können mit <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren" rel="nofollow noopener noreferrer">CSS animiert</a> und verlustfrei und immer gestochen scharf skaliert werden. <sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p> <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html" width="800" height="300"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html</a> </p> </iframe> <h2 id="barrierefrei">Barrierefreiheit</h2> <p>Grundlegendes Problem von animierten GIFs ist die mangelnde Steuerbarkeit durch den Benutzer. Während dies bei einer drehenden Erdkugel nur unbequem ist, vertragen manche Nutzer aus gesundheitlichen Gründen keine Animationen. Um hier auf Benutzerwünsche einzugehen, wurde die <code>prefers-reduced-motion</code>-Medienabfrage geschaffen. <sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup></p> <p>Eine solche Media Query kann im CSS, aber auch direkt im <a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/picture" rel="nofollow noopener noreferrer">picture</a>-Element verwendet werden:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>CG_Heart.gif<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(prefers-reduced-motion: no-preference)<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>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Heart-screenshot.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Herz, Computergenerierter Querschnitt<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>picture</span><span class="token punctuation">></span></span> </code></pre> <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-picture-prefers-reduced-motion.html" width="800" height="420"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-picture-prefers-reduced-motion.html</a> </p> </iframe> <p>In diesem Beispiel wird abgefragt, welche Nutzereinstellungen zu Animationen vorhanden sind. Falls keine Festlegung getroffen wurde, wird das animated GIF gezeigt. Falls der Wert <code>reduce</code> gesetzt wurde, wird ein statischer Screenshot gezeigt.</p> <p>Noch besser wäre eine Einbindung als Film (siehe <a href="https://upload.wikimedia.org/wikipedia/commons/3/3f/CG_heart_90fps.webm" rel="nofollow noopener noreferrer">Datei als webm</a>), da dieser dann vom Nutzer gestartet und beliebig gestoppt werden kann.</p> <p>Im Netz gibt es weitere Vorschläge, dies auch durch Skripte zu realisieren. Auf dev.to habe ich einen Artikel gefunden, der zeigt, wie man das GIF aufsplittet, in WebP verwandelt und bei <code>prefers-reduced-motion=reduce</code> eben unbeweglich darstellt. Aber der Artikel selbst warnt vor einem Einsatz im wirklichen Leben! <sup class="footnote-ref"><a href="#fn4" id="fnref4">[4]</a></sup></p> <p>Andere schlagen vor mit canvas oder PHP einen Screenshot des GIFs zu machen und diesen dann wiederzugeben.</p> <p><strong>tl;dr</strong>:</p> <p>Für komplexe Infografiken und Animationen sind entweder Videos oder SVGs empfehlenswert, die vom Benutzer gesteuert werden können.</p> <p>Ist ein <em>animated GIF</em> bereits vorhanden, kann man mit einem Screenshot als <em>fallback</em> Nutzerwünsche berücksichtigen.</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Wikipedia: <a href="https://de.wikipedia.org/wiki/Graphics_Interchange_Format" rel="nofollow noopener noreferrer">Graphics Interchange Format</a> <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><a href="/images/4ad1d258-acd7-11ec-bde6-b42e9947ef30.gif" rel="noopener noreferrer"><img src="/images/4ad1d258-acd7-11ec-bde6-b42e9947ef30.gif?size=medium" alt="" loading="lazy"></a>Bei einem GIF wie <a href="https://wiki.selfhtml.org/wiki/Datei:Wait.gif" rel="nofollow noopener noreferrer">hier</a> sieht man das Problem. Die Rastergafik ist pixelig. Eine Änderung von Farbe, Geschwindigkeit, etc kann nur mit einem Grafik-Programm vorgenommen werden. <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> <li id="fn3" class="footnote-item"><p>SELF-Blog: <a href="https://blog.selfhtml.org/2021/aug/01/multimedia-wie-viel-ist-zu-viel" rel="noopener noreferrer">Multimedia- Wie viel ist zu viel?</a> vom 01.08.2021 <a href="#fnref3" class="footnote-backref">↩︎</a></p> </li> <li id="fn4" class="footnote-item"><p>dev.to <a href="https://dev.to/inhuofficial/stopping-gif-animations-on-dev-to-for-those-who-prefer-reduced-motion-59pg" rel="nofollow noopener noreferrer">Pausing GIF animations on dev.to for those who <code>prefer-reduced-motion</code> [hack 1] </a> <a href="#fnref4" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Geht das auch im IE? - eine Geschichte der Iconsets zur Browserunterstützung Mon, 21 Feb 22 23:58:12 Z https://forum.selfhtml.org/weblog/2022/feb/22/geht-das-auch-im-ie-eine-geschichte-der-iconsets-zur-browserunterstutzung/1796483#m1796483 https://forum.selfhtml.org/weblog/2022/feb/22/geht-das-auch-im-ie-eine-geschichte-der-iconsets-zur-browserunterstutzung/1796483#m1796483 <p>Die Doku beschrieb von Anfang an nicht nur den Soll-Zustand der Spezifikationen, sondern eben auch die tatsächlich vorhandene Browserunterstützung.</p> <p>Die ersten Versionen waren geprägt von der Zeit der Browserkriege, in der manche proprietären Elemente eben nur in einem Browser funktionierten. Heute ist die Anzeige dieser Browserunterstützung lange nicht mehr so wichtig wie früher, da selbst völlig neue Features oft sehr schnell von allen Browsern übernommen werden. Die schnelle Versionierung im Wochenabstand (bald haben Chrome und Firefox die 100 erreicht) wirkt im Vergleich zur Vergangenheit paradiesisch.</p> <p>Mit dem Ende des Internet Explorer und dem kommenden Makeover wird nun auch die im Wiki verwendete <a href="https://wiki.selfhtml.org/wiki/Vorlage:Iconset" rel="nofollow noopener noreferrer">Vorlage:Iconset</a> beerdigt.</p> <h2>Zeit für einen kleinen Rückblick:</h2> <p><strong>center-Element aus der Doku 4.0</strong> (21.01.1996)</p> <p><a href="/images/819dd898-932a-11ec-b1a2-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/819dd898-932a-11ec-b1a2-b42e9947ef30.png?size=medium" alt="center-Element aus der Doku4.0 (21.01.1996)" title="center-Element aus der Doku4.0 (21.01.1996)" loading="lazy"></a></p> <p>Können Sie alle vier Icons noch erkennen/zuordnen? <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <hr> <p><strong>font-Element aus der Doku 7.0</strong> (27.04.1998)</p> <p><a href="/images/ca42ecf6-936f-11ec-8f2d-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/ca42ecf6-936f-11ec-8f2d-b42e9947ef30.png?size=medium" alt="font-Element aus der Doku 7.0 (27.04.1998)" title="font-Element aus der Doku 7.0 (27.04.1998)" loading="lazy"></a></p> <p>Hier sind die einzelnen Icons den heutigen schon ähnlicher.</p> <hr> <p>Im SELF-Wiki wurden die Einzelbilder ab 2010 zu einem, bzw. zwei Sprites zusammengefasst, deren Versionen Sie heute noch vergleichen können:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/Datei:Iconset.png" rel="nofollow noopener noreferrer">Datei:Iconset.png</a></li> <li><a href="https://wiki.selfhtml.org/wiki/Datei:Iconset-Extended.png" rel="nofollow noopener noreferrer">Datei:Iconset-Extended.png</a></li> </ul> <p>Da mit der schnellen Versionierung von Chrome und Firefox immer mehr Änderungen an der Spritegrafik nötig wurden, wurde zusätzlich eine Vorlage:Browsericonset eingeführt, in der Icons und Versionsnummern als getrennte Parameter übergeben wurden.</p> <p>Wichtiger wurde ein optionaler Link zu caniuse, der in der <a href="https://wiki.selfhtml.org/wiki/Vorlage:Caniuse" rel="nofollow noopener noreferrer">Vorlage:Caniuse</a> erfolgt.</p> <p>Dabei fiel auf, dass in den überwiegenden Fällen die Icons heute einfach nur Verzierung sind, die ihre ehemals prominente Rolle verloren haben. Während in der Vergangheit mehrfach überlegt wurde, ein eigenes Icon für fehlende IE-Unterstützung zu kreieren, hat sich dies nun mit dem Ende des Uralt-Browsers erledigt.</p> <p>Die <a href="https://wiki.selfhtml.org/wiki/Vorlage:Caniuse" rel="nofollow noopener noreferrer">Vorlage:Caniuse</a> bietet nun einen Link zu einer Visualisierung, die nicht nur aktuelle, sondern eben auch vergangene und zukünftige Versionen und Marktanteile umfasst. Sie ist behutsam neu gestaltet worden.</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Das linke Icon zeigt, dass dies ein „<em>Sprachelement von HTML 3.0 (irgendwann vielleicht doch noch offizieller Sprachstandard)</em>" sei. Das rechte Element bezieht sich auf den UDI-Browser, von dem nur in der <a href="https://en.wikipedia.org/wiki/UdiWWW" rel="nofollow noopener noreferrer">englischsprachigen Wikipedia</a> Spuren zu finden sind. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Wussten Sie schon? - SELFHTML gibt's auch auf Twitter Tue, 15 Feb 22 04:28:02 Z https://forum.selfhtml.org/weblog/2022/feb/15/wussten-sie-schon-selfhtml-gibts-auch-auf-twitter/1796188#m1796188 https://forum.selfhtml.org/weblog/2022/feb/15/wussten-sie-schon-selfhtml-gibts-auch-auf-twitter/1796188#m1796188 <p>Schon seit mehreren Jahren hat SELFHTML einen <a href="https://twitter.com/SELFHTML" rel="nofollow noopener noreferrer">Twitter-Kanal</a>, auf dem Gunnar Bittersmannn (<a href="https://twitter.com/g16n" rel="nofollow noopener noreferrer">@g16n</a>) News und Interessantes über Webdesign, Technologie und Typografie retweeted.</p> <p>Seit gestern haben wir 1000 Abonnenten oder neudeutsch „Follower“, die unsere „Tweets“ - Kurznachrichten mit maximal 280 Zeichen verfolgen.</p> <p>Parallel zu den Lesetipps im Forum erhalten wir so gefilterte Neuigkeiten, die uns immer auf dem aktuellen Stand halten! Vielen Dank an <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> für seine Arbeit!</p> <p>Zukünftig sollen dort auch neue und aktualisierte Inhalte des SELF-Wiki beworben werden.</p> CSS - voll normal! Sind CSS-Resets heute noch nötig? Mon, 31 Jan 22 19:23:48 Z https://forum.selfhtml.org/weblog/2022/jan/31/css-voll-normal-sind-css-resets-heute-noch-notig/1795790#m1795790 https://forum.selfhtml.org/weblog/2022/jan/31/css-voll-normal-sind-css-resets-heute-noch-notig/1795790#m1795790 <p>CSS revolutionierte die Gestaltung von Webseiten. Leider gab es aber große Inkonsistenzen zwischen den verschiedenen Browsern. Während der Internet Explorer bei Listen die Einrückungen über <code>margin</code> vornahm, verwendeten die anderen Browser dafür <code>padding</code>. Grund genug, alle Browser-Einstellungen in einem <strong>CSS-Reset</strong> zurückzusetzen:</p> <pre><code class="block language-css"><span class="token selector">ul, ol, li</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Andere empfahlen diese Regel mit dem Universalselektor <code>* {...}</code>, um gleich alle HTML-Elemente so zu „normalisieren“. Schließlich gab es das Problem unterschiedlicher Darstellungen auch beim Boxmodell-Fehler des Quirks Mode. Es gab immer radikalere CSS-Resets, die teilweise sogar Links erst einmal in Textfarbe und ohne Unterstreichung „normalisierten“. Eine Übersicht über diese CSS-Resets gibt es im <a href="https://codepen.io/chriscoyier/pen/JpLzjd" rel="noopener noreferrer">HTML Kitchen-Sink</a> von Chris Coyier. <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p>Nachdem der Internet Explorer nun von wenigen Reservaten abgesehen endlich ausgestorben ist und sich die Default-Stylesheets der anderen Browser nicht groß unterscheiden, stellt sich nun die Frage, ob CSS-Resets heute noch nötig sind und welche Einstellungen sie denn enthalten sollten.</p> <p>Elija Manor zeigt in dieser Visualiserung, dass eine Normalisierung einiger, weniger Eigenschaften bereits ausreichen würde:</p> <p><a href="/images/27d59170-8335-11ec-a287-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/27d59170-8335-11ec-a287-b42e9947ef30.png?size=medium" alt="Visualizing CSS-Resets von Elija Manor" title="Visualizing CSS-Resets von Elija Manor" loading="lazy"></a></p> <p>Welche Eigenschaften sollte man heute normalisieren?</p> <h2>all</h2> <p>Elad Shechter schlug im Gespräch mit Chris Coyier ein neues CSS-Reset vor, das Gebrauch der neuen <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/all" rel="nofollow noopener noreferrer">all</a>-Eigenschaft und unset-Wertes macht. <sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p> <pre><code class="block language-css"><span class="token selector">*:where(:not(iframe, canvas, img, svg, video):not(svg *))</span> <span class="token punctuation">{</span> <span class="token property">all</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Mit diesen Zeilen werden alle Festlegungen des User-Agent-Stylesheets außer für die <code>display</code>-Eigenschaft entfernt.</p> <h2>box-sizing</h2> <p>In einem Folgepost überlegt Chris Coyier, ob <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing" rel="nofollow noopener noreferrer">box-sizing</a> überhaupt noch normalisiert werden muss.<sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup></p> <pre><code class="block language-css"><span class="token selector">*, *::before, *::after</span> <span class="token punctuation">{</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Da immer mehr Layouts mit Grid und Flexbox realisiert werden, bei denen <code>fr</code>-Einheiten und flexible Breiten zum Zuge kommen, ist die Einstellung des Box-Modells selbst bei Elementen mit <code>padding</code> und <code>margin</code> eigentlich nicht mehr nötig.</p> <h2>text-size-adjust</h2> <p>Mobile Safari vergrößert bei iPhones die Standardschriftgröße, wenn Sie eine Website vom Hoch- ins Querformat wechseln. Dies sollte die Lesbarkeit von nicht für Mobilgeräte optimierten Websites verbessern. Während dies in einer Zeit, in der buchstäblich keine Website für Mobilgeräte optimiert war, zweifellos nützlich war, ist es heutzutage deutlich weniger hilfreich. Deshalb ist hier ein CSS-Reset der <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/text-size-adjust" rel="nofollow noopener noreferrer">text-size-adjust</a>-Eigenschaft empfehlenswert. <sup class="footnote-ref"><a href="#fn4" id="fnref4">[4]</a></sup></p> <pre><code class="block language-css"><span class="token selector">html</span> <span class="token punctuation">{</span> <span class="token property">-webkit-text-size-adjust</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">text-size-adjust</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>PS: Im SELF-Wiki werden CSS-Resets in unserem <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg" rel="nofollow noopener noreferrer">Einstieg in CSS</a>-Kurs im <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Ausblick#Normalisierung" rel="nofollow noopener noreferrer">letzten Kapitel (Ausblick) </a>beschrieben.</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Ein ausführlichere Geschichte der CSS-Resets finden Sie bei Peter Müller: <a href="https://html-und-css.de/css-resets/" rel="nofollow noopener noreferrer">Eine kurze Geschichte der »CSS Resets«</a> vom 20. Juli 2020 <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p>css-tricks: <a href="https://css-tricks.com/an-interview-with-elad-shechter-on-the-new-css-reset/" rel="nofollow noopener noreferrer">An Interview With Elad Shechter on “The New CSS Reset” </a> am 19.10.2021 <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> <li id="fn3" class="footnote-item"><p>css-tricks: <a href="https://css-tricks.com/notes-on-josh-comeaus-custom-css-reset/" rel="nofollow noopener noreferrer">Notes on Josh Comeau’s Custom CSS Reset </a> von Chris Coyier, 05.01.2022 <a href="#fnref3" class="footnote-backref">↩︎</a></p> </li> <li id="fn4" class="footnote-item"><p>css-tricks: <a href="https://css-tricks.com/your-css-reset-needs-text-size-adjust-probably/" rel="nofollow noopener noreferrer">Your CSS reset needs text-size-adjust</a> von Chris Coyier am Feb 11, 2022 <a href="#fnref4" class="footnote-backref">↩︎</a></p> </li> </ol> </section> 20, 21 -22 … Fri, 24 Dec 21 06:07:28 Z https://forum.selfhtml.org/weblog/2021/dec/24/20-21-22/1794776#m1794776 https://forum.selfhtml.org/weblog/2021/dec/24/20-21-22/1794776#m1794776 <p><strong>Weihnachtsbrief 2021</strong></p> <p>Warten, zählen, hoffen, bangen …</p> <p>2021 war wieder ein Jahr des Wartens und Zählens. Nicht Wetter und Unternehmungslust bestimmten, ob man rausdurfte. Es wurden Inzidenzen verglichen, Statistiken analysiert und die Tage bis zum Ende der Quarantäne oder zum erhofften Impftermin gezählt.</p> <p>2021 war wie schon 2020 ein besonderes Jahr, das uns mit der Corona-Pandemie enorm belastete. Zusätzlich wurde im März Matthias Apsel plötzlich aus unserer Mitte gerissen <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> – sein freundliches Wesen, sein Humor und vor allem sein Know-how fehlen uns.</p> <p>Eigentlich sollte das Jahr unter dem Schwerpunkt-Thema <strong>Integration</strong> stehen: Nachdem unser Wordpress-Blog aufgrund eines fehlerhaften Plugins keine Kommentare mehr darstellte, nahm sich Christian Kruse der Sache an und schrieb einen Blog, der im Forum integriert war. <sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> Selbstverständlich übertrug er dabei alle <a href="https://blog.selfhtml.org/archive" rel="noopener noreferrer">bestehenden Beiträge</a> seit 2008. Vielen Dank dafür.</p> <p>Im Oktober konnten wir uns trotz Pandemie und 2G in Hamburg treffen und den Verein auf neue Schienen setzen. Auch wenn es einige Absagen gab – schließlich kamen mehr als vorher befürchtet! Martin Kunkel wurde zum 2. Vorsitzenden gewählt. Herzlich willkommen im Vorstands-Team!</p> <p>Im Herbst überraschte mich Marc mit dem <a href="https://blog.selfhtml.org/2021/nov/29/adventskalender-2021" rel="noopener noreferrer">Adventskalender</a>, den er vorbereitet hatte. Das Thema <a href="https://wiki.selfhtml.org/wiki/Barrierefreiheit" rel="nofollow noopener noreferrer">Barrierefreiheit</a> wird oft missverstanden, geht uns aber alle an!</p> <blockquote>Ein barrierefreies Produkt kann von jedem Menschen besser genutzt werden. So gibt es keinen Menschen auf der Welt, der einen kleinen Button schneller drücken kann als einen großen.</blockquote> <p>Marc nutzte die Gelegenheit, uns Personen und interessante Blogs aus der deutschsprachigen a11y-Szene vorzustellen. Dabei wurden auch unsere bestehenden Wiki-Seiten überprüft und aktualisiert. Vielen Dank an Marc Haunschild.</p> <p>Die im Blog veröffentlichten Kalenderbeiträge wurden auf unserem Twitter-Kanal <sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup> <em>getweetet</em>, sodass wir einige neue Twitter-Abonnenten bekamen. Gunnar Bittersmann retweeted sonst Nachrichten und Trends aus der englischsprachigen Welt.</p> <p>Warum man unseren Twitter-Kanal nicht auf der Startseite findet? Das fragten wir uns in Hamburg auch und planen eine sanfte Renovierung unserer Strukturen. Es gibt aber keinen Countdown, bei dem Sie und wir die Tage abzählen. Schauen Sie einfach immer mal wieder zu uns rein!</p> <p>Frohe Weihnachten und ein gutes neues Jahr!</p> <p>Matthias Scharwies, 1. Vorsitzender</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://blog.selfhtml.org/2021/mar/11/besturzt-und-fassungslos-matthias-apsel-ist-gestorben" rel="noopener noreferrer">Bestürzt und Fassungslos – Matthias Apsel ist gestorben</a> vom 11.03.2021 <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><a href="https://blog.selfhtml.org/2021/jan/24/neues-weblog" rel="noopener noreferrer">Neues Weblog!</a> vom 24.01.2021 <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> <li id="fn3" class="footnote-item"><p><a href="https://twitter.com/SELFHTML" rel="nofollow noopener noreferrer">twitter.com/SELFHTML</a> <a href="#fnref3" class="footnote-backref">↩︎</a></p> </li> </ol> </section> ARIA-live Regionen Thu, 23 Dec 21 04:03:13 Z https://forum.selfhtml.org/weblog/2021/dec/23/aria-live-regionen/1794748#m1794748 https://forum.selfhtml.org/weblog/2021/dec/23/aria-live-regionen/1794748#m1794748 <p>Wenn es darum geht, deutsche Quellen für Barrierefreiheit zu nennen, landet man unwillkürlich immer wieder bei denselben Menschen und Firmen. Eine von den sehr aktiven ist die tollwerk GmbH aus Nürnberg mit einem tollen Blog über Barrierefreiheit.</p> <p>tollwerk, beziehungsweise ihr „Chef“ Joschi Kuphal (deren „Führungskonzept“ Quantum sieht keinen echten Chef vor) organisieren unter anderem den Accessibility Club, der regelmäßig als Side-Event die beyondtellerrand bereichert, aber auch davon unabhängig statt findet.</p> <p>Wer sich für die vielen Aktivitäten und Verdienste von tollwerk und Joschi Kuphal interessiert, findet auf der Website reichlich Lesestoff, auch über das spannende „Quantum-System“ genannte Arbeitskonzept.</p> <p>Darüberhinaus sind Beiträge von Gastautoren gern gesehen in der (noch kleinen, aber feinen) Wissenssammlung auf der Website. Beispielhaft möchte ich den Artikel von Sonja Weckenmann aufführen. Dafür gibt es zwei Gründe: erstens ist der Artikel die vielleicht beste deutschsprachige, frei zugängliche Zusammenfassung von ARIA-Live-Regionen. Wer den Artikel durchliest ist zu diesem Thema umfassend und nach heutigem Stand abschließend informiert.</p> <p>Zusätzlich hat Sonja Weckenmann dazu im deutschsprachigen technica11y-Kanal zu diesem Thema gesprochen (auch eine der Baustellen, auf denen Joschi Kuphal mitwirkt).</p> <p>Hier die Links</p> <p>Zum Text <a href="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen" rel="nofollow noopener noreferrer">ARIA Live-Regionen</a></p> <p>Zum Vortrag (Hinweis: YouTube-Video. YouTube gehört zu Google und sammelt Daten!) <a href="https://www.youtube.com/watch?app=desktop&v=klqgya6jfY4" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?app=desktop&v=klqgya6jfY4</a></p> mindscreen: Blog und Veranstaltungshinweise Tue, 21 Dec 21 05:00:35 Z https://forum.selfhtml.org/weblog/2021/dec/21/mindscreen-blog-und-veranstaltungshinweise/1794659#m1794659 https://forum.selfhtml.org/weblog/2021/dec/21/mindscreen-blog-und-veranstaltungshinweise/1794659#m1794659 <p>Gerade in deutscher Sprache gleicht das Zusammentragen von Informationen zur Barrierefreiheit einem Puzzlespiel. Die Informationen sind verstreut und zusammenhängende Sammlungen sind rar. (Eine schöne Sammlung dazu findet sich übrigens bei uns im <a href="Barrierefreiheit#Weblinks" rel="noopener noreferrer">SELF-Wiki</a>) ;-)</p> <p>Kleinen Agenturen, die sich dem Thema - zum Teil schon seit vielen Jahren - verschrieben haben, kommt dabei eine große Bedeutung zu. Sie engagieren sich oft auch über die Monetarisierung hinaus, entwickeln Lösungen und beteiligen sich an OpenSource-Projekten. Die eine oder andere Agentur hat daher auch bereits den Weg in den Adventskalender gefunden. Bisher unerwähnt geblieben ist mindscreen von Annett und Stefan Farnetani, die sich im TYPO3-Umfeld engagieren (mit dem Inhaber hatte ich meinen ersten intensiven Austausch beim TYPO3 Accessibility Sprint, an dem wir beide teilnahmen). mindscreen ist unter anderem der Hersteller einer ausgezeichneten Software zum Testen von Webangeboten auf Barrierefreiheit.</p> <p>Das Team von mindscreen veröffentlicht zum Thema, stellt Expertise zur Verfügung (zum Beispiel bei Vorträgen der IAAP D-A-CH - <a href="https://iaap-dach.org/veranstaltungen/alles-unter-einem-d-a-ch.html" rel="nofollow noopener noreferrer">https://iaap-dach.org/veranstaltungen/alles-unter-einem-d-a-ch.html</a>), unterstützt Fronta11y (4. Türchen) und engagiert sich in den beiden relevanten Berufsverbänden IAAP und German UPA. Bei letzterer leitet Stefan Farnetani den AK Barrierefreiheit.</p> <p>Unter anderem trägt der Blog mit regelmäßigen Beiträgen zur Barrierefreiheit zum allgemeinen Wissensschatz bei und in der Eventliste finden sich regelmäßig Veranstaltungen zum Thema Barrierefreiheit.</p> <p>Viel Spaß mit dem Link im heutigen Türchen (nicht erschrecken - es sind auch englischsprachige Beiträge dabei!</p> <p>Event-Liste</p> <ul> <li><a href="https://www.mindscreen.de/web-accessibility-events" rel="nofollow noopener noreferrer">https://www.mindscreen.de/web-accessibility-events</a></li> </ul> <p>Blog</p> <ul> <li><a href="https://www.mindscreen.de/blog" rel="nofollow noopener noreferrer">https://www.mindscreen.de/blog</a></li> </ul> <p>Marc Haunschild</p> Manuel Matuzovic: Die Superpower der Tabulator-Taste Mon, 20 Dec 21 03:55:46 Z https://forum.selfhtml.org/weblog/2021/dec/20/manuel-matuzovic-die-superpower-der-tabulator-taste/1794631#m1794631 https://forum.selfhtml.org/weblog/2021/dec/20/manuel-matuzovic-die-superpower-der-tabulator-taste/1794631#m1794631 <p>Manuel ist nach eigenen Angaben zur Barrierefreiheit gekommen, weil er sich an einem Wettbewerb beteiligt hat, bei der ein barrierefreies Produkt abgegeben werden sollte und seine Einreichung war nicht barrierefrei.</p> <p>Als er daraufhin begann, sich in das Thema einzuarbeiten, ließ es ihn nicht mehr los. Er tritt als Redner auf (einmal haben wir gemeinsam im Accessibility Club vorgetragen <a href="https://accessibility-club.org/event/accessibility-club-meetup-8-2" rel="nofollow noopener noreferrer">https://accessibility-club.org/event/accessibility-club-meetup-8-2</a>), hat ein eigenes Blog mit vielen Beiträgen zum Thema und hat nun sogar einen Kurs bei dem berühmten Smashing Magazine (<a href="https://smashingconf.com/online-workshops/workshops/manuel-matuzovic-apr" rel="nofollow noopener noreferrer">https://smashingconf.com/online-workshops/workshops/manuel-matuzovic-apr</a>) - ein toller Kollege, den ich für seine unterhaltsame und fachlich souveräne Art schätze. Eine sehr angenehme Kombination.</p> <p>Am bekanntesten ist vermutlich seine Website <a href="https://www.htmhell.dev/" rel="nofollow noopener noreferrer">https://www.htmhell.dev/</a>, in der die dunkle Seite der Webentwicklung einen Ehrenplatz gefunden hat.</p> <p>Jetzt kommt das große ABER: Es ist üblich, Artikel über Webtechniken oder Vorträge in englischer Sprache zu halten. So war bisher nichts in deutscher Sprache verfasst, was es von Manuel zu hören und zu lesen gibt.</p> <p>Glücklicherweise hat er auf Twitter „laut“ nachgedacht, ob er nicht mal etwas auf deutsch verfassen sollte und ich habe die Gelegenheit genutzt ihn dazu zu ermuntern. Pünktlich zum Adventskalender gibt es eine Premiere: ein deutscher Blogbeitrag über die Superkraft der Tabulator-Taste. Ein kurzweiliger Beitrag über sein erklärtes „Lieblingswerkzeuge für Barrierefreiheit-Checks“ (<a href="https://www.matuzo.at/blog/de/testing-with-tab/" rel="nofollow noopener noreferrer">https://www.matuzo.at/blog/de/testing-with-tab/</a>).</p> <p>Zu seinem ansonsten englischen Blog führt der Link unten - auch wenn es schwer fällt: versucht euch dran! Es lohnt sich. Und wenn ich das Zwitschern eines kleinen Vogels richtig verstanden habe, wird es dort womöglich in Zukunft noch weitere deutsche Körnchen zu picken geben. ;-)</p> <p><a href="https://www.matuzo.at/blog/de/testing-with-tab/" rel="nofollow noopener noreferrer">https://www.matuzo.at/blog/de/testing-with-tab/</a></p> <p><a href="https://www.matuzo.at/" rel="nofollow noopener noreferrer">https://www.matuzo.at/</a></p> <p>Marc Haunschild</p> technica11y Sat, 11 Dec 21 03:43:25 Z https://forum.selfhtml.org/weblog/2021/dec/11/technica11y/1794381#m1794381 https://forum.selfhtml.org/weblog/2021/dec/11/technica11y/1794381#m1794381 <p>Automatisierung war bereits an Tag 9 ein Thema. Die Tools selber sind in der Regel auf Englisch und hier soll es nur um deutsche Quellen gehen.</p> <p>Immerhin bietet mit tenon.io einer der größeren kommerziellen Anbieter eine Plattform für deutsche Vorträge. Die bekannte englischsprachige Vortragsreihe technica11y hat mit <strong>„technica11y auf Deutsch“</strong> einen Ableger für uns „Germans“ erhalten.</p> <p>Hier finden unter der Leitung von Gastgeber Joschi Kuphal seit diesem Jahr regelmäßige Talks über Barrierefreiheit statt und die Sammlung wächst ständig. Nicht nur interessant wegen den bereits vergangenen Veranstaltungen, sondern auch wegen dem, was noch kommen wird. Gleich zum Auftakt hat Eric Eggert vom W3C mit einem seiner seltenen Beiträge auf Deutsch überrascht (<a href="https://www.youtube.com/watch?v=L1dyBc5IYok&list=PLLuwoY7nxnR3mAd6J00J1nfI_-uiuibiq&index=1" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=L1dyBc5IYok&list=PLLuwoY7nxnR3mAd6J00J1nfI_-uiuibiq&index=1</a>).</p> <p>Sehenswert sind aber alle Beiträge, so erfahren wir von Maja Benke wie Legastheniker mit Texten umgehen und was man bei der Erstellung von Webseiten zu beachten hat (<a href="https://www.youtube.com/watch?v=fNYNrWDHBFY" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=fNYNrWDHBFY</a>). Markus Herrmann erklärt, worauf bei der Verwendung von vue zu achten ist (<a href="https://www.youtube.com/watch?v=ML-zverajdg" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=ML-zverajdg</a>) und viele weitere spannende Vorträge sind bereits angekündigt oder in Planung.</p> <p>Technica11y auf deutsch <a href="https://www.youtube.com/watch?v=L1dyBc5IYok&list=PLLuwoY7nxnR3mAd6J00J1nfI_-uiuibiq" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=L1dyBc5IYok&list=PLLuwoY7nxnR3mAd6J00J1nfI_-uiuibiq</a></p> <p>Marc Haunschild</p> Die Prüfverfahren von T-Systems und BIK im Vergleich Fri, 10 Dec 21 04:21:14 Z https://forum.selfhtml.org/weblog/2021/dec/10/die-prufverfahren-von-t-systems-und-bik-im-vergleich/1794364#m1794364 https://forum.selfhtml.org/weblog/2021/dec/10/die-prufverfahren-von-t-systems-und-bik-im-vergleich/1794364#m1794364 <p>Im Grunde kann man Testverfahren unterscheiden in</p> <ul> <li>automatische Tests, die lediglich einige wenige Vorgaben an Barrierefreiheit prüfen können</li> <li>Manuelle Tests durch Experten, die alle Vorgaben an die Barrierefreiheit überprüfen und aufgrund von sorgfältiger Ausbildung, Erfahrung und Strategien bei der Qualitätssicherung versuchen, damit den menschlichen Faktor der subjektiven Bewertung auf ein Minimum zu reduzieren</li> <li>Nutzertests, bei denen sogenannte authentische Nutzer ein Produkt nutzen und die Erfahrung bewerten. Als authentische Nutzer werden Menschen mit Behinderungen bezeichnet, die täglich Hilfsmittel verwenden.</li> </ul> <p>Jede Methode hat ihre Vor- und Nachteile. Automatische Tests scheitern an Aufgaben wie „Macht ein Alternativtext Sinn“, machen aber keine Fehler - sie finden aber wirklich jedes Bild ohne Alternativ-Text.</p> <p>Experten sind viel zu selten authentische Nutzer, die entsprechenden manuellen Tests berücksichtigen nur gesetzliche Vorgaben und das reicht nicht immer, um für Menschen mit Behinderungen ein gutes Nutzererlebnis bereit zu stellen. Aber Experten haben eben eine entsprechende Ausbildung und können die Ergebnisse interpretieren und dazu beraten.</p> <p>Authentische Nutzer wiederum geben mitunter sehr subjektive Berichte ab und ein Gehörloser kann schlecht für einen Sehbehinderten sprechen. Es sei denn er ist gehörlos und hat eine Fehlsichtigkeit. Das ist dann aber wieder ein Spezialfall.</p> <p>Man sieht, wie schwierig es ist „richtig“ zu testen und wie der Aufwand von automatischen Tests über manuelle Tests zu Nutzertests steigt - im Idealfall werden alle diese Methoden nacheinander angewandt. In der Regel kann man aber schon froh sein, wenn ein digitales Produkt den gesetzlichen Vorgaben entspricht, wofür ein manueller Test nötig ist. Daher kommt den manuellen Tests eine zentrale Bedeutung zu.</p> <p>In Deutschland gibt es zwei relevante Testverfahren: den BIK-BITV-Test und den Test der T-Systems Multimedia Solutions GmbH.</p> <p>Gisela Kollotzek, Absolventin im Studiengang „Computer Science and Media“, hat die Ergebnisse ihrer Masterthesis über dieses Thema im Juni vorgestellt.</p> <p>Der Vortrag und weitere Materialien einschließlich der Masterthesis selber finden sich hinter dem folgenden Link auf der Website der Hochschule für Medien Stuttgart</p> <p><a href="https://digitalisierung.hdm-stuttgart.de/barrierefreiheit/2021/06/01/webinar-manuelle-pruefverfahren-fuer-webseiten-nach-bitv-2-0/" rel="nofollow noopener noreferrer">https://digitalisierung.hdm-stuttgart.de/barrierefreiheit/2021/06/01/webinar-manuelle-pruefverfahren-fuer-webseiten-nach-bitv-2-0/</a></p> <p>Marc Haunschild</p> <p>PS: Dies ist bereits das zweite Türchen mit einem spannenden Vortrag der Hochschule der Medien - es gibt mehr und wer auch in Zukunft bei der Vorstellung einer Masterthesis live dabei sein will, findet alle Ankündigungen und vergangenen Webinare dort auf der Website unter folgendem Link:</p> <p><a href="https://digitalisierung.hdm-stuttgart.de/barrierefreiheit/category/news-events/" rel="nofollow noopener noreferrer">https://digitalisierung.hdm-stuttgart.de/barrierefreiheit/category/news-events/</a></p> Barrierefreiheitsstärkungsgesetz/ European Accessibility Act Tue, 07 Dec 21 00:57:51 Z https://forum.selfhtml.org/weblog/2021/dec/07/barrierefreiheitsstarkungsgesetz-european-accessibility-act/1794244#m1794244 https://forum.selfhtml.org/weblog/2021/dec/07/barrierefreiheitsstarkungsgesetz-european-accessibility-act/1794244#m1794244 <p>Seit jeher veranlasst die Europäische Union sogenannte Harmonisierungen. Dabei geht es darum, die unterschiedlichen Gesetze in der Union zu vereinheitlichen. So wird es für einen Spanier leichter eine Dienstleistung in Skandinavien anzubieten oder für einen deutschen Hersteller etwas in Osteuropa zu verkaufen. Natürlich profitieren auch alle Bürger davon. Denn sie können sich darauf verlassen, dass viele aus dem Heimatland bekannte Regeln auch im Rest der EU gelten.</p> <p>Die DSGVO ist ein bekanntes Beispiel dafür. Was die <a href="https://wiki.selfhtml.org/wiki/Barrierefreiheit" rel="nofollow noopener noreferrer">Barrierefreiheit</a> angeht, hat die EU 2016 eine Richtlinie erlassen. Diese trägt die Bezeichnung 2016/2102. Zu der Richtlinie gehört eine Norm, die öffentliche Stellen erfüllen müssen.</p> <p>Die EU hat es dabei nicht belassen, sondern hat weitere Mindestanforderungen gestellt, die die Mitgliedsländer umsetzen müssen. Diesmal sind Teile der Wirtschaft betroffen. Das ist der sogenannte European Accessibility Act. Die Umsetzung in deutsches Recht trägt den schwer lesbaren Namen „Barriere-freiheits-stärkungs-gesetz“.</p> <p>Das Gesetz hat schon viel Kritik bekommen. So müssen Bankautomaten künftig zwar für Menschen mit Behinderungen bedienbar sein. Sie dürfen aber an Orten aufgestellt werden, die zum Beispiel für Menschen mit Gehhilfen oder Rollstühlen nicht erreichbar sind.</p> <p>Wie dem auch sei: sicher ist das ein erster Wurf und besser als vorher, also nichts.</p> <p>Vermutlich wird die EU weiter nachlegen. Menschen mit Behinderungen hoffen darauf. Aber es ist für alle Betroffenen schwer auszuhalten, dass es so langsam voran geht.</p> <p>Das Barrierefreiheitsstärkungsgesetz auf der offiziellen Seite des Bundesministeriums für Arbeit und Soziales (BMAS)</p> <ul> <li><a href="https://www.bmas.de/DE/Service/Gesetze-und-Gesetzesvorhaben/barrierefreiheitsstaerkungsgesetz.html" rel="nofollow noopener noreferrer">https://www.bmas.de/DE/Service/Gesetze-und-Gesetzesvorhaben/barrierefreiheitsstaerkungsgesetz.html</a></li> </ul> <p>Kritische Anmerkungen der Aktion Mensch</p> <ul> <li><a href="https://www.aktion-mensch.de/inklusion/barrierefreiheit/barrierefreiheitsstaerkungsgesetz-nur-kleine-schritte-zur-inklusion" rel="nofollow noopener noreferrer">https://www.aktion-mensch.de/inklusion/barrierefreiheit/barrierefreiheitsstaerkungsgesetz-nur-kleine-schritte-zur-inklusion</a></li> </ul> <p>Marc Haunschild</p> Sag ich's? Mon, 06 Dec 21 01:38:28 Z https://forum.selfhtml.org/weblog/2021/dec/06/sag-ichs/1794240#m1794240 https://forum.selfhtml.org/weblog/2021/dec/06/sag-ichs/1794240#m1794240 <p>Für viele Arbeitnehmerinnen stellt sich gar nicht in erster Linie die Frage, wie man als Mensch mit Behinderungen oder (chronischen) Erkrankungen eine barrierefreie Arbeitsumgebung beantragt oder sogar beim Arbeitgeber einfordert.</p> <p>Gerade in der freien Wirtschaft befürchten viele Arbeitnehmerinnen berufliche Nachteile, wenn physische oder psychische Einschränkungen im Arbeitsumfeld bekannt werden. Sie leben dann häufig in einem zermürbenden Zwiespalt: Sag ich es - oder sag ich es nicht?</p> <p>Eine Entscheidungshilfe will die gleichlautende Seite der Universität Köln sein. Hier finden Betroffene neben einem ausführlichen Fragebogen zur Einschätzung der persönlichen Situation begleitende redaktionelle Texte, die bei der Entscheidung helfen wollen.</p> <p>Auch interessant für Angehörige und alle, die sich in die Situation, in die Zweifel und Fragen hineinversetzen und sich sensibilisieren lassen wollen.</p> <p><a href="https://sag-ichs.de/start" rel="nofollow noopener noreferrer">sag-ichs.de/start</a></p> <p>Marc Haunschild</p> Blue-Beanie-Day Tue, 30 Nov 21 04:04:29 Z https://forum.selfhtml.org/weblog/2021/nov/30/blue-beanie-day/1794076#m1794076 https://forum.selfhtml.org/weblog/2021/nov/30/blue-beanie-day/1794076#m1794076 <p>Heute, am 30.11., ist wieder <a href="https://de.wikipedia.org/wiki/Blue_Beanie_Day" rel="nofollow noopener noreferrer"><strong>Blue Beanie Day</strong></a>; ein Aktionstag, um auf die Wichtigkeit von <a href="https://wiki.selfhtml.org/wiki/Webstandards" rel="nofollow noopener noreferrer"><strong>Webstandards</strong></a>aufmerksam zu machen. Er wird seit 2007 jährlich am 30. November begangen und wurde von Douglas Vos ins Leben gerufen.</p> <p>Webstandards sind dort nicht nur die Festlegungen durch die Spezifikationen, sondern das Bemühen Webseiten durch best practices für alle benutzbar zu machen. SELFHTML bemüht sich diesen Gedanken an Barrierefreiheit ständig im Blick zu halten.</p> <p>Deshalb ist der <a href="https://blog.selfhtml.org/2021/nov/29/adventskalender-2021" rel="noopener noreferrer">diesjährige Adventskalender</a> der Barrierefreiheit gewidmet!</p> <p>Matthias Scharwies</p> Adventskalender 2021 Mon, 29 Nov 21 17:36:01 Z https://forum.selfhtml.org/weblog/2021/nov/29/adventskalender-2021/1794049#m1794049 https://forum.selfhtml.org/weblog/2021/nov/29/adventskalender-2021/1794049#m1794049 <p>Der diesjährige Adventskalender ist der Barrierefreiheit gewidmet - ein Thema für alle, das jeden und alle angeht. Warum ist das so?</p> <p>Barrierefreiheit ist für uns alle gut. Das ist die wichtigste Erkenntnis aus 20 Jahren Berufserfahrung. Es geht nicht darum Menschen mit Behinderungen exklusive Features anzubieten, die nur für diese Nutzergruppe sinnvoll sind.</p> <p>Es geht darum, sich von Beginn an zu überlegen, wie man eine Webseite so baut, dass sie von allen Besucherinnen effizient genutzt werden kann.</p> <p><strong>Barrierefreiheit ist also keine Summe von Funktionen, sondern ein Konzept.</strong></p> <p>Es macht genauso viel Sinn, eine Website so zu entwickeln, dass sie auf <strong>allen Geräten</strong> wie Smartphones, Computern und Smart-TVs funktioniert, wie es Sinn macht, eine Website für <strong>alle Menschen</strong> zu erstellen.</p> <p>Hierbei geht es darum, dass eine Website genutzt werden kann, wenn man sieht oder nicht sieht, wenn man hört oder nicht hört, wenn man seine Arme benutzen kann oder nicht. Und alle anderen Menschen haben Wahlmöglichkeiten. Im ÖPNV können untertitelte Videos ohne Ton geschaut werden. In grellem Sonnenschein, wo das Display nicht mehr viel anzeigt, können Filme gehört werden - in beiden Fällen ohne etwas zu verpassen.</p> <p>Barrierefreie Inhalte können nicht nur unabhängig vom verwendeten Ausgabegerät (Bildschirm oder Kopfhörer) genutzt werden. Auch bei der Eingabe hat man die freie Wahl: Spracheingabe, Maus, Tastatur oder Touch - alles geht, so wie man gerade mag und was gerade bequem ist.</p> <p>Jeder Mensch der Welt trifft eine große Taste schneller und sicherer als eine kleine Taste.</p> <p>Barrierefreie Webseiten sind bessere Webseiten. Sie kommen. Freuen wir uns drauf. Und machen mit!</p> <p>Hier geht's zum diesjährigen <a href="https://forum.selfhtml.org/advent/2021" rel="noopener noreferrer">Adventskalender</a>!</p> <p>Eine frohe Weihnachtszeit!</p> <p>Marc Haunschild</p> <p>Übrigens: Unser Beitragsbild oben ist eine abgewandelte Version des offiziellen Logos der Unesco für Barrierefreiheit. Sie kennzeichnet unsere Beiträge zum Thema.</p>