Formatieren mit css

[Pit]

Hallo,

gibt es eine einfache Möglichkeit, bei einer mehrzeiligen Meldung den Text genau untereinander (quasi wie in einer Tabelle) zu plazieren? Derzeit helfe ich mir mit entsprechend vielen   aus, aber dafür sind die ja eigentlich nicht gedacht.

Pit

[JürgenB]

Hallo Pit,

wäre das https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Textausrichtung/Spalten was für dich?

Gruß
Jürgen

[Pit]

Hi Jürgen,

ich dachte, vielleicht kann man da mit Listen etwas machen?

Pit

[JürgenB]

Hallo Pit,

ich dachte, vielleicht kann man da mit Listen etwas machen?

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Listenformatierung/list-style-image

Gruß
Jürgen

[Pit]

Hallo Jürgen,

ich dachte, vielleicht kann man da mit Listen etwas machen?

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Listenformatierung/list-style-image

Jaja...da geht es aber wirklich um Grafiken 😉

Ansonsten eher so, oder?

Pit

[Gunnar Bittersmann]

@@JürgenB

ich dachte, vielleicht kann man da mit Listen etwas machen?

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Listenformatierung/list-style-image

Nein! So eine Hinweisbox ist keine Liste.

LLAP 🖖

[Gunnar Bittersmann]

@@Pit

gibt es eine einfache Möglichkeit, bei einer mehrzeiligen Meldung den Text genau untereinander (quasi wie in einer Tabelle) zu plazieren?

Mehrere:

1. Du gibst den Boxen links padding und positionierst die Icons absolut in den Freiraum. Dazu müssen die Boxen selbst position: relativ sein.

   Das hat den Vorteil, dass die Texte in den verschiedenen Boxen auch bei unterschiedlich breiten Icons links bündig sind. Und das funktioniert auch, wenn du nicht nur einfachen Text als Elementinhalt hast, sondern weitere HTML-Elemente.

2. Du verwendest CSS Grid für die Boxen: display: grid; grid-template-columns: 1.5em 1fr

   Dann musst du für die Icons nichts weiter angeben – außer die verticale Positionierung korrigieren, da die Icons jetzt etwas höher sitzen. Problematisch wird’s, wenn du nicht nur einfachen Text als Elementinhalt hast, sondern weitere HTML-Elemente.

Derzeit helfe ich mir mit entsprechend vielen   aus, aber dafür sind die ja eigentlich nicht gedacht.

Buh.

Außerdem missbrauchst du <i>-Elemente für Icons, aber dafür sind die nicht gedacht.

LLAP 🖖

[Pit]

Hallo Gunnar,

1. Du gibst den Boxen links padding und positionierst die Icons absolut in den Freiraum. Dazu müssen die Boxen selbst position: relativ sein.

Cool. Genau nach so einer Idee hatte ich gesucht. Vielen Dank.

Das hat den Vorteil, dass die Texte in den verschiedenen Boxen auch bei unterschiedlich breiten Icons links bündig sind. Und das funktioniert auch, wenn du nicht nur einfachen Text als Elementinhalt hast, sondern weitere HTML-Elemente.

Ist zwar jetzt nicht geplant, aber wer weiß, ob ich das mal irgendwann mal reproduziere und es dann bräuchte...

Derzeit helfe ich mir mit entsprechend vielen   aus, aber dafür sind die ja eigentlich nicht gedacht.

Buh.

... dachte ichs mir doch 😉

Außerdem missbrauchst du <i>-Elemente für Icons, aber dafür sind die nicht gedacht.

Aber befinde ich mich damit nicht in guter Gesellschaft?

Spaß beiseite...wie würde ich das besser machen?

Pit

[Gunnar Bittersmann]

@@Pit

Außerdem missbrauchst du <i>-Elemente für Icons, aber dafür sind die nicht gedacht.

Aber befinde ich mich damit nicht in guter Gesellschaft?

Aua.

„Natürlich steht i nicht für Icon, aber ein leeres span wäre genauso gut/schlecht wie ein leeres i.“

Das stimmt wohl nicht so ganz. Das Element ist nicht so ganz leer, sondern wird mit CSS-generiertem Inhalt gefüllt.

„Fazit: Icon-fonts sind ein interessanter Ansatz einheitliche Icons einzusetzen“

Nein! Das Fazit muss lauten: Verwende keine Icon-Fonts!

Spaß beiseite...wie würde ich das besser machen?

Wie dort auch beiläufig erwähnt wird: SVG-Icons. Ich hab dazu mal einen Zweiteiler geschrieben: Teil 1 • Teil 2

Teil 3: „Wie verwendet man Font Awesome als SVG-Icons“ ist noch ein Knoten in meinem Taschentuch. Andeutungsweise in diesem Posting

LLAP 🖖

[marctrix]

Hej Gunnar,

@@Pit

Teil 3: „Wie verwendet man Font Awesome als SVG-Icons“ ist noch ein Knoten in meinem Taschentuch. Andeutungsweise in diesem Posting

Ja, die Doku von Fontawesome gibt zu SVG-Sprites kaum was her. Außerdem baue ich mir immer mein eigenes Sprite - mit nur den Icons, die ich für ein Projekt auch wirklich benötige…

Marc

[Rolf B]

Hallo Gunnar,

die <i> als Icons ist eine Font-Awesome Seuche :(

Meine Idee wäre ja Flexbox gewesen, aber wenn man schon mit position:absolute arbeitet, dann sollte man doch einfach von FA das CSS inkludieren, statt die FA-Klassen zu verwenden. Es sei denn, es gibt irgendeine schlaue neue CSS Formulierung, mit der ich in einer Regel angeben kann, dass er bitte alles hinzunehmen soll das für den Selektor ".foo" gilt?

Also so:

<div class="mySign-msg info-msg">     <!-- Zwei Klassen, um weniger CSS zu schreiben!
  This is an info message.<br>
  Line 2
</div>

.mySign-msg {
  margin: 10px 0; position: relative; 
  padding: 10px 10px 10px 2em;
  border-radius: 3px 3px 3px 3px;
}
.mySign-msg.info-msg {
  color: #059; background-color: #BEF;
}
.mySign-msg::before {
   font: normal normal normal 14px/1 FontAwesome;
   font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
  position:absolute; left: 0.5em; top:11px;
}
.mySign-msg.info-msg::before {
   content:"\f05a"; 
}

Die übrigen Message-Typen entsprechend angepasst. Damit wäre das Icon komplett aus dem Markup verschwunden. Es ist ja eigentlich Deko. Oder? Die Frage, was ein Screenreader aus einem FA Icon macht, kann ich eh nicht beantworten, aber was sinnvolles wird's vermutlich nicht sein.

Rolf

[Pit]

Hallo Rolf,

die <i> als Icons ist eine Font-Awesome Seuche :(

... und irgendwie finde kein Tutorial, wo die nicht verwendet werden 😟

Meine Idee wäre ja Flexbox gewesen, aber wenn man schon mit position:absolute arbeitet, dann sollte man doch einfach von FA das CSS inkludieren, statt die FA-Klassen zu verwenden. Es sei denn, es gibt irgendeine schlaue neue CSS Formulierung, mit der ich in einer Regel angeben kann, dass er bitte alles hinzunehmen soll das für den Selektor ".foo" gilt?

Also so:

<div class="mySign-msg info-msg">     <!-- Zwei Klassen, um weniger CSS zu schreiben!
  This is an info message.<br>
  Line 2
</div>

.mySign-msg {
  margin: 10px 0; position: relative; 
  padding: 10px 10px 10px 2em;
  border-radius: 3px 3px 3px 3px;
}
.mySign-msg.info-msg {
  color: #059; background-color: #BEF;
}
.mySign-msg::before {
   font: normal normal normal 14px/1 FontAwesome;
   font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
  position:absolute; left: 0.5em; top:11px;
}
.mySign-msg.info-msg::before {
   content:"\f05a"; 
}

Schade, das versteh ich nicht. Die Pseudoklasse "before" schon, aber den Icon-Content "\f05a" nicht.

Ich habe in der Zwischenzeit mal selber an der Lösung gemäß Gunnars Vorschlag gearbeitet. Dabei habe ich blöderweise das Ausgangs-Codepen überschrieben...ich dacht, dass das so hochzählt, wie bei jsfiddle.

Pit

[Gunnar Bittersmann]

@@Pit

Dabei habe ich blöderweise das Ausgangs-Codepen überschrieben

Ich habe einen Fork. (Den werde ich aber vermutlich nicht für immer und ewig aufheben.)

LLAP 🖖

[Pit]

Hi Gunnar,

dank Dir, ich habe den jetzt wieder eingesetzt. Dann müßte nur noch einer der Admins diesen Fork in mein Lösungspost einsetzen.

Ich habe einen Fork. (Den werde ich aber vermutlich nicht für immer und ewig aufheben.)

Darf gelöscht werden 😉

Pit

[Gunnar Bittersmann]

@@Pit

Dann müßte nur noch einer der Admins diesen Fork in mein Lösungspost einsetzen.

Hab ich gemacht. Dazu muss man nicht Admin sein.

LLAP 🖖

[Pit]

Hallo Gunnar,

Hab ich gemacht.

Danke 😀

Dazu muss man nicht Admin sein.

Aber sicher die entsprechenden Rechte haben, oder? (Ich weiß jedenfalls nicht, wie ich das hätte machen können... ich kann nur ein paar Minuten lang editieren)

Pit

[Gunnar Bittersmann]

@@Pit

Aber sicher die entsprechenden Rechte haben, oder?

Es gibt die Silbermedaille „Antworten editieren“.

ich kann nur ein paar Minuten lang editieren

Ob es noch ein anderes Recht gibt, was das Zeitfenster für eigene Antworten verlängert, weiß ich jetzt nicht.

LLAP 🖖

[Pit]

Hallo Gunnar,

Es gibt die Silbermedaille „Antworten editieren“.

Cool, kannte ich nicht.

ich kann nur ein paar Minuten lang editieren

Ob es noch ein anderes Recht gibt, was das Zeitfenster für eigene Antworten verlängert, weiß ich jetzt nicht.

Naja, für nicht registrierte User finde ich das meistens durchaus ausreichend.

Pit

[Auge]

Hallo

Es gibt die Silbermedaille „Antworten editieren“.

Cool, kannte ich nicht.

Eine Medaille – egal welche – gibt's aber auch nur für registrierte Benutzer.

Tschö, Auge

[Pit]

Die übrigen Message-Typen entsprechend angepasst. Damit wäre das Icon komplett aus dem Markup verschwunden. Es ist ja eigentlich Deko. Oder? Die Frage, was ein Screenreader aus einem FA Icon macht, kann ich eh nicht beantworten, aber was sinnvolles wird's vermutlich nicht sein.

Hi Rolf,

das läuft aber nicht sauber...oder habe ich etwas falsch übertragen?

Pit

[Rolf B]

Hallo Pit,

argh!

Die Fehler teilen wir uns ;-)

Du musst das FontAwesome css immer noch @import-ieren, weil sonst der Font unbekannt ist.

Und ich muss mir an die Backe binden, den Kommentar nicht geschlossen zu haben, deswegen ist hinter dem <!-- alles weg. Entweder schließe den Kommentar, mit -->, oder nimm das <!-- und alles rechts davon weg.

\f05a ist das Zeichen, das FontAwesome für das (?) Symbol vorsieht. Das findest Du heraus, wenn Du in den Entwicklerwerkzeugen anschaust, welche Eigenschaften die FA-Styles dem Icon geben. Das Häkchen ist \f00c, die Warnung ist \f071 und der Error ist \f057. Generell ist \nnnn eine Escape-Sequenz für „das Unicodezeichen am Codepoint nnnn“. Unicode reserviert den Codepointbereich \e000 bis \f8ff als "Private Use", d.h. Font Awesome kann da beliebige Zeichen hinlegen, ohne mit den offiziellen Unicode-Zeichen Konflikt zu kommen.

Rolf

[Pit]

Hi Rolf,

Die Fehler teilen wir uns ;-)

Na gut 😉

Du musst das FontAwesome css immer noch @import-ieren, weil sonst der Font unbekannt ist.

Und ich muss mir an die Backe binden, den Kommentar nicht geschlossen zu haben, deswegen ist hinter dem <!-- alles weg. Entweder schließe den Kommentar, mit -->, oder nimm das <!-- und alles rechts davon weg.

... und schon läuft es sauber durch :)

\f05a ist das Zeichen, das FontAwesome für das (?) Symbol vorsieht. Das findest Du heraus, wenn Du in den Entwicklerwerkzeugen anschaust, welche Eigenschaften die FA-Styles dem Icon geben. Das Häkchen ist \f00c, die Warnung ist \f071 und der Error ist \f057. Generell ist \nnnn eine Escape-Sequenz für „das Unicodezeichen am Codepoint nnnn“. Unicode reserviert den Codepointbereich \e000 bis \f8ff als "Private Use", d.h. Font Awesome kann da beliebige Zeichen hinlegen, ohne mit den offiziellen Unicode-Zeichen Konflikt zu kommen.

Danke für die Erklärung, ich schau mir das mal genauer an.

Pit

[marctrix]

Hej Rolf,

\f05a ist das Zeichen, das FontAwesome für das (?) Symbol vorsieht. Das findest Du heraus, wenn Du in den Entwicklerwerkzeugen anschaust, welche Eigenschaften die FA-Styles dem Icon geben. Das Häkchen ist \f00c, die Warnung ist \f071 und der Error ist \f057. Generell ist \nnnn eine Escape-Sequenz für „das Unicodezeichen am Codepoint nnnn“. Unicode reserviert den Codepointbereich \e000 bis \f8ff als "Private Use", d.h. Font Awesome kann da beliebige Zeichen hinlegen, ohne mit den offiziellen Unicode-Zeichen Konflikt zu kommen.

Bleibt die Frage, ob man immer das gesamte CSS und den kompletten Font einbinden sollte, wenn man nur eine Handvoll Icons benötigt. Und Icon-Fonts sollte nun wirklich seit einer ganzen Weile niemand mehr nutzen. SVG wird von allen wichtigen Browsern unterstützt und für SVG-Sprites gibt es Polyfills für den IE…

• Zugängliche SVGs
• kommentierte Linksammlung zu SVGs

Marc

[Christian Kruse]

Hallo marctrix,

die Verwendung von SVGs bringt durchaus auch Probleme mit sich. Im Rahmen der Arbeiten für das Forum habe ich auch überlegt, wie ich am besten den Icon-Font durch SVGs ersetze. Ein stumpfes einbinden via Inline-SVG an jeder Stelle, wo ich das Icon brauchte, hat zu zwei Problemen geführt: erstens war die Performance echt beschissen; die Browser hatten ernsthaft Probleme mit so vielen SVGs. Und zweitens stieg natürlich die Filesize an.

Eine Einbindung via <img> war möglich, hat mich aber so nette Features wie Einfärbung bei Hover gekostet, bzw. ich hätte sie durch weitere SVG-Varianten in den richtigen Farben erzeugen müssen.

Eine Einbindung via object finde ich sinnlos…

Zur Zeit binde ich sie am Anfang des Dokuments inline ein und blende sie dann via display:none aus und referenziere dann nur noch mit <use xlink:href="..."/> darauf. Das funktioniert ganz gut für die Performance und bietet mir die Möglichkeit des Stylings via CSS sowie der Manipulation via JS. Ist allerdings auch etwas unschön…

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Zur Zeit binde ich sie am Anfang des Dokuments inline ein und blende sie dann via display:none aus und referenziere dann nur noch mit <use xlink:href="..."/> darauf. Das funktioniert ganz gut für die Performance und bietet mir die Möglichkeit des Stylings via CSS sowie der Manipulation via JS. Ist allerdings auch etwas unschön…

Was spräche denn dagegen, das Icon-SVG nicht inline einzubinden, sondern mit <use xlink:href="<Pfad zum Icon-SVG>#<Icon-ID>"/> darauf zu referenzieren?

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Was spräche denn dagegen, das Icon-SVG nicht inline einzubinden, sondern mit <use xlink:href="<Pfad zum Icon-SVG>#<Icon-ID>"/> darauf zu referenzieren?

als ich damals damit herumexperimentiert hatte, war das noch kaputt und funktionierte nicht so richtig browser-übergreifend. Ist das inzwischen ohne Problem einsetzbar?

Tatsache, sieht so aus. Geil 😍

LG,
CK

[marctrix]

Hej Christian,

Was spräche denn dagegen, das Icon-SVG nicht inline einzubinden, sondern mit <use xlink:href="<Pfad zum Icon-SVG>#<Icon-ID>"/> darauf zu referenzieren?

als ich damals damit herumexperimentiert hatte, war das noch kaputt und funktionierte nicht so richtig browser-übergreifend. Ist das inzwischen ohne Problem einsetzbar?

Tatsache, sieht so aus. Geil 😍

Für den IE bräuchtest du ein polyfill. Interessiert? Oder nicht nötig?

Marc

[Christian Kruse]

Hallo marctrix,

Für den IE bräuchtest du ein polyfill. Interessiert? Oder nicht nötig?

Doch, das wäre durchaus interessant.

LG,
CK

[JürgenB]

Hallo Christian,

Für den IE bräuchtest du ein polyfill. Interessiert? Oder nicht nötig?

Doch, das wäre durchaus interessant.

dann aber nur eins, das nur der IE zu sehen bekommt.

Gruß
Jürgen

[Christian Kruse]

Hallo JürgenB,

Für den IE bräuchtest du ein polyfill. Interessiert? Oder nicht nötig?

Doch, das wäre durchaus interessant.

dann aber nur eins, das nur der IE zu sehen bekommt.

? Polyfills werden doch nur aktiv, wenn der Browser es nativ nicht unterstützt. Und sie bilden die Funktionalität nach. Das würde also prinzipiell nur der IE „zu sehen“ bekommen?

LG,
CK

[JürgenB]

Hallo Christian,

Für den IE bräuchtest du ein polyfill. Interessiert? Oder nicht nötig?

Doch, das wäre durchaus interessant.

dann aber nur eins, das nur der IE zu sehen bekommt.

? Polyfills werden doch nur aktiv, wenn der Browser es nativ nicht unterstützt. Und sie bilden die Funktionalität nach. Das würde also prinzipiell nur der IE „zu sehen“ bekommen?

bei den meisten Polyfills wird das Script von allen Browsern geladen und geparst, Nur die Ausführung erfolgt bei Bedarf. Ich habe schon Polyfills mit über 1000 Zeilen JS gesehen, die allen Browsern vorgeworfen wurden, statt nur den Test laufen zu lassen, und den großen Brocken erts bei Bedarf nachzuladen.

Gruß
Jürgen

[Christian Kruse]

Hallo JürgenB,

bei den meisten Polyfills wird das Script von allen Browsern geladen und geparst, Nur die Ausführung erfolgt bei Bedarf. Ich habe schon Polyfills mit über 1000 Zeilen JS gesehen, die allen Browsern vorgeworfen wurden, statt nur den Test laufen zu lassen, und den großen Brocken erts bei Bedarf nachzuladen.

Ach so, das meinst du. Ja, das hängt bei mir stark von der Größe des Polyfills und der Wahrscheinlichkeit der Verwendung ab.

LG,
CK

[marctrix]

Hej Christian,

Für den IE bräuchtest du ein polyfill. Interessiert? Oder nicht nötig?

Doch, das wäre durchaus interessant.

Ok, Dienstag bin ich im Büro, ich weiß gerade nicht, welches ich da verwende, weil ich privat den ie nicht mehr unterstütze…

Marc

[Gunnar Bittersmann]

@@marctrix

Für den IE bräuchtest du ein polyfill. Interessiert? Oder nicht nötig?

Doch, das wäre durchaus interessant.

Ok, Dienstag bin ich im Büro, ich weiß gerade nicht, welches ich da verwende, weil ich privat den ie nicht mehr unterstütze…

Im meinem bereits verlinkten Posting hatte ich drei Polyfills genannt: einen einfachen von mir, der noch um eine Schleife erweitert werden müsste, wenn mehrere SVG-Dateien im Spiel sind; einen, der nicht funktioniert, und einen brauchbaren.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Im meinem bereits verlinkten Posting hatte ich drei Polyfills genannt: einen einfachen von mir, der noch um eine Schleife erweitert werden müsste, wenn mehrere SVG-Dateien im Spiel sind; einen, der nicht funktioniert, und einen brauchbaren.

Hättest du mal @Christian Kruse erwähnt 😉

Vielleicht reicht auch der eine brauchbare?!?

Marc

[Christian Kruse]

Hallo marctrix,

Im meinem bereits verlinkten Posting hatte ich drei Polyfills genannt: einen einfachen von mir, der noch um eine Schleife erweitert werden müsste, wenn mehrere SVG-Dateien im Spiel sind; einen, der nicht funktioniert, und einen brauchbaren.

Hättest du mal @Christian Kruse erwähnt 😉

Vielleicht reicht auch der eine brauchbare?!?

Habs auch so mitbekommen, habe den Teilthread hier abonniert. Habs mir andr noch nicht angeschaut, ich habe mich heute mit code splitting in Webpack beschäftigt. 1,2mb JS war mir einfach zuviel 😉 habs jetzt runter geschafft auf etwa 50kb unkomprimiert, mit gzip oder Brotli ist es nochmal weniger. Der Rest wird dort geladen, wo er gebraucht wird.

Ich spreche natürlich von V5.

LG,
CK

[marctrix]

Hej Christian,

Ich spreche natürlich von V5.

Klingt alles prima. Ich verstehe aber nur die Hälfte. 😂

Marc

[marctrix]

Hej marctrix,

Hej Christian,

Für den IE bräuchtest du ein polyfill. Interessiert? Oder nicht nötig?

Doch, das wäre durchaus interessant.

Ok, Dienstag bin ich im Büro, ich weiß gerade nicht, welches ich da verwende, weil ich privat den ie nicht mehr unterstütze…

Oh, Büro war gar nicht nötig, sehe gerade der Tipp war aus dem Forum von @Rolf B: svgxuse

Macht für mich, was es soll…

Marc

[marctrix]

Hej Christian,

meine praktische Vorgehensweise ist so: Icons, die auf jeder Seite auftauchen und Teil des Layouts sind, packe ich in ein Sprite.

Eine textliche Entsprechung ist auf jeden Fall nötig. In den persönlichen Einstellungen darf man die sich gerne ausschalten, wenn man meint, alle Icons zu verstehen.

Das Problem mit den Texten: wohin damit? Mitunter ist es schwierig dafür Platz zu finden, zumal der Platz bei hundert Icons pro Seite ja theoretisch hundert Mal bereit gestellt werden müsste. Nehmen wir mal das Mülleimer-Symbol an den bereits vergebenen Tags von Beiträgen hier im Forum.

Das würde ich so lösen:

vergebene Tags („x“ anklicken zum Entfernen)

x CSS

Das Mülleiner-Symbol finde ich hierfür zu komplex und irreführend (es gibt ja keinen Papierkorb, aus dem man den Tag wieder herausholen kann, er wird schlicht gelöscht - kann aber erneut vergeben werden).

Das „anklicken zum Entfernen“ würde ich in ein span setzen mit einer ID. Jedem „x“ kannst du dann ein aria-describedby="ID" mitgeben.

Auf Icons im Sprite kann man IMHO nicht so viel Einfluss nehmen, wie auf inline-Styles. So faszinierend es ist, SVGs per CSS zu animieren oder einzelne Pfade unterschiedlich zu gestalten, habe ich das in der Praxis bei Icons noch kein einziges Mal benötigt. Es reichte bisher immer, das Icon komplett einzufärben. Wenn ich das jetzt recht im Kopf habe, sind auch gerade die Fontawesome-SVGs auch gar nicht in mehrere per CSS ansprechbare Pfade eingeteilt. Die lassen sich eh nur im Ganzen einfärben.

Meistens reicht ein fill: currentColor wodurch die Icons die Schriftfarbe des Elternelementes annehmen. Man kann aber auch ebenso jede beliebige andere Farbe angeben. Zusätzlich gebe ich noch die Größe der Icons an. Mehr habe ich meines Wissens noch nie gebraucht und FA gibt es wie gesagt IMHO auch gar nicht her.

Übrigens: Du hast im Quellcode so was stehen:

<li class="no-data" style="display: none;">keine Tags vergeben</li>

Das würde ich versuchen anders umzusetzen. Bei abgeschaltetem CSS wird das sichtbar.

Das ist doch eine Fehlermeldung, die nach dem Absenden vom Server kommen könnte. Damit nicht immer ein Senden an den Server nötig ist, würde ich vorschlagen: den Text per JS zu schreiben und serverseitig dann noch mal prüfen (machst du mit Sicherheit ohnehin).

Dann käme bei denjenigen, die JS abgeschaltet haben die Fehlermeldung halt erst nach dem Absenden als Fehler vom Server zurück. Alle anderen (die überwiegende Mehrheit) könnten die Meldung schon vor dem Absenden sehen. Da das die Regel sein dürfte, sollte dadurch kaum Last auf dem Server entstehen und No-Scripter nehmen so was meist bewusst in Kauf. Wer so ws einsetzt, weiß ziemlich oft, was er da tut.

Marc

[Gunnar Bittersmann]

@@marctrix

<li class="no-data" style="display: none;">keine Tags vergeben</li>

Das würde ich versuchen anders umzusetzen. Bei abgeschaltetem CSS wird das sichtbar.

Deshalb: schon im Markup die Nichtsichtbarkeit festschreiben – mit hidden-Attribut.

(BTW: Das hidden-Attribut gibt es in HTML, nicht aber in SVG. <svg hidden=""> geht nicht.)

LLAP 🖖

[marctrix]

Hej Gunnar,

<li class="no-data" style="display: none;">keine Tags vergeben</li>

Das würde ich versuchen anders umzusetzen. Bei abgeschaltetem CSS wird das sichtbar.

Deshalb: schon im Markup die Nichtsichtbarkeit festschreiben – mit hidden-Attribut.

(BTW: Das hidden-Attribut gibt es in HTML, nicht aber in SVG. <svg hidden=""> geht nicht.)

Guter Hinweis. Aber warum alle Fehlermeldungen immer im HTML mitschicken? Oder nur diese und alle anderen nicht? Inkonsistenz oder extrem aufgeblähtes HTML würde ich beides versuchen zu vermeiden.

Ich würde nur die ins HTML schreiben, die man auch benötigt. Also per JS oder serverseitig…

Marc

[Christian Kruse]

Hallo marctrix,

vieles, von dem, was du hier ansprichst, bezieht sich ganz explizit auf die V4 des Forums. Mir wäre es lieber, wenn du dir da diesbezüglich die V5 anschaust 😉 denn da hit sich vieles grundlegend geändert.

Das Mülleiner-Symbol finde ich hierfür zu komplex und irreführend (es gibt ja keinen Papierkorb, aus dem man den Tag wieder herausholen kann, er wird schlicht gelöscht - kann aber erneut vergeben werden).

Guter Punkt.

Das „anklicken zum Entfernen“ würde ich in ein span setzen mit einer ID. Jedem „x“ kannst du dann ein aria-describedby="ID" mitgeben.

In V5 habe ich das mit einem aria-label gelöst, aber so gefällt es mir in der Tat besser, ja.

Das würde ich versuchen anders umzusetzen. Bei abgeschaltetem CSS wird das sichtbar.

Wie gesagt. V5 angucken bitte, nicht V4 😜

LG,
CK

[Matthias Apsel]

Hallo Christian Kruse,

Wie gesagt. V5 angucken bitte, nicht V4 😜

Ich pack mal einen Link dazu: https://cftest.wwwtech.de/.

Bis demnächst
Matthias

[marctrix]

Hej Christian,

vieles, von dem, was du hier ansprichst, bezieht sich ganz explizit auf die V4 des Forums. Mir wäre es lieber, wenn du dir da diesbezüglich die V5 anschaust 😉 denn da hit sich vieles grundlegend geändert.

Das macht auf jeden Fall Sinn! — Schreibe es mir hinter die Ohren!

Marc

[Christian Kruse]

Hallo marctrix,

ich habe das in V5 mal so umgesetzt (falls ich nichts übersehen habe).

LG,
CK

[marctrix]

Hej Rolf,

Die übrigen Message-Typen entsprechend angepasst. Damit wäre das Icon komplett aus dem Markup verschwunden. Es ist ja eigentlich Deko.

Keine Ahnung. Falls ja, sollte es aus dem Markup. In vielen Fällen haben aber gerade Icons einen Informationsgehalt.

Die Frage, was ein Screenreader aus einem FA Icon macht, kann ich eh nicht beantworten, aber was sinnvolles wird's vermutlich nicht sein.

Wenn es nicht sinnvoll auszeichnet, dann nicht. Wenn das Markup Sinn ergibt, liest der SR auch was sinnvolles vor.

Die Doku von Fontawesome zu Accessibility.

Die Klasse sr-only zeigt aber auch gleich ein Problem dieser Lösung: nun wissen Blinde zwar, was das Icon bedeutet, sehende wissen es aber nicht.

Denen muss der Text aber aus zugänglich gemacht werden (einfach durch weglassen der hier überflüssigen Klasse).

Marc