Image-Tag mit Hintergrundbild
WuWei
- css
moin,
Um die Handhabung von Sprites* möglichst einfach zu gestalten (es arbeiten unterschiedlich stark html-versierte Leute mit / an dem Code), habe ich ein image Tag (weil: breite und höhe muss definiert sein und es soll sich wie ein normales Bild im Textfluss verhalten) mit style=background-image... versehen.
<img src="spacer.gif" class="card a s" title="Ace Spade" />
Statt 52 Spielkarten zu laden, wird lediglich der spacer und die Grafik mit /allen/ Kartengrafiken geladen und wunschgemäß positioniert.
Die Frage ist: gibt es einen eleganteren Weg, dasselbe zu erreichen? Wie gesagt, es muss leicht wartbar sein. Oder: gibt es sogar bedenken, weil image Tag mit Hintergrundbild vllt problematisch sein könnte.
Danke und Gruß
*das Ziel ist, die Anzahl der Requests gering zu halten
Die Frage ist: gibt es einen eleganteren Weg, dasselbe zu erreichen? Wie gesagt, es muss leicht wartbar sein. Oder: gibt es sogar bedenken, weil image Tag mit Hintergrundbild vllt problematisch sein könnte.
Warum nicht gleich ein anderes Element[1] und die Farbe der Karte mit einem entsprechenden Unicode-Zeichen darstellen (U+2660 bis U+2663 bzw. U+2667)?
<dfn class="card a s">♠ Ass</dfn>
[1] das dfn-Element ist nur als Idee gedacht, spontan fällt mir kein besseres ein.
Warum nicht (…) die Farbe der Karte mit einem entsprechenden Unicode-Zeichen darstellen (U+2660 bis U+2663 bzw. U+2667)?
Das ist auf jeden Fall ein guter Hinweis, danke :)
Mit anderen Elementen probier ich auch gerade noch herum … – Unglücklich bin ich mit dem img-tag aber nicht: funktioniert und ist afaik auch kein Regelverstoß. Wenn nur der spacer nicht nötig wäre …
Mit anderen Elementen probier ich auch gerade noch herum … – Unglücklich bin ich mit dem img-tag aber nicht: funktioniert und ist afaik auch kein Regelverstoß. Wenn nur der spacer nicht nötig wäre …
Ja, aber wenn du da nur einen Spacer reinpackst, ist ein img-Element unsinnig. Ansonsten, wenn du tatsächlich einzelne Ressourcen einbindest, ist es sicher das beste Elemente für deinen Zweck.
Im Übrigen solltest du dem dfn-Element (oder welches du auch wählst) ein title-Attribut verpassen.
<dfn class="card a s" title="Pik Ass">♠ Ass</dfn>
Oder auch so - wobei da schon etwas zu viel sein könnte :)
<dfn class="card a s" title="Pik Ass"><span title="Pik"♠</span> Ass</dfn>