CSS3 transform rotate vs. Bilder verwenden

Question

Ich arbeite an einer Website, die diagonal ausgerichtete Bilder verwendet. Die Bilder sind ziemlich einfach und haben etwas Text im Inneren, so dass ich den Effekt mit entweder Bilder oder die CSS3 erreichen kann transform: rotate y border-radius Eigenschaften, natürlich mit allen proprietären Erweiterungen.

Ich frage mich jedoch, ob es signifikante Vorteile für die Verwendung des einen gegenüber dem anderen gibt. Ich denke, vielleicht die CSS-only Alternative würde schneller laden, aber ein Nachteil wäre die Verwendung von mehr Code für jedes Bild. Obwohl mit Bildern würde ich immer noch eine Menge von Positionierung für jedes Element zu tun haben. Außerdem würde das CSS im ersten Fall nicht durch browserspezifische Erweiterungen validiert werden. Wie wichtig ist das, wenn ich trotzdem sicherstellen will, dass die Website in den meisten Browsern korrekt angezeigt wird?

Gibt es einen allgemeinen Ansatz für die Verwendung einer dieser beiden Optionen? Was würden Sie empfehlen?

Answer 1

Die Verwendung von CSS3 im Gegensatz zu Bildern lässt sich am besten dadurch beantworten, dass Sie den Internet Explorer unterstützen müssen (oder andere ältere oder CSS3-unbewusste Browser): Wenn ein großer Teil Ihrer Nutzer mit dem IE surft, sollten Sie Bilder verwenden.

Wenn Sie nur an den neueren, standardkonformen Browsern interessiert sind (möglicherweise einschließlich IE9, aber damit habe ich noch keine Erfahrung), dann ist CSS 3 wahrscheinlich die bessere Option, da es eine größere CSS-Datei mit sich bringt, aber es ermöglicht Ihnen, Ihr Layout in Zukunft leichter zu ändern, ohne dass Sie einen neuen Satz von Bildern für das neue Design erstellen/erstellen müssen.

Man könnte natürlich beide Ansätze kombinieren: CSS 3 für die kompatiblen Browser verwenden, aber ein IE-spezifisches Stylesheet einfügen, mit bedingte Kommentare die Bilder als Hintergrundbilder für den Aufbau des Designs zu liefern. Das ist natürlich eine Menge Arbeit.

Answer 2

Ich würde dafür wirklich ein Bild empfehlen. CSS3 ist cool, aber Browser, die es nicht unterstützen, könnten Ihr Layout zerstören. Auch (vielleicht noch wichtiger), Text wirklich braucht richtige Anti-Aliasing lesbar zu sein, wenn gedreht oder skaliert, und Sie können eine feinere Kontrolle über das mit einem Bild zu bekommen.

Answer 3

Ich denke, Sie sollten zwei Dinge beachten:

1. Bilder sind ein Killer für die Nutzer von Mobilgeräten. Wenn Sie also eine Zielgruppe mit mobilen Geräten ansprechen oder ein großes mobiles Publikum erwarten, sollten Sie die Verwendung vieler Bilder überdenken (und Ihre Nutzer eine Menge Bandbreite zahlen lassen).

2. Der Text in Ihren Bildern (falls Sie Bilder verwenden) ist für Suchmaschinen nicht auffindbar und für Menschen mit Behinderungen nicht zugänglich, es sei denn, Sie sind gut im Ausfüllen Ihrer alt tags. ;-)