Wenn ich von CSS-Bildersatz spreche, meine ich, dass ein Seitenelement, das normalerweise kein Bild ist, in ein Bild umgewandelt wird. Dies ist ein sehr gängiger und beliebter Trick wegen seiner semantischen Aussagekraft und der SEO-Vorteile. Ein häufiger Anwendungsfall ist das Header-Tag.
Der ALTE Weg
<h1 class="main-logo">
CSS-Tricks
</h1>h1.main-logo {
width: 350px; height: 75px;
background: url(images/header-image.jpg);
text-indent: -9999px;
}PROBLEM:
Wenn CSS deaktiviert ist, wird dies einfach zu Text degradiert. Nichts Schlechtes, aber nur weil jemand CSS deaktiviert hat, bedeutet das nicht unbedingt, dass er auch seine Bilder deaktiviert haben möchte.
Der NEUE Weg
<h1 class="main-logo">
<a href="#">
<img src="images/header-image.jpg" alt="CSS-Tricks" />
</a>
</h1>WARUM DAS BESSER IST
Bei deaktiviertem CSS können Sie immer noch ein Bild anzeigen. Bei deaktiviertem CSS und Bildern erhalten Sie den ALT-Text des Bildes. Sie können sogar ein anderes Bild im Inneren verwenden als das, das Sie für Ihren CSS-Bildersatz verwendet haben, wenn es dafür einen guten kontextuellen Grund gibt.
VERBLEIBENDE PROBLEME
Keine dieser Techniken ist bisher perfekt. Während die letztere ein Puzzleteil löst, fehlt immer noch ein Teil. Das ist CSS AN, Bilder AUS. In diesem Szenario erhalten Sie leeren Platz anstelle von Text oder einem Bild. Nicht gut. Das andere Problem ist die Umwandlung dieser Elemente in Links. Sie können das Header-Tag in ein Anker-Element einschließen, aber ein Block-Element in ein Inline-Element einzuschließen ist schlechter Stil. Achten Sie darauf, Ihren Anker-Link auf Block-Ebene zu ändern, wenn Sie dies tun. Die andere Option ist ein JavaScript-onClick-Ereignis.
ANMERKUNG
Ich bin sicher, dass dies von Leuten schon früher bedacht und verwendet wurde, daher sind „alt“ und „neu“ hier eher subjektiv.
Vielen Dank an Volkan Volkan Görgülü für die Idee!
Ich würde denken, dass die alten und die neuen Wege vertauscht wären. Der „neue“ Weg ist, wie die Leute es früher gemacht haben, bevor wir alle ausgefallene Wege lernten, Bilder mit CSS-Überschreibungen erscheinen zu lassen.
Keiner der Wege ist wirklich schlecht, es ist wirklich eine Frage der persönlichen Vorliebe. Ich stimme zu, dass der zweite Weg aus Usability-Sicht besser ist, aber – sagen wir, Sie möchten Ihr Logo-Bild ändern und Sie haben mehrere hundert Seiten? Anstatt nur die CSS-Datei zu bearbeiten, um das Bild zu ändern, müssen Sie jede Seite durchgehen und sie ändern (es sei denn, Sie verwenden natürlich eine Art von Include – aber trotzdem).
Außerdem können Sie mit dem CSS-Weg auch einfach eine Klasse auf einer Seite ändern, um das Bild für eine spezielle Event-Seite oder eine Feiertagsseite usw. zu ersetzen.
Es ist im Grunde ein Teufelskreis, denn auf irgendeine Weise wird irgendwann mit entweder CSS, Bildern oder beidem deaktiviert, eine Methode besser sein. Ich denke, der Entwickler der Website muss bei der Erstellung wirklich bewerten, wie wahrscheinlich es ist, dass jemand, der meine Website durchsucht, CSS deaktiviert oder Bilder deaktiviert hat. Oder beides.
Vielleicht ist das eine sehr lange Frage, und sie wurde wahrscheinlich schon anderswo beantwortet, aber ich bin daran interessiert, was Sie dazu sagen –
Warum würde jemand in seinem gesunden Menschenverstand absichtlich ohne Bilder oder CSS surfen? Ich verstehe die Vorteile des Bildersatzes in Bezug auf SEO und in vielen Fällen Bildschirmleser vollkommen, aber was das allgemeine Surfen angeht, sehe ich keinen Vorteil darin, CSS oder Bilder zu entfernen, und daher hatte ich nie den Anreiz, meine Websites vollständig abwärtskompatibel zu machen.
Eine gute Seite für alternative Methoden finden Sie hier.
Eine weitere Sache, die man berücksichtigen muss, ist eine Technik, die ich für druckfreundliche Stylesheets verwende. Das ist eigentlich das schwarz/weiße Logo-Bild, das druckfreundlich ist. Es ist auf display:none gesetzt und wird durch das Farbbild im Bildschirm-CSS ersetzt.
In diesem Fall muss ich also immer noch die „alte“ Methode verwenden. Die, wenn ich die Bilder richtig mache, in Ordnung sein wird, denn mit deaktiviertem CSS wird das Druckbild angezeigt und zumindest das Logo wird einigermaßen lesbar sein, je nachdem, wie viel Gedanken ich in die Erstellung jeder Version gesteckt habe.
Meiner Meinung nach vereitelt die „neue“ Methode den gesamten Zweck des H1-Tags – im Grunde wird eine Suchmaschine ihn als leer sehen, nicht als H1 – Alt-Text.
Deshalb habe ich angefangen, mich auf die Website-Statistiken zu verlassen, um die „beste“ Methode zur Textersetzung (falls erforderlich) zu ermitteln – hauptsächlich durch die Verwendung von JavaScript zur Textersetzung, um Konflikte mit Suchmaschinen zu vermeiden – wodurch SEO maximiert wird und bedeutet, dass Personen mit deaktiviertem JS eine weniger „coole“ Erfahrung haben, aber die gleichen Inhalte erhalten.
Die obige zweite Zeile sollte lauten: „Das Bild-Tag ist eigentlich das schwarz-weiße Logo-Bild, das druckfreundlich ist.“
BAX – Nicht jeder ist jedoch an SEO interessiert. Gute Inhalte sind die beste SEO. Design sollte sekundär sein.
Das gesagt, verstehe ich, was Sie meinen. Für diejenigen, die sich dafür interessieren, ist es vielleicht nicht die beste Technik. Aber ich glaube, Suchmaschinen sind schlau genug, um den Alt-Text eines Bildes als H1-Text zu erkennen.
Diese zweite Technik ist auch vorteilhaft für die Erstellung von druckfreundlichen Seiten – man kann das Bild für die Webanzeige ausblenden und das h1 mit Hintergrundbild verwenden. Da Hintergründe standardmäßig normalerweise nicht gedruckt werden, kann man das Bild im print.css wieder einblenden, und voilà! ein schönes gedrucktes Logo-Bild…
Trav
Was ist mit Leuten, die auf Smartphones surfen? Ich benutze ein Trio und ich surfe mit dem schnellen Laden (oder wie auch immer es heißt), was im Grunde keine Bilder und wenig bis gar kein Styling bedeutet. Denken Sie einfach daran, dass nicht jeder, der im Internet unterwegs ist, einen Computer benutzt. Und nicht jeder, der auf seinem Handy surft, benutzt ein iPhone. ;-)
Ich vermute, Pingbacks funktionieren hier nicht, aber ich widerspreche respektvoll der Verschwendung eines H1-Tags zum Einschließen eines Logos.
Ich stimme im Grunde zu.
Für Dinge wie ein Logo passt diese Strategie definitiv zum Ergebnis. Logos sollten sich nicht zu oft ändern.
Wenn Sie benutzerdefinierte Header für jede Seite haben, dann sehe ich den Sinn darin, dies über CSS zu tun.
Im Grunde genommen sollten Sie bei der CSS-Codierung meiner Meinung nach einfach darauf achten, was Sie tun. Wenn das Bild Teil des Website-Inhalts ist, dann lassen Sie es so sein. Wenn es Teil des Designs ist, machen Sie es in CSS. Das Logo könnte sehr wohl Teil Ihres Inhalts sein. Tatsächlich ist es in den meisten Fällen einfach so oder sollte es sein.
Ich persönlich mache mir keine großen Sorgen darüber, wenn jemand CSS deaktiviert. Jeder, der meiner Meinung nach das tut, weiß genau, was er tut und welche Folgen das hat. Sie erwarten wahrscheinlich, dass fast alle Bilder verschwinden.
@Brad: Ich wünschte, das wäre bei den Leuten, mit denen ich arbeite, der Fall! Keine solchen „Abkürzungen“ sind erlaubt, und die letzten SEO-Experten, mit denen ich gesprochen habe, sagten, dass Google im Wesentlichen einen leeren h1-Tag sehen würde – jemand, bitte beweisen Sie mich falsch.
@Lindsey: Ich denke, wenn dies auf Hunderten von Seiten auf jeder Website verwendet würde, wäre es sicherlich „inkludiert“, was es zu einer einmaligen Änderung in beide Richtungen macht.
@Brent: Ich denke, Sie haben Recht, es gibt wahrscheinlich nur sehr wenige Leute, die an Computern sitzen und Websites mit deaktiviertem CSS durchsuchen, und wenn sie es täten, wüssten sie sehr gut, was sie tun und welche Konsequenzen das hat. Ich denke, das ist wichtiger für das Surfen auf anderen Geräten. Mobile Geräte entfernen oft das Styling von Seiten, um sie schneller anzuzeigen. Diese Technik wäre großartig für diese Situation, da das Branding Ihrer Website intakt bleiben könnte, indem das Logo weiterhin angezeigt wird.
@David: Das ist eine schöne Zusammenfassung, danke für den Link. Mir fällt auf, dass keiner von ihnen das Szenario CSS an/Bilder aus wirklich löst. Elusiv.... JavaScript könnte das wahrscheinlich tun, aber die Wahrscheinlichkeit, dass dies deaktiviert wird, ist noch höher als bei CSS oder Bildern.
@Brad: Diese Idee gefällt mir sehr gut! Das Austauschen des Logos gegen ein Schwarz-Weiß-Bild mit hohem Kontrast ist eine großartige Idee für bessere Druckergebnisse.
@BAX: Ich verstehe die potenziellen SEO-Bedenken. Ich habe nie behauptet, ein SEO-Experte zu sein, aber ich kann mir nicht vorstellen, dass die Verwendung dieser Technik für Ihre Optimierungsbemühungen allzu schädlich wäre. Wie Brad erwähnte, ist nicht jedem SEO wichtig und die beste SEO ist sowieso guter Inhalt.
@Anthony: Pingbacks funktionieren... schauen Sie einfach über die Kommentare im Abschnitt „Diskussion anderswo“. Ich widerspreche auch respektvoll der Aussage, dass diese Technik einen Header-Tag „verschwendet“. Was ist, wenn das Element, auf dem Sie dies anwenden, buchstäblich der Header eines Abschnitts ist? Ich denke, das ergibt mit einem Header-Tag um das Bild herum einen perfekten semantischen Sinn.
Bezüglich SEO: Ich würde auch sehr gerne wissen, ob der ALT-Text für SEO „gut genug“ ist. Wenn ich etwas zu sagen hätte, wäre es das.
Ich denke, das verfehlt den Sinn des Bildersatzes, aber. Ich meine, es ist völlig legitim, das Logo einfach als Bild zu verwenden. Suchmaschinen lesen den Alt-Text, der auch an Benutzer geliefert wird, die aus irgendeinem Grund keine Bilder anzeigen.
Der wirkliche Vorteil des Bildersatzes besteht darin, eine bessere Typografie für Dinge wie Header zu ermöglichen. Dies müssen Sie jedoch mit der Wartung in Einklang bringen. Wenn Sie Bilder für Header verwenden, ist ein Redesign nicht mehr nur eine Änderung von CSS. Sie müssen nun alle Ihre Header-Bilder neu erstellen oder zu einfachem (wenn auch gestyltem) Text zurückkehren. Deshalb ist etwas wie sIFR ein guter Kompromiss.
Natürlich, wenn Ihre Website klein ist, ist der Austausch aller Bild-Header vielleicht keine große Sache. Wie bei den meisten Dingen im Webdesign ist es wirklich eine Gratwanderung, und die Bestimmung, wo Sie nachgeben können, damit Sie (hoffentlich mehr als Sie nachgegeben haben) erhalten können.
Interessanter Artikel! Ich habe nie darüber nachgedacht, was passiert, wenn die Leute CSS deaktiviert haben und die meisten meiner Bilder in CSS verwendet wurden. Ich behalte die meisten davon lieber dort, es sei denn, es handelt sich um etwas wie ein Logo, dann hartcode ich es normalerweise in den HTML-Code. Ich vermute, wenn CSS und Bilder deaktiviert sind, ist der Alt-Text h1-groß, da er im h1-Tag steht? Das muss ich ausprobieren... aber ich vermute, das ist der Fall, sonst müssten Sie ihn nicht in dieses h1 einschließen!
In Bezug auf SEO habe ich gehört, dass Alt-Text für Bildschirmleser nützlicher ist, aber die Verwendung des Title-Attributs für alle img-Tags würde zu SEO beitragen. Nun, ich bin mir nicht sicher, wie wahr das ist, da ich kein SEO-Guru bin, aber ich vermute, es würde nicht schaden, es dort einzufügen. Wenn Sie beides verwenden, glaube ich, dass das Title-Attribut das Alt-Attribut überschreibt, wenn Sie mit der Maus darüber fahren, daher werden Suchmaschinen wahrscheinlich auch mehr Aufmerksamkeit auf solche Dinge legen.
Tolle Technik! Ich habe so oft eine andere Technik verwendet, die so etwas war
Titel
aber ich mochte es nie ganz, zu kompliziert und nicht so „sauber“
Der Weg, über den Sie sprechen, ist so einfach und semantisch, ehrlich gesagt denke ich, dass für diejenigen, die die Bildnutzung deaktiviert haben, es nur ein sehr kleiner Prozentsatz ist und sie es gewohnt sind, das Web mit so vielen Einschränkungen zu nutzen.
Ich bin mir mit dem Deaktivieren von Bildern nicht so vertraut, aber wenn Sie ein Bild verwenden UND CSS verwenden, um den Hintergrund einzustellen, würden sie es dann nicht sehen können, auch wenn CSS aktiviert, aber Bilder deaktiviert sind?
@Zhuoshi: Ja, das würde für das Szenario CSS an/Bilder aus funktionieren, aber dann bekommen Sie mit CSS aus, Bilder an gleichzeitig sowohl den Text als auch das Bild, was meiner Meinung nach in den meisten Fällen seltsam wäre.
Das ist aber sehr interessant. Ich könnte mir vorstellen, dass dies im Fall eines Logos mit einem separaten Design und einer separaten Typografie funktionieren würde. Das CSS-Hintergrundbild könnte sowohl das Design als auch die Typografie sein und die Markup könnte ein Bild nur des Designs und des WebtwebElementXpaths sein. Das Deaktivieren von CSS würde das Design und den WebtwebElementXpaths hinterlassen, und dann würde das Deaktivieren von Bildern nur den WebtwebElementXpaths hinterlassen.
Hallo Leute.
Ich suche schon seit einiger Zeit nach Antworten auf diese Fragen und freue mich sehr, hier einige gefunden zu haben. Einige sehr interessante Artikel.
Grüße
Sie können das BG-Bild über den Text legen, indem Sie zuerst einen leeren Span-Tag innerhalb des h1 einfügen. Auf diese Weise können Sie das Problem mit den deaktivierten Bildern vermeiden.
CSS wäre dann so etwas wie:
h1 {position:relative}
h1 span {position:absolute; top:0; left:0; width:100%; height:whatever height the bg image needs; background-image:url(/img/bg.gif) no-repeat;}
Ich bin mir nicht sicher, ob ich das CSS aus dem Gedächtnis zu 100% richtig habe, aber etwas in dieser Richtung würde den Trick machen. Sie müssten jedoch bedenken, dass die Verwendung eines transparenten BG-Bildes den Text durch das Bild scheinen lässt.
Tolle Technik, aber meine Hauptfrage zu diesem Thema ist: Was denkt Google darüber, wenn Sie Text für Benutzer unsichtbar machen und ihn durch Bilder ersetzen?
Die „Technik“ ist etwas, das vor der Entwicklung von CSS verwendet wurde. Es ist reiner HTML-Code. Es kann jedoch schwierig sein, Bilder durch etwas anderes zu ersetzen, da Sie entweder das Bild komplett ersetzen müssen (benennen Sie das alte Bild um, ändern Sie das neue Bild auf denselben ersten Namen) oder den Code ändern müssen, um auf den Namen des neuen Bildes zu verweisen.
Der Weg, den ich tun würde, wäre, ein separates CSS für den Druck zu haben. Aber diejenigen, die kein CSS aktiviert haben, entscheiden sich dafür, es nicht aktiviert zu haben, und daher wollen sie offensichtlich keine Bilder oder Stile. Daher sehe ich darin überhaupt kein Problem.
Ich neige immer noch zu „JS aktiviert“ für jeden/allen Bildersatz – speziell aus SEO-Gründen (und ich weiß, SEO ist immer noch so etwas wie eine „schwarze Kunst“), da die meisten Leute, mit denen ich arbeite, daran interessiert sind (oder sein sollten, basierend auf ihrem Geschäft).
Ich würde gerne für alle Umstände designen/entwickeln, aber ich sehe die ganze Sache mit „Design für alle Gelegenheiten“ fast schon als zu weit gehend – d.h. CSS an/Bilder aus.
Wirklich, ich glaube, ich zerlege es so:
*Bildschirmleser (kein JS, kein CSS, Alt-Tags für Bilder, semantisches Markup)
*CSS/Bilder (kein JS, wir fügen Styling hinzu)
*Plus JS (wir bekommen einige coole Erfahrungen)
*RIA (JS, CSS, Flash – das „volle“ Erlebnis)
Keine doppelten/versteckten Inhalte.
Ich glaube, einige Leute sind anderer Meinung http://murisfurder.com/?p=51
Bevor ich mit Chris gesprochen habe, dachte ich tatsächlich darüber nach, andere Benutzer über die möglichen Verwendungszwecke des
h1-Tags als Hauptüberschrift einer Seite zu informieren.Eigentlich stimme ich denen zu, die sagen, dass das Logo ein Teil des Inhalts ist. Das Logo sollte also mit dem
img-Tag codiert werden.Und wenn ich das Logo ändern muss, kann ich einfach die ältere Logo-Datei überschreiben.
Vielen Dank für diesen Artikel.
Wenn jemand alle Kommentare liest, sieht man zwei Wege, dieses Problem zu lösen. Lindsey (erster Kommentar) sagte, das Problem sei, Zeit mit Hunderten von Seiten bei der Änderung des Logos zu vermeiden. Ich denke, hier hilft diese Methode (neuer Weg) nicht. In dieser Situation bevorzuge ich den alten Weg.
Wenn die Website klein ist, bevorzuge ich den neuen Weg, denn wie oft wird sich ein Firmenlogo ändern?
Ralph
Bildschirmleser und mobile Geräte können auch Probleme mit CSS und Bildern haben. Es gibt auch eine Minderheit, die mit Text-only-Browsern surft.
Warum nicht einfach das Logo durch das neue ersetzen, indem Sie denselben Namen verwenden?
Sicherlich gibt es kein Bedürfnis mehr für das alte Logo.
Ich springe etwas spät ein, aber ich habe den Artikel in einer Jahresend-Zusammenfassung von CSS-Globe gefunden…
@Brent (warum Leute ohne CSS und/oder Bilder surfen würden)
Wie einige Leute sagten, sind Handybrowser ein Problem. Es gibt aber auch andere Gründe. Ich habe kürzlich einige alte Computer für den Einsatz in meinem Klassenzimmer umfunktioniert.
Sie sind ziemlich alt, und eine der besten Lösungen, die ich gefunden habe, um sie effizient zum Laufen zu bringen, ist Damn Small Linux mit Dillo als Webbrowser. Dillo unterstützt kein CSS (oder zumindest nicht viel), also würden die Schüler in diesem Fall mit deaktiviertem CSS surfen, ob sie wollen oder nicht.