Grafik einblenden

[marctrix]

Hej Meowsalot,

ich hier eine Möglichkeit nur über CSS ein Symbol vor dem Link einzublenden?

EDIT: OK, ich habe es:

.files [href*='.jpg'] {
  padding-left: 1.5em;
  background: url('bild.png') no-repeat;
  background-size: contain;
}

Besser so:

.files [href$='.jpg']::before {
  content: 'JPEG-Grafik herunterladen';
  background: url('bild.png') no-repeat;
  […]
}

Man beachte das Dollar-Zeichen anstelle des Sternchens. Du erwartest ja dass die Dateiendung zuletzt kommt. Dein Selektor erlaubt auch so etwas wie bild.jpg.exe…

Aber den Ansatz, solche Fälle serverseitig zu unterscheiden und die Informationen ins HTML zu schreiben, finde ich besser. Die hier gezeigte Lösung ist sehr grenzwertig. Ist das jetzt noch Darstellung (wofür CSS gedacht ist) oder doch schon Inhalt (wofür HTML gedacht ist)?

Ich tendiere zu letzterem, finde aber, man sollte hier nicht dogmatisch rangehen, weil immerhin Screenreader auch CSS-generierte Inhalte vorlesen.

Bedenklicher finde ich, dass diese Lösung bei abgeschaltetem CSS weder für Sehende, noch für Hörer etwas ausgibt. Da ist die HTML-Lösung deutlich robuster (also ein Bild mit Alternativ-Text direkt ins HTML. Am besten ein SVG)…

Marc