nicht angemeldet einsiedler
Gunnar Bittersmann
einsiedler
einsiedler
einsiedler
einsiedler
einsiedler
einsiedler
einsiedler
Gunnar Bittersmann
einsiedler
Hallo liebe Forumer,
Bei meinem Projekt habe ich mehrere Probleme und zwar (eigentlich) NUR im Edge
Link zur fehlerhaften Seite : Link zur Seite
A) Fehlerhafte Darstellung im <header> </header>
Im Firefox Quantum (63.0.3) , Opera Version:56.0.3051.116 & Chrome Version 70.0.3538.110
scheint alles wunderbar zu laufen, es kann aber sein das auch dort der Code oder das CSS nicht richtig ist. Jedenfalls bricht der Text der <h>`s bzw. zusammen mit dem Logo, nicht um (wird getrennt), wie in den übrigen Browsern, wenn man das Browserfenster zusammenschiebt. Siehe screen: Screen zu A)
Villeicht ist der html-Aufbau wie ich es gemacht habe schon nicht richtig.
Was läuft da falsch?
B) Wenn sich ein Text im <main> befindet, läuft alles reibungslos, er wurde einfach umgebrochen wenn das Bildschirmfenster schmaler wurde.
Doch nun bei einem IMG sieht es anders aus.
Im Opera, firefox und chrome wird das Img beim zusammenschieben des Bildschirmfensters schmaler, es verkleinert sich. So soll es sein.
Doch nur im IE macht er dieses "Verhalten" nicht.
Wie im screen Screen zu B) wird das Foto nicht "verkleinert", irgendwann wird es einfach rechts ausgeblendet wegen overflow: hidden; Was läuft da falsch? Ist da der Aufbau nicht richtig?
Überlegungen zu B) ODER findet ihr es besser wenn das IMG sich rechts "hinausschiebt". Ich werde diesen Aufbau auch in einer Fotogalerie benutzen, in der sich mehrere IMG untereinander befinden werden. Wenn ich überlege das die Bilder sich "verschmalern" immer wenn das Menü sich vergrößert. Sieht das überhaupt aus oder würdet ihr es so machen (oder lieber die Bilder rechts aus dem Rahmen "verschwinden" und hinausschieben lassen.
C) Ich verstehe folgende Fehlermeldungen des Validators NICHT und wie kann man es beheben? Validator-Meldung
Vielen dank für eure Mithilfe.
Der einsiedelnde
@@einsiedler
C) Ich verstehe folgende Fehlermeldungen des Validators NICHT und wie kann man es beheben? Validator-Meldung
Lesen wir doch mal in der Spec nach, was das noscript-Element beïnhalten darf:
Soll heißen:
Im Browser, wenn JavaScript aktiviert ist, ist der Inhalt des noscript-Elements einfach nur Text. Das erkennst du daran, dass im Entwicklerwerkzeug keine Baumstruktur unterhalb von noscript angezeigt wird: (Chrome stellt den Inhalt gar in " dar.)
Anders, wenn JavaScript deaktiviert ist. Dann ist das DOM ein anderes als du vermuten würdest. Da noscript nur link-, style- und meta-Elemente, aber kein span enhalten darf, schließt der Parser das noscript-Element vor dem <span>-Tag. Da auch head kein span enthalten darf, wird auch dieses Element geschlossen und der body geöffnet:
Im Validator Markup-Checker[1] wird auch kein JavaScript ausgeführt, deshalb passiert dort dasselbe und obige Fehlermeldung wird ausgegeben. Da noscript und head bereits geschlossen sind und body bereits geöffnet ist, hängen deren End-Tags bzw. Start-Tag in der Luft rum, was als Folgefehler aufgelistet wird:
Aber was soll der Unfug mit „Diese Seite benötigt Java-Script! Bitte aktivieren Sie Javascript für eine korrekte Darstellung“ überhaupt? Wenn ein Nutzer sich dazu entschlossen hat JavaScript zu deaktivieren, dann wird sie es dir zuliebe wieder aktivieren? Kein Nutzer, jemals.
Sorge dafür, dass deine Seite auch ohne JavaScript benutzbar ist, und lass den Unfug weg.
Die anderen Fehler sind eigentlich selbsterklärend:
Das aria-expanded-Attribut darf nur einen der Werte "true", "false" oder "undefined" haben, aber keinen Leerstring. [ARIA 1.1]
Was nicht selbsterklärend ist: Die Funktion der Buttons <button aria-expanded=""> </button>. Keinerlei Beschriftung. Die Buttons müssen unbedingt ein accessible label haben. aria-label als Notbehelf; besser aber ganz normal als Elementinhalt. Die Beschriftung kannst du visuell verstecken.
LLAP 🖖
hallo
Aber was soll der Unfug mit „Diese Seite benötigt Java-Script! Bitte aktivieren Sie Javascript für eine korrekte Darstellung“ überhaupt? Wenn ein Nutzer sich dazu entschlossen hat JavaScript zu deaktivieren, dann wird sie es dir zuliebe wieder aktivieren? Kein Nutzer, jemals.
Sinnvoll wäre eine Angabe
Eine Javascript Freigabe für example.org wird zur vollständigen Interaktion mit der Seite benötigt.
Als uMatrix user möchte ich nur einmal klicken.
Sorge dafür, dass deine Seite auch ohne JavaScript benutzbar ist, und lass den Unfug weg.
Definiere benutzbar.
@@beatovich
Sorge dafür, dass deine Seite auch ohne JavaScript benutzbar ist, und lass den Unfug weg.
Definiere benutzbar.
Anderer Einwand: Definiere „Seite“.
Eigentlich war hier eher Site gemeint: die Navigation durch die gesamte Website.
Benutzbar heißt (u.a.): alle Inhalte sind auch ohne JavaScript erreichbar.
Dafür gibt’s mehrere Möglichkeiten:
Das Menü wird komplett sichtbar als verschachtelte Liste präsentiert und erst mit JavaScript als Pulldown-Menü.
Ohne JavaScript sind die Menüpunkte der 1. Ebene Links, die weitere Navigation erfolgt über die jeweiligen Seiten. Pulldown-Menü mit Shortcuts zu 2. oder tieferer Ebene gibt’s mit JavaScript.
Welche Variante für eine Website die bessere ist, hängt vom Umfang des Menüs und von der Verschachtelungstiefe ab.
LLAP 🖖
hallo
- Ohne JavaScript sind die Menüpunkte der 1. Ebene Links, die weitere Navigation erfolgt über die jeweiligen Seiten. Pulldown-Menü Shortcuts zu 2. oder tieferer Ebene gibt’s mit JavaScript.
Ohne js gibts einen Link zu einer zentralen Navigationsseite.
@@beatovich
- Ohne JavaScript sind die Menüpunkte der 1. Ebene Links, die weitere Navigation erfolgt über die jeweiligen Seiten. Pulldown-Menü Shortcuts zu 2. oder tieferer Ebene gibt’s mit JavaScript.
Ohne js gibts einen Link zu einer zentralen Navigationsseite.
Ja, das wäre auch denkbar.
Wenn aber das Menü nicht allzu umfangreich ist, könnte man es gleich auf jeder Seite darstellen (meine 1. Variante) anstatt auf einer eigenen Seite ohne weiteren Inhalt.
Wenn das Menü ziemlich umfangreich ist, wird der Nutzer von einer solchen Sitemap möglicherweise erschlagen, die Aufspaltung in einzelne Menüs (meine 2. Variante) könnte vorteilhafter sein.
Aber solch eine Sitemap mag evtl. als Fallback auch gut genug sein.
LLAP 🖖
Was nicht selbsterklärend ist: Die Funktion der Buttons
<button aria-expanded=""> </button>. Keinerlei Beschriftung. Die Buttons müssen unbedingt ein accessible label haben.aria-labelals Notbehelf; besser aber ganz normal als Elementinhalt. Die Beschriftung kannst du [visuell verstecken]
Was käme da für mich infrage: Etwa:
aria-expanded and aria-hidden wie in diesem Beispiel das ich gefunden habe:
<h3>
<button aria-expanded="false" aria-controls="collapsible-0">What is this all about?</button>
</h3>
<div id="collapsible-0" aria-hidden="true">
<p>Lorem ipsum with a <a href="http://example.com">link thrown in</a> etc.</p>
<p>etc.</p>
</div>
<!-- next <h3> here -->
siehe: Fundort
Oder ein simples: <button type="button">Cancel</button> ???
Was ist hier in meinem Fall angebracht?
der einsiedelnde
Okay, Theorie gelesen, aber wie sieht es nun in meinem Fall in der Praxis aus?
Geht DAS in die richtige Richtung?
<a class="anzume" href="#main-nav">zum Hauptmenü</a>
<nav id="main-nav">
<button aria-controls="exp_MainMenu" aria-expanded="false"> </button>
<ul id="exp_MainMenu" aria-labelledby="label_exp_MainMenu">
<li>
<a class="a-link" href="http://XXX.html">Aktuelles</a>
<button aria-controls="exp_SubMenu_1" aria-expanded="false"> </button>
<div id="exp_SubMenu_1" aria-labelledby="label_exp_SubMenu_1" class=nav-group>
<a class="a-sublink" href="http://XXX.html">aktuelle Ausstellungen</a>
</div>
</li>
<li>
<a class="a-link" href="http://XXX.html">Arbeiten</a>
<button aria-controls="exp_SubMenu_2" aria-expanded="false"> </button>
<div id="exp_SubMenu_2" aria-labelledby="label_exp_SubMenu_2" class=nav-group>
<a class="a-sublink" href="XXX.html">Drifters, 2012</a>
<a class="a-sublink" href="XXX.html">Waldfrieden, 2006</a>
</div>
</li>
hallo
Geht DAS in die richtige Richtung?
leere button Elemnte sind immer falsch.
Achso, also müsste es heißen: <button>Unter­menü</button>
Und das meinte Gunnar das man das "ausblendet", ist das richtig?
hallo
Achso, also müsste es heißen: <button>Unter­menü</button>
Und das meinte Gunnar das man das "ausblendet", ist das richtig?
Wobei ausblenden selten korrekt ist.
Icons dienen selten als Ersatz für Text. Das gilt für alle Seiten im Web und für alle User.
Bevor wir uns falsch verstehen:
Ich meinte:
<button
aria-controls="exp_MainMenu" aria-expanded="false">
<span class="Sandwich" aria-hidden="true"></span> <!-- <<< DAS hier ist das Sandwich Button -->
Unter­menü <!-- <<< das hier wird nicht angezeigt / versteckt -->
</button>
Ist das so richtig????
hallo
Bevor wir uns falsch verstehen:
Ich meinte:
<button aria-controls="exp_MainMenu" aria-expanded="false"> <span class="Sandwich" aria-hidden="true"></span> <!-- <<< DAS hier ist das Sandwich Button --> Unter­menü <!-- <<< das hier wird nicht angezeigt / versteckt --> </button>Ist das so richtig????
Das ist absolut scheisse!
Verwende einen Text Button. Optional ergänze diesen mit einem Icon.
`<a class="anzume" href="#main-nav">zum Hauptmenü</a>
<nav id="main-nav" aria-label="main navigation">
<button aria-controls="exp_MainMenu" aria-expanded="false"> </button>
<ul id="exp_MainMenu" aria-labelledby="label_exp_MainMenu">
<li>
<a class="a-link" href="http://xxx.de/aktuell.html">Aktuelles</a>
<button aria-controls="exp_SubMenu_1" aria-expanded="false"> </button>
<div id="exp_SubMenu_1" aria-labelledby="label_exp_SubMenu_1" class=nav-group>
<a class="a-sublink" href="http://xxx.net/ausstellungen.html">aktuelle Ausstellungen</a>
<a class="a-sublink" href="http://xxx.net/ausstellungen.html">Blog</a>
</div>
</li>
<li>
<a class="a-link" href="http://xxx.de/arbeiten.html">Arbeiten</a>
<button aria-controls="exp_SubMenu_2" aria-expanded="false"> </button>
<div id="exp_SubMenu_2" aria-labelledby="label_exp_SubMenu_2" class=nav-group>
<a class="a-sublink" href="http://xxx/arbeit01.html">Drifters, 2012</a>
<a class="a-sublink" href="http://xxx/arbeit02.html">Waldfrieden, 2006</a>
<a class="a-sublink" href="http://xxx/arbeit03.html">Eremitage für Paris, 2006</a>
<a class="a-sublink" href="http://xxx/arbeit04.html">Der Bau, 2007</a>
</div>
</li>
</ul>`
bisher hatte ich <button> ein icon, informeines .svg mitgegeben
Menno wie macht man das richtig und ist wenigstens das aria-gedöns nun richtig (für meinen Fall)?
hallo
`<a class="anzume" href="#main-nav">zum Hauptmenü</a>
<nav id="main-nav" aria-label="main navigation">
<button aria-controls="exp_MainMenu" aria-expanded="false"> </button>
<ul id="exp_MainMenu" aria-labelledby="label_exp_MainMenu"> <li> <a class="a-link" href="http://xxx.de/aktuell.html">Aktuelles</a> <button aria-controls="exp_SubMenu_1" aria-expanded="false"> </button> <div id="exp_SubMenu_1" aria-labelledby="label_exp_SubMenu_1" class=nav-group> <a class="a-sublink" href="http://xxx.net/ausstellungen.html">aktuelle Ausstellungen</a> <a class="a-sublink" href="http://xxx.net/ausstellungen.html">Blog</a> </div> </li> <li> <a class="a-link" href="http://xxx.de/arbeiten.html">Arbeiten</a> <button aria-controls="exp_SubMenu_2" aria-expanded="false"> </button> <div id="exp_SubMenu_2" aria-labelledby="label_exp_SubMenu_2" class=nav-group> <a class="a-sublink" href="http://xxx/arbeit01.html">Drifters, 2012</a> <a class="a-sublink" href="http://xxx/arbeit02.html">Waldfrieden, 2006</a> <a class="a-sublink" href="http://xxx/arbeit03.html">Eremitage für Paris, 2006</a> <a class="a-sublink" href="http://xxx/arbeit04.html">Der Bau, 2007</a> </div> </li> </ul>`bisher hatte ich <button> ein icon, informeines .svg gegeben
Menno wie macht man das richtig und ist wenigstens das ari-gedöns nun richtig?
sparsam.
Meines Erachtens ist aria-controls hier nicht notwendig da das unmittelbar folgende Element kontrolliert wird.
aria-expanded="false" wird erst dann richtig, wenn der zustand auch mit javascript umgeschaltet werden kann.
Es ist hier vertretbar aria-expanded="" zu notieren, was zwar ein ungültiger Wert ist, aber dazu führt, dass assistive Technologie die Angabe nicht (und deshalb auch nicht falsch) interpretiert. Trotzdem existiert die Angabe, um von javascript dann initialisiert und geschaltet zu werden.
Ich habe nun einmal ausprobiert: Imdem ich <button aria-expanded="undefined"></button> notiert habe, Bei ausgeschaltetem script wird das Menü komplett mit allem Untermenues angezeigt. (Muss nur noch für diesen Fall die bottons verschwinden lassen, die sehen da nicht so gut aus, da unütz.)
Wenn das script aktiviert, ist wird das aria-expanded="false". Also so funzt es.
Nur für den Fall wenn ich von Anfang an <button aria-expanded="false"></button> notiere dann werden alle Menues samt Untermenüs NICHT komplett angezeigt also muss aria-expanded="" ODER aria-expanded="undefined" sein.
Was mich jetzt noch beschäftigt ist, weil G. sagte, <button></button> darf nicht leer sein, da müsse etwas stehen.
Bevor wir uns falsch verstehen:
Ich meinte:
<button
aria-controls="exp_MainMenu" aria-expanded="false">
<span class="Sandwich" aria-hidden="true"></span> <!-- <<< DAS hier ist das Sandwich Button -->
Unter­menü <!-- <<< das hier wird nicht angezeigt / versteckt -->
</button>
<ul id="exp_MainMenu" hidden>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/shop">Shop</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
wobei: [hidden] { display: none; }
Ist das so richtig????
@@einsiedler
<button aria-controls="exp_MainMenu" aria-expanded="false"> <span class="Sandwich" aria-hidden="true"></span> <!-- <<< DAS hier ist das Sandwich Button -->
Das leere span-Element, soll dazu dienen, ein Icon als Hintergrundbild anzuzeigen? Dafür brauchst du kein Element im HTML; das ginge auch mit button::before-Pseudoelement im Stylesheet.
(Allerdings könnten Screenreader ein unverständliches Zeichen vorlesen, wenn du die Icons von Fontawesome als Webfont einbindest. Besser ist es, die Icons als SVG einzubinden.)
Unter­menü <!-- <<< das hier wird nicht angezeigt / versteckt --> </button>
Da allerdings brauchst du ein Element. Wie willst du den Text sonst verstecken?
<button>
<span class="visually-hidden>Untermenü öffnen/schließen</span>
</button>
bzw. wenn du das Icon gar nicht als Hintergrundbild einbaust:
<button>
<svg aria-hidden="true"><use xlink:href="…"/></svg>
<span class="visually-hidden>Untermenü öffnen/schließen</span>
</button>
Wenn du mehrere solcher Buttons hast, sollte die Beschriftung aussagekräfiger sein und angeben, welches Untermenü da jeweils geöffnet/geschlossen wird. Ansonsten liest ein Screenreader „Untermenü öffnen/schließen, Button – Untermenü öffnen/schließen, Button – Untermenü öffnen/schließen, Button – Untermenü öffnen/schließen, Button“ vor.
wobei:
[hidden] { display: none; }
Besser: [hidden] { display: none !important }
LLAP 🖖
(hartnäckige) Nachfrage: Findest du den Einsatz von aria-controls + aria-expanded für richtig?
<button aria-controls="exp_MainMenu" aria-expanded="false"> </button>
<ul id="exp_MainMenu" aria-labelledby="label_exp_MainMenu">
@@einsiedler
(hartnäckige) Nachfrage: Findest du den Einsatz von aria-controls + aria-expanded für richtig?
Solange du dich hartnäckig weigerst, dem Button eine Beschriftung zu verpassen, brauchen wir über ARIA nicht zu reden.
Aber Beat sagte es schon: aria-controls ist hier wohl nicht notwendig. Und Heydon sagt es auch.
<button aria-controls="exp_MainMenu" aria-expanded="false"> </button> <ul id="exp_MainMenu" aria-labelledby="label_exp_MainMenu">
aria-labelledby für die Liste kommt mir auch seltsam vor. Es sollte eher das umgebende nav-Element beschriftet sein.
LLAP 🖖
Okay, dann ist wäre es so richtig?
<div class="contentspan">
<a class="anzume" href="#main-nav">zum Hauptmenü</a>
<nav id="main-nav" aria-label="main navigation">
<button aria-expanded="false">
<svg aria-hidden="true"><href="mein link"/></svg>
<span class="visually-hidden> Hauptnavigation</span>
</button>
<ul>
<li>
<a class="a-link" href="http://xxx.de/aktuell.html">Aktuelles</a>
<button aria-expanded="false">
<svg aria-hidden="true"><href="mein link"/></svg>
<span class="visually-hidden> Subnavigation Item 1</span>
</button>
<div class=nav-group>
<a class="a-sublink" href="http://xxx/ausstellungen.html">aktuelle Ausstellungen</a>
<a class="a-sublink" href="http://xxx/ausstellungen.html">Blog</a>
</div>
</li>
<li>
<a class="a-link" href="http://xxx.de/arbeiten.html">Arbeiten</a>
<button aria-expanded="false">
<svg aria-hidden="true"><href="mein link"/></svg>
<span class="visually-hidden> Subnavigation Item 1</span>
</button>
<div class=nav-group>
<a class="a-sublink" href="http://xxx/arbeit01.html">Drifters, 2012</a>
<a class="a-sublink" href="http://xxx/arbeit02.html">Waldfrieden, 2006</a>
<a class="a-sublink" href="http://xxx/arbeit03.html">Eremitage für Paris, 2006</a>
<a class="a-sublink" href="http://xxx/arbeit04.html">Der Bau, 2007</a>
</div>
</li>
</ul>
</div>
Wobei ich [visually-hidden] { display: none !important } setze? Wäre das nun richtig?
hallo
<div class="contentspan"> <a class="anzume" href="#main-nav">zum Hauptmenü</a> <nav id="main-nav" aria-label="main navigation"> <button aria-expanded="false"> <svg aria-hidden="true"><href="mein link"/></svg> <span class="visually-hidden> Hauptnavigation</span> </button>
Ich bevorzuge es, den Text lesbar darzustellen und zusätzlich via CSS ein Sprite-Image als Background einzubinden.
<button class="icon menu">Menu</button>
Gunnar und ich haben verschiedene Ansichten über den Einsatz von SVG-Icons. Er findet es sinnvoll, die SVG Datei direkt im Dokument zu referenzieren über
<button><svg><use xlink-href="icons.svg#menu"/></svg>Menu</button>
Ich jedoch finde, dass Icons selber keine semantische Aussage haben, deshalb als Gestaltung zu betrachten sind, die man nur über CSS einbinden soll. Damit kann man die referenzierte Iconset-Datei zentral im CSS auch austauschen.
In der CSS-Datei stünde dann
.icon.menu::before{ background-image("icon.svg#menu"); /* weitere Angaben */ }
Gunnars Methode ist dort geeignet, wo man das HTML via Server erzeugen lässt, weil dort die zu verwendende Datei auch zentral gesteuern werden kann.
Wenn man aber wie ich HTML-Dateien von Hand erzeugt, will man die Dateien so sparsam wie möglich halten, und Spritemaps zentral via CSS-Datei einbinden.
Nochmals bin ich dafür ein Button-Label im Klartext immer anzuzeigen. User kommen spärlich mit Webseiten in Berührung und haben nicht die Chance, die Bedeutung von Icons zu erfahren. Deshalb gilt hier: Text für alle.
Das Ausblenden von Text zu gunsten einer nur-Icon Darstellung von Buttons darf nur eine Useroption sein, und ist deshalb konfigurierbaren Anwendungen vorbehalten.
Leute, macht mich bitte nicht verrückt, mich als NOOP... Dorriiiii.....
Beachtet auch bitte meine zweite Anfrage betreffend meinem <header>
Ich komme irgendwie nicht weiter...
@@einsiedler
Okay, dann ist wäre es so richtig?
Der Syntax-Highlighler zeigt dir schon, dass nicht. (Nicht, dass der immer recht hätte …)
<svg aria-hidden="true"><href="mein link"/></svg>
Da fehlt wohl was. Du meinst <use xlink:href="…"/>? Und der Attributwert muss ein gültiger URI zu einem symbol (o.ä.) ein einer SVG sein. Sowas wie #hamburger-icon oder https://example.net/path/to/icons.svg#hamburger-icon.
<span class="visually-hidden> Hauptnavigation</span>
Da fehlt auch was.
<a class="a-link" href="http://xxx.de/aktuell.html">Aktuelles</a>
Bitte verwende für Beispieldomains die nach BCP 32 dafür vorgesehenen (z.B. example.net), keine Rotlichtseiten.
Wobei ich [visually-hidden] { display: none !important } setze? Wäre das nun richtig?
Nein, das wäre ganz und gar falsch. Wenn du etwas visuell verstecken willst, darfst du das nciht mit display: none tun, denn dann wäre es komplett weg, auch aus dem accesibility tree (wird dann also auch nicht vom Screenreader vorgelesen). Wie’s richtig geht, hatte ich dir bereits verlinkt.
LLAP 🖖
Ja gut, hab es soweit (aber noch nicht hochgeleaden!)
Ich habe mich an die Pseudo-Elementen Variante gewöhnt
`nav > [aria-expanded="false"]::before { content: '\f0c9'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } << Sandwich
nav > [aria-expanded]::before { content: '\f00d'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } << x (zurück) `
Aber wie mach ich das nun wenn ich ein Link zum svg habe
<svg aria-hidden="true"><use xlink:href="https://example.net/path/to/icons.svg#hamburger-icon"/></svg>
Pseudo-elemente funktionieren ja nicht, aber ich benötige 2 Icons (Ssandwich + X (für zurück!)
Wie macht man das nun?
`<button>
<svg aria-hidden="true" class"toggle"> </svg>
<span class="visually-hidden"> SubNavigation Item 1</span>
</button>`
wobei: a) .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute; }
Habs jetzt kapiert!
und b)
die klasse
svg.toggle+[aria-expanded]::before { content: 'path/to/times.svg'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); width: 1em; } <<<< also das X
svg.toggle+[aria-expanded="false"]::before { content: 'path/to/bars.svg'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); width: 1em; } <<<< also SANDWICH
ginge das nicht in der art?
@@einsiedler
Wie man ein verschachteltes Pull-down-Menü implementiert, hatte ich unlängst hier verlinkt.
LLAP 🖖
@@beatovich
leere button Elemnte sind immer falsch.
Und nichtleere button-Elemente mit ausschließlich Whitespace als Inhalt auch. 😜
LLAP 🖖
PS: Immer™: immer dann, wenn kein anderes accessible label vorhanden ist.
Kann mir BITTE jemand von euch schlauen Leuten sagen was mit meinem <header> nicht richtig ist, hier ein screen (ein jpg) Screen vom Fehler, die Überschriften bleiben lang und brechen nicht um, woran liegt es? Es ist nur im Edge so, nirgendwo sonst, überall werden die <h1>, <h2> & <h3> getrennt.
Der einsiedelnde & gute n8
