Formatieren mit css

[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